/* =============================================================
   Eylocal · OPCIÓN B
   Vuelve a la estructura y al estilo del prototipo original:
   plano y editorial, titulares enormes y apretados, bloques de
   color a sangre, cortes en diagonal (low poly), sin sombras ni
   esquinas redondeadas. Comparte assets, app.js y config.js con
   la opción A, que vive un nivel más arriba.
   Paleta: Teal #0F766E · Warm Ivory #FFFBEB · Orange #F97316.
   ============================================================= */

@font-face{font-family:'Poppins';src:url('assets/fonts/poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('assets/fonts/poppins-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('assets/fonts/poppins-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('assets/fonts/poppins-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* --- Tokens -------------------------------------------------- */
/* El sprite SVG no ocupa espacio. En CSS y no en un style=,
   para que una Content-Security-Policy estricta no lo bloquee. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

:root{
  --teal:#0F766E; --ivory:#FFFBEB; --orange:#F97316;
  --teal-900:#063630; --teal-800:#0B5E58; --teal-400:#44958A;
  --teal-200:#B8D6C6; --teal-100:#D7E8DE; --teal-050:#E7EFE3;
  --ivory-200:#FFF0D6; --orange-400:#FF9A41; --orange-700:#A33C07;

  --fondo:var(--ivory);
  --tinta:var(--teal-900);
  --tinta-media:#4A6C66;

  --fuente:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --gut:clamp(24px,5vw,80px);
  --seccion:clamp(64px,8vw,110px);
  --r:12px;                  /* el redondeo, leve, de cajas y tarjetas */
  --r-chico:8px;             /* botones y campos */
  --r-grande:16px;           /* la escena del hero */

  --out:cubic-bezier(.23,1,.32,1);
  --press:140ms; --fast:180ms; --base:240ms; --enter:460ms;
}

/* --- Base ---------------------------------------------------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}

body{
  background:var(--fondo);color:var(--tinta);
  font:400 17px/1.55 var(--fuente);overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none;padding:0}

h1,h2,h3{font-weight:700;letter-spacing:-0.022em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(30px,3.7vw,52px);letter-spacing:-0.02em;line-height:1.06}
h2{font-size:clamp(36px,4.3vw,64px)}
h3{font-size:clamp(27px,3vw,44px);letter-spacing:-0.02em}
p{max-width:66ch}

.nota,.detalle{font-size:15px;line-height:1.6;color:var(--tinta-media)}
.estrellas{display:inline-flex;gap:2px;vertical-align:-1px}
.estrellas svg{width:13px;height:13px}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid var(--orange);outline-offset:3px;
}

.skip{
  position:absolute;top:-120px;left:16px;z-index:1000;
  background:var(--teal);color:#fff;padding:12px 18px;text-decoration:none;
  transition:top var(--fast) var(--out);
}
.skip:focus{top:12px}
.trampa{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* --- Botones: rectángulo con la esquina cortada --------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:26px;
  background:var(--teal);color:var(--ivory);
  padding:17px 28px;min-height:56px;border:0;cursor:pointer;
  font-size:16px;font-weight:600;text-decoration:none;
  border-radius:var(--r-chico);
  transition:background-color var(--fast) ease,transform var(--press) var(--out);
}
.btn span{transition:transform var(--base) var(--out)}
.btn:active{transform:scale(.97)}
.btn-chico{min-height:46px;padding:12px 20px;font-size:14px;gap:14px}
.btn-claro{background:var(--ivory);color:var(--teal)}
.btn-ancho{width:100%;gap:0}

.link-plano{
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font-size:16px;font-weight:500;text-decoration:underline;text-underline-offset:5px;
  transition:color var(--fast) ease,transform var(--press) var(--out);
}
.link-plano:active{transform:scale(.98)}

@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--teal-800)}
  .btn-claro:hover{background:var(--ivory-200)}
  .btn:hover span{transform:translate(3px,-3px)}
  .link-plano:hover{color:var(--orange-700)}
  .bar nav a:hover{color:var(--orange-700)}
  summary:hover{color:var(--teal-800)}
  input:hover,select:hover,textarea:hover{border-color:var(--teal-800)}
}

/* --- Cabecera ------------------------------------------------- */
.bar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--gut);background:var(--fondo);
}
.brand img{height:36px;width:auto}
.bar nav{display:flex;gap:30px;margin-left:auto;margin-right:8px}
.bar nav a{font-size:15px;text-decoration:none;transition:color var(--fast) ease}
.bar nav a[aria-current=true]{color:var(--orange-700);font-weight:600}

