/* =====================================================================
   MAURICIO DE LA ROSA · sistema visual
   Base blanco y negro. Acentos de la paleta del manual de marca:
   Azul cielo #8BB4C4 · Violeta #7991BD · Verde #98A786 / #556147
   Tipografías del manual: Albert Sans (titulares) y Manrope (texto)
   ===================================================================== */

:root{
  --negro:#1F2A1C;          /* verde selva, la base de la web */
  --negro-2:#263422;
  --negro-3:#2E3F28;
  --negro-4:#384B30;
  --blanco:#FFF;
  --hueso:#F4F4F2;
  --gris:#EBEBEB;
  --tinta:#111;
  --tinta-suave:#666;
  --tinta-tenue:#8A8A8A;
  --linea-osc:rgba(215,232,205,.16);
  --linea-cla:rgba(0,0,0,.12);

  --cielo:#8BB4C4;
  --cielo-hondo:#3E6B7C;
  --salvia-honda:#4E6B41;
  --corteza-honda:#7A6250;
  --violeta:#7991BD;
  --verde:#98A786;
  --verde-osc:#556147;
  --naranja:#F79A3E;         /* acento principal, el mismo de los documentos de marca */
  --naranja-hondo:#A8621A;   /* su version para fondos claros */
  --acento:var(--naranja);
  --acento-osc:var(--naranja-hondo);

  --titular:'Albert Sans', system-ui, -apple-system, sans-serif;
  --texto:'Manrope', system-ui, -apple-system, sans-serif;

  --maxw:1240px;
  --r:14px; --r-lg:22px; --r-sm:10px; --pill:999px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--negro)}
