/*
  MARCA V2 (7-nov, C3-03; guía en aiatech-web/.docs/plans/2026-11-05-marca-v2): petróleo #173E45, marfil, grafito,
  cobre de acento y el cian SOLO en el logo. Fuentes: la familia «Marca» de abajo sirve Inter 400 hasta el peso 500 e
  IBM Plex Sans 600 del 600 en adelante, así cada título, botón y negrita toma Plex sin tocar sus selectores. Los
  nombres de las variables de abajo son los de siempre; cambian sus valores. (Antes: Host Grotesk y petróleo #007785.)

  La landing de la versión web (web/landing.html). Viene de la landing de la demo (ya borrada; en git hasta
  f5b3873), solo lo que usa la landing. Todo sale de aiatech-web: tokens.css (valores) y design-system.md (Host
  Grotesk sola, h1 a 600, rótulo 13 px, botón 4 px, petróleo en las zonas oscuras, papel en las claras).
  Las piezas añadidas el 29-oct van al final: botón flotante, entrada de las secciones y la oferta.
*/
@font-face{font-family:"Marca";src:url("fonts/inter-400.woff2") format("woff2");font-weight:100 500;font-display:swap;unicode-range:U+0020-007E,U+00A0-00BF,U+00C1,U+00C9,U+00CD,U+00D1,U+00D3,U+00DA,U+00DC,U+00E1,U+00E9,U+00ED,U+00F1,U+00F3,U+00FA,U+00FC,U+2013-2014,U+2018-201D,U+2022,U+2026,U+20AC}
@font-face{font-family:"Marca";src:url("fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600 900;font-display:swap;unicode-range:U+0020-007E,U+00A0-00BF,U+00C1,U+00C9,U+00CD,U+00D1,U+00D3,U+00DA,U+00DC,U+00E1,U+00E9,U+00ED,U+00F1,U+00F3,U+00FA,U+00FC,U+2013-2014,U+2018-201D,U+2022,U+2026,U+20AC}
@font-face{font-family:"Marca Respaldo";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:107%}
:root{
  /* marca v2: --cian es ya el ACENTO (cobre) de los gráficos; el cian de verdad, solo en el logo (--cian-logo) */
  --tinta:#26292D;--tinta-suave:#4A4F57;--petroleo:#173E45;--petroleo-osc:#0F2C31;--cian:#B56C45;--cian-logo:#00D8FF;
  --papel:#F2EFE8;--cian-piel:#EFE6DC;--linea:#DDD7CB;--borde-campo:#857E72;--blanco:#FFFFFF;
  --cian-claro:#F2EFE8;--hover-claro:#F7F4EE;--gris-linea:#EBE6DC;--gris-quieto:#CFC8BA;
  --aviso-fondo:#FFF4CC;--exito:#14532D;--exito-fondo:#E3F4EA;--aviso-texto:#5A4500;--aviso-borde:#B58B00;--error:#B42318;
  --wa-fondo:#EFEAE2;--wa-gris:#54656f;--wa-texto:#111B21;
  /* nombres de aiatech-web/tokens.css: el sprite del móvil (sprite-tel.js) los usa tal cual */
  --color-blanco:#FFFFFF;--color-mock-av-fondo:#DFE5E7;--mock-canto:#2A2E35;--mock-negro:#0B0C0E;--wa-check:#53BDEB;--wa-sep:#E9EDEF;--cuerda:#C9BFA4;--wa-saliente:#D9FDD3;--wa-verde:#1DAA61;
  --blanco-16:rgb(255 255 255/.16);--blanco-75:rgb(255 255 255/.9);
  --sombra-cajon:0 14px 24px rgb(31 36 48/.1);--sombra-flotante:0 16px 40px rgb(31 36 48/.2);
  --font:"Marca","Marca Respaldo",system-ui,sans-serif;
  --ease-salida:cubic-bezier(.2,.7,.2,1);--ease-cambio:cubic-bezier(.65,0,.35,1);--ease-asienta:cubic-bezier(.3,1.5,.5,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:400 17px/1.6 var(--font);color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--petroleo);outline-offset:3px}
.oscuro :focus-visible{outline-color:var(--papel)}
.proto{background:var(--aviso-fondo);color:var(--aviso-texto);border-bottom:1px solid var(--aviso-borde);font-size:14px;line-height:1.4;text-align:center;padding:6px 16px}

/* ---------- Piezas comunes ---------- */
.oscuro{position:relative;isolation:isolate;overflow:hidden;background:var(--petroleo);color:var(--blanco)}
/* La marca de agua de la portada de la web: el símbolo, enorme y casi invisible */
.oscuro::before{content:"";position:absolute;right:-150px;top:30px;width:380px;height:400px;z-index:-1;pointer-events:none;background:var(--blanco);opacity:.045;-webkit-mask:url(marca/aiatech-simbolo.svg) center/contain no-repeat;mask:url(marca/aiatech-simbolo.svg) center/contain no-repeat}

.cab{display:flex;align-items:center;gap:12px;min-height:68px}
.cab .logo{width:34px;height:36px;color:var(--petroleo);flex:none}
.oscuro .cab .logo{color:var(--cian-logo)}
.cab .nombre{display:flex;flex-direction:column;line-height:1.15}
.cab .nombre b{font-size:17px;font-weight:700;letter-spacing:.01em}
.cab .nombre small{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.cab .atras{margin-left:auto;background:none;border:0;color:var(--petroleo);font-weight:600;font-size:16px;padding:10px 4px;cursor:pointer}
.oscuro .cab .atras{color:var(--blanco)}

.rot{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--petroleo);margin:0 0 12px}
.oscuro .rot{color:var(--blanco)}
h1,h2{margin:0;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
/* El contraste de peso de la web («sin tener que contestar usted»): la segunda voz va en 300 */
.ligero{font-weight:300}

.b1{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;border:0;border-radius:4px;background:var(--petroleo);color:var(--blanco);font:600 17px/1 var(--font);cursor:pointer;text-decoration:none;transition:transform .25s var(--ease-salida),box-shadow .25s var(--ease-cambio),opacity .2s}
.b1:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgb(15 44 49/.3)}
.b1:disabled{background:rgb(23 62 69/.42);cursor:not-allowed;transform:none;box-shadow:none}
.b1 svg{width:18px;height:18px;flex:none;transition:transform .25s var(--ease-cambio)}
.b1:hover svg{transform:translateX(4px)}
.oscuro .b1{background:var(--blanco);color:var(--petroleo)}
.oscuro .b1:hover{background:var(--hover-claro);box-shadow:0 12px 26px rgb(12 35 40/.35)}
/* Secundario: texto con subrayado (design-system §7) */
.b2{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 6px;background:none;border:0;font:600 17px/1 var(--font);color:var(--petroleo);text-decoration:none;cursor:pointer;justify-self:center}
.b2::after{content:"";position:absolute;left:6px;right:6px;bottom:12px;height:2px;background:currentColor;transform-origin:left;transition:transform .35s var(--ease-salida)}
.b2:hover::after{transform:scaleX(.6)}
.oscuro .b2{color:var(--blanco)}
.nota{font-size:14px;line-height:1.5;margin:10px 0 0;text-align:center;color:var(--tinta-suave)}
.oscuro .nota{color:var(--blanco-75)}

/* ---------- Calculadora: cada pantalla cabe entera (Aoshi, 19-oct: «todo at a glance») ---------- */
.calc{max-width:600px;margin:0 auto;min-height:calc(100dvh - 34px);display:flex;flex-direction:column}
.pantalla{flex:1;display:flex;flex-direction:column;padding:0 16px;animation:entra .4s var(--ease-salida) both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cab.mini{height:56px}
.cab.mini .logo{width:28px;height:30px}
.cab.mini .nombre b{font-size:15px}
/* Abajo, siempre a la vista: lo último anotado y el botón */
.dock{position:sticky;bottom:0;margin:auto -16px 0;padding:10px 16px calc(14px + env(safe-area-inset-bottom));background:var(--papel);border-top:1px solid var(--linea);z-index:2}
.anotado{display:flex;align-items:center;gap:10px;min-height:24px;margin:0 0 10px;font-size:15px;line-height:1.35;color:var(--tinta-suave)}
.anotado .marca{flex:none;width:22px;height:22px;border-radius:50%;background:var(--cian-piel);color:var(--petroleo);display:grid;place-items:center}
.anotado .marca svg{width:13px;height:13px}
.anotado b{color:var(--tinta);font-weight:600}
.anotado.nuevo{animation:anota .7s var(--ease-salida) both}
@keyframes anota{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Portada: primera pantalla en petróleo a sangre (portada B de la web) */
body.a-sangre{background:var(--petroleo)}
.portada h1{font-size:34px;line-height:1.06;margin-top:14px}
.portada .lead{font-size:17px;line-height:1.5;margin:12px 0 0;color:var(--blanco-75)}
.portada .dock{background:var(--petroleo);border-top:0;margin-top:0;position:static}
.portada .centro{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:8px}
/* Lo que el dueño vio anoche en su teléfono: mensajes sin responder (la escena del dolor) */
.anoche{margin:22px 0 18px;border-radius:16px;padding:12px 12px 10px;background-color:var(--wa-fondo);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.055' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='16' cy='18' r='7'/%3E%3Cpath d='M58 10h14v10H58zM62 20v5M68 20v5'/%3E%3Cpath d='M20 60l6-10 6 10z'/%3E%3Ccircle cx='70' cy='62' r='4'/%3E%3Ccircle cx='70' cy='62' r='9'/%3E%3Cpath d='M40 84c4-6 12-6 16 0M84 34l6 6M90 34l-6 6M8 86h8'/%3E%3C/g%3E%3C/svg%3E");color:var(--wa-texto);box-shadow:var(--sombra-flotante)}
.anoche .dia{display:table;margin:0 auto 10px;background:var(--blanco);color:var(--wa-gris);font-size:13px;font-weight:600;border-radius:8px;padding:2px 10px}
.burbuja{position:relative;max-width:88%;width:fit-content;background:var(--blanco);color:var(--wa-texto);border-radius:0 10px 10px 10px;padding:7px 10px 5px;margin:0 0 6px;font-size:15.5px;line-height:1.35;box-shadow:0 1px 1px rgb(11 20 26/.1);animation:llega .45s var(--ease-asienta) both}
.anoche .burbuja:nth-of-type(2){animation-delay:.5s;border-radius:10px}
@keyframes llega{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.burbuja time{display:block;text-align:right;font-size:13px;color:var(--wa-gris);margin-top:1px}
.anoche .sin{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;font-size:14px;font-weight:600;color:var(--tinta-suave);animation:llega .45s var(--ease-salida) 1.1s both}
.anoche .sin svg{width:16px;height:16px;flex:none}

/* Preguntas */
.progreso{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:0 0 18px}
.progreso i{height:4px;border-radius:4px;background:var(--linea);position:relative;overflow:hidden}
.progreso i::after{content:"";position:absolute;inset:0;background:var(--petroleo);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-cambio)}
.progreso i.hecho::after{transform:scaleX(1)}
.pantalla .rot{margin-bottom:8px}
.pantalla h2{font-size:24px;line-height:1.18}
.ayuda{color:var(--tinta-suave);margin:8px 0 0;font-size:15.5px;line-height:1.45}
.opciones{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.opciones button{height:52px;border:1.5px solid var(--linea);border-radius:4px;background:var(--blanco);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .2s var(--ease-asienta)}
.opciones button:hover{border-color:var(--petroleo)}
.opciones button:active{transform:scale(.95)}
.opciones button[aria-pressed=true]{background:var(--petroleo);border-color:var(--petroleo);color:var(--blanco)}
.opciones button.otro{font-weight:500;color:var(--petroleo)}
.opciones button.otro[aria-pressed=true]{color:var(--blanco)}
.campo{margin-top:10px;display:flex;align-items:center;gap:10px;border:1.5px solid var(--borde-campo);border-radius:4px;background:var(--blanco);padding:0 16px;height:56px}
.campo[hidden],.b2[hidden]{display:none}
.campo:focus-within{border-color:var(--petroleo);box-shadow:0 0 0 4px rgb(23 62 69/.2)}
.campo span{font-size:22px;font-weight:600;color:var(--petroleo)}
.campo input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.campo small{color:var(--tinta-suave);font-size:15px;white-space:nowrap}
.error{color:var(--error);font-size:14px;margin:6px 0 0;min-height:1.3em}

/* De cada 10: dos filas bajas */
.diez{margin-top:20px}
.diez .gente{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.diez .gente button{position:relative;height:52px;border:1.5px solid var(--linea);border-radius:10px;background:var(--blanco);cursor:pointer;display:grid;place-items:center;transition:background .15s var(--ease-cambio),border-color .15s var(--ease-cambio)}
.diez .gente button:hover{border-color:var(--petroleo)}
.diez .gente button>svg{height:26px;width:auto;color:var(--gris-quieto);transition:color .15s}
.diez .gente button.on{background:var(--petroleo);border-color:var(--petroleo);animation:salta .34s var(--ease-asienta) calc(var(--i)*28ms) both}
.diez .gente button.on>svg{color:var(--blanco)}
@keyframes salta{from{transform:scale(.88)}to{transform:none}}
.diez .gente .chapa{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--cian);color:var(--tinta);display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s var(--ease-asienta)}
.diez .gente .chapa svg{width:12px;height:12px}
.diez .gente button.on .chapa{opacity:1;transform:none;transition-delay:calc(var(--i)*28ms + 100ms)}
.diez .lectura{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.diez .lectura b{font-size:18px;font-weight:600;line-height:1.3}
/* Las que ya contó en otra respuesta (De cada 10: F + V + K no pasan de 10), apagadas */
.diez .gente button.fuera{opacity:.35;cursor:not-allowed;border-style:dashed}
.diez .gente button.fuera:hover{border-color:var(--linea)}
.diez .ninguno{flex:none;height:40px;padding:0 14px;border:1.5px solid var(--linea);border-radius:4px;background:var(--blanco);color:var(--tinta);font-weight:600;font-size:15px;cursor:pointer}
.diez .ninguno[aria-pressed=true]{background:var(--petroleo);border-color:var(--petroleo);color:var(--blanco)}

/* Resultado: una pantalla */
.res{margin:0 -16px;padding:0 16px 22px;border-radius:0 0 24px 24px}
.res .rot{margin-bottom:4px}
.res .grande{font-size:76px;line-height:.95;font-weight:700;letter-spacing:-.04em;margin:0 0 8px;font-variant-numeric:tabular-nums}
.res .grande.largo{font-size:40px;line-height:1.08;font-weight:600}
.res .grande small{font-size:.45em;font-weight:600;color:var(--papel);margin-left:6px;letter-spacing:0}
.res .de{font-size:19px;line-height:1.25;margin:0;letter-spacing:-.01em}
.gastos{margin-top:18px}
.gastos .tubo{position:relative;height:12px;border-radius:6px;background:var(--blanco-16);overflow:hidden}
.gastos .tubo i{position:absolute;inset:0 auto 0 0;width:0;background:var(--cian);border-radius:6px;transition:width 1.2s var(--ease-salida) .25s}
.gastos.sin-tubo .tubo{display:none}
.gastos.sin-tubo .pie{margin-top:0}
.gastos .pie{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:14.5px;color:var(--blanco-75)}
.gastos .pie strong{color:var(--blanco);font-weight:600;font-variant-numeric:tabular-nums}
/* De cada 10, en el resultado: quién compra, quién se queda en «te aviso» (cian: lo que se pierde,
   como el trozo de la barra de gastos) y quién se va tras el precio */
.embudo{margin-top:16px}
.embudo .fila{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.embudo .fila span{display:grid;place-items:center}
.embudo .fila svg{width:100%;max-width:24px;height:24px}
.embudo .compra{color:var(--blanco)}
.embudo .aviso{color:var(--papel)}
.embudo .fue{color:rgb(255 255 255/.45)}
.embudo .otro{color:var(--blanco-16)}
.embudo .ley{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:14px;color:var(--blanco-75)}
.embudo .ley span{display:flex;align-items:center;gap:6px;color:var(--blanco-75)}
.embudo .ley i{width:9px;height:9px;border-radius:50%;background:currentColor}
.embudo .ley .compra i{background:var(--blanco)}
.embudo .ley .aviso i{background:var(--cian)}
.embudo .ley .fue i{background:rgb(255 255 255/.45)}
.causas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.causas.una{grid-template-columns:1fr}
/* Cada causa: qué la provoca, cuánto, a cuántos, y qué parte del total es */
.causa{display:flex;flex-direction:column;gap:4px;background:var(--blanco);border:1px solid var(--linea);border-radius:16px;padding:12px 14px 14px}
.causa .que{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;line-height:1.25;color:var(--tinta-suave);margin-bottom:4px}
.causa .ico{flex:none;width:28px;height:28px;border-radius:8px;background:var(--cian-piel);color:var(--petroleo);display:grid;place-items:center}
.causa .ico svg{width:16px;height:16px}
.causa b{font-size:26px;font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.causa p{margin:0;color:var(--tinta-suave);font-size:14px;line-height:1.35}
.causa p em{font-style:normal;color:var(--petroleo-osc);font-weight:600}
.causa .parte{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--tinta-suave);font-variant-numeric:tabular-nums}
.causa .parte i{flex:1;height:6px;border-radius:3px;background:var(--cian-piel);overflow:hidden;position:relative}
.causa .parte i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--parte,0%);background:var(--petroleo);border-radius:3px;transition:width .9s var(--ease-salida) .5s}
/* Cuando una causa no le cuesta nada, se dice en positivo (nada de «$0») */
.causa.cero .ico{background:var(--exito-fondo);color:var(--exito)}
.causa.cero b{font-size:19px;color:var(--exito);line-height:1.2;letter-spacing:0}
.aviso-res{margin:10px 0 0;background:var(--aviso-fondo);border:1px solid var(--aviso-borde);color:var(--aviso-texto);border-radius:12px;padding:9px 12px;font-size:14px;line-height:1.4}
.aviso-res button{background:none;border:0;padding:0;color:inherit;font-weight:700;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.res .bien{font-size:26px;line-height:1.15;margin:4px 0 8px}
.como{margin-top:12px;border-top:1px solid var(--linea)}
.como summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-weight:600;font-size:15.5px;color:var(--petroleo);cursor:pointer;list-style:none}
.como summary::-webkit-details-marker{display:none}
.como summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease-cambio)}
.como[open] summary::after{transform:rotate(-135deg)}
.como .dentro{display:grid;gap:10px;padding-bottom:12px}
.hoja{background:var(--blanco);border-radius:12px;border:1px solid var(--linea);overflow:hidden}
.hoja .fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 14px;border-top:1px solid var(--gris-linea);font-size:15px}
.hoja .fila:first-child{border-top:0}
.hoja .fila span{color:var(--tinta-suave)}
.hoja .fila b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.realidad{border:1.5px dashed var(--borde-campo);border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.5;color:var(--tinta-suave)}
.realidad p{margin:0}
.realidad b{color:var(--tinta);font-weight:600}
.realidad button{background:none;border:0;padding:0;margin-top:6px;color:var(--petroleo);font-weight:600;font-size:15px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
.supuesto{background:var(--aviso-fondo);border:1px solid var(--aviso-borde);color:var(--aviso-texto);border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.5}
.supuesto p{margin:0}
.supuesto button.cambiar{background:none;border:0;padding:0;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.supuesto .diez .gente button{border-color:var(--aviso-borde)}
.supuesto .diez .gente button.on{background:var(--aviso-texto);border-color:var(--aviso-texto)}
.supuesto .diez .chapa{display:none}
.dock .fila-cta{display:flex;align-items:center;gap:6px}
.dock .fila-cta .b1{flex:1}
.dock .fila-cta .b2{flex:none;font-size:15px;height:48px}

/* ---------- Landing: el hero ---------- */
.hero{padding:0 16px 40px}
.hero .dentro{max-width:1120px;margin:0 auto}
.hero .texto{max-width:620px}
.hero h1{font-size:36px;line-height:1.06;margin-top:26px}
.hero .lead{font-size:18px;line-height:1.55;color:var(--blanco-75);margin:18px 0 0;max-width:28em}
.hero .ctas{display:grid;gap:4px;margin-top:28px}
/* El producto haciendo justo lo que le faltaba: el mensaje de anoche, y el repuesto anotado solo */
.prueba{margin:36px 0 0;display:grid;gap:12px}
.prueba .burbuja{max-width:92%;animation-delay:.3s}
.prueba .rot{margin:0}
.prueba .flecha{justify-self:center;width:22px;height:22px;color:var(--cian-claro)}
.ficha{background:var(--blanco);color:var(--tinta);border-radius:12px;box-shadow:var(--sombra-flotante);overflow:hidden;animation:llega .5s var(--ease-asienta) .8s both}
.ficha .tit{display:flex;align-items:center;gap:8px;padding:11px 14px;font-weight:600;font-size:15.5px;border-bottom:1px solid var(--gris-linea)}
.ficha .tit svg{width:18px;height:18px;color:var(--petroleo);flex:none}
.ficha .fila{display:grid;grid-template-columns:96px 1fr;gap:8px;padding:9px 14px;border-top:1px solid var(--gris-linea);font-size:15.5px}
.ficha .tit+.fila{border-top:0}
.ficha .fila span{color:var(--tinta-suave)}
.ficha .fila b{font-weight:600}
.resto{max-width:720px;margin:0 auto;padding:28px 16px 48px;color:var(--tinta-suave)}
.resto ol{margin:10px 0 0;padding-left:22px}
.resto a{color:var(--petroleo);font-weight:600}

@media (min-width:760px){
  .pantalla{padding:0 24px}
  .dock{margin:auto -24px 0;padding:12px 24px 18px}
  .res{margin:0 -24px;padding:0 24px 26px}
  .pantalla h2{font-size:30px}
  .portada h1{font-size:44px}
  .hero{padding:0 40px 64px}
  .hero .dentro{display:grid;grid-template-columns:1.15fr .85fr;column-gap:56px;align-items:center}
  .hero .cab{grid-column:1/-1}
  .hero h1{font-size:58px;line-height:1.04;letter-spacing:-.03em}
  .hero .lead{font-size:20px}
  .hero .ctas{grid-template-columns:auto auto;justify-content:start;align-items:center;gap:22px}
  .hero .b1{width:auto;padding:0 30px}
  .hero .ctas .nota{grid-column:1/-1;text-align:left;margin-top:0}
  .prueba{margin-top:0}
  .oscuro::before{width:620px;height:650px;right:-170px;top:-60px}
}
/* Teléfonos bajos (≈ 640 px útiles): que todo siga cabiendo sin bajar */
@media (max-height:680px){
  .cab.mini{height:50px}
  .portada .cab{height:58px}
  .portada h1{font-size:30px;margin-top:8px}
  .portada .lead{font-size:16px;margin-top:8px}
  .anoche{margin:14px 0 12px}
  .burbuja{font-size:15px}
  .pantalla h2{font-size:22px}
  .progreso{margin-bottom:14px}
  .res .grande{font-size:62px}
  .res .de{font-size:17px}
  .gastos{margin-top:14px}
  .causas{margin-top:12px}
  .causa{padding:10px 12px 12px}
  .causa b{font-size:22px}
  /* tres mensajes en la portada (De cada 10): la hora va en la misma línea */
  .anoche.tres .burbuja time{display:inline;margin-left:10px}
  .embudo{margin-top:10px}
  .embudo .ley{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* =====================================================================================
   LANDING COMPLETA (v5): un hero por lead magnet y las secciones del documento de Gustavo,
   en el orden en que las lee el cliente (reconocimiento → consideración → decisión).
   ===================================================================================== */
/* Burbujas que salen (las del asistente), verdes como en WhatsApp */
.burbuja.sale{margin-left:auto;background:#D9FDD3;border-radius:10px 0 10px 10px}
.burbuja .quien{display:block;font-size:13px;font-weight:700;color:var(--petroleo);margin-bottom:2px}
.prueba .chat{display:grid;gap:6px;background-color:var(--wa-fondo);border-radius:16px;padding:12px;box-shadow:var(--sombra-flotante)}
/* El dibujo del hero cuenta el desenlace (29-oct): cada pieza entra a su tiempo (--d, desde landing.js),
   la etiqueta dice lo rápido que respondió y la tarjeta del logro se monta sobre el chat al final. */
.prueba .chat{padding-bottom:40px}
/* El dibujo del hero directo viene escrito en landing.html (Bruno W5): sus retrasos, aquí; los de los
   heros con origen los pone landing.js en línea, que manda sobre estos. */
.prueba .chat>:nth-child(1){--d:.2s}.prueba .chat>:nth-child(2){--d:.75s}.prueba .chat>:nth-child(3){--d:1.3s}.prueba .chat>:nth-child(4){--d:1.85s}.prueba .logro{--d:2.4s}
.prueba .chat .burbuja{margin:0;animation:llega .45s var(--ease-asienta) var(--d,0s) both}
.prueba .rapido{justify-self:end;display:inline-flex;align-items:center;gap:5px;margin:-2px 0 2px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--petroleo);color:var(--blanco);font-size:12.5px;font-weight:700;animation:llega .4s var(--ease-asienta) var(--d,0s) both}
.prueba .rapido svg{width:13px;height:13px;color:var(--cian)}
.prueba .logro{position:relative;margin:-34px 14px 0 28px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--blanco);color:var(--tinta);box-shadow:var(--sombra-flotante);animation:asienta .6s var(--ease-asienta) var(--d,0s) both}
.prueba .logro .ico{grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--petroleo);color:var(--blanco)}
.prueba .logro .ico svg{width:20px;height:20px}
.prueba .logro b{font-size:16px;font-weight:700;line-height:1.2}
.prueba .logro span:last-child{font-size:14px;color:var(--tinta-suave);line-height:1.35}
@keyframes asienta{from{opacity:0;transform:translateY(14px) rotate(-2deg) scale(.96)}to{opacity:1;transform:rotate(-1deg)}}
.prueba .chat .dia{justify-self:center;background:var(--blanco);color:var(--wa-gris);font-size:13px;font-weight:600;border-radius:8px;padding:2px 10px}

/* Capítulos claros debajo del hero, con la esquina redondeada de la web montando sobre el anterior */
.cap{position:relative;margin-top:-24px;padding:48px 16px 56px;border-radius:24px 24px 0 0;background:var(--blanco)}
.cap.papel{background:var(--papel)}
.cap .dentro{max-width:1120px;margin:0 auto}
.cap h2{font-size:30px;line-height:1.08;max-width:18em}
.cap .intro{font-size:17px;line-height:1.55;color:var(--tinta-suave);margin:12px 0 0;max-width:34em}
.pendiente{display:inline-block;background:var(--aviso-fondo);color:var(--aviso-texto);border:1px dashed var(--aviso-borde);border-radius:6px;padding:1px 8px;font-size:13px;font-weight:700;letter-spacing:.02em}

/* 2 · ¿Le pasa esto? (variante A del boceto, Aoshi 19-oct): cada frase con su escena, como «¿Por qué
   somos diferentes?» de aiatech-web (Diferentes.astro): tarjeta blanca sobre papel, radio 20, borde línea,
   el dibujo arriba y abajo su número o lo que hace el asistente. En el móvil se deslizan de lado, como
   las etiquetas de «Preguntas» de la web. */
.dolores{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:28px -16px 0;padding:4px 16px 8px;scrollbar-width:none}
.dolores::-webkit-scrollbar{display:none}
.dolores .cf{flex:0 0 86%;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:20px;padding:22px 20px 24px}
.dolores .viz{position:relative;height:196px;margin-bottom:20px}
.dolores .cf-h{margin:0;min-height:3.9em;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.01em;text-indent:-.55em;padding-left:.55em}
.dolores .q{color:var(--petroleo);font-weight:700}
.dolores .med{padding-top:16px}
.dolores .corte{border-top:2px dashed var(--linea);margin:0 -20px 14px}
.dolores .num{margin:0;font-size:44px;line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.dolores .lab{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--tinta-suave)}
.dolores .quien{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--petroleo)}
.dolores .quien+.hace{margin-top:4px}
.dolores .hace{margin:0;font-size:17px;line-height:1.45;font-weight:500;color:var(--tinta)}
#s-pasa .desliza{margin:10px 0 0;font-size:14px;color:var(--tinta-suave)}
/* Las escenas: maquetas pequeñas con los colores de maqueta de la web (--color-mock-*) */
.esc{position:absolute;inset:0;font-size:14px;color:var(--wa-texto)}
.esc .wa-l{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--wa-sep)}
.esc .wa-l .f{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--blanco);border-bottom:1px solid var(--wa-sep)}
.esc .wa-l .f:last-child{border-bottom:0}
.esc .wa-l .av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--color-mock-av-fondo);display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--wa-gris)}
.esc .wa-l .tx{flex:1;min-width:0}
.esc .wa-l .tx b{display:block;font-weight:600}
.esc .wa-l .tx span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--wa-gris)}
.esc .wa-l .hr{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:.85em;color:#128C4A}
.esc .wa-l .hr i{display:inline-flex;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--wa-verde);color:var(--blanco);font-style:normal;font-weight:700;font-size:.85em;align-items:center;justify-content:center}
.esc .wa-l .f.ido{background:#FBFAF7}
.esc .wa-l .f.ido .tx span{color:var(--tinta)}
.esc .wa-l .f.ido .hr{color:var(--wa-gris)}
.esc .lib{border-radius:12px;background:var(--papel);padding:10px 12px}
.esc .lib .t{margin:0 0 6px;font-size:.85em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.esc .lib .f{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--cuerda)}
.esc .lib .f .r{flex:1;min-width:0;line-height:1.25}
.esc .lib .f b{display:block;font-weight:600}
.esc .lib .f .r span{display:block;color:var(--tinta-suave)}
.esc .lib .f em{flex:none;white-space:nowrap;font-style:normal;font-size:.85em;font-weight:700;color:var(--tinta-suave);background:var(--blanco);border-radius:4px;padding:1px 6px}
.esc .lib .p{margin:7px 0 0;font-weight:600;color:var(--tinta-suave)}
.esc .barras{display:flex;flex-direction:column;gap:14px;padding-top:24px}
.esc .barras .et{display:flex;justify-content:space-between;font-weight:600;margin-bottom:5px}
.esc .barras .et span{color:var(--tinta-suave);font-weight:500}
.esc .barras .b{height:30px;border-radius:6px;background:var(--linea);position:relative;overflow:hidden}
.esc .barras .b i{position:absolute;inset:0 auto 0 0;background:var(--petroleo);border-radius:6px}
.esc .barras .b i.g{background:var(--tinta-suave)}
.esc .solo{display:flex;align-items:center;gap:16px;height:100%}
.esc .solo .qs{flex:1;display:flex;flex-direction:column;gap:7px}
.esc .solo .qs span{background:var(--wa-fondo);border-radius:0 9px 9px 9px;padding:6px 9px;box-shadow:0 1px .5px rgb(11 20 26/.13)}
.esc .solo svg.fl{flex:none;width:22px;align-self:stretch;height:auto;overflow:visible;color:var(--cuerda)}
.esc .solo .yo{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:600;padding-top:1.6em}
.esc .solo .yo i{width:56px;height:56px;border-radius:50%;background:var(--tinta);display:grid;place-items:center}
.esc .solo .yo i svg{width:30px;height:34px;color:#C8CDD6}
.esc .diez{margin-top:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px 6px;padding-top:6px}
.esc .diez svg{width:100%;height:46px;color:var(--linea)}
.esc .diez svg.si{color:var(--petroleo)}
.esc .diez-ley{display:flex;gap:16px;margin-top:12px;font-weight:600}
.esc .diez-ley span{display:flex;align-items:center;gap:6px}
.esc .diez-ley i{width:10px;height:10px;border-radius:50%;background:var(--petroleo)}
.esc .diez-ley span+span i{background:var(--linea)}
.esc .pila{display:flex;flex-direction:column;gap:6px}
.esc .pila span{align-self:flex-start;display:flex;gap:10px;align-items:flex-end;background:var(--wa-fondo);border-radius:0 9px 9px 9px;padding:6px 9px;box-shadow:0 1px .5px rgb(11 20 26/.13)}
.esc .pila span:nth-child(2n){margin-left:18px}
.esc .pila small{font-size:.8em;color:var(--wa-gris)}
.esc .visto{display:flex;flex-direction:column;gap:6px;background:var(--wa-fondo);border-radius:12px;padding:12px;height:100%}
.esc .visto span{max-width:86%;padding:6px 9px;border-radius:9px;box-shadow:0 1px .5px rgb(11 20 26/.13)}
.esc .visto .in{align-self:flex-start;background:var(--blanco);border-top-left-radius:0}
.esc .visto .out{align-self:flex-end;background:var(--wa-saliente);border-top-right-radius:0}
.esc .visto .out small{color:var(--wa-check);font-weight:700;margin-left:6px}
.esc .visto .vt{align-self:center;margin-top:auto;box-shadow:none;font-size:.85em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wa-gris)}
.esc .dia{position:relative;display:flex;flex-direction:column;gap:6px;padding-top:44px}
.esc .dia .et{font-size:.85em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}
.esc .dia .franja{position:relative;display:flex;height:30px;border-radius:8px;overflow:hidden;font-size:.9em;font-weight:600}
.esc .dia .franja span{display:flex;align-items:center;justify-content:center}
.esc .dia .c{background:var(--linea)}
.esc .dia .a{background:var(--tinta-suave);color:var(--blanco)}
.esc .dia .u{background:var(--tinta);width:100%}
.esc .dia .pt{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--cian)}
.esc .dia .eje{position:relative;height:16px;font-size:.8em;color:var(--tinta-suave)}
.esc .dia .eje span{position:absolute;transform:translateX(-50%);white-space:nowrap}
/* Antes style="" en landing.js (la CSP los bloquea): las horas del día en la franja (8 h · 10 h · 6 h), los
   mensajes contestados de noche y las marcas del eje. */