/* --- Hero: copia a la izquierda, escena a la derecha ----------- */
.hero{
  display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center;
  margin:clamp(12px,2vw,28px) var(--gut) 0;
}
.hero-copia{padding:36px 0 48px}
.intro{font-size:15px;font-weight:600;margin-bottom:20px}
.hero h1{margin-bottom:24px}
.lead{font-size:clamp(17px,1.35vw,20px);max-width:52ch;margin-bottom:30px;color:var(--tinta-media)}
.hero-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-bottom:20px}

.escena{
  position:relative;align-self:stretch;overflow:hidden;
  background:var(--teal-050);padding:24px 24px 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:var(--r-grande);
}
.escena::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--teal-200);clip-path:polygon(66% 0,100% 0,100% 34%)}
/* El local, la dueña y el marcador de la marca */
.escena-local{position:relative;width:100%;max-width:440px;padding-top:26px}
.escena-local .local{width:100%;height:auto}
.escena-pin{
  position:absolute;top:-10px;left:50%;width:54px;height:auto;z-index:2;
  transform:translateX(-50%);
  animation:flota 4.5s ease-in-out infinite;
}

@keyframes flota{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-9px)}
}

.ficha{
  position:relative;margin-top:-18px;width:min(100%,370px);
  background:var(--ivory);padding:18px 20px;
  border-radius:var(--r);
}
.ficha-nombre{font-size:19px;font-weight:700;letter-spacing:-0.015em}
.ficha-cat{font-size:13px;color:var(--tinta-media);margin-top:3px}
.ficha-estrellas{font-size:13px;color:var(--tinta-media);margin-top:9px;display:flex;align-items:center;gap:7px}
.ficha-estrellas b{font-size:15px;color:var(--tinta)}
.ficha-acciones{display:flex;gap:8px;margin-top:13px}
.ficha-acciones span{font-size:13px;font-weight:500;padding:8px 14px;background:var(--teal-050)}
.ficha-acciones .es-wa{background:var(--teal);color:var(--ivory)}
.escena-pie{font-size:12px;color:var(--tinta-media);margin:12px 0 18px}

/* El probador, bajo la copia */

/* --- La calle: una cinta que se desplaza despacio --------------- */
.calle-barrio{
  position:relative;overflow:hidden;
  background:var(--teal-050);
  padding:clamp(28px,4vw,48px) 0 0;
  margin-top:clamp(24px,3vw,40px);
}
.calle-cinta{display:flex;width:max-content;animation:desfile 90s linear infinite}
/* Van dos copias de la fila: al correr media cinta, la segunda ya ocupa el lugar
   de la primera y el bucle no tiene costura. */
.calle-fila{
  display:flex;align-items:flex-end;gap:clamp(24px,3vw,56px);
  padding-left:clamp(24px,3vw,56px);
}
.calle-fila img{height:auto;display:block}
.calle-fila .l{width:clamp(130px,15vw,200px)}
.calle-fila .v{width:clamp(96px,11vw,150px)}
.calle-fila .p{width:clamp(56px,6.5vw,88px)}
.calle-vereda{height:clamp(18px,2.4vw,30px);background:var(--teal-100);position:relative;z-index:1}

@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){
  .calle-barrio:hover .calle-cinta{animation-play-state:paused}
}

/* --- Secciones ------------------------------------------------ */
.seccion{padding:var(--seccion) var(--gut)}

.titular-seccion{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  margin-bottom:46px;
}
.titular-seccion p{max-width:42ch;margin:0;color:var(--tinta-media)}

.dolor{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px)}
.dolor-lista p{margin-bottom:22px;max-width:55ch;color:var(--tinta-media)}
.dolor-lista strong{display:block;color:var(--tinta)}
.solucion{font-size:clamp(20px,1.8vw,24px);line-height:1.4;padding-top:14px;color:var(--tinta)!important}