body{
  background:transparent;color:var(--blanco);
  font-family:var(--texto);font-weight:400;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
/* ---------- SELVA ----------
   Dos capas fijas de fondo. NO se animan solas: una animación continua a
   pantalla completa obligaba al navegador a recomponer todo el rato y
   tiraba la web de 61 a 24 fotogramas por segundo. El movimiento lo da el
   scroll (ver marca.js), que es cuando se percibe, y cuesta cero parada. */
.selva{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.selva .capa{
  position:absolute;inset:-10%;
  background:url('/assets/marca/textura-bosque.jpg') center/cover no-repeat;
  opacity:.30;transform:translate3d(0,0,0);
}
.selva .luz{
  position:absolute;inset:-15%;opacity:.5;transform:translate3d(0,0,0);
  background:
    radial-gradient(38% 30% at 28% 22%,rgba(247,154,62,.13) 0%,transparent 70%),
    radial-gradient(46% 34% at 62% 74%,rgba(247,154,62,.09) 0%,transparent 75%);
}
@media (max-width:820px){ .selva .luz{display:none} }

img{max-width:100%;display:block}
::selection{background:var(--acento);color:#000}

.container{width:min(var(--maxw),90%);margin:0 auto}
.container-ancho{width:min(1400px,94%);margin:0 auto}

h1,h2,h3,h4{font-family:var(--titular);font-weight:700;line-height:1.06;letter-spacing:-.028em}
h1{font-size:clamp(2.2rem,4.2vw,3.6rem);text-transform:uppercase;letter-spacing:-.015em}
h2{font-size:clamp(1.8rem,3.2vw,2.7rem);letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
h3{font-size:1.32rem;letter-spacing:-.018em;line-height:1.2}

/* ---------- secciones ---------- */
.sec{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
/* velo cálido muy tenue en la parte alta de las secciones claras */
.sec.clara::before,.sec.gris::before{
  content:"";position:absolute;inset:0 0 auto;height:340px;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%,rgba(247,154,62,.14) 0%,rgba(247,154,62,.05) 46%,transparent 78%);
}
.sec.clara > .container,.sec.gris > .container{position:relative;z-index:1}
.sec.clara{background:#FDFCF8;color:var(--tinta)}
.sec.gris{background:#F6F1E7;color:var(--tinta)}
.sec.oscura{background:var(--negro);color:var(--blanco)}
.sec.oscura-2{background:var(--negro-2);color:var(--blanco)}
.sec.compacta{padding:clamp(3rem,5vw,4.5rem) 0}

/* ---------- píldora de sección (eyebrow) ---------- */
.pill{
  display:inline-block;font-family:var(--titular);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding:.45rem 1.05rem;
  border-radius:var(--pill);border:1px solid var(--acento);color:var(--acento);
}
.oscura .pill,.oscura-2 .pill,.hero .pill{
  border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.72);background:rgba(255,255,255,.05);
}
.cabecera{max-width:880px;margin:0 auto clamp(2.6rem,4.5vw,4rem);text-align:center}
.cabecera .pill{margin-bottom:1.4rem}
.cabecera h2{margin-bottom:1rem}
.cabecera h2,.faq-intro h2,.cierre h2{color:var(--hueso)}
.clara .cabecera h2,.gris .cabecera h2,.clara .faq-intro h2,.gris .faq-intro h2{color:var(--tinta)}
.cabecera h2 span,.faq-intro h2 span,.cierre h2 span{color:var(--acento)}
/* en claro, la palabra clave va en naranja y el titular lleva regla corta, como los PDF de marca */
.clara .cabecera h2 span,.gris .cabecera h2 span,
.clara .faq-intro h2 span,.gris .faq-intro h2 span{color:var(--acento-osc)}
.clara .cabecera h2::after,.gris .cabecera h2::after{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:var(--acento-osc);margin:1.1rem auto 0;
}
.clara .faq-intro h2::after,.gris .faq-intro h2::after{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:var(--acento-osc);margin:1.1rem 0 0;
}
.cabecera p{color:var(--tinta-suave);font-size:1.04rem;max-width:620px;margin:0 auto}
.oscura .cabecera p,.oscura-2 .cabecera p{color:rgba(255,255,255,.6)}
.cabecera-izq{text-align:left;margin-left:0}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.7rem;border-radius:var(--pill);
  font-family:var(--titular);font-weight:600;font-size:.94rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn svg{width:17px;height:17px;transition:transform .25s ease}
.btn:hover svg{transform:translateX(4px)}
.btn-acento{background:var(--acento);color:#000}
.btn-acento:hover{transform:translateY(-2px);background:var(--blanco)}
.btn-linea{border-color:rgba(255,255,255,.28);color:var(--blanco)}
.btn-linea:hover{background:var(--blanco);color:#000;border-color:var(--blanco)}
.btn-oscuro{background:var(--tinta);color:var(--blanco)}
.btn-oscuro:hover{background:var(--acento);color:#000}
.btn-linea-osc{border-color:rgba(0,0,0,.22);color:var(--tinta)}
.btn-linea-osc:hover{background:var(--tinta);color:var(--blanco)}

/* ---------- navegación ---------- */
nav{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:200;
  width:min(1300px,94%);display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem .55rem .55rem 1.4rem;border-radius:var(--pill);
  background:transparent;border:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
/* arriba del todo la barra desaparece; al bajar, se posa */
nav.posada .nav-links a{text-shadow:none}
nav.posada{
  background:rgba(30,41,27,.82);backdrop-filter:blur(20px);
  border-color:rgba(215,232,205,.12);
  box-shadow:0 20px 44px -32px rgba(0,0,0,.85);
}
.brand{display:flex;align-items:center}
.brand img{height:38px;width:auto}
.brand .logo-iso{display:none;height:16px}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{
  font-family:var(--titular);color:rgba(255,255,255,.82);text-decoration:none;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
  font-size:.92rem;font-weight:500;letter-spacing:-.01em;transition:color .22s;
}
.nav-links a:hover,.nav-links a.activo{color:var(--blanco)}
.nav-right{display:flex;align-items:center;gap:.5rem}
.nav-right .btn{padding:.7rem 1.3rem;font-size:.88rem}
.lang{
  font-family:var(--titular);font-size:.78rem;font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.66);text-decoration:none;padding:.55rem .8rem;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--pill);transition:all .22s;
}
.lang:hover{color:var(--blanco);border-color:rgba(255,255,255,.4)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.6rem}
.nav-toggle span{display:block;width:20px;height:1.6px;background:#fff;margin:4.5px 0;transition:.3s}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:clamp(620px,92vh,880px);display:flex;align-items:center;
  justify-content:center;text-align:center;padding:200px 0 130px;overflow:hidden;background:var(--negro);
}
.hero .fondo{
  position:absolute;inset:-6% 0;
  background-image:var(--foto);background-position:var(--pos,center);
  background-size:cover;background-repeat:no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(22,31,20,.5) 0%,rgba(22,31,20,.14) 38%,rgba(22,31,20,.58) 78%,var(--negro) 100%),
    linear-gradient(100deg,rgba(22,31,20,.62) 0%,rgba(22,31,20,.18) 56%,rgba(22,31,20,0) 84%);
}
.hero .container{position:relative;z-index:3}
.hero-marca{width:132px;height:auto;display:block;margin:0 auto 1.9rem;opacity:.9}
.hero.interior .hero-marca{display:none}
.regla{width:64px;height:2px;background:var(--acento);margin:2.4rem auto;border:0}
.hero.interior .regla,.cabecera-izq .regla{margin-left:0}
.hero .pill{margin-bottom:1.7rem}
.hero h1{margin-bottom:1.5rem;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero h1 span{color:var(--acento)}
.hero .sub{
  font-size:clamp(1.02rem,1.5vw,1.16rem);color:rgba(255,255,255,.86);
  max-width:600px;margin:0 auto;text-shadow:0 1px 18px rgba(0,0,0,.55);
}
.hero-acciones{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.hero-datos{
  margin-top:3.4rem;display:flex;flex-wrap:wrap;gap:2.4rem;justify-content:center;
  font-family:var(--titular);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.45);
}
.hero.interior{min-height:clamp(480px,68vh,640px);padding:190px 0 90px;text-align:left}
.hero.interior .container{text-align:left}
.hero.interior .hero-acciones{justify-content:flex-start}
.hero.interior .sub{margin-left:0}
.hero.interior h1 span{display:inline}
.migas{
  font-family:var(--titular);font-size:.82rem;color:rgba(255,255,255,.5);margin-bottom:1.4rem;
}
.migas a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s}
.migas a:hover{color:var(--acento)}

/* ---------- tarjetas numeradas ---------- */
.rejilla-2{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.tarjeta-num{
  padding:2.6rem 2.2rem;border:1px solid var(--linea-cla);margin:-.5px;
  transition:background .3s ease;
}
.rejilla-3 .tarjeta-num,.rejilla-2 .tarjeta-num{border:1px solid var(--linea-cla);margin:-.5px}
.oscura .tarjeta-num,.oscura-2 .tarjeta-num{border-color:var(--linea-osc)}
.clara .tarjeta-num:hover,.gris .tarjeta-num:hover{background:rgba(247,154,62,.06)}
.oscura .tarjeta-num:hover,.oscura-2 .tarjeta-num:hover{background:rgba(255,255,255,.03)}
.tarjeta-num .n{
  display:block;font-family:var(--titular);font-size:.74rem;font-weight:600;letter-spacing:.22em;
  color:var(--acento);margin-bottom:.7rem;
}
.tarjeta-num .barra{width:52px;height:3px;border-radius:2px;background:var(--acento);margin-bottom:1.5rem;transition:width .35s ease}
.tarjeta-num:hover .barra{width:76px}
.tarjeta-num h3{margin-bottom:.6rem}
.tarjeta-num p{color:var(--tinta-suave);font-size:.97rem}
.oscura .tarjeta-num p,.oscura-2 .tarjeta-num p{color:rgba(255,255,255,.55)}

/* ---------- tarjetas de servicio con foto ---------- */
.servicios{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.4rem}
.serv{
  display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;color:var(--blanco);background:rgba(255,255,255,.05);
  border:1px solid var(--linea-osc);transition:transform .4s ease,border-color .3s ease;
}
.serv .foto{display:block;aspect-ratio:4/3;overflow:hidden;background:#0E1309}
.serv .foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.serv:hover{transform:translateY(-6px);border-color:var(--acento)}
.serv:hover .foto img{transform:scale(1.05)}
.serv .txt{display:flex;flex-direction:column;flex:1;padding:1.9rem 1.7rem 1.7rem}
.serv .n{
  font-family:var(--titular);font-size:.74rem;font-weight:600;letter-spacing:.22em;
  color:var(--acento);margin-bottom:.7rem;
}
.serv h3{font-size:1.5rem;margin-bottom:.65rem}
.serv p{font-size:.95rem;color:rgba(255,255,255,.66);margin-bottom:1.5rem}
.serv .mas{
  margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--titular);
  font-weight:600;font-size:.92rem;color:var(--acento);
}
.serv .mas svg{width:16px;height:16px;transition:transform .3s}
.serv:hover .mas svg{transform:translateX(5px)}

/* ---------- filas numeradas (beneficios / fases) ---------- */
.filas{max-width:1080px;margin:0 auto}
.fila{
  display:grid;grid-template-columns:88px 1fr;gap:1.6rem;align-items:start;
  padding:2.1rem 0;border-top:1px solid var(--linea-cla);
}
.oscura .fila,.oscura-2 .fila{border-color:var(--linea-osc)}
.fila:last-child{border-bottom:1px solid var(--linea-cla)}
.oscura .fila:last-child,.oscura-2 .fila:last-child{border-color:var(--linea-osc)}
.fila .idx{font-family:var(--titular);font-size:1rem;font-weight:600;color:var(--acento);padding-top:.2rem}
.fila > div{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:2.4rem;align-items:start}
.fila h3{margin-bottom:0;padding-top:.1rem}
.fila p{color:var(--tinta-suave);font-size:.99rem}
.oscura .fila p,.oscura-2 .fila p{color:rgba(255,255,255,.58)}

/* ---------- lista con checks ---------- */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1rem 2.6rem;max-width:940px;margin:0 auto}
.check{display:flex;gap:.85rem;align-items:flex-start}
.check .ic{flex:0 0 22px;height:22px;margin-top:.22rem;color:var(--acento)}
.clara .check .ic svg,.gris .check .ic svg{display:none}
.clara .check .ic,.gris .check .ic{position:relative;flex:0 0 14px;height:14px;margin-top:.42rem}
.clara .check .ic::before,.gris .check .ic::before{content:"";position:absolute;inset:0;border-radius:3px;background:var(--acento);opacity:.95}
.check .ic svg{width:100%;height:100%}
.check p{font-size:.99rem;color:var(--tinta-suave)}
.oscura .check p,.oscura-2 .check p{color:rgba(255,255,255,.68)}

/* ---------- quién soy ---------- */
.sobre{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.sobre-foto{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--linea-osc);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.sobre-foto img{width:100%;height:100%;object-fit:cover}
.sobre-texto .pill{margin-bottom:1.3rem}
.sobre-texto h2{margin-bottom:1.2rem}
.sobre-texto p{color:rgba(255,255,255,.62);margin-bottom:1.1rem;font-size:1.02rem}
.etiquetas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.etiquetas span{
  font-family:var(--titular);font-size:.78rem;font-weight:500;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.06);border:1px solid var(--linea-osc);
  border-radius:var(--pill);padding:.45rem 1rem;
}

/* ---------- logos de empresas ---------- */
.rotulo{
  text-align:center;font-family:var(--titular);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-tenue);margin-bottom:3rem;
}
.oscura .rotulo,.oscura-2 .rotulo{color:rgba(255,255,255,.4)}
.logos{
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.8rem,3.4vw,3.4rem);
  align-items:center;justify-items:center;max-width:1060px;margin:0 auto;
}
.logos img{max-height:40px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:.35s}
.logos img:hover{filter:none;opacity:1}
.oscura .logos img,.oscura-2 .logos img{filter:grayscale(1) invert(1) brightness(1.6);opacity:.6}
.oscura .logos img:hover,.oscura-2 .logos img:hover{filter:none;opacity:1}

/* ---------- banda de foto a sangre ---------- */
.banda{position:relative;overflow:hidden;aspect-ratio:3/1;min-height:300px}
.banda.alta{aspect-ratio:2/1}
.banda .foto{position:absolute;inset:0;background-image:var(--foto);background-position:center;background-size:cover;background-repeat:no-repeat}
.banda::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--negro) 0%,rgba(22,31,20,.44) 32%,rgba(22,31,20,.44) 68%,var(--negro) 100%);
}
.banda .frase{
  position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 8%;
}
.banda .frase span.linea{
  display:block;font-family:var(--titular);font-weight:600;letter-spacing:-.01em;text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.24;color:var(--blanco);
  text-shadow:0 2px 34px rgba(0,0,0,.75);max-width:900px;
}
.banda .frase span.linea span{color:var(--acento);text-transform:uppercase;letter-spacing:-.01em}

/* ---------- reseñas ---------- */
.resenas{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1.2rem}
.resena{
  background:rgba(255,255,255,.05);border:1px solid var(--linea-osc);border-radius:var(--r-lg);
  padding:2rem 1.9rem;display:flex;flex-direction:column;transition:border-color .3s ease;
}
.resena:hover{border-color:rgba(255,255,255,.28)}
.clara .resena{background:var(--hueso);border-color:var(--linea-cla)}
.gris .resena{background:var(--blanco);border-color:var(--linea-cla)}
.resena .estrellas{color:var(--acento);letter-spacing:.16em;font-size:.88rem;margin-bottom:1.1rem}
.resena p{font-size:1rem;color:rgba(255,255,255,.72);line-height:1.7;margin-bottom:1.6rem}
.clara .resena p,.gris .resena p{color:var(--tinta-suave)}
.resena .quien{
  display:flex;align-items:center;gap:.8rem;margin-top:auto;
  font-family:var(--titular);font-size:.92rem;font-weight:600;color:var(--blanco);
}
.clara .resena .quien,.gris .resena .quien{color:var(--tinta)}
.resena .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.resena .avatar-vacio{
  width:44px;height:44px;border-radius:50%;flex:0 0 44px;background:rgba(255,255,255,.08);
  border:1px solid var(--linea-osc);display:flex;align-items:center;justify-content:center;
  font-family:var(--titular);font-weight:600;font-size:1rem;color:var(--acento);
}
.clara .resena .avatar-vacio,.gris .resena .avatar-vacio{background:rgba(247,154,62,.16);border-color:rgba(168,98,26,.22);color:var(--acento-osc)}

/* ---------- formularios (panel oscuro) ---------- */
.panel{
  background:rgba(255,255,255,.05);border:1px solid var(--linea-osc);border-radius:var(--r-lg);
  padding:clamp(2rem,4.4vw,3.4rem);max-width:820px;margin:0 auto;
}
.panel.ancho{max-width:100%}
.panel h3{font-size:1.75rem;margin-bottom:.7rem;text-align:center}
.panel .intro{text-align:center;color:rgba(255,255,255,.6);font-size:.98rem;margin-bottom:2.4rem;max-width:560px;margin-left:auto;margin-right:auto}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.campo{margin-bottom:0}
.campo.ancho{grid-column:1 / -1}
.campo label{
  display:block;font-family:var(--titular);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:.6rem;
}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo textarea,.campo input[type=file]{
  width:100%;padding:.95rem 1.1rem;border:1px solid var(--linea-osc);border-radius:var(--r-sm);
  background:rgba(255,255,255,.04);font-family:var(--texto);font-size:.98rem;color:var(--blanco);
  transition:border-color .25s,background .25s;
}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(255,255,255,.32)}
.campo textarea{min-height:140px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--acento);background:rgba(255,255,255,.07)}
.campo input[type=file]{color:rgba(255,255,255,.6);font-size:.9rem;padding:.75rem 1.1rem}
.pista{font-size:.82rem;color:rgba(255,255,255,.4);margin-top:.5rem}
.estrellas-input{display:inline-flex;flex-direction:row-reverse;gap:.3rem}
.estrellas-input input{position:absolute;opacity:0;width:0;height:0}
.estrellas-input label{
  font-size:1.7rem;color:rgba(255,255,255,.2);cursor:pointer;transition:color .2s;
  margin:0;letter-spacing:0;text-transform:none;
}
.estrellas-input input:checked ~ label,
.estrellas-input label:hover,.estrellas-input label:hover ~ label{color:var(--acento)}
.consentimiento{
  display:flex;gap:.75rem;align-items:flex-start;margin:1.6rem 0;
  font-size:.9rem;color:rgba(255,255,255,.6);
}
.consentimiento input{margin-top:.3rem;accent-color:var(--acento);width:16px;height:16px}
.privacidad{font-size:.85rem;color:rgba(255,255,255,.42);margin:1.4rem 0}
.form-pie{display:flex;justify-content:flex-end;margin-top:1.8rem}
.gracias{display:none;text-align:center;padding:1.4rem 0}
.gracias.ver{display:block}
.gracias h3{margin-bottom:.6rem}
.gracias p{color:rgba(255,255,255,.6)}
form.oculto{display:none}

/* ---------- contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.6rem,3vw,2.6rem);align-items:start}
.contacto-aside{
  background:rgba(255,255,255,.05);border:1px solid var(--linea-osc);border-radius:var(--r-lg);
  padding:clamp(1.8rem,3vw,2.4rem);display:flex;flex-direction:column;
}
.contacto-aside h3{margin-bottom:.8rem}
.contacto-aside > p{color:rgba(255,255,255,.6);font-size:.96rem;margin-bottom:1.8rem}
.directo{display:flex;flex-direction:column;gap:.8rem}
.directo a{
  display:flex;align-items:center;gap:.8rem;color:rgba(255,255,255,.82);text-decoration:none;
  font-size:.95rem;padding:.9rem 1.1rem;border:1px solid var(--linea-osc);border-radius:var(--r-sm);
  transition:all .25s;
}
.directo a:hover{border-color:var(--acento);color:var(--blanco);background:rgba(255,255,255,.04)}
.directo .ico{width:19px;height:19px;flex:0 0 19px;color:var(--acento)}
.directo .ico svg{width:100%;height:100%}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.faq-intro .pill{margin-bottom:1.3rem}
.faq-intro h2{margin-bottom:1rem}
.faq-intro p{color:rgba(255,255,255,.55);font-size:.98rem}
.faq-intro a{color:var(--acento);text-decoration:none}
.faq{display:flex;flex-direction:column;gap:.8rem}
.faq details{
  background:rgba(255,255,255,.05);border:1px solid var(--linea-osc);border-radius:var(--r);
  padding:1.25rem 1.5rem;transition:border-color .25s;
}
.faq details[open]{border-color:rgba(255,255,255,.24)}
.faq summary{
  cursor:pointer;list-style:none;font-family:var(--titular);font-weight:600;font-size:1.02rem;
  letter-spacing:-.015em;color:var(--blanco);display:flex;justify-content:space-between;
  align-items:center;gap:1.2rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.35rem;line-height:1;color:var(--acento);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:.9rem;color:rgba(255,255,255,.6);font-size:.97rem}

/* ---------- cierre ---------- */
.cierre{
  position:relative;text-align:center;padding:clamp(5rem,10vw,8.5rem) 0;overflow:hidden;background:var(--negro);
}
.cierre .fondo{position:absolute;inset:0;background-image:var(--foto);background-position:var(--pos,center);background-size:cover;background-repeat:no-repeat}
.cierre::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--negro) 0%,rgba(22,31,20,.66) 45%,var(--negro) 100%);
}
.cierre .container{position:relative;z-index:3}
.cierre h2 span{color:var(--acento)}
.cierre .pill{margin-bottom:1.6rem}
.cierre h2{max-width:840px;margin:0 auto 1.4rem;text-wrap:balance}
.cierre p{color:rgba(255,255,255,.66);max-width:520px;margin:0 auto}

/* ---------- pie ---------- */
footer{background:rgba(20,28,18,.72);border-top:1px solid var(--linea-osc);padding:4.5rem 0 2rem}
.pie-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2.5rem;margin-bottom:3.5rem}
.pie-marca img{height:56px;width:auto;margin-bottom:1.2rem}
.pie-marca p{color:rgba(255,255,255,.5);font-size:.94rem;max-width:280px}
.pie-col h4{
  font-family:var(--titular);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1.2rem;
}
.pie-col a{
  display:block;color:rgba(255,255,255,.7);text-decoration:none;font-size:.94rem;
  margin-bottom:.7rem;transition:color .22s;
}
.pie-col a:hover{color:var(--acento)}
.pie-bajo{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--linea-osc);padding-top:1.8rem;
}
.pie-bajo small{color:rgba(255,255,255,.36);font-size:.82rem}
.pie-bajo a{color:rgba(255,255,255,.5);text-decoration:none;font-size:.85rem}
.pie-bajo a:hover{color:var(--blanco)}

/* ---------- aparición al hacer scroll ---------- */
.js .revelar{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}
.js .revelar.visible{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .sobre{grid-template-columns:1fr}
  .sobre-foto{max-width:420px;aspect-ratio:1/1}
  .faq-grid{grid-template-columns:1fr}
  .contacto-grid{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .logos{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  nav{padding:.55rem .55rem .55rem 1.1rem}
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;gap:0;
    background:var(--negro-2);border:1px solid var(--linea-osc);border-radius:var(--r);
    padding:.7rem 1.3rem;display:none;
  }
  .nav-links.abierto{display:flex}
  .nav-links a{display:block;padding:.75rem 0;font-size:1rem}
  .hero{min-height:auto;padding:150px 0 90px}
  .hero.interior{padding:150px 0 70px}
  .hero-datos{gap:1.2rem;font-size:.66rem;margin-top:2.4rem}
  .campos{grid-template-columns:1fr}
  .fila{grid-template-columns:64px 1fr;gap:1rem}
  .fila > div{grid-template-columns:1fr;gap:.55rem}
  .rejilla-2,.rejilla-3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .brand .logo-h{display:none}
  .brand .logo-iso{display:block;height:14px}
  nav{padding:.45rem .45rem .45rem .9rem;gap:.5rem}
  .nav-right{gap:.35rem}
  .nav-right .btn{padding:.6rem .9rem;font-size:.76rem;white-space:nowrap}
  .lang{padding:.45rem .55rem;font-size:.68rem}
  .logos{grid-template-columns:repeat(2,1fr);gap:1.8rem}
  .pie-grid{grid-template-columns:1fr}
  .btn{padding:.85rem 1.4rem;font-size:.9rem}
  .form-pie{justify-content:stretch}
  .form-pie .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .selva .luz{display:none}
  .js .revelar{opacity:1;transform:none}
}

/* =====================================================================
   Variantes para secciones claras (el acento vivo no tiene contraste
   suficiente sobre blanco, así que ahí se usa su versión oscura)
   ===================================================================== */
.clara .pill,.gris .pill{border-color:var(--acento-osc);color:var(--acento-osc);background:rgba(168,98,26,.07)}
.clara .tarjeta-num .n,.gris .tarjeta-num .n{
  color:var(--acento-osc);font-size:1.5rem;font-weight:700;letter-spacing:.02em;margin-bottom:.35rem;
}
.clara .tarjeta-num .barra,.gris .tarjeta-num .barra{background:var(--acento-osc);width:44px;height:2px}
.clara .fila .idx,.gris .fila .idx{color:var(--acento-osc);font-size:1.6rem;font-weight:700}
.clara .check .ic,.gris .check .ic{color:var(--acento-osc)}
.clara .check:nth-child(5) .ic,.gris .check:nth-child(5) .ic{color:var(--acento-osc)}
.clara .resena .estrellas,.gris .resena .estrellas{color:var(--acento-osc)}
.clara .resena .avatar-vacio,.gris .resena .avatar-vacio{color:var(--acento-osc)}
.clara .btn-acento,.gris .btn-acento{background:var(--acento-osc);color:#fff}
.clara .btn-acento:hover,.gris .btn-acento:hover{background:var(--tinta);color:#fff}

/* panel claro (formularios sobre fondo blanco) */
.clara .panel{background:var(--hueso);border-color:var(--linea-cla)}
.gris .panel{background:var(--blanco);border-color:var(--linea-cla)}
.gris .panel{background:var(--blanco)}
.clara .panel .intro,.gris .panel .intro{color:var(--tinta-suave)}
.clara .campo label,.gris .campo label{color:var(--tinta-suave)}
.clara .campo input,.clara .campo textarea,
.gris .campo input,.gris .campo textarea{
  background:#fff;border-color:var(--linea-cla);color:var(--tinta);
}
.clara .campo input::placeholder,.clara .campo textarea::placeholder,
.gris .campo input::placeholder,.gris .campo textarea::placeholder{color:#A5A5A5}
.clara .campo input:focus,.clara .campo textarea:focus,
.gris .campo input:focus,.gris .campo textarea:focus{border-color:var(--acento-osc);background:#fff}
.clara .pista,.gris .pista{color:var(--tinta-tenue)}
.clara .consentimiento,.gris .consentimiento{color:var(--tinta-suave)}
.clara .consentimiento input,.gris .consentimiento input{accent-color:var(--acento-osc)}
.clara .privacidad,.gris .privacidad{color:var(--tinta-tenue)}
.clara .estrellas-input label,.gris .estrellas-input label{color:#DCDCDC}
.clara .estrellas-input input:checked ~ label,.clara .estrellas-input label:hover,
.clara .estrellas-input label:hover ~ label,
.gris .estrellas-input input:checked ~ label,.gris .estrellas-input label:hover,
.gris .estrellas-input label:hover ~ label{color:var(--acento-osc)}
.clara .gracias p,.gris .gracias p{color:var(--tinta-suave)}

/* faq claro */
.clara .faq details{background:var(--hueso);border-color:var(--linea-cla)}
.gris .faq details{background:var(--blanco);border-color:var(--linea-cla)}
.clara .faq details[open],.gris .faq details[open]{border-color:rgba(168,98,26,.4);box-shadow:inset 3px 0 0 var(--acento-osc)}
.clara .faq summary,.gris .faq summary{color:var(--tinta)}
.clara .faq summary::after,.gris .faq summary::after{color:var(--acento-osc)}
.clara .faq p,.gris .faq p{color:var(--tinta-suave)}
.clara .faq-intro p,.gris .faq-intro p{color:var(--tinta-suave)}
.clara .faq-intro a,.gris .faq-intro a{color:var(--acento-osc)}
.gris .faq details{background:var(--blanco)}

/* =====================================================================
   COMPONENTES DE LA VERSIÓN DE POSICIONAMIENTO (sep 2026)
   ===================================================================== */

/* ---------- reconocimiento: situaciones concretas ---------- */
.situaciones{display:grid;grid-template-columns:repeat(2,1fr);gap:0;max-width:1080px;margin:0 auto}
.situacion{
  padding:1.9rem 2rem;border:1px solid var(--linea-cla);margin:-.5px;
  display:flex;gap:1rem;align-items:flex-start;transition:background .3s ease;
}
.oscura .situacion,.oscura-2 .situacion{border-color:var(--linea-osc)}
.clara .situacion:hover,.gris .situacion:hover{background:rgba(247,154,62,.06)}
.situacion .marca{
  flex:0 0 12px;height:12px;margin-top:.42rem;border-radius:3px;background:var(--acento);
}
.clara .situacion .marca,.gris .situacion .marca{background:var(--acento-osc)}
.situacion p{font-size:1.02rem;line-height:1.6;color:var(--tinta-suave)}
.oscura .situacion p,.oscura-2 .situacion p{color:rgba(242,243,237,.72)}

/* ---------- las cuatro herramientas del proceso ---------- */
.piezas{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3rem}
.pieza{
  background:rgba(255,255,255,.05);border:1px solid var(--linea-osc);
  border-radius:var(--r);padding:1.8rem 1.5rem;
}
.clara .pieza,.gris .pieza{background:#fff;border-color:var(--linea-cla)}
.pieza h3{font-size:1.12rem;margin-bottom:.5rem}
.pieza p{font-size:.94rem;color:rgba(242,243,237,.6)}
.clara .pieza p,.gris .pieza p{color:var(--tinta-suave)}
.pieza .ico{display:block;width:28px;height:28px;flex:0 0 28px;color:var(--acento);margin-bottom:1rem}
.clara .pieza .ico,.gris .pieza .ico{color:var(--acento-osc)}
.pieza .ico svg{width:100%;height:100%}

/* ---------- la brújula, el método ---------- */
.brujula{max-width:1080px;margin:0 auto}
.brujula-lema{
  text-align:center;font-family:var(--titular);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.4;color:var(--hueso,#fff);
  max-width:720px;margin:0 auto 3.4rem;
}
.brujula-lema span{color:var(--acento)}
.fases{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.fase-b{
  position:relative;padding:1.7rem 1.6rem 0 0;border-top:2px solid var(--linea-osc);
  margin-right:1.6rem;
}
.fase-b:last-child{margin-right:0}
.fase-b .num{
  display:block;font-family:var(--titular);font-weight:700;font-size:2.4rem;line-height:1;
  color:var(--acento);margin-bottom:.9rem;
}
.fase-b h3{font-size:1.14rem;margin-bottom:.55rem}
.fase-b p{font-size:.95rem;color:rgba(242,243,237,.62)}
.brujula-pie{
  margin-top:3rem;text-align:center;font-size:.98rem;color:rgba(242,243,237,.55);
}

/* ---------- cómo es trabajar conmigo ---------- */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1120px;margin:0 auto}
.paso{padding:2.1rem 1.9rem;border:1px solid var(--linea-cla);margin:-.5px}
.oscura .paso,.oscura-2 .paso{border-color:var(--linea-osc)}
.paso .n{
  display:block;font-family:var(--titular);font-weight:700;font-size:.82rem;letter-spacing:.18em;
  color:var(--acento);margin-bottom:.8rem;
}
.clara .paso .n,.gris .paso .n{color:var(--acento-osc)}
.paso h3{font-size:1.08rem;margin-bottom:.45rem}
.paso p{font-size:.94rem;color:var(--tinta-suave)}
.oscura .paso p,.oscura-2 .paso p{color:rgba(242,243,237,.6)}

/* ---------- para quién sí y para quién no ---------- */
.filtro{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:1000px;margin:0 auto}
.filtro-col{
  border:1px solid var(--linea-osc);border-radius:var(--r-lg);padding:2.2rem 2rem;
  background:rgba(255,255,255,.04);
}
.clara .filtro-col,.gris .filtro-col{background:#fff;border-color:var(--linea-cla)}
.filtro-col h3{font-size:1.2rem;margin-bottom:1.4rem}
.filtro-col.si h3{color:var(--acento)}
.clara .filtro-col.si h3,.gris .filtro-col.si h3{color:var(--acento-osc)}
.filtro-col.no h3{color:rgba(242,243,237,.5)}
.clara .filtro-col.no h3,.gris .filtro-col.no h3{color:var(--tinta-tenue)}
.filtro-col ul{list-style:none;display:flex;flex-direction:column;gap:.85rem}
.filtro-col li{display:flex;gap:.8rem;align-items:flex-start;font-size:.99rem;color:rgba(242,243,237,.72)}
.clara .filtro-col li,.gris .filtro-col li{color:var(--tinta-suave)}
.filtro-col li::before{
  content:"";flex:0 0 10px;height:10px;margin-top:.45rem;border-radius:3px;background:var(--acento);
}
.clara .filtro-col.si li::before,.gris .filtro-col.si li::before{background:var(--acento-osc)}
.filtro-col.no li::before{background:rgba(242,243,237,.22);border-radius:50%}
.clara .filtro-col.no li::before,.gris .filtro-col.no li::before{background:rgba(34,38,26,.18)}

/* ---------- reseñas con rol ---------- */
.resena .rol{display:block;font-family:var(--texto);font-weight:400;font-size:.82rem;
  color:rgba(242,243,237,.5);margin-top:.15rem}
.clara .resena .rol,.gris .resena .rol{color:var(--tinta-tenue)}
.resena .logro{
  margin:-.4rem 0 1.4rem;padding-top:1rem;border-top:1px solid var(--linea-osc);
  font-size:.92rem;color:var(--acento);
}
.clara .resena .logro,.gris .resena .logro{border-color:var(--linea-cla);color:var(--acento-osc)}

/* ---------- nota de modalidad ---------- */
.modalidad{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2.6rem;
}
.modalidad span{
  font-family:var(--titular);font-size:.78rem;font-weight:500;letter-spacing:.04em;
  padding:.5rem 1.1rem;border-radius:var(--pill);
  border:1px solid var(--linea-osc);color:rgba(242,243,237,.72);
}
.clara .modalidad span,.gris .modalidad span{border-color:var(--linea-cla);color:var(--tinta-suave)}
.modalidad span.principal{background:var(--acento);border-color:var(--acento);color:#1a1206}
.clara .modalidad span.principal,.gris .modalidad span.principal{background:var(--acento-osc);border-color:var(--acento-osc);color:#fff}

/* ---------- responsive de lo nuevo ---------- */
@media (max-width:980px){
  .piezas{grid-template-columns:repeat(2,1fr)}
  .fases{grid-template-columns:repeat(2,1fr)}
  .fase-b:nth-child(3){border-left:0}
  .pasos{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .situaciones{grid-template-columns:1fr}
  .piezas{grid-template-columns:1fr}
  .fases{grid-template-columns:1fr}
  .fase-b{margin-right:0;padding:1.5rem 0 .6rem}
  .pasos{grid-template-columns:1fr}
  .filtro{grid-template-columns:1fr}
}

/* ---------- declaración destacada (la idea de autonomía) ---------- */
.declaracion{text-align:center;max-width:820px;margin:0 auto}
.declaracion .frase-grande{
  font-family:var(--titular);font-weight:700;letter-spacing:-.015em;text-transform:uppercase;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;color:var(--blanco);
}
.declaracion .frase-grande span{color:var(--acento)}
.clara .declaracion .frase-grande,.gris .declaracion .frase-grande{color:var(--tinta)}
.clara .declaracion .frase-grande span,.gris .declaracion .frase-grande span{color:var(--acento-osc)}
.declaracion p{
  margin-top:1.6rem;font-size:1.05rem;color:rgba(255,255,255,.62);
  max-width:560px;margin-left:auto;margin-right:auto;
}
.clara .declaracion p,.gris .declaracion p{color:var(--tinta-suave)}

/* ---------- herramientas dentro del proceso ---------- */
.herramientas{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  max-width:700px;margin:3rem auto 0;
}
.herramientas span{
  font-family:var(--titular);font-size:.8rem;font-weight:500;letter-spacing:.01em;
  padding:.45rem 1rem;border-radius:var(--pill);
  border:1px solid var(--linea-osc);color:rgba(255,255,255,.7);
}
.clara .herramientas span,.gris .herramientas span{border-color:var(--linea-cla);color:var(--tinta-suave)}
.herramientas-rotulo{
  text-align:center;font-family:var(--titular);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:3.2rem;
}
.clara .herramientas-rotulo,.gris .herramientas-rotulo{color:var(--tinta-tenue)}

/* ---------- contacto directo ---------- */
.directo-centrado{
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;max-width:900px;margin:0 auto;
}
.directo-centrado a{
  display:flex;align-items:center;gap:.7rem;text-decoration:none;font-size:.95rem;
  padding:.95rem 1.4rem;border:1px solid var(--linea-osc);border-radius:var(--pill);
  color:rgba(255,255,255,.82);transition:all .25s;
}
.clara .directo-centrado a,.gris .directo-centrado a{border-color:var(--linea-cla);color:var(--tinta)}
.directo-centrado a:hover{border-color:var(--acento);background:rgba(255,255,255,.04)}
.clara .directo-centrado a:hover,.gris .directo-centrado a:hover{border-color:var(--acento-osc);background:rgba(247,154,62,.07)}
.directo-centrado .ico{width:19px;height:19px;flex:0 0 19px;color:var(--acento)}
.clara .directo-centrado .ico,.gris .directo-centrado .ico{color:var(--acento-osc)}
.directo-centrado .ico svg{width:100%;height:100%}

/* ---------- reseña en vídeo ---------- */
.resena.video{padding:0;overflow:hidden}
.resena.video .marco{position:relative;aspect-ratio:16/9;background:#000}
.resena.video .marco iframe,.resena.video .marco video{
  position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;
}
.resena.video .cuerpo{padding:1.6rem 1.7rem}

/* ---------- bloque de inversión, listo para cuando haya precio ---------- */
.inversion{
  max-width:620px;margin:0 auto;text-align:center;
  border:1px solid var(--linea-osc);border-radius:var(--r-lg);padding:2.6rem 2rem;
  background:rgba(255,255,255,.04);
}
.clara .inversion,.gris .inversion{background:#fff;border-color:var(--linea-cla)}
.inversion .cifra{
  font-family:var(--titular);font-weight:700;font-size:clamp(2.2rem,4vw,3rem);
  letter-spacing:-.03em;color:var(--acento);line-height:1;
}
.clara .inversion .cifra,.gris .inversion .cifra{color:var(--acento-osc)}
.inversion .detalle{margin-top:.8rem;color:rgba(255,255,255,.6);font-size:.98rem}
.clara .inversion .detalle,.gris .inversion .detalle{color:var(--tinta-suave)}
.inversion .btn{margin-top:1.8rem}

/* =====================================================================
   ENCUADRE EN MÓVIL (va al final para ganar a las reglas de escritorio)
   Las fotos panorámicas se recortan mal en una pantalla estrecha y alta,
   así que se cambian por versiones verticales; y la banda deja de tener
   proporción fija, que la hacía más ancha que la pantalla.
   ===================================================================== */
@media (max-width:820px){
  /* En móvil el hero se parte en dos: la foto arriba, entera, y el texto
     debajo sobre el verde. Con una foto horizontal detrás del texto no
     había forma de que se vieran cara y cuerpo a la vez. */
  .hero:not(.interior){display:block;min-height:0;padding:0;text-align:center}
  .hero:not(.interior) .fondo{
    position:relative;inset:auto;height:52vh;min-height:320px;
    background-image:var(--foto-movil,var(--foto));background-position:center 34%;
  }
  .hero:not(.interior)::after{
    inset:auto 0 0 0;height:52vh;
    background:linear-gradient(180deg,rgba(20,25,15,.5) 0%,rgba(20,25,15,.05) 26%,rgba(20,25,15,.05) 62%,var(--negro) 100%);
    top:0;bottom:auto;
  }
  .hero:not(.interior) .container{position:relative;z-index:3;padding:2.2rem 0 3.4rem}
  .hero:not(.interior) .hero-marca{display:none}
  .hero .sub{font-size:1rem;line-height:1.55;max-width:34ch}
  .hero .fondo,.cierre .fondo,.banda .foto{background-image:var(--foto-movil,var(--foto))}
  /* la misma foto que en escritorio, encuadrada en la figura y con algo de zoom
     para que no quede diminuta en una pantalla estrecha */
  .hero .fondo{background-position:42% 70%;background-size:auto 100%}
  .banda,.banda.alta{aspect-ratio:auto;height:clamp(320px,54vh,440px);min-height:0}
  .cierre .fondo{background-position:center 35%}
}

/* ---------- galería de experiencias ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;max-width:1120px;margin:0 auto}
.galeria figure{margin:0;overflow:hidden;border-radius:var(--r);aspect-ratio:1/1;background:var(--negro-3)}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.galeria figure:hover img{transform:scale(1.06)}

/* ---------- vídeo de la experiencia ---------- */
.video-exp{
  max-width:420px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--linea-osc);background:#000;position:relative;
}
.video-exp video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.video-exp video::-webkit-media-controls{opacity:0;transition:opacity .3s}
.video-exp.reproduciendo video::-webkit-media-controls{opacity:1}
.video-exp .play{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:16%;background:rgba(20,25,15,.24);cursor:pointer;
  transition:opacity .3s ease;border:0;
}
.video-exp .play span{
  width:74px;height:74px;border-radius:50%;background:var(--acento);
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px -12px rgba(0,0,0,.7);
}
.video-exp .play svg{width:26px;height:26px;color:#1a1206;margin-left:4px}
.video-exp.reproduciendo .play{opacity:0;pointer-events:none}
.video-pie{
  text-align:center;margin-top:1.4rem;font-size:.94rem;color:rgba(242,243,237,.55);
}
.clara .video-pie,.gris .video-pie{color:var(--tinta-suave)}

@media (max-width:820px){
  .galeria{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .video-exp{max-width:100%}
}