/* ==========================================================================
   DAR · Sistema visual para Divi
   --------------------------------------------------------------------------
   Todas las clases empiezan con "dar-" para no chocar con Divi ni con plugins.
   Se usan escribiéndolas en el campo:  Módulo → Avanzado → ID y clases CSS →
   "Clase CSS" (CSS Class).
   Referencia completa de qué clase va en cada sección: INSTRUCTIVO-DIVI.md
   ========================================================================== */

:root{
  --dar-green:#0a251d;
  --dar-green-2:#123d30;
  --dar-gold:#c79a47;
  --dar-gold-light:#e0bc72;
  --dar-black:#0b0c0b;
  --dar-ivory:#f5f0e6;
  --dar-white:#fff;
  --dar-muted:#6b716d;
  --dar-line:rgba(199,154,71,.3);
  --dar-serif:"Cormorant Garamond",Georgia,serif;
  --dar-sans:Inter,Arial,Helvetica,sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base tipográfica
   -------------------------------------------------------------------------- */
body.dar-site{
  font-family:var(--dar-sans);
  color:var(--dar-black);
  line-height:1.6;
  /* Evita que iOS agrande el texto al rotar el teléfono. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
/* Ninguna imagen puede empujar el ancho de la página en un celular.
   Va dentro de :where() a propósito: así esta red de seguridad tiene
   especificidad CERO y no le gana a las alturas que definen los componentes
   de abajo (.dar-logo-plaque, .dar-image-card, .dar-model-image, .dar-hero-seal). */
:where(body.dar-site img){max-width:100%;height:auto;}
/* Las imágenes del tema van envueltas en <picture> (versión WebP + respaldo).
   El envoltorio no debe alterar el layout que ya estaba definido para el <img>. */
:where(body.dar-site picture){display:contents;}
body.dar-site h1,
body.dar-site h2{font-family:var(--dar-serif);line-height:1.05;}

/* Los titulares serif son muy largos: en pantallas chicas se permite cortar
   palabras antes que provocar scroll horizontal. */
body.dar-site h1,body.dar-site h2,body.dar-site h3,
.dar-h1,.dar-h2,.dar-h3,.dar-statement{overflow-wrap:break-word;}

/* Al hacer clic en el menú, el ancla no queda tapada por el header fijo de Divi. */
body.dar-site [id]{scroll-margin-top:90px;}

/* Titulares de marca. Se aplican al módulo de texto/encabezado.
   El mínimo del clamp está pensado para 320-360px de ancho: si fuera más alto,
   el titular ocuparía media pantalla del celular. */
.dar-h1,.dar-h1 h1,.dar-h1 h2{
  font-family:var(--dar-serif)!important;
  font-size:clamp(38px,10vw,112px)!important;
  line-height:1.05!important;
  letter-spacing:-.035em!important;
  margin:0!important;
}
.dar-h1 em{color:var(--dar-gold-light);font-style:normal;}

.dar-h2,.dar-h2 h1,.dar-h2 h2,.dar-h2 h3{
  font-family:var(--dar-serif)!important;
  font-size:clamp(29px,6.4vw,64px)!important;
  line-height:1.08!important;
  letter-spacing:-.03em!important;
  margin:0!important;
}

.dar-h3,.dar-h3 h3,.dar-h3 h4{
  font-family:var(--dar-sans)!important;
  font-size:clamp(19px,4.4vw,22px)!important;
  line-height:1.25!important;
  margin:0 0 10px!important;
}

/* Volanta / eyebrow */
.dar-eyebrow,.dar-eyebrow p{
  color:var(--dar-gold-light)!important;
  font-family:var(--dar-sans)!important;
  font-size:12px!important;
  letter-spacing:.22em!important;
  text-transform:uppercase;
  font-weight:800!important;
  line-height:1.4!important;
  margin:0 0 14px!important;
}
.dar-eyebrow-dark,.dar-eyebrow-dark p{
  color:#956d27!important;
  font-family:var(--dar-sans)!important;
  font-size:12px!important;
  letter-spacing:.22em!important;
  text-transform:uppercase;
  font-weight:800!important;
  line-height:1.4!important;
  margin:0 0 14px!important;
}

/* Párrafo grande (bajada de sección) */
.dar-lead,.dar-lead p{
  font-size:clamp(18px,2vw,23px)!important;
  line-height:1.5!important;
  color:#dbe4df;
}
.dar-lead-dark,.dar-lead-dark p{
  font-size:clamp(18px,2vw,23px)!important;
  line-height:1.5!important;
  color:#565d58!important;
}
/* Bloque de copy grande de la sección Fundación */
.dar-large-copy p{
  font-size:clamp(19px,3.4vw,30px)!important;
  line-height:1.35!important;
  color:#303631;
  margin-bottom:25px;
}

/* Frase manifiesto sobre fondo negro */
.dar-statement,.dar-statement p{
  font-family:var(--dar-serif)!important;
  font-size:clamp(27px,7vw,68px)!important;
  line-height:1.08!important;
  color:#fff!important;
  max-width:950px;
  margin:0!important;
}

/* Enlace de texto dorado */
.dar-text-link a,a.dar-text-link{
  color:var(--dar-gold-light)!important;
  font-weight:800;
}

/* --------------------------------------------------------------------------
   2. Fondos de sección (aplicar al módulo Sección de Divi)
   -------------------------------------------------------------------------- */
.dar-section-light{background:#fff!important;}
.dar-section-ivory{background:var(--dar-ivory)!important;}
.dar-section-black{background:var(--dar-black)!important;color:#fff;}
.dar-section-green{background:var(--dar-green)!important;color:#fff;}
.dar-section-black h1,.dar-section-black h2,.dar-section-black h3,.dar-section-black p,
.dar-section-green h1,.dar-section-green h2,.dar-section-green h3,.dar-section-green p{color:#fff;}

/* Hero: degradé verde con halo dorado */
.dar-hero{
  background:
    radial-gradient(circle at 80% 20%,rgba(199,154,71,.2),transparent 30%),
    linear-gradient(135deg,#04110d,#0a251d 55%,#071811)!important;
  color:#fff;
  overflow:hidden;
}
.dar-hero h1,.dar-hero h2,.dar-hero h3{color:#fff;}
.dar-hero p{color:#dbe4df;}

/* --------------------------------------------------------------------------
   3. Botones (módulo Botón de Divi)
   -------------------------------------------------------------------------- */
/* Par de botones lado a lado (módulo Texto con dos enlaces) */
.dar-hero-actions p,
.dar-hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:28px 0 0;}
.dar-actions-center,.dar-actions-center p{justify-content:center;}

.dar-btn-primary.et_pb_button,
a.dar-btn-primary{
  background:var(--dar-gold)!important;
  color:#10100e!important;
  border:1px solid var(--dar-gold)!important;
  border-radius:999px!important;
  padding:15px 26px!important;
  font-family:var(--dar-sans)!important;
  font-weight:800!important;
  font-size:15px!important;
  transition:.25s!important;
}
.dar-btn-primary.et_pb_button:hover,
a.dar-btn-primary:hover{
  background:var(--dar-gold-light)!important;
  border-color:var(--dar-gold-light)!important;
  transform:translateY(-2px);
}
.dar-btn-ghost.et_pb_button,
a.dar-btn-ghost{
  background:transparent!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:999px!important;
  padding:15px 26px!important;
  font-family:var(--dar-sans)!important;
  font-weight:800!important;
  font-size:15px!important;
}
.dar-btn-ghost.et_pb_button:hover,
a.dar-btn-ghost:hover{background:rgba(255,255,255,.1)!important;}
a.dar-btn-primary,a.dar-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  text-decoration:none;transition:.25s;
}
/* Divi agrega una flecha en hover; la desactivamos para respetar el diseño */
.dar-btn-primary.et_pb_button:after,
.dar-btn-ghost.et_pb_button:after{display:none!important;}

/* --------------------------------------------------------------------------
   4. Tarjetas (módulo Texto o Blurb dentro de una columna)
   -------------------------------------------------------------------------- */
.dar-card{
  padding:28px;
  border:1px solid #e4ded3;
  border-radius:24px;
  background:#fff;
  height:100%;
}
.dar-card .dar-card-number,
.dar-card-number{color:var(--dar-gold);font-weight:800;display:block;margin-bottom:16px;}
.dar-card h3{margin:0 0 10px;font-size:22px;}
.dar-card p{color:var(--dar-muted);margin:0;}

.dar-network-card{
  padding:28px;
  background:#fff;
  border:1px solid #e3dccf;
  border-radius:24px;
  height:100%;
}
.dar-network-card h3{color:var(--dar-green);margin:0 0 10px;font-size:22px;}
.dar-network-card p{color:var(--dar-muted);margin:0;}

/* Paso del modelo de impacto (sobre fondo verde) */
.dar-timeline-item{
  padding:25px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:rgba(255,255,255,.04);
  height:100%;
}
.dar-timeline-item .dar-step,
.dar-step{color:var(--dar-gold-light);font-weight:800;font-size:25px;display:block;margin-bottom:16px;}
.dar-timeline-item h3{margin:0 0 10px;color:#fff;font-size:22px;}
.dar-timeline-item p{color:#c4d0ca;margin:0;}

/* Caja "Ópticas fundadoras" */
.dar-founder-box{
  padding:60px;
  border-radius:34px;
  background:linear-gradient(135deg,#0b2a20,#154331);
  color:#fff;
}
.dar-founder-box h2,.dar-founder-box h3{color:#fff;}
.dar-founder-box p{color:#d0ddd6;max-width:750px;}

/* Lista con viñeta dorada (módulo Texto, lista <ul>) */
.dar-feature-list ul{list-style:none;padding:0;margin:25px 0;}
.dar-feature-list li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.dar-feature-list li::before{content:"✦";color:var(--dar-gold);margin-right:12px;}

/* Métricas del hero */
.dar-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:50px;}
.dar-metric{border-top:1px solid rgba(255,255,255,.18);padding-top:12px;}
.dar-metric strong{display:block;color:var(--dar-gold-light);font-size:27px;line-height:1.2;}
.dar-metric span{font-size:12px;color:#b8c6bf;display:block;}

/* Imagen grande con esquinas redondeadas (módulo Imagen) */
/* La altura escala con el ancho de la pantalla: en un celular una imagen de
   650px de alto ocupa toda la pantalla y obliga a scrollear de más. */
.dar-image-card img{
  border-radius:34px;
  width:100%;
  height:clamp(300px,58vw,650px);
  object-fit:cover;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.dar-image-soft img{
  border-radius:20px;
  box-shadow:0 30px 70px -30px rgba(10,37,29,.45);
}
.dar-logo-plaque img{height:64px;width:auto;}

/* Foto con epígrafe centrada (módulo Imagen + módulo Texto debajo) */
.dar-caption,.dar-caption p{
  font-size:14px!important;
  color:var(--dar-muted)!important;
  text-align:center;
  max-width:440px;
  margin:14px auto 0!important;
}
.dar-caption-light,.dar-caption-light p{color:#f2ede1!important;font-size:12.5px!important;}

/* Página Estuches */
.dar-photo-placeholder{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:220px;border-radius:18px;background:#17211d;color:#7c887f;
  font-size:12.5px;padding:18px;line-height:1.5;
}
.dar-photo-placeholder p{margin:0;color:#7c887f;}
.dar-quote,.dar-quote p{
  font-family:var(--dar-serif)!important;font-style:italic;
  font-size:clamp(20px,2.4vw,26px)!important;color:#39463d!important;
  margin-top:18px!important;max-width:26ch;line-height:1.3!important;
}
.dar-story-copy p{font-size:17px;color:#3f473f;margin-bottom:20px;max-width:60ch;}
.dar-story-copy strong{color:var(--dar-black);}
.dar-partners h3{
  font-family:var(--dar-sans);font-size:14px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--dar-muted);margin-bottom:8px;
}
.dar-partners p{color:var(--dar-muted);font-size:14px;max-width:520px;margin:0 auto;}

/* --------------------------------------------------------------------------
   5. SHORTCODE [dar_donar]
   -------------------------------------------------------------------------- */
.dar-donate-box{
  display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;
  background:#fff;border:1px solid #e6ded2;border-radius:28px;padding:50px;
  font-family:var(--dar-sans);
}
.dar-donate-copy h2{
  font-family:var(--dar-serif);font-size:clamp(26px,5.6vw,52px);line-height:1.08;
  letter-spacing:-.028em;margin:0;
}
.dar-donate-copy p{color:#6b6459;margin-top:16px;max-width:52ch;}
.dar-donate-actions{display:flex;flex-direction:column;gap:16px;}
.dar-btn-donate{
  display:inline-block;text-align:center;background:var(--dar-gold);color:#10100e;
  font-weight:700;padding:16px 22px;border-radius:999px;text-decoration:none;
}
.dar-btn-donate:hover{background:var(--dar-gold-light);color:#10100e;}
.dar-donate-transfer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--dar-ivory);border:1px dashed #cfc4ac;border-radius:14px;padding:14px 18px;
}
.dar-donate-transfer-label{display:block;width:100%;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a8171;}
/* El CBU/alias es la cadena más larga del sitio: en 320px debe cortarse
   dentro de la caja en vez de desbordar. */
.dar-donate-transfer strong{
  font-size:16px;color:var(--dar-black);
  min-width:0;flex:1 1 auto;overflow-wrap:anywhere;
}
.dar-copy-btn{
  background:var(--dar-black);color:#fff;border:none;border-radius:999px;padding:8px 14px;
  font-size:12.5px;cursor:pointer;white-space:nowrap;font-family:var(--dar-sans);
  min-height:44px;
}
.dar-copy-btn:hover{background:#000;}
.dar-donate-note{font-size:12px;color:#a39a89;margin:0;}

/* --------------------------------------------------------------------------
   6. SHORTCODE [dar_formulario]
   -------------------------------------------------------------------------- */
.dar-form{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;font-family:var(--dar-sans);}
.dar-form label{font-weight:700;font-size:13px;display:block;}
/* font-size 16px es obligatorio: con menos, Safari en iPhone hace zoom solo
   al tocar el campo y descoloca toda la página. */
.dar-form input,.dar-form textarea{
  display:block;width:100%;margin-top:7px;padding:14px;border:1px solid #ddd4c7;
  border-radius:12px;font-family:var(--dar-sans);font-size:16px;line-height:1.4;
  background:#fbfaf7;color:var(--dar-black);
}
.dar-form input:focus,.dar-form textarea:focus{outline:2px solid var(--dar-gold);outline-offset:1px;}
.dar-form .dar-form-full,.dar-form button,.dar-form .dar-form-note{grid-column:1/-1;}
.dar-form button{
  min-height:52px;padding:0 24px;border-radius:999px;border:none;background:var(--dar-gold);
  color:#10100e;font-weight:800;cursor:pointer;font-family:var(--dar-sans);font-size:15px;
}
.dar-form button:hover{background:var(--dar-gold-light);}
.dar-form-note{font-size:12px;color:var(--dar-muted);margin:0;line-height:1.7;}
.dar-mail-link{color:var(--dar-green);font-weight:700;}

/* Línea de contacto del shortcode [dar_contacto] */
.dar-contact{font-family:var(--dar-sans);font-size:14px;margin:0;}
.dar-contact-link{color:var(--dar-gold-light);font-weight:700;}
.dar-section-light .dar-contact-link,
.dar-section-ivory .dar-contact-link{color:var(--dar-green);}
/* honeypot anti-spam */
.dar-hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden;}

/* --------------------------------------------------------------------------
   7. SHORTCODE [dar_coleccion]
   -------------------------------------------------------------------------- */
/* El shortcode define --dar-cols; así las media queries de abajo pueden
   cambiar las columnas (un style inline no se podría sobrescribir). */
.dar-collection-grid{display:grid;grid-template-columns:repeat(var(--dar-cols,4),1fr);gap:18px;font-family:var(--dar-sans);}
.dar-model-card{border:1px solid #e6ded2;border-radius:24px;overflow:hidden;background:#fff;}
.dar-model-image{min-height:170px;background:#fff;display:block;position:relative;}
.dar-model-image img{width:100%;height:170px;object-fit:contain;background:#fff;display:block;}
.dar-model-info{padding:20px;}
.dar-model-info h3{font-size:19px;margin:0;font-family:var(--dar-sans);}
.dar-model-info .dar-model-ref{color:var(--dar-gold);font-weight:800;font-size:13px;}
.dar-model-info p{color:var(--dar-muted);font-size:13.5px;margin:8px 0 0;}
.dar-ficha-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--dar-green);}
.dar-ficha-link:hover{text-decoration:underline;color:var(--dar-green);}

/* --------------------------------------------------------------------------
   8. SHORTCODE [dar_mapa]
   -------------------------------------------------------------------------- */
.dar-map-wrap{margin-top:10px;font-family:var(--dar-sans);}
.dar-map-search{margin-bottom:18px;}
/* Mismo motivo que el formulario: 16px evita el zoom automático de iOS. */
.dar-map-search input{
  width:100%;padding:14px 18px;border-radius:999px;border:1px solid #e6ded2;
  background:#fff;font-family:var(--dar-sans);font-size:16px;color:var(--dar-black);
}
.dar-map-search input:focus{outline:2px solid var(--dar-gold);outline-offset:1px;}
.dar-map-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start;}
.dar-map{position:relative;height:460px;width:100%;border-radius:20px;overflow:hidden;border:1px solid #e6ded2;background:#eee;}
.dar-map-list{max-height:460px;overflow-y:auto;border:1px solid #e6ded2;border-radius:20px;background:#fff;padding:10px;}
.dar-map-list-loading{padding:16px;color:var(--dar-muted);font-size:14px;}
.dar-map-list-item{
  display:flex;flex-direction:column;justify-content:center;gap:2px;width:100%;min-height:56px;
  text-align:left;background:none;border:none;
  border-bottom:1px solid #f0ead9;padding:14px 12px;cursor:pointer;font-family:var(--dar-sans);border-radius:10px;
}
.dar-map-list-item:last-child{border-bottom:none;}
.dar-map-list-item:hover{background:var(--dar-ivory);}
.dar-map-list-item strong{font-size:14.5px;color:var(--dar-black);}
.dar-map-list-item span{font-size:12.5px;color:var(--dar-muted);}
.dar-map-empty-note{margin-top:18px;color:var(--dar-muted);font-size:14px;text-align:center;}
.dar-map-empty-note a{color:var(--dar-green);font-weight:700;}

/* Aviso "dos dedos" que dar-map.js inserta solo en pantallas táctiles. */
.dar-map-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  z-index:500;pointer-events:none;
  background:rgba(11,12,11,.82);color:#fff;font-family:var(--dar-sans);
  font-size:12px;font-weight:600;letter-spacing:.01em;text-align:center;
  max-width:calc(100% - 24px);
  padding:7px 13px;border-radius:999px;border:1px solid var(--dar-gold);
}

/* Pin y popup de Leaflet con estilo DAR */
.dar-pin span{
  display:block;width:20px;height:20px;border-radius:50% 50% 50% 0;
  background:var(--dar-gold);border:2px solid var(--dar-black);transform:rotate(-45deg);
}
.leaflet-popup-content-wrapper{border-radius:14px;}
.dar-popup{font-family:var(--dar-sans);font-size:13.5px;line-height:1.5;}
.dar-popup strong{display:block;font-size:14.5px;margin-bottom:2px;color:var(--dar-black);}
.dar-popup .dar-popup-loc{display:block;color:var(--dar-muted);margin-bottom:6px;}
.dar-popup .dar-popup-links{display:block;font-weight:700;color:var(--dar-green);}
.dar-popup .dar-popup-links a{color:var(--dar-green);}

.dar-malvinas-label{pointer-events:none;}
.dar-malvinas-label span{
  display:inline-block;white-space:nowrap;transform:translate(-50%,-50%);
  background:var(--dar-black);color:#fff;font-family:var(--dar-sans);font-weight:700;
  font-size:11px;letter-spacing:.02em;padding:4px 9px;border-radius:6px;
  border:1px solid var(--dar-gold);box-shadow:0 4px 10px rgba(0,0,0,.35);
}

/* --------------------------------------------------------------------------
   9. SHORTCODE [dar_hero_visual] — foto + órbita + sello
   -------------------------------------------------------------------------- */
.dar-hero-visual{position:relative;min-height:600px;display:grid;place-items:center;}
.dar-hero-orbit{
  position:absolute;width:560px;height:560px;border:1px solid rgba(199,154,71,.22);border-radius:50%;
  box-shadow:0 0 0 80px rgba(199,154,71,.04),0 0 0 160px rgba(199,154,71,.02);
}
.dar-hero-photo{
  width:min(460px,100%);aspect-ratio:3/4;object-fit:cover;border-radius:28px;position:relative;z-index:2;
  box-shadow:0 40px 90px rgba(0,0,0,.35);
}
.dar-hero-seal{
  position:absolute;z-index:3;right:0;bottom:-52px;width:120px;height:120px;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.45));
}

/* --------------------------------------------------------------------------
   10. Menú superior de Divi con identidad DAR (opcional)
   -------------------------------------------------------------------------- */
body.dar-site #main-header{
  background:rgba(8,31,24,.82)!important;
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:none!important;
}
body.dar-site #logo{max-height:38px;}
body.dar-site #top-menu a{color:#e8efe9!important;font-family:var(--dar-sans);font-size:14px;font-weight:500;}
body.dar-site #top-menu a:hover{color:var(--dar-gold-light)!important;opacity:1;}
/* Poné la clase "dar-nav-cta" en el ítem del menú (Apariencia → Menús → Clases CSS) */
body.dar-site #top-menu li.dar-nav-cta > a{
  padding:11px 17px!important;border:1px solid var(--dar-gold);border-radius:999px;
}
body.dar-site #top-menu li.dar-nav-donate > a{color:var(--dar-gold)!important;font-weight:700;}

/* --- Menú móvil de Divi ---------------------------------------------------
   Sin esto, al pasar a celular Divi vuelve a su menú blanco por defecto y se
   pierde la identidad DAR justo en el momento de mayor tráfico. --------- */
body.dar-site .mobile_menu_bar:before{color:var(--dar-gold)!important;}
/* Área táctil del botón hamburguesa (por defecto es un ícono chico). */
body.dar-site .mobile_menu_bar{padding:10px 0;}
body.dar-site .et_mobile_menu{
  background:#082119!important;
  border-top:3px solid var(--dar-gold)!important;
  padding:8px 0;
  /* Con 9 ítems el menú puede pasar el alto de la pantalla: se hace scrolleable. */
  max-height:calc(100vh - 100px);
  max-height:calc(100dvh - 100px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
body.dar-site .et_mobile_menu li a{
  color:#e8efe9!important;
  font-family:var(--dar-sans);
  font-size:16px;
  font-weight:500;
  padding:15px 20px!important;   /* ≈ 50px de alto: cómodo para el pulgar */
  border-bottom:1px solid rgba(255,255,255,.07)!important;
}
body.dar-site .et_mobile_menu li:last-child > a{border-bottom:none!important;}
body.dar-site .et_mobile_menu li a:active{background:rgba(199,154,71,.12);}
/* Los dos ítems destacados también se distinguen en el menú móvil. */
body.dar-site .et_mobile_menu li.dar-nav-donate > a{color:var(--dar-gold)!important;font-weight:700;}
body.dar-site .et_mobile_menu li.dar-nav-cta > a{color:var(--dar-gold-light)!important;font-weight:800;}
body.dar-site .et_mobile_menu .menu-item-has-children > a{background:transparent!important;font-weight:700;}
/* El logo no debe empujar el alto del header en pantallas chicas. */
@media(max-width:767px){
  body.dar-site #logo{max-height:32px;}
}

/* --------------------------------------------------------------------------
   11. Animación de aparición (poné "dar-reveal" en cualquier módulo)
   -------------------------------------------------------------------------- */
.dar-reveal{opacity:0;transform:translateY(24px);transition:.7s ease;}
.dar-reveal.dar-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .dar-reveal{opacity:1;transform:none;transition:none;}
}
/* Red móvil lenta o JS bloqueado: el contenido igual se ve. */
@media (scripting:none){
  .dar-reveal{opacity:1;transform:none;transition:none;}
}

/* --------------------------------------------------------------------------
   12. Responsive
   --------------------------------------------------------------------------
   Los cortes coinciden con los de Divi para que lo que se configure en el
   Constructor (Escritorio / Tablet / Teléfono) y lo que hace este CSS pasen
   en el mismo punto y no se peleen entre sí:

     980px  → tablet
     767px  → teléfono
     479px  → teléfono chico (iPhone SE, Android de gama baja)
   -------------------------------------------------------------------------- */

/* ---------- TABLET (≤ 980px) ---------- */
@media(max-width:980px){
  .dar-collection-grid{grid-template-columns:repeat(2,1fr);}
  .dar-donate-box{grid-template-columns:1fr;gap:32px;padding:34px;}
  .dar-map-layout{grid-template-columns:1fr;}
  .dar-map{height:380px;}
  .dar-map-list{max-height:300px;}
  .dar-form{grid-template-columns:1fr;}
  .dar-form .dar-form-full,.dar-form button,.dar-form .dar-form-note{grid-column:1;}
  .dar-hero-visual{min-height:460px;}
  .dar-hero-orbit{width:min(420px,86vw);height:min(420px,86vw);}
  .dar-founder-box{padding:40px;}
}

/* ---------- TELÉFONO (≤ 767px) ---------- */
@media(max-width:767px){

  /* Aire vertical: los paddings pensados para escritorio hacen que en el
     celular haya que scrollear mucho para llegar al contenido siguiente. */
  .dar-card,.dar-network-card{padding:22px;}
  .dar-timeline-item{padding:20px;}
  .dar-founder-box{padding:28px;border-radius:26px;}
  .dar-donate-box{padding:24px;border-radius:22px;gap:26px;}
  .dar-image-card img{border-radius:24px;}

  /* Hero: la foto y la órbita se achican para no comerse toda la pantalla,
     y el sello deja de colgar por debajo del bloque. */
  .dar-hero-visual{min-height:0;padding:8px 0 60px;}
  .dar-hero-photo{width:min(320px,78vw);border-radius:22px;}
  .dar-hero-orbit{width:min(330px,88vw);height:min(330px,88vw);box-shadow:0 0 0 40px rgba(199,154,71,.04);}
  .dar-hero-seal{width:82px;height:82px;right:4vw;bottom:-26px;}

  /* Botones a lo ancho: son el objetivo táctil principal de la página. */
  .dar-hero-actions,.dar-hero-actions p{flex-direction:column;align-items:stretch;gap:12px;}
  .dar-hero-actions .et_pb_button,
  .dar-hero-actions a.dar-btn-primary,
  .dar-hero-actions a.dar-btn-ghost{width:100%;}
  a.dar-btn-primary,a.dar-btn-ghost,
  .dar-btn-primary.et_pb_button,.dar-btn-ghost.et_pb_button{min-height:52px;}

  /* Métricas del hero: se mantienen las 3 columnas (apiladas ocupaban
     media pantalla), solo se compacta la tipografía. */
  .dar-metrics{gap:10px;margin-top:34px;}
  .dar-metric strong{font-size:22px;}
  .dar-metric span{font-size:11px;line-height:1.35;}

  /* Donación */
  .dar-btn-donate{padding:16px 18px;min-height:52px;}
  .dar-donate-transfer{padding:14px;}
  .dar-copy-btn{width:100%;padding:12px 14px;font-size:13.5px;}

  /* Formulario y mapa */
  .dar-form button{width:100%;}
  .dar-map{height:320px;}
  .dar-map-list{max-height:none;}
  .dar-map-search{margin-bottom:14px;}

  /* Colección: la foto del armazón crece porque hay más ancho por tarjeta. */
  .dar-collection-grid{gap:14px;}
  .dar-model-card{border-radius:18px;}
  .dar-model-image,.dar-model-image img{height:150px;min-height:150px;}
  .dar-model-info{padding:16px;}

  /* Epígrafes y placeholders */
  .dar-photo-placeholder{min-height:180px;}
  .dar-quote,.dar-quote p{max-width:none;}
  .dar-story-copy p{font-size:16px;}
}

/* ---------- TELÉFONO CHICO (≤ 479px) ---------- */
@media(max-width:479px){
  .dar-card,.dar-network-card,.dar-timeline-item{padding:20px;}
  .dar-founder-box{padding:24px;}
  .dar-donate-box{padding:20px;}
  .dar-hero-seal{width:70px;height:70px;bottom:-20px;}
  /* La volanta con letter-spacing .22em desborda en 320px. */
  .dar-eyebrow,.dar-eyebrow p,
  .dar-eyebrow-dark,.dar-eyebrow-dark p{font-size:11px!important;letter-spacing:.16em!important;}
}

/* Una sola columna recién en pantallas muy angostas: con 8 modelos, dos
   columnas ahorran la mitad del scroll y las fotos se siguen leyendo bien. */
@media(max-width:359px){
  .dar-collection-grid{grid-template-columns:1fr;}
  .dar-model-image,.dar-model-image img{height:190px;min-height:190px;}
  /* El mapa se achica solo en pantallas muy angostas: por debajo de 300px
     de alto cuesta ubicarse entre las ópticas. */
  .dar-map{height:280px;}
}

/* --------------------------------------------------------------------------
   13. Pantallas táctiles
   --------------------------------------------------------------------------
   En un celular no existe el "hover": el navegador lo simula al tocar y el
   efecto queda pegado hasta que se toca otra cosa. Se desactivan los
   desplazamientos y se garantizan áreas táctiles cómodas.
   -------------------------------------------------------------------------- */
@media (hover:none){
  .dar-btn-primary.et_pb_button:hover,
  a.dar-btn-primary:hover{transform:none;}
  .dar-map-list-item:hover{background:none;}
  .dar-map-list-item:active{background:var(--dar-ivory);}
}

/* Quita el rectángulo gris que dibuja Android al tocar un enlace. */
body.dar-site a,
body.dar-site button{-webkit-tap-highlight-color:rgba(199,154,71,.18);}

/* Mínimo recomendado de 44px para cualquier cosa que se toque. */
.dar-ficha-link,.dar-text-link a,a.dar-text-link{
  display:inline-block;min-height:44px;line-height:44px;
}
.dar-model-info .dar-ficha-link{line-height:1.4;min-height:0;padding:12px 0 4px;}

/* Con descripciones de distinto largo, "Ver ficha técnica" quedaba a distinta
   altura en cada tarjeta. Se empuja al pie para que todas alineen. */
.dar-model-card{display:flex;flex-direction:column;}
.dar-model-info{display:flex;flex-direction:column;flex:1;}
.dar-model-info .dar-ficha-link{margin-top:auto;}

/* ==========================================================================
   14. Correcciones sobre el Constructor de Divi en móvil
   --------------------------------------------------------------------------
   El Constructor guarda los anchos, paddings y márgenes que se configuran en
   la pestaña "Escritorio" con !important y sin equivalente para teléfono. Eso
   hacía que en el celular quedaran, por ejemplo, secciones con 110px de aire
   arriba y abajo o imágenes de 480px fijos dentro de una columna de 300px.

   Este bloque los reajusta. Es a propósito que use !important: es la única
   forma de ganarle al CSS que Divi genera después de esta hoja de estilos.

   Si más adelante se configuran valores de Teléfono desde el Constructor,
   estas reglas se pueden ir borrando de a una.
   ========================================================================== */

@media(max-width:980px){

  /* Las filas de Divi vienen al 80%: en un celular eso son ~40px de aire
     muerto de cada lado. Se aprovecha el ancho real de la pantalla. */
  body.dar-site .et_pb_row{width:90%!important;}

  /* Módulos Imagen con ancho fijo de escritorio (340px y 480px) dentro de
     columnas de 300px: eran los que provocaban el scroll horizontal. */
  body.dar-site .et_pb_image{
    width:auto!important;max-width:100%!important;
    margin-left:0!important;margin-right:0!important;
  }
  body.dar-site .et_pb_image .et_pb_image_wrap{display:block;width:100%;}
  body.dar-site .et_pb_image:not(.dar-logo-plaque) .et_pb_image_wrap img{width:100%;}
  /* El logo conserva su altura fija y se alinea a la izquierda como el texto. */
  body.dar-site .dar-logo-plaque .et_pb_image_wrap img{width:auto;}
}

@media(max-width:767px){

  body.dar-site .et_pb_row{width:92%!important;}

  /* --- Ritmo vertical ---------------------------------------------------
     110px arriba + 110px abajo por sección son casi media pantalla de vacío
     en cada corte. Se unifica todo a una escala pensada para el celular. */
  body.dar-site .et_pb_section.et_pb_section{
    padding-top:58px!important;padding-bottom:58px!important;
  }
  body.dar-site .dar-hero.et_pb_section{
    padding-top:92px!important;padding-bottom:52px!important;
  }
  /* Los márgenes entre filas los define la separación, no valores sueltos. */
  body.dar-site .et_pb_row.et_pb_row{
    margin-top:0!important;margin-bottom:0!important;
    padding-top:0!important;padding-bottom:0!important;
  }
  body.dar-site .et_pb_row + .et_pb_row{margin-top:30px!important;}
  /* Las columnas apiladas se separan entre sí, sin hueco sobrante al final. */
  body.dar-site .et_pb_column{margin-bottom:0!important;}
  body.dar-site .et_pb_column + .et_pb_column{margin-top:28px!important;}
  /* Módulos de texto con márgenes de 28-55px guardados desde el Constructor. */
  body.dar-site .et_pb_text.et_pb_text{
    margin-top:0!important;margin-bottom:16px!important;
  }
  /* La caja de fundadoras es una fila con 60px de padding: en 360px de ancho
     dejaba solo 180px útiles para el texto. */
  body.dar-site .dar-founder-box.et_pb_row{padding:28px!important;}

  /* --- Botones ----------------------------------------------------------
     Un botón suelto alineado a la izquierda queda descolgado en una columna
     angosta. Se comportan como los del hero: ancho completo y texto centrado,
     que además es el objetivo táctil más cómodo. */
  body.dar-site .et_pb_button_module_wrapper{text-align:center!important;}
  body.dar-site .et_pb_button_module_wrapper .et_pb_button{
    display:flex!important;width:100%!important;
    align-items:center;justify-content:center;
    margin-left:0!important;margin-right:0!important;
  }
}

@media(max-width:479px){
  body.dar-site .et_pb_section.et_pb_section{
    padding-top:48px!important;padding-bottom:48px!important;
  }
  body.dar-site .dar-founder-box.et_pb_row{padding:24px!important;}
}

/* --------------------------------------------------------------------------
   ESTUCHES · tarjetas "foto pendiente"
   Mientras falten las fotos del taller, esas tarjetas no se muestran: queda
   sola la foto real del estuche, centrada y con el mismo tamaño que tenía.
   -------------------------------------------------------------------------- */
.dar-photo-placeholder{display:none!important;}

.et_pb_column:has(.dar-photo-placeholder){display:none!important;}

.et_pb_row:has(.dar-photo-placeholder){
  display:flex;justify-content:center;align-items:flex-start;
}
.et_pb_row:has(.dar-photo-placeholder) > .et_pb_column{
  float:none;margin-right:0!important;
}