.esc .dia .franja .h8{width:33.33%}.esc .dia .franja .h10{width:41.67%}.esc .dia .franja .h6{width:25%}
.esc .dia .pt.p1{left:4%}.esc .dia .pt.p2{left:80%}.esc .dia .pt.p3{left:87%}.esc .dia .pt.p4{left:95%}
.esc .dia .eje .e8{left:33.33%}.esc .dia .eje .e18{left:75%}
.esc .dia .chip{position:absolute;left:0;right:0;top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--wa-saliente);border-radius:8px;padding:4px 9px;font-size:.9em;box-shadow:0 1px .5px rgb(11 20 26/.13)}

/* 3 · Lo que le está costando: una tarjeta por calculadora, con su dibujo duotono (iconos de la web) */
.calcs{display:grid;gap:12px;margin-top:24px}
.calc-t{position:relative;display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:start;background:var(--blanco);border:1.5px solid var(--linea);border-radius:16px;padding:16px;text-decoration:none;color:inherit;transition:transform .25s var(--ease-salida),box-shadow .25s var(--ease-cambio),border-color .2s}
a.calc-t:hover{transform:translateY(-3px);box-shadow:var(--sombra-cajon);border-color:var(--petroleo)}
.calc-ico{width:60px;height:60px;border-radius:14px;background:var(--cian-piel);color:var(--petroleo);display:grid;place-items:center}
.calc-ico svg{width:36px;height:36px}
.calc-ico .rel{fill:var(--cian);opacity:.55}
.calc-c b{display:block;font-size:19px;font-weight:600;line-height:1.2}
.calc-c p{margin:4px 0 0;font-size:15.5px;line-height:1.4;color:var(--tinta-suave)}
.calc-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.calc-pie .meta{font-size:13.5px;font-weight:600;color:var(--tinta-suave)}
.calc-pie .ir{font-size:15px;font-weight:600;color:var(--petroleo)}
.calc-t.pronto{background:transparent;border-style:dashed}
.calc-t.pronto .calc-ico{background:var(--gris-linea);color:var(--tinta-suave)}
.calc-t.pronto .calc-ico .rel{fill:var(--borde-campo);opacity:.35}
.calc-t.hecha{border-color:var(--petroleo);box-shadow:0 0 0 3px rgb(23 62 69/.12)}
.calc-t.hecha .calc-ico{background:var(--petroleo);color:var(--blanco)}
.calc-t.hecha .calc-ico .rel{fill:var(--cian);opacity:.6}
.hecha-marca{position:absolute;top:-11px;right:14px;display:inline-flex;align-items:center;gap:5px;background:var(--petroleo);color:var(--blanco);border-radius:100px;padding:3px 10px 3px 8px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.hecha-marca svg{width:13px;height:13px}
.calc-res{display:flex;align-items:baseline;gap:8px;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--hover-claro)}
.calc-res strong{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--petroleo);font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-res span{font-size:14.5px;color:var(--tinta-suave);line-height:1.3}