/* --- Productos: filas a sangre, cada una con su color --------- */
.sistemas{padding-top:clamp(40px,5vw,60px)}
.producto{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;
  padding:clamp(32px,4vw,56px);margin-bottom:16px;background:var(--teal-050);
  border-radius:var(--r);
}
.producto::before,.producto::after{content:'';position:absolute;right:0;top:0;z-index:-1}
.producto::before{width:160px;height:125px;background:var(--teal-200);clip-path:polygon(0 0,100% 0,100% 100%)}
.producto::after{width:110px;height:90px;background:var(--teal-100);clip-path:polygon(0 0,100% 0,100% 100%)}
.p-reviews{background:var(--ivory-200)}
.p-reviews::before{background:var(--orange-400)}
.p-reviews::after{background:var(--orange)}
.p-connect{background:var(--teal);color:var(--ivory)}
.p-connect::before{background:var(--teal-800)}
.p-connect::after{background:var(--teal-900)}
.p-connect .detalle,.p-connect .producto-copia p{color:#D7E8DE}
.p-maps{background:var(--teal-100)}

.producto-nombre{
  display:flex;align-items:center;gap:12px;
  font-size:22px;font-weight:700;letter-spacing:-0.02em;margin-bottom:20px;
}
.producto-nombre::before{
  content:'';flex:none;width:13px;height:16px;background:var(--orange);
  clip-path:polygon(50% 0,100% 30%,100% 70%,50% 100%,0 70%,0 30%);
}
.p-connect .producto-nombre{color:var(--ivory)}
.producto h3{margin-bottom:18px}
.producto-copia > p{max-width:46ch;color:var(--tinta-media)}
.producto-copia .detalle{margin-top:14px}

/* Las maquetas ilustrativas */
.maqueta{
  background:var(--ivory);color:var(--tinta);overflow:hidden;
  border-radius:var(--r);
}
.demo-bar{display:flex;justify-content:space-between;gap:12px;padding:15px 22px;background:var(--teal);color:var(--ivory);font-size:13px}
.demo-site{padding:26px}
.demo-site p{font-size:14px;color:var(--tinta-media);margin-bottom:10px}
.demo-site strong{display:block;font-size:clamp(24px,2.3vw,32px);line-height:1.08;letter-spacing:-0.02em}
.demo-boton{display:inline-block;margin-top:20px;padding:11px 17px;background:var(--orange);color:var(--teal-900);font-size:13px;font-weight:600}
.demo-pie{margin:0;padding:12px 22px 16px;background:var(--teal-050);font-size:13px;color:var(--tinta-media)}
.demo-rotulo{padding:22px 22px 0;font-size:14px;color:var(--tinta-media)}
.mensaje{margin:18px 22px 10px;padding:18px;background:var(--teal-050);font-size:15px;
  border-radius:var(--r);border-bottom-left-radius:4px}
.accion-resena{margin:0 22px 18px;padding:12px;text-align:center;background:var(--teal);color:var(--ivory);font-size:14px;font-weight:600}
.fila{display:flex;justify-content:space-between;gap:12px;margin:0 22px;padding:16px 0;border-top:1px solid var(--teal-100);font-size:14px}
.fila:first-of-type{border-top:0}
.fila span{color:var(--tinta-media)}
.fila b{font-weight:600}
.maqueta .fila:last-of-type{margin-bottom:18px}
.mapa-calles{position:relative;height:210px;background:var(--teal-100);overflow:hidden}
.mapa-calles::before,.mapa-calles::after{content:'';position:absolute;inset:-70px 45%;width:26px;background:var(--ivory);transform:rotate(55deg)}
.mapa-calles::after{left:65%;width:20px;transform:rotate(-35deg)}
.mapa-pin{position:absolute;left:44%;top:22%;width:58px}
.mapa-perfil{padding:16px 22px}
.mapa-perfil strong{display:block;font-weight:600}
.mapa-perfil span{display:block;font-size:13px;color:var(--tinta-media);margin-top:2px}

/* --- Planes: banda teal con tres tarjetas --------------------- */
.planes{background:var(--teal);color:var(--ivory)}
.planes .titular-seccion p{color:#D7E8DE}
.planes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.plan{
  display:flex;flex-direction:column;padding:34px 30px;background:var(--teal-800);
  border-radius:var(--r);
}
.plan-destacado{background:var(--orange);color:var(--teal-900)}
.plan h3{font-size:24px;letter-spacing:-0.015em;margin-bottom:6px}
.plan-sello{display:inline-block;align-self:flex-start;margin-bottom:12px;padding:5px 11px;
  background:var(--teal-900);color:var(--orange);font-size:12px;font-weight:600}
.plan-claim{font-size:15px;margin-bottom:12px;min-height:3em;color:#D7E8DE}
.plan-destacado .plan-claim{color:var(--teal-900)}
.precio{font-size:clamp(36px,3.2vw,46px);font-weight:700;letter-spacing:-0.025em;line-height:1.1;margin-top:8px}
.precio span{font-size:16px;font-weight:400;letter-spacing:0;margin-left:5px}
.activacion{font-size:14px;margin-top:6px;color:#D7E8DE}
.plan-destacado .activacion{color:var(--teal-900)}
.plan ul{flex:1;padding:20px 0;font-size:15px}
.plan li{position:relative;padding-left:22px;margin-bottom:11px}
.plan li::before{content:'↗';position:absolute;left:0;top:0}
.bonus{
  display:inline-block;margin-left:7px;padding:2px 9px;border-radius:var(--r-pastilla);
  background:var(--orange);color:var(--teal-900);
  font-size:11px;font-weight:600;letter-spacing:0;vertical-align:1px;
}
.plan-destacado .bonus{background:var(--teal-900);color:var(--orange)}
.plan .btn{background:var(--ivory);color:var(--teal)}
.plan-destacado .btn{background:var(--teal-900);color:var(--ivory)}
.nota-precios{margin-top:26px;max-width:90ch;color:#D7E8DE}

/* --- Proceso --------------------------------------------------- */
.proceso{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px)}
.proceso h2{font-size:clamp(32px,3.4vw,52px)}
.pasos{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.pasos li{position:relative;padding-left:24px}
.pasos li::before{content:'';position:absolute;left:0;top:7px;width:10px;height:17px;background:var(--orange);
  clip-path:polygon(0 0,100% 40%,100% 100%,0 60%)}
.pasos h3{font-size:22px;letter-spacing:-0.015em;line-height:1.15;margin-bottom:8px}
.pasos p{font-size:15px;color:var(--tinta-media);margin:0}

/* --- Rubros ---------------------------------------------------- */
.rubros-sec{
  position:relative;isolation:isolate;background:var(--teal-050);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);
}
.rubros-sec::before{content:'';position:absolute;right:0;bottom:0;width:230px;height:190px;z-index:-1;
  background:var(--teal-200);clip-path:polygon(100% 0,100% 100%,0 100%)}
.rubros-fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.rubros-fichas li{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:18px 18px 20px;background:var(--ivory);border-radius:var(--r);
  transition:transform var(--base) var(--out);
}
.rubros-fichas img{width:100%;max-width:118px;height:86px;object-fit:contain;object-position:left bottom}
.rubros-fichas span{font-size:15px;font-weight:600;line-height:1.3}
@media (hover:hover) and (pointer:fine){
  .rubros-fichas li:hover{transform:translateY(-4px)}
}
.rubros-sec > div > p:first-child{color:var(--tinta-media)}

/* --- Preguntas -------------------------------------------------- */
.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,4vw,60px)}
details{
  margin-bottom:8px;padding:24px 28px;background:var(--teal-050);
  border-radius:var(--r);
  transition:background-color var(--base) ease;
}
details[open]{background:var(--teal-100)}
summary{position:relative;padding-right:34px;cursor:pointer;font-weight:600;font-size:17px;list-style:none;
  transition:color var(--fast) ease}
summary::-webkit-details-marker{display:none}
summary::after{content:'';position:absolute;right:2px;top:50%;width:14px;height:2px;background:currentColor;transform:translateY(-50%)}
summary::before{content:'';position:absolute;right:8px;top:50%;width:2px;height:14px;background:currentColor;
  transform:translateY(-50%);transition:transform var(--base) var(--out),opacity var(--fast) ease}
details[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
details p{margin-top:16px;font-size:16px;color:var(--tinta-media)}

/* --- Contacto ---------------------------------------------------- */
.contacto{
  position:relative;isolation:isolate;background:var(--ivory-200);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,70px);
}
.contacto::before,.contacto::after{content:'';position:absolute;left:0;top:0;z-index:-1}
.contacto::before{width:190px;height:150px;background:var(--orange);clip-path:polygon(0 0,100% 0,0 100%)}
.contacto::after{width:120px;height:95px;background:var(--orange-400);clip-path:polygon(0 0,100% 0,0 100%)}
.contacto-texto{position:relative}
.contacto-texto > p{max-width:36ch;color:var(--tinta-media);margin-bottom:20px}
.figura-contacto{width:150px;height:auto;margin-top:28px}

.par{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form label{display:block;font-size:14px;font-weight:500;margin-bottom:18px}
form input,form select,form textarea{
  display:block;width:100%;margin-top:7px;padding:13px 15px;min-height:50px;font-size:16px;
  background:var(--ivory);color:var(--tinta);border:1px solid var(--teal);border-radius:0;
  transition:border-color var(--fast) ease;
}
form textarea{resize:vertical;min-height:88px}
form [aria-invalid=true]{border-color:var(--orange-700);outline:2px solid var(--orange-700);outline-offset:-2px}
.field-error{display:block;margin-top:6px;font-size:13px;font-weight:600;color:var(--orange-700)}
.check{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;line-height:1.5;margin-bottom:14px}
.check input{flex:none;width:18px;height:18px;min-height:18px;margin-top:3px;accent-color:var(--teal)}
.check span{flex:1;min-width:0;color:var(--tinta-media)}
.check .field-error{flex-basis:100%;padding-left:28px}
.check input[aria-invalid=true]{outline:2px solid var(--orange-700);outline-offset:2px}
#form-status{font-size:16px;font-weight:600;margin-top:12px}
#download-request{display:inline-block;margin-top:10px}
#download-request[hidden]{display:none}

/* --- Confianza ---------------------------------------------------- */
.legal{
  display:block;max-width:var(--ancho);margin-inline:auto;text-align:center;
  padding-top:clamp(56px,6vw,88px);
}
.legal h2{margin-bottom:clamp(32px,4vw,48px)}
.legal-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);
  text-align:left;
}
.legal h3{font-size:18px;margin-bottom:8px}
.legal p{font-size:14px;color:var(--tinta-media)}
.legal-enlaces{margin-top:14px;font-weight:500}
.legal-enlaces a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.legal a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* --- Páginas de documento (privacidad, cookies, términos) -------- */
.doc{max-width:720px;margin:0 auto;padding:clamp(32px,5vw,56px) var(--gut) clamp(56px,7vw,96px)}
.doc-volver{margin-bottom:28px}
.doc-volver a{font-size:15px;font-weight:500;color:var(--teal);text-decoration:none}
.doc h1{font-size:clamp(30px,3.6vw,46px);margin-bottom:14px}
.doc-bajada{font-size:clamp(17px,1.3vw,19px);color:var(--tinta-media);margin-bottom:10px}
.doc-meta{font-size:13px;color:var(--tinta-media);margin-bottom:30px}

.doc-aviso{
  background:var(--ivory-200);border-radius:var(--r);
  padding:20px 22px;margin-bottom:34px;
}
.doc-aviso p{font-size:15px;max-width:none;margin:0}

.doc-indice{background:var(--banda);border-radius:var(--r);padding:22px 24px;margin-bottom:44px}
.doc-indice > p{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.doc-indice ol{counter-reset:paso;display:grid;gap:7px}
.doc-indice li{counter-increment:paso;font-size:15px}
.doc-indice li::before{content:counter(paso) '. ';color:var(--tinta-media)}
.doc-indice a{color:var(--tinta);text-decoration:none}

.doc section{margin-bottom:40px;scroll-margin-top:110px}
.doc h2{font-size:clamp(21px,1.9vw,26px);margin-bottom:12px}
.doc p{font-size:16px;color:var(--tinta-media);margin-bottom:12px;max-width:none}
.doc p strong{color:var(--tinta);font-weight:600}
.doc ul{list-style:disc;padding-left:22px;margin-bottom:12px}
.doc li{font-size:16px;color:var(--tinta-media);margin-bottom:7px}
.doc a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.doc-destacado{
  background:var(--teal-050);border-radius:var(--r);padding:16px 18px;
  font-weight:500;color:var(--tinta)!important;
}
@media (hover:hover) and (pointer:fine){
  .doc-volver a:hover,.doc-indice a:hover{color:var(--orange-700)}
}

/* --- Pie -------------------------------------------------------- */
footer{background:var(--teal-900);color:var(--ivory);padding:clamp(48px,6vw,76px) var(--gut) 26px}
.pie-top{
  display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(32px,5vw,64px);
  padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.14);
}
.pie-marca img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.pie-marca p{font-size:15px;color:#C6DBD4;margin:18px 0 22px;max-width:30ch}
.pie-marca .btn-claro{background:transparent;color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
@media (hover:hover) and (pointer:fine){
  .pie-marca .btn-claro:hover{background:rgba(255,255,255,.1)}
}
.pie-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pie-cols h4{font-size:15px;font-weight:700;letter-spacing:-0.005em;margin-bottom:14px}
.pie-cols li{margin-bottom:10px}
.pie-cols a{font-size:15px;color:#C6DBD4;text-decoration:none;transition:color var(--fast) ease}
@media (hover:hover) and (pointer:fine){.pie-cols a:hover{color:var(--orange-400)}}
.pie-fin{
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  margin-top:22px;font-size:13px;color:#A9C6BE;
}

/* --- Movimiento ------------------------------------------------------ */
.js [data-entra]{opacity:0;transform:translateY(18px)}
.js [data-entra].vive{
  opacity:1;transform:none;
  transition:opacity var(--enter) var(--out),transform var(--enter) var(--out);
  transition-delay:0ms;
}
/* Escalonado de las entradas. Por clases y no por un style= escrito desde JS:
   la Content-Security-Policy del sitio no permite estilos en línea. */
.js [data-entra].d1{transition-delay:70ms}
.js [data-entra].d2{transition-delay:140ms}
.js [data-entra].d3{transition-delay:210ms}
.js [data-entra].d4{transition-delay:280ms}
.js [data-entra].d5{transition-delay:350ms}

/* El hero no se anima: se ve apenas carga, sin depender del script. */
.calle-pin{transition:transform 600ms var(--out)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js [data-entra]{transform:none}
  .js [data-entra].vive{transition:opacity 200ms linear!important}
  .btn:active,.link-plano:active{transform:none}
  .calle-cinta{animation:none}
  .escena-pin{animation:none;transform:translateX(-50%)}
}

/* --- Adaptación -------------------------------------------------------- */
@media(max-width:1080px){
  .hero{grid-template-columns:1fr;gap:0}
  .escena{margin-right:calc(-1 * var(--gut))}
  .producto,.dolor,.proceso,.rubros-sec,.contacto,.faq,.pie-top{grid-template-columns:1fr;gap:28px}
  .legal-grid{grid-template-columns:1fr;gap:26px}
  .legal{text-align:left}
  .planes-grid{grid-template-columns:1fr;max-width:560px}
  .plan-claim{min-height:0}
  .pasos{grid-template-columns:1fr;gap:20px}
}

@media(max-width:700px){
  /* El aire del botón hace saltar de línea etiquetas largas en pantallas
     angostas; aquí la flecha va pegada al texto. */
  .btn{gap:14px;padding:16px 22px}

  html{scroll-padding-top:150px}
  .bar{flex-wrap:wrap;gap:12px 16px;padding:14px var(--gut)}
  .brand{order:1}
  .bar .btn{order:2;margin-left:auto}
  .bar nav{order:3;width:100%;margin:0;gap:18px;overflow-x:auto;scrollbar-width:none}
  .bar nav::-webkit-scrollbar{display:none}
  .bar nav a{white-space:nowrap}
  /* La fila de enlaces se desliza: el desvanecido del borde avisa que sigue. */
  .bar nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
           mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .brand img{height:30px}
  .hero{margin-inline:var(--gut)}
  .hero-copia{padding:22px 0 28px}
  .escena{margin-inline:calc(-1 * var(--gut))}
  .titular-seccion{display:block}
  .titular-seccion h2{margin-bottom:20px}
  .producto{padding:30px 22px}
  .producto::before{width:90px;height:75px}
  .producto::after{width:65px;height:55px}
  .rubros-fichas{grid-template-columns:1fr 1fr;gap:10px}
  .rubros-fichas img{max-width:88px;height:64px}
  .par{grid-template-columns:1fr;gap:0}
  .pie-top{grid-template-columns:1fr}
  .pie-cols{grid-template-columns:1fr 1fr}
}