/* 4 · Sus opciones: compara una opción con AIA Tech */
.comparar{margin-top:24px}
.selector{display:flex;gap:6px;flex-wrap:wrap}
.selector button{height:44px;padding:0 14px;border:1.5px solid var(--linea);border-radius:4px;background:var(--blanco);font-size:15px;font-weight:600;cursor:pointer}
.selector button[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:var(--blanco)}
/* En el móvil, los tres en una fila del mismo ancho (Aoshi, 30-oct: salían dos arriba y uno abajo); el texto pasa a dos líneas si no cabe */
@media (max-width:599px){.selector{display:grid;grid-template-columns:repeat(3,1fr)}.selector button{height:auto;min-height:48px;padding:6px 8px;font-size:14px;line-height:1.2;text-wrap:balance}}
.tabla{margin-top:14px;border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:var(--blanco)}
.tabla .f{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--gris-linea)}
.tabla .f:first-child{border-top:0}
.tabla .q{grid-column:1/-1;padding:12px 14px 2px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.tabla .c{display:flex;gap:8px;align-items:flex-start;padding:6px 14px 12px;font-size:15.5px;line-height:1.35}
.tabla .c.aia{background:var(--hover-claro);font-weight:600}
.tabla .c i{flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
.tabla .c i.si{background:var(--exito-fondo);color:var(--exito)}
.tabla .c i.no{background:#FBE4E2;color:var(--error)}
.tabla .c i.mas{background:var(--aviso-fondo);color:var(--aviso-texto)}
.tabla .cab-t{display:grid;grid-template-columns:1fr 1fr;background:var(--papel);font-size:14px;font-weight:700}
.tabla .cab-t span{padding:10px 14px}
.tabla .cab-t span:last-child{background:var(--petroleo);color:var(--blanco)}

/* 5 · Cómo funciona: los 4 pasos del documento como UNA historia en el tiempo (por eso numerados y con hora) */
.pasos{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:0;counter-reset:paso}
.pasos>li{position:relative;padding:0 0 30px 52px;counter-increment:paso}
.pasos>li::before{content:counter(paso);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--petroleo);color:var(--blanco);display:grid;place-items:center;font-weight:700;font-size:16px;z-index:1}
.pasos>li::after{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;background:var(--linea)}
.pasos>li:last-child{padding-bottom:0}
.pasos>li:last-child::after{display:none}
.paso-t{display:flex;flex-direction:column;gap:2px;min-height:36px;justify-content:center}
.paso-t b{font-size:17.5px;font-weight:600;line-height:1.3}
.paso-t time{font-size:13px;font-weight:700;color:var(--petroleo)}
.pasos .art{margin-top:12px;border-radius:14px;background-color:var(--wa-fondo);padding:10px;display:grid;gap:6px}
.pasos .art .burbuja{animation:none;margin:0;max-width:92%}
.pasos .art .burbuja time{display:none}   /* la hora ya la dice el paso */
.pie-paso{margin:8px 0 0;font-size:14.5px;line-height:1.45;color:var(--tinta-suave)}
.panel{background:var(--blanco);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgb(11 20 26/.12)}
.panel-t{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--petroleo-osc);color:var(--blanco);font-size:13.5px;font-weight:600}
.panel-t .nuevo{background:var(--aviso-fondo);color:var(--aviso-texto);border-radius:100px;padding:1px 8px;font-size:12px}
.panel-q{margin:0;padding:10px 12px 6px;font-size:15px;color:var(--tinta-suave)}
.panel-q b{color:var(--tinta);font-weight:600}
.panel-r{display:flex;flex-wrap:wrap;gap:6px;padding:4px 12px 12px;align-items:center}
.panel-r .opt{border:1.5px solid var(--linea);border-radius:4px;padding:5px 10px;font-size:14px;font-weight:600;color:var(--tinta-suave)}
.panel-r .opt.on{background:var(--petroleo);border-color:var(--petroleo);color:var(--blanco)}
.panel-r .precio{margin-left:auto;font-size:14px;color:var(--tinta-suave)}
.panel-r .precio b{color:var(--tinta);font-size:16px;font-variant-numeric:tabular-nums}

/* 5b · El teléfono que acompaña los pasos (solo escritorio). Es el móvil de muestra de aiatech-web
   pieza por pieza (Escena.astro + escena.css): canto, bisel, pantalla, cámara, barra de estado,
   cabecera de WhatsApp, fondo con dibujos, burbujas con colita y barra de escribir. */
.tel-fijo{display:none}
.tel{position:relative;width:300px;height:min(600px,calc(100vh - 150px));border-radius:40px;padding:3px;background:var(--mock-canto);box-shadow:0 30px 60px rgb(31 36 48/.25)}
.tel::before,.tel::after{content:"";position:absolute;right:-3px;width:3px;border-radius:0 2px 2px 0;background:var(--mock-canto)}
.tel::before{top:120px;height:56px}
.tel::after{top:190px;height:34px}
.bisel{height:100%;border-radius:37px;background:var(--mock-negro);padding:7px}
.scr{position:relative;height:100%;border-radius:31px;overflow:hidden;background:var(--blanco);color:var(--wa-texto);display:flex;flex-direction:column}
.scr .cam{position:absolute;top:9px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--mock-negro);z-index:4}
.sbar{display:flex;justify-content:space-between;align-items:center;height:30px;padding:2px 20px 0 22px;font-size:13px;font-weight:600;flex:none}
.sbar svg{height:12px;width:52px;fill:currentColor}
.tel-pantalla{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.wacab{display:flex;align-items:center;gap:8px;padding:6px 8px 8px 4px;background:var(--blanco);flex:none}
.wacab>svg,.wacab .acc svg{width:22px;height:22px;fill:currentColor}
.wacab .av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none}
.wacab .av svg{display:block;width:100%;height:100%}
.wacab .qn{flex:1;min-width:0}
.wacab b{display:block;font-size:15px;font-weight:600}
.wacab small{position:relative;display:block;height:15px;font-size:12px;color:var(--wa-gris)}
.wacab small span{position:absolute;left:0;top:0;white-space:nowrap;transition:opacity .2s var(--ease-cambio)}
.wacab small .s2{opacity:0;color:var(--wa-verde)}
.wacab.escribe small .s1{opacity:0}
.wacab.escribe small .s2{opacity:1}
.wacab .acc{display:flex;gap:14px;padding-right:6px}
.fondo{position:relative;flex:1;overflow:hidden;background-color:var(--wa-fondo);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.055' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='16' cy='18' r='7'/%3E%3Cpath d='M58 10h14v10H58zM62 20v5M68 20v5'/%3E%3Cpath d='M20 60l6-10 6 10z'/%3E%3Ccircle cx='70' cy='62' r='4'/%3E%3Ccircle cx='70' cy='62' r='9'/%3E%3Cpath d='M40 84c4-6 12-6 16 0M84 34l6 6M90 34l-6 6M8 86h8'/%3E%3C/g%3E%3C/svg%3E")}
.fondo .col{position:absolute;left:0;right:0;top:0;padding:10px 12px 70px;display:flex;flex-direction:column;gap:6px}
.fondo .fecha{align-self:center;background:var(--blanco);color:var(--wa-gris);font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:8px;margin-bottom:4px;box-shadow:0 1px .5px rgb(11 20 26/.13)}
.m{position:relative;max-width:82%;padding:6px 9px 7px;border-radius:9px;font-size:14px;line-height:1.36;box-shadow:0 1px .5px rgb(11 20 26/.13);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .35s var(--ease-salida),transform .4s var(--ease-asienta)}
.m.on{opacity:1;transform:none}
.m.in{background:var(--blanco);align-self:flex-start;border-top-left-radius:0}
.m.out{background:var(--wa-saliente);align-self:flex-end;border-top-right-radius:0}
.m.in::before,.m.out::before{content:"";position:absolute;top:0;width:8px;height:12px}
.m.in::before{left:-7px;background:var(--blanco);clip-path:polygon(100% 0,0 0,100% 100%)}
.m.out::before{right:-7px;background:var(--wa-saliente);clip-path:polygon(0 0,100% 0,0 100%)}
.m .h{float:right;margin:6px 0 -4px 10px;font-size:11px;color:var(--wa-gris);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.m .tk{width:16px;height:10px;fill:none;stroke:var(--wa-check);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wainp{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;align-items:center;padding:6px 8px 12px}
.wainp .campo-m{flex:1;display:flex;align-items:center;gap:8px;background:var(--blanco);border-radius:100px;padding:9px 12px;font-size:14px;color:var(--wa-gris);box-shadow:0 1px .5px rgb(11 20 26/.13)}
.wainp .campo-m span{flex:1}
.wainp svg{width:20px;height:20px;fill:currentColor;flex:none}
.wainp .mic{width:44px;height:44px;border-radius:50%;background:var(--wa-verde);color:var(--blanco);display:flex;align-items:center;justify-content:center;flex:none}
/* Paso 3: el panel de la tienda, con la tarjeta «Inventario» de la web */
.inv-tel{flex:1;background:var(--papel);display:flex;flex-direction:column;gap:10px;padding-bottom:12px}
.inv-top{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--petroleo-osc);color:var(--blanco);font-weight:600;font-size:14.5px}
.inv-n{background:var(--aviso-fondo);color:var(--aviso-texto);border-radius:100px;padding:2px 8px;font-size:12px;font-weight:700}
.inv-rot{margin:2px 14px 0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave)}
.inv-item{margin:0 12px;background:var(--blanco);border:1px solid var(--linea);border-radius:12px;padding:12px;display:grid;gap:2px;animation:llega .45s var(--ease-asienta) both}
.inv-item b{font-size:16px;font-weight:600}
.inv-item>span{font-size:13.5px;color:var(--tinta-suave)}
.inv-acc{display:flex;gap:6px;margin-top:10px}
.inv-acc .opt{border:1.5px solid var(--linea);border-radius:4px;padding:5px 10px;font-size:13px;font-weight:600;color:var(--tinta-suave)}
.inv-acc .opt.on{background:var(--petroleo);border-color:var(--petroleo);color:var(--blanco)}
.inv-precio{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:8px 10px;border:1.5px solid var(--petroleo);border-radius:4px;font-size:13px;color:var(--tinta-suave)}
.inv-precio b{font-size:16px;color:var(--tinta);font-variant-numeric:tabular-nums}
.inv-tel .guardado{margin:0 12px;display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4;font-weight:600;color:var(--exito);background:var(--exito-fondo);border-radius:10px;padding:9px 10px;animation:llega .45s var(--ease-asienta) .6s both}
.inv-tel .guardado svg{flex:none;width:15px;height:15px;margin-top:2px}
.tel-pie{margin:14px 0 0;width:300px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--petroleo)}

/* 6 · Su catálogo se arma solo */
.catalogo{margin-top:24px;background:var(--blanco);border-radius:16px;box-shadow:var(--sombra-cajon);overflow:hidden}
.catalogo .tit{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--petroleo);color:var(--blanco);font-weight:600;font-size:15.5px}
.catalogo .tit small{font-weight:500;opacity:.85;font-size:13px}
.catalogo .f{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 14px;border-top:1px solid var(--gris-linea);font-size:15px}
.catalogo .f:first-of-type{border-top:0}
.catalogo .f span{color:var(--tinta-suave);font-size:14px}
.catalogo .f em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:13px;font-weight:700;border-radius:100px;padding:3px 10px}
.e-si{background:var(--exito-fondo);color:var(--exito)}
.e-encargo{background:var(--cian-piel);color:var(--petroleo-osc)}
.e-nueva{background:var(--aviso-fondo);color:var(--aviso-texto)}
.e-no{background:var(--gris-linea);color:var(--tinta-suave)}
.nota-k{margin:14px 0 0;font-size:15px;color:var(--tinta-suave)}

/* 7 · Usted sigue vendiendo */
.sigue{display:grid;gap:16px;margin-top:24px}
.sigue .chat{display:grid;gap:6px;background-color:var(--wa-fondo);border-radius:16px;padding:12px}
.sigue .chat .burbuja{animation:none;margin:0}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;font-size:16px;line-height:1.45}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:5px;background:var(--cian-piel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173E45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}

/* 9 · Quién está detrás: como «Conozca a nuestro equipo» de la web, una banda petróleo con las caras */
.banda{margin-top:26px;border-radius:16px;padding:22px 8px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.miembro{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:0 8px}
.miembro+.miembro{border-left:1px solid var(--blanco-16)}
.miembro img,.miembro .sin-foto{width:84px;height:84px;border-radius:50%;object-fit:cover;background:var(--blanco);box-shadow:0 0 0 3px var(--blanco);margin-bottom:10px}
.miembro .sin-foto{display:grid;place-items:end center;overflow:hidden;background:#2E8C97;color:#B5DCE0;box-shadow:0 0 0 3px var(--blanco-16)}
.miembro .sin-foto svg{width:58%;height:auto}
.miembro b{font-size:16px;font-weight:600;line-height:1.2}
.miembro span{font-size:13.5px;color:var(--blanco-75);line-height:1.3}

/* 10 · Preguntas frecuentes */
.faq{margin-top:20px;border-top:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:60px;padding:8px 0;font-size:17px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--petroleo);border-bottom:2px solid var(--petroleo);transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease-cambio)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:0 0 16px;font-size:16px;line-height:1.55;color:var(--tinta-suave)}
.faq p a{color:var(--petroleo);font-weight:600;padding-block:2px}   /* Aitor W5 (2.5.8): 24 px de alto sin mover la línea */

/* 11 · Cierre */
.cierre{margin-top:-24px;border-radius:24px 24px 0 0;padding:48px 16px 56px}
.cierre .dentro{max-width:720px;margin:0 auto}
.cierre h2{font-size:32px;line-height:1.08}
.cierre .lead{font-size:18px;color:var(--blanco-75);margin:12px 0 0}
.cierre .ctas{display:grid;gap:4px;margin-top:26px}

@media (min-width:760px){
  .cap{padding:64px 40px 72px}
  .cap h2,.cierre h2{font-size:44px}
  .pasos{grid-template-columns:none;max-width:640px}
  .calcs{grid-template-columns:repeat(3,1fr)}
  .banda{padding:32px 24px 28px}
  .miembro img,.miembro .sin-foto{width:104px;height:104px}
  .miembro b{font-size:18px}
  .sigue{grid-template-columns:1fr 1fr;align-items:start}
  .cierre{padding:72px 40px 80px}
  .cierre .ctas{grid-template-columns:auto auto;justify-content:start;align-items:center;gap:22px}
  .cierre .b1{width:auto;padding:0 30px}
}
@media (min-width:980px){
  .como-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:72px;align-items:start}
  .tel-fijo{display:block;position:sticky;top:max(24px,calc(50vh - 250px));margin-top:0}
  /* el teléfono fijo solo baja hasta el final de la columna de pasos: el aire va DENTRO de ella */
  .pasos.con-tel{padding-bottom:200px}
  .tel-fijo{margin-top:8px}
  .pasos>li{transition:opacity .3s var(--ease-cambio)}
  .pasos.con-tel>li:not(.activo){opacity:.45}
  .pasos.con-tel>li.activo::before{box-shadow:0 0 0 6px rgb(23 62 69/.18)}
}
/* Aitor W5 (1.4.3): con reduced-motion no hay juego de luces; los pasos, a color pleno */
@media (min-width:980px) and (prefers-reduced-motion:reduce){.pasos.con-tel>li:not(.activo){opacity:1}}

/* =====================================================================================
   Medidas de aiatech-web en toda la landing (Aoshi 19-oct, medido contra la portada):
   aire de sección 64/72 → 112/120, h2 52, ancho 1248, entrada 19, y los titulares enteros en 600
   (el contraste 600/300 no sale del sistema de diseño). Solo la landing: la calculadora no cambia.
   ===================================================================================== */
.landing .ligero{font-weight:inherit}
.landing .hero .dentro,.landing .cap .dentro{max-width:1248px}
.landing .cap{padding:64px 16px 72px}
@media (min-width:760px){
  .landing .cap{padding:112px 40px 120px}
  .landing .cap h2,.landing .cierre h2{font-size:52px;letter-spacing:-.03em}
  .landing .cap .intro{font-size:19px}
  .dolores{display:grid;grid-template-columns:1fr 1fr;gap:24px;overflow:visible;margin:48px 0 0;padding:0}
  .dolores .cf{padding:28px 28px 30px;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .dolores .corte{margin:0 -28px 16px}
  .esc{font-size:13px}
  .dolores .viz{height:182px}
  #s-pasa .desliza{display:none}
}
@media (min-width:1100px){
  .dolores{grid-template-columns:repeat(4,1fr)}
  .dolores .num{font-size:52px}
}

/* ---------- El CTA del hero, flotando (variante B, Aoshi 29-oct) ---------- */
.flota,.flota-globo{position:fixed;z-index:50;right:calc(16px + env(safe-area-inset-right));opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s,transform .45s var(--ease-asienta),visibility 0s .45s}
.flota.ver,.flota-globo.ver{opacity:1;pointer-events:auto;visibility:visible;transform:none;transition-delay:0s}
.flota{bottom:calc(16px + env(safe-area-inset-bottom));width:60px;height:60px;border-radius:30px;display:grid;place-items:center;
  background:var(--petroleo);color:var(--blanco);box-shadow:0 12px 28px rgb(15 44 49/.35);transform:translateY(24px) scale(.9)}
/* El icono de WhatsApp sobre el petróleo de la marca (Aoshi, 30-oct; antes un teléfono) */
.flota svg{width:32px;height:32px}
/* Entrada: sube desde abajo con un rebote, suena una vez (el teléfono se sacude) y deja una onda */
.flota.ver{animation:flota-entra .6s var(--ease-asienta) both}
.flota.ver svg{animation:flota-timbre .7s .55s ease-in-out both}
.flota::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--petroleo);opacity:0;pointer-events:none}
.flota.ver::after{animation:flota-onda 1.2s .55s ease-out 2}
@keyframes flota-entra{0%{opacity:0;transform:translateY(40px) scale(.4)}100%{opacity:1;transform:none}}
@keyframes flota-timbre{0%,100%{transform:none}15%,45%,75%{transform:rotate(-16deg)}30%,60%{transform:rotate(16deg)}}
@keyframes flota-onda{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
.flota:hover{background:var(--petroleo-osc)}
.flota-globo{bottom:calc(88px + env(safe-area-inset-bottom));width:min(290px,calc(100% - 32px));background:var(--blanco);color:var(--tinta);
  border-radius:14px 14px 4px 14px;box-shadow:var(--sombra-flotante);transform:translateY(10px) scale(.95);transform-origin:bottom right}
.flota-globo a{display:block;padding:12px 40px 12px 14px;color:inherit;text-decoration:none;font:400 15px/1.35 var(--font)}
.flota-globo b{display:block;font-weight:600;color:var(--petroleo)}
.flota-globo button{position:absolute;top:4px;right:4px;width:32px;height:32px;border:0;background:none;color:var(--tinta-suave);cursor:pointer;display:grid;place-items:center}
.flota-globo button svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.flota,.flota-globo{transform:none;transition:opacity .2s,visibility 0s .2s}.flota.ver,.flota.ver svg,.flota.ver::after{animation:none}}

/* ---------- Entrada de cada sección: se enfocan (variante D, Aoshi 29-oct) ----------
   Solo con JS (landing.js pone .anim en el body): sin él, todo se ve desde el principio. */
.anim .pz{opacity:0;transform:scale(.97);filter:blur(8px);transition:opacity .7s var(--ease-salida),transform .7s var(--ease-salida),filter .7s var(--ease-salida);transition-delay:calc(var(--i) * 90ms)}
.anim .en .pz{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.anim .pz{opacity:1;transform:none;filter:none;transition:none}}

/* ---------- 9b · La oferta del primer mes (Aoshi, 29-oct) ----------
   Lo que pierde (su cifra, tachada con un trazo que se dibuja) y lo que le cuesta empezar: una etiqueta
   de estante con el $0. Entra una vez, al llegar (.vista, la pone landing.js). */
#s-oferta{margin-top:-24px;border-radius:24px 24px 0 0;padding:52px 16px 72px}
#s-oferta .dentro{max-width:1120px;margin:0 auto;display:grid;gap:44px}
#s-oferta h2{margin:0;font-size:32px;line-height:1.06;letter-spacing:-.03em;font-weight:600;text-wrap:balance}
#s-oferta .of-p{margin:14px 0 0;font-size:18px;line-height:1.45;max-width:46ch;color:rgb(255 255 255/.9)}
#s-oferta .cuentas{display:grid;gap:26px;align-content:center;justify-items:start}
#s-oferta .pierdes small{display:block;font-size:17px;font-weight:600;color:var(--blanco-75)}
#s-oferta .pierdes b{position:relative;display:inline-block;font-size:76px;font-weight:700;letter-spacing:-.05em;line-height:1;margin-top:4px;font-variant-numeric:tabular-nums}
#s-oferta .pierdes b span{transition:opacity .4s .8s}
#s-oferta.vista .pierdes b span{opacity:.75}
#s-oferta .raya{position:absolute;left:-6%;top:18%;width:112%;height:64%;overflow:visible;pointer-events:none}
#s-oferta .raya path{fill:none;stroke:var(--cian);stroke-width:8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 2px 0 rgb(15 44 49/.4));transition:stroke-dashoffset .55s cubic-bezier(.6,0,.3,1) .35s}
#s-oferta.vista .raya path{stroke-dashoffset:0}
#s-oferta .segun{display:block;font-size:15px;color:var(--blanco-75);margin-top:8px}
#s-oferta .sombra{filter:drop-shadow(0 24px 36px rgb(12 35 40/.45));transform:rotate(-2.5deg) translateY(16px);opacity:0;transition:transform .8s var(--ease-asienta) .75s,opacity .35s .75s}
#s-oferta.vista .sombra{transform:rotate(-2.5deg);opacity:1}
#s-oferta .papel0{width:min(100%,400px);background:var(--papel);color:var(--tinta);border-radius:18px;overflow:hidden;
  -webkit-mask:radial-gradient(circle at 0 62%,transparent 13px,#000 13.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 62%,transparent 13px,#000 13.5px) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 62%,transparent 13px,#000 13.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 62%,transparent 13px,#000 13.5px) right/51% 100% no-repeat}
#s-oferta .franja{padding:14px 22px;background:var(--cian-claro);color:var(--petroleo-osc);font-size:16px;font-weight:700}
#s-oferta .cifra0{display:flex;align-items:flex-end;gap:14px;padding:18px 22px 22px}
#s-oferta .cifra0 b{font-size:120px;font-weight:700;letter-spacing:-.06em;line-height:.8}
#s-oferta .cifra0 em{font-style:normal;font-size:20px;font-weight:700;line-height:1.1;padding-bottom:6px}
#s-oferta .pie{display:flex;align-items:center;gap:10px;margin:0 22px;padding:16px 0 20px;border-top:2px dashed var(--cuerda);font-size:16px;font-weight:600;color:var(--petroleo)}
#s-oferta .pie svg{width:30px;height:30px;flex:none;background:var(--petroleo);color:var(--blanco);border-radius:50%;padding:5px}
#s-oferta .of-checks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;font-size:18px}
#s-oferta .of-checks li{display:flex;gap:10px;align-items:flex-start}
#s-oferta .of-checks li::before{content:"";flex:none;width:26px;height:26px;margin-top:-1px;border-radius:50%;box-shadow:0 3px 8px rgb(12 35 40/.3);
  background:var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173E45' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4L18.5 8'/%3E%3C/svg%3E") center/16px no-repeat}
#s-oferta .b1{margin-top:30px;max-width:400px;height:60px;font-size:18px}
@media (min-width:980px){
  #s-oferta{padding:110px 32px 112px}
  #s-oferta .dentro{grid-template-columns:1fr 1.1fr;gap:88px;align-items:center}
  #s-oferta h2{font-size:48px}
  #s-oferta .pierdes b{font-size:100px}
  #s-oferta .cifra0 b{font-size:160px}
}
/* Mientras se ve la oferta, la burbuja flotante se aparta: la oferta ya tiene su botón */
.con-oferta .flota,.con-oferta .flota-globo{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- 11 · Cierre con la oferta: centrado y grande, y el sello del $0 en la esquina del botón ---------- */
.cierre{text-align:center}
.cierre .dentro{max-width:860px;display:grid;justify-items:center}
.cierre h2{font-size:min(52px,14vw);line-height:.98;letter-spacing:-.045em} /* min(…,14vw): con Plex, «Escríbenos.» a 52 px no cabía en 320 px (matriz del 7-nov) */
.cierre h2 span{display:block}
.cierre .lead{max-width:42ch}
.cierre .ctas{position:relative;display:flex;justify-content:center;margin-top:56px}
.cierre .ctas .b1{width:auto;padding:0 34px;height:60px;font-size:18px}
.cierre .sello{position:absolute;right:-64px;top:-60px;width:96px;height:96px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:var(--cian-claro);color:var(--petroleo-osc);box-shadow:0 10px 24px rgb(0 0 0/.25),inset 0 0 0 4px var(--cian-claro),inset 0 0 0 6px rgb(0 106 118/.35);
  transform:rotate(-14deg) scale(0);transition:transform .6s var(--ease-asienta) .5s}
.cierre.vista .sello{transform:rotate(-14deg) scale(1)}
.cierre .sello b{font-size:34px;line-height:.9;letter-spacing:-.05em}
.cierre .sello small{font-size:12px;font-weight:700;line-height:1.1}
@media (max-width:620px){.cierre .ctas .b1{padding-right:60px}.cierre .sello{right:-14px;top:-30px;width:80px;height:80px}.cierre .sello b{font-size:28px}}
@media (min-width:980px){.cierre h2{font-size:96px}.cierre{padding:120px 32px 130px}}
@media (prefers-reduced-motion:reduce){
  #s-oferta .sombra{transform:rotate(-2.5deg);opacity:1;transition:none}
  #s-oferta .raya path{stroke-dashoffset:0;transition:none}
  .cierre .sello{transform:rotate(-14deg);transition:none}
}

/* El sprite de iconos del teléfono (js/sprite-tel.js), sin style="" por la CSP. */
.sprite-tel{display:none}
.sil-fondo{fill:var(--color-mock-av-fondo)}
.sil-blanco{fill:var(--color-blanco)}

/* El aviso legal al pie del cierre (W3-02): pequeño, sin competir con el CTA. */
.cierre .legal-pie{max-width:1120px;margin:40px auto 0;padding:18px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--blanco-16);font-size:13.5px;line-height:1.5;color:var(--blanco-75);text-align:center}
.cierre .legal-pie p{margin:0}
.cierre .legal-pie a{color:inherit;text-underline-offset:3px;display:inline-block;padding:4px 0}

/* El símbolo de AIA Tech como máscara (antes un <style> en landing.html, que la CSP bloquea). */
.logo{display:inline-block;background:currentColor;-webkit-mask:url(marca/aiatech-simbolo.svg) center/contain no-repeat;mask:url(marca/aiatech-simbolo.svg) center/contain no-repeat}

/* ---------- W9 · Responsive (maquetación: los mismos elementos, solo medidas) ---------- */
/* W9-06: el relleno lateral nunca por debajo de la muesca (iPhone apaisado, viewport-fit=cover). */
.hero,.landing .cap,.cierre,#s-oferta{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
@media (min-width:760px){.hero,.landing .cap,.cierre{padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right))}}
@media (min-width:980px){.cierre,#s-oferta{padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))}}

/* L-01: el hero de dos columnas sigue la escala que ya existía (36↔58) en vez de saltar a 58 a 760 px;
   los botones no se parten y, si no caben en fila, van uno debajo del otro. */
@media (min-width:760px){
  .hero h1{font-size:clamp(36px,5.2vw,58px)}
  .hero .b1,.hero .ctas a{white-space:nowrap}
}
@media (min-width:760px) and (max-width:959px){.hero .ctas{grid-template-columns:auto;justify-items:start}}
/* Apaisado bajo (844×390): que el botón entre en la primera vista */
@media (min-width:760px) and (max-height:480px){
  .hero .cab{min-height:56px}
  .hero h1{font-size:30px;margin-top:6px}
  .hero .lead{font-size:16px;line-height:1.45;margin-top:8px}
  .hero .ctas{margin-top:14px}
}

/* L-02 / W9-404X-03: a 320 px las tres caras caben en fila sin cortarse. */
@media (max-width:359px){
  .banda{padding:20px 4px 18px}
  .miembro{padding:0 4px;min-width:0}
  .miembro img,.miembro .sin-foto{width:68px;height:68px}
  .miembro b{font-size:15px}
  .miembro span{font-size:12.5px;overflow-wrap:anywhere}
}

/* L-03: en el móvil estrecho el sello sube a la esquina de arriba y deja ver la flecha del botón. */
@media (max-width:400px){
  .cierre .sello{top:-46px;right:-8px;width:68px;height:68px}
  .cierre .sello b{font-size:24px}
  .cierre .sello small{font-size:10.5px}
  .cierre .ctas .b1{padding-left:24px;padding-right:44px;white-space:nowrap}
}

/* L-04: «Escríbenos.» en una línea en el móvil (antes «Escríbenos hoy.», sin la huérfana «hoy.»); escritorio y tableta igual. */
@media (max-width:759px){.cierre h2{font-size:clamp(38px,11.5vw,52px)}}

/* L-08: «Tu panel» no se parte en dos; si falta sitio, el que pasa a dos líneas es el título. */
.catalogo .tit{gap:10px}
.catalogo .tit small{white-space:nowrap}

/* L-03 (412-620 px): el sello rozaba la flecha del botón; la flecha se aparta 7 px hacia dentro. */
@media (min-width:401px) and (max-width:620px){.cierre .ctas .b1{padding-left:30px;padding-right:70px}}

/* L-09: bajo «Cómo funciona» quedaban ~320 px vacíos (los 200 px que necesita el teléfono fijo para
   acompañar al último paso, más el aire de la sección). El teléfono se queda igual; se quita aire de la sección. */
@media (min-width:980px){.landing #s-como{padding-bottom:48px}}
/* El botón del cierre no parte línea (nowrap): con Plex, a 320 px ensanchaba el bloque y cortaba el texto (matriz 7-nov) */
@media (max-width: 359px) { .cierre .ctas .b1 { padding: 0 18px; font-size: 16px; } }