/* Situ: estilos del sitio. Requiere situ-variables.css y situ-componentes.css */

/* ---------- Tokens del sitio (extienden los de marca) ---------- */
:root{
  --superficie-alta: var(--superficie);
  --contenedor: 1200px;
  --alto-cabecera: 72px;
  --seccion-y: var(--space-16);
  --display-xl: clamp(44px, 8vw, 96px);
  --display-l: clamp(34px, 5.2vw, 60px);
  --transicion: .2s ease;
  --resorte: cubic-bezier(.34,1.45,.64,1);
  /* Relieve suave: brillo superior y sombra base de botones, etiquetas e interruptor */
  --brillo: color-mix(in srgb,var(--en-noche) 75%,transparent);
  --sombra-suave: 0 1px 2px color-mix(in srgb,var(--noche) 8%,transparent),0 8px 18px -10px color-mix(in srgb,var(--noche) 35%,transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --superficie-alta: #1a2d36;
    --brillo: color-mix(in srgb,var(--en-noche) 9%,transparent);
    --sombra-suave: 0 1px 2px rgba(0,0,0,.4),0 8px 18px -10px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"]{
  --superficie-alta: #1a2d36;
  --brillo: color-mix(in srgb,var(--en-noche) 9%,transparent);
  --sombra-suave: 0 1px 2px rgba(0,0,0,.4),0 8px 18px -10px rgba(0,0,0,.7);
  color-scheme: dark;
}
@media (min-width: 1024px){
  :root{ --seccion-y: calc(var(--space-16) + var(--space-8)); }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-cabecera) + var(--space-4));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--font-texto);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Cursores con el avatar de Situ (solo mouse/trackpad): la puerta pícara en general y una mano verde Situ con contorno oscuro sobre todo lo que se puede seleccionar. Campos de texto y arrastres conservan su cursor de sistema. */
@media (pointer: fine){
  html,body,body .giro{cursor:url("../img/cursor-situ-32.png") 4 7,auto}
  html,body,body .giro{cursor:image-set(url("../img/cursor-situ-32.png") 1x,url("../img/cursor-situ-64.png") 2x) 4 7,auto}
  :is(a[href],button,summary,select,label,[role="button"],[role="tab"],input[type="checkbox"],input[type="radio"],input[type="range"],input[type="submit"],
      .st-btn,.menu-btn,.ticket,.wa,.pv__pausa,.pvb,.mapa,.vtab,.pnav,.elige,.st-plan,.resenas__flecha,.cinta__pausa,.arma__ir,.opcion,.pastilla,.tuplan__cambia,.tuplan__opcion,.blog__filtro),
  :is(a[href],button,summary,label,[role="button"],.st-btn,.st-plan,.opcion,.pastilla,.elige,.vtab) *{
    cursor:url("../img/cursor-situ-mano-32.png") 12 2,pointer !important;
    cursor:image-set(url("../img/cursor-situ-mano-32.png") 1x,url("../img/cursor-situ-mano-64.png") 2x) 12 2,pointer !important;
  }
}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde-texto);text-underline-offset:3px}
h1,h2,h3,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.icono{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.icono--s{width:16px;height:16px}

.saltar{position:absolute;left:var(--space-4);top:-100px;z-index:100;background:var(--verde);color:var(--en-verde);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-weight:700;text-decoration:none}
.saltar:focus{top:var(--space-4)}

.contenedor{width:100%;max-width:var(--contenedor);margin-inline:auto;padding-inline:var(--space-4)}
@media (min-width: 768px){ .contenedor{padding-inline:var(--space-8)} }

/* ---------- Tipografía ---------- */
.display-xl{font-family:var(--font-display);font-weight:800;font-size:var(--display-xl);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.display-l{font-family:var(--font-display);font-weight:800;font-size:var(--display-l);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.cuerpo-l{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--tinta-media)}
.etiqueta{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.resalta{font-style:normal;color:var(--verde-texto);font-weight:700}
h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em}

/* ---------- Zonas siempre oscuras ---------- */
.zona-noche{background:var(--noche);color:var(--en-noche)}
.zona-noche :focus-visible{outline-color:var(--verde)}
.zona-noche a:not(.st-btn){color:var(--en-noche)}
.texto-noche-suave{color:color-mix(in srgb,var(--en-noche) 78%,transparent)}
.zona-noche .st-btn--contorno{color:var(--en-noche);border-color:color-mix(in srgb,var(--en-noche) 28%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--en-noche) 9%,transparent),color-mix(in srgb,var(--en-noche) 2%,transparent));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 16%,transparent)}
.zona-noche .st-btn--contorno:hover{background:color-mix(in srgb,var(--en-noche) 12%,transparent);border-color:color-mix(in srgb,var(--en-noche) 60%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 16%,transparent),0 10px 24px -12px rgba(0,0,0,.8)}

/* ---------- Botones: relieve suave (luz arriba, brillo de marca) ---------- */
.st-btn{min-height:44px;touch-action:manipulation;transition:background-color .15s ease,border-color .15s ease,box-shadow .3s ease,translate .3s var(--resorte),scale .15s ease}
.st-btn .icono{width:20px;height:20px}
.st-btn:hover{translate:0 -1px}
.st-btn:active{translate:0 0;scale:.97}
.btn-icono{width:48px;height:48px;padding:0}

.st-btn--primario,.st-btn--whatsapp{
  background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 78%,var(--en-noche)),var(--verde) 60%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 55%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--en-verde) 12%,transparent),0 10px 24px -12px var(--verde);
}
.st-btn--primario:hover,.st-btn--whatsapp:hover{
  background:linear-gradient(180deg,color-mix(in srgb,var(--verde-hover) 70%,var(--en-noche)),var(--verde-hover) 60%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 55%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--en-verde) 12%,transparent),0 0 0 4px color-mix(in srgb,var(--verde) 18%,transparent),0 14px 30px -12px var(--verde);
}
.st-btn--oscuro{
  background:linear-gradient(180deg,color-mix(in srgb,var(--tinta) 86%,var(--fondo)),var(--tinta) 60%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fondo) 20%,transparent),var(--sombra-suave);
}
.st-btn--oscuro:hover{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fondo) 20%,transparent),0 0 0 4px color-mix(in srgb,var(--tinta) 10%,transparent),var(--sombra-suave)}
.st-btn--contorno{box-shadow:inset 0 1px 0 var(--brillo)}
.st-btn--contorno:hover{box-shadow:inset 0 1px 0 var(--brillo),var(--sombra-suave)}

/* ---------- Etiquetas: pastilla con relieve + perilla con la puerta ---------- */
.st-tag{
  gap:var(--space-2);padding:5px var(--space-3);border-radius:10px;border:1px solid var(--linea);
  font-family:var(--font-texto);font-size:14px;line-height:18px;font-weight:700;letter-spacing:-.005em;text-transform:none;white-space:nowrap;
  background:linear-gradient(180deg,var(--superficie),color-mix(in srgb,var(--superficie) 94%,var(--tinta)));
  color:var(--tinta);box-shadow:inset 0 1px 0 var(--brillo),var(--sombra-suave);
}
.st-tag:has(.perilla){padding:3px var(--space-3) 3px 3px}
.st-tag--verde{
  border-color:color-mix(in srgb,var(--verde) 70%,var(--en-verde));color:var(--en-verde);
  background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 76%,var(--en-noche)),var(--verde) 65%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 50%,transparent),0 0 0 4px color-mix(in srgb,var(--verde) 14%,transparent),0 8px 22px -10px var(--verde);
}
.st-tag--noche{
  border-color:color-mix(in srgb,var(--en-noche) 10%,var(--noche));color:var(--en-noche);
  background:linear-gradient(180deg,color-mix(in srgb,var(--noche) 86%,var(--en-noche)),var(--noche) 65%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 14%,transparent),var(--sombra-suave);
}
/* La perilla: el mismo botón del interruptor de tema, en chico */
.perilla{
  display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:8px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tinta) 82%,var(--fondo)),var(--tinta) 70%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fondo) 22%,transparent),0 2px 6px -2px color-mix(in srgb,var(--noche) 55%,transparent);
  --puerta-ext:var(--verde);--puerta-int:var(--fondo);
}
.st-tag--verde .perilla{background:var(--en-verde);--puerta-int:var(--en-noche)}
.st-tag--noche .perilla{
  color:var(--en-verde);
  background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 72%,var(--en-noche)),var(--verde) 65%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 55%,transparent),0 0 12px -3px var(--verde);
}
.perilla .icono{width:14px;height:14px;stroke-width:2.25}
.puerta{width:11px;height:16px;flex:none}

/* ---------- Interruptor de tema (claro / oscuro) ---------- */
.tema{
  position:relative;flex:none;width:84px;height:44px;padding:4px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  border:1px solid color-mix(in srgb,var(--en-noche) 12%,transparent);border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--en-noche) 11%,transparent),color-mix(in srgb,var(--en-noche) 3%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 14%,transparent),0 8px 20px -10px rgba(0,0,0,.7);
}
.tema__pista{
  position:relative;display:block;width:100%;height:100%;border-radius:12px;
  background:color-mix(in srgb,var(--noche) 70%,#000);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5),inset 0 -1px 0 color-mix(in srgb,var(--en-noche) 8%,transparent);
}
.tema__fondo{position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;color:color-mix(in srgb,var(--en-noche) 45%,transparent);transition:color .3s ease}
.tema__fondo--sol{left:14px}
.tema__fondo--luna{right:14px}
.tema:hover .tema__fondo{color:color-mix(in srgb,var(--en-noche) 70%,transparent)}
.tema__perilla{
  position:absolute;top:2px;left:2px;width:40px;height:calc(100% - 4px);border-radius:10px;color:var(--en-verde);
  background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 65%,var(--en-noche)),var(--verde) 55%,var(--verde-hover));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 60%,transparent),inset 0 -2px 4px color-mix(in srgb,var(--en-verde) 18%,transparent),0 0 0 1px color-mix(in srgb,var(--verde) 60%,var(--en-verde)),0 0 18px -2px color-mix(in srgb,var(--verde) 75%,transparent);
  transform-origin:left center;
  transition:translate .55s var(--resorte),scale .2s ease,box-shadow .3s ease;
}
.tema:hover .tema__perilla{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 60%,transparent),inset 0 -2px 4px color-mix(in srgb,var(--en-verde) 18%,transparent),0 0 0 1px color-mix(in srgb,var(--verde) 60%,var(--en-verde)),0 0 26px 0 color-mix(in srgb,var(--verde) 80%,transparent)}
.tema:active .tema__perilla{scale:1.12 .94}
.tema__perilla .icono{position:absolute;inset:0;margin:auto;width:18px;height:18px;stroke-width:2.25;transition:rotate .5s var(--resorte),scale .4s var(--resorte),opacity .25s ease}
.tema__perilla .icono--luna{opacity:0;rotate:-90deg;scale:.4}
.tema[aria-pressed="true"] .tema__perilla{translate:30px 0;transform-origin:right center}
.tema[aria-pressed="true"] .tema__perilla .icono--sol{opacity:0;rotate:90deg;scale:.4}
.tema[aria-pressed="true"] .tema__perilla .icono--luna{opacity:1;rotate:0deg;scale:1}

/* Al cambiar de tema, los colores se funden en vez de saltar */
.tema-cambiando,.tema-cambiando *:not(.tema):not(.tema *),.tema-cambiando *::before,.tema-cambiando *::after{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,fill .45s ease !important;
}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:40;border-bottom:1px solid color-mix(in srgb,var(--en-noche) 10%,transparent)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);height:var(--alto-cabecera)}
.cabecera__logo{display:block;flex:none}
.cabecera__logo img{width:120px;height:auto}
.cabecera__acciones{display:flex;align-items:center;gap:var(--space-2)}
.cabecera__cta{padding:var(--space-2) var(--space-4);white-space:nowrap}
/* Laptops chicas: el menú y el botón no caben en una línea; el botón queda solo con el ícono */
@media (min-width: 1024px) and (max-width: 1199px){
  .cabecera__cta{width:44px;padding:0}
  .cabecera__cta-texto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.nav a{white-space:nowrap}
.menu-btn{display:grid;place-items:center;width:48px;height:48px;border:0;background:transparent;color:var(--en-noche);border-radius:var(--radius-sm);cursor:pointer}
.menu-btn .icono--cerrar{display:none}
.menu-btn[aria-expanded="true"] .icono--abrir{display:none}
.menu-btn[aria-expanded="true"] .icono--cerrar{display:block}

.nav{display:none}
.nav a{display:block;text-decoration:none;font-weight:500;padding:var(--space-3) var(--space-3);border-radius:var(--radius-sm);opacity:.82;transition:opacity var(--transicion),background-color var(--transicion)}
.nav a:hover{opacity:1;background:color-mix(in srgb,var(--en-noche) 8%,transparent)}
.nav a[aria-current="true"]{opacity:1;color:var(--verde)}
.nav.abierta{display:block;position:absolute;top:var(--alto-cabecera);left:0;right:0;background:var(--noche);border-bottom:1px solid color-mix(in srgb,var(--en-noche) 10%,transparent);padding:var(--space-2) var(--space-4) var(--space-6)}
.nav.abierta a{font-size:18px;padding:var(--space-4) var(--space-3)}

@media (max-width: 520px){
  .cabecera__cta{display:none}
}
@media (min-width: 1024px){
  .menu-btn{display:none}
  .nav{display:block}
  .nav ul{display:flex;gap:var(--space-1)}
  .nav a{font-size:15px;padding:var(--space-2) var(--space-3)}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:var(--space-16) var(--space-12)}
.plano{position:absolute;pointer-events:none}
.plano--verde{left:-140px;top:48px;width:300px;height:480px;background:var(--verde);opacity:.14;clip-path:polygon(0 22%,100% 0,100% 78%,0 100%)}
.plano--interior{right:-100px;top:140px;width:240px;height:400px;background:var(--en-noche);opacity:.05;clip-path:polygon(0 0,100% 22%,100% 100%,0 78%)}
.hero__centro{position:relative;text-align:center;max-width:900px;margin-inline:auto}
.hero h1 em{font-style:normal;color:var(--verde)}
.hero .cuerpo-l{max-width:620px;margin:var(--space-6) auto 0}
.hero__acciones{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-8)}

/* Bento */
.bento{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-16)}
.b{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4);min-height:200px;padding:var(--space-6) var(--space-4);border-radius:var(--radius-lg)}
.b--vidrio{background:color-mix(in srgb,var(--en-noche) 7%,transparent);border:1px solid color-mix(in srgb,var(--en-noche) 12%,transparent);color:var(--en-noche)}
.b--claro{background:var(--superficie-alta);color:var(--tinta);border:1px solid var(--linea)}
.b--ejemplo{grid-column:span 2;justify-content:flex-start;align-items:flex-start}
.b__titulo{font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.2}
.b__cifra{display:flex;align-items:flex-start;gap:var(--space-1);font-family:var(--font-display);font-weight:800;font-size:56px;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.b__cifra--precio{font-size:56px;flex-wrap:wrap}
.b__cifra sup{font-family:var(--font-texto);font-size:14px;font-weight:700;letter-spacing:0;line-height:1;margin-top:6px;color:var(--tinta-media);white-space:nowrap}
.b__texto{font-size:14px;line-height:1.45;color:var(--tinta-media)}
.b__tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* Globo que gira (Globe.gl) en la tarjeta de los 7 días */
/* 7 días: la Tierra como horizonte y la barra que se llena día por día */
.b--dias{justify-content:flex-start;gap:var(--space-3);min-height:540px;padding-bottom:0}
.b--dias > :not(.globo):not(.dias7__baliza){position:relative;z-index:1}
.b--dias .b__cifra{font-size:clamp(84px,9vw,104px)}
.b--dias .b__cifra sup{font-family:var(--font-display);font-size:clamp(20px,2vw,24px);font-weight:800;line-height:1.05;letter-spacing:-.01em;color:var(--tinta);margin-top:12px}
.b--dias .b__texto{font-size:17px;line-height:1.4;color:var(--tinta);font-weight:500;max-width:24ch}
/* Celular y tableta: la Tierra completa dentro del espacio blanco (la cámara se aleja en main.js). Escritorio: horizonte (abajo). */
.globo{position:absolute;left:50%;bottom:var(--space-4);width:min(82%,300px);aspect-ratio:1;translate:-50% 0;pointer-events:none;opacity:0;scale:.92;transition:opacity .8s ease,scale 1.2s cubic-bezier(.2,.7,.2,1)}
.globo.listo{opacity:1;scale:1}
.globo canvas{display:block}
.dias7{display:grid;gap:var(--space-2);margin-top:var(--space-2)}
.dias7__barra{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dias7__barra li{height:8px;border-radius:3px;background:color-mix(in srgb,var(--tinta) 12%,transparent);transition:background-color .3s ease,box-shadow .3s ease}
.dias7__barra li.lleno{background:var(--verde);box-shadow:0 0 10px color-mix(in srgb,var(--verde) 60%,transparent)}
.dias7__barra li.lleno:last-child{background:var(--verde-hover)}
.dias7__hito{display:flex;align-items:baseline;gap:var(--space-2);font-weight:700;font-size:15px;min-height:1.4em}
.dias7__hito b{flex:none;padding:2px 8px;border-radius:6px;background:var(--noche);color:var(--en-noche);font-size:12px}
.dias7__hito.cambia{animation:palabra-sube .4s var(--resorte) both}
/* Al día 7, tu página se enciende sobre la Tierra */
.dias7__baliza{position:absolute;z-index:2;left:50%;bottom:150px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:12px;white-space:nowrap;
  background:var(--noche);color:var(--en-noche);font-weight:700;font-size:13px;box-shadow:0 10px 24px -8px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--verde) 40%,transparent);
  translate:-50% 12px;scale:.8;opacity:0;transition:opacity .3s ease,translate .5s var(--resorte),scale .5s var(--resorte)}
.dias7__baliza i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--verde);box-shadow:0 0 10px var(--verde)}
.dias7__baliza i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--verde);animation:onda 1.6s ease-out infinite}
.dias7__baliza::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:8px;margin-left:-6px;background:var(--noche);clip-path:polygon(0 0,100% 0,50% 100%)}
.b--dias.lista .dias7__baliza{opacity:1;translate:-50% 0;scale:1}
@media (min-width: 1024px){
  .bento .b--dias{min-height:430px}
  .globo{bottom:0;width:150%;translate:-50% 60%}
  .dias7__baliza{bottom:120px}
}

/* $1,000: el ticket que se imprime */
.b--precio{justify-content:flex-start;gap:var(--space-1)}
.precio__lema{font-weight:700;font-size:15px;color:var(--tinta-media)}
.ticket{position:relative;margin-top:var(--space-4);padding-top:10px;overflow:hidden;cursor:pointer}
.ticket__ranura{position:absolute;z-index:2;left:-4px;right:-4px;top:0;height:12px;border-radius:6px;background:linear-gradient(180deg,#0a151c,#24363f);box-shadow:inset 0 -2px 3px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.25)}
.ticket__papel{position:relative;margin:0 10px 14px;padding:14px 14px 18px;background:#fdfdfb;color:#0a151c;font-family:var(--font-mono);font-size:12px;box-shadow:0 10px 18px -10px rgba(0,0,0,.35)}
.ticket__papel::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(-45deg,transparent 6px,#fdfdfb 0) 0 0/12px 8px repeat-x,linear-gradient(45deg,transparent 6px,#fdfdfb 0) 0 0/12px 8px repeat-x}
.ticket__cabeza{padding-bottom:8px;margin-bottom:8px;border-bottom:1.5px dashed #c8d1cd;text-align:center;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#5b6b71}
.ticket__lista{display:grid;gap:7px}
.ticket__lista li{display:flex;align-items:center;gap:8px;font-family:var(--font-texto);font-weight:700;font-size:13px}
.ticket__lista b{margin-left:auto;display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--verde);color:#0a151c;font-size:11px}
.ticket__logo{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:7px;background:#ffffff;box-shadow:0 0 0 1px #e2e9e5}
.ticket__logo svg,.ticket__logo img{width:16px;height:16px;object-fit:cover}
.ticket__logo--situ{background:#0a151c;box-shadow:none;color:var(--verde);--puerta-ext:var(--verde);--puerta-int:#ffffff}
.ticket__logo--situ .puerta{width:9px;height:13px}
.ticket__logo--situ .icono{width:14px;height:14px}
.ticket__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:10px;border-top:1.5px dashed #c8d1cd;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.01em}
.ticket__total b{font-family:var(--font-display);font-size:22px;letter-spacing:-.02em;text-transform:none}
.ticket__total b small{font-family:var(--font-texto);font-size:12px;font-weight:700;letter-spacing:0;color:#5b6b71}
.ticket__nota{margin-top:6px;font-family:var(--font-texto);font-size:13px;font-weight:500;color:#46575e}
.ticket__nota span{font-family:var(--font-display);font-weight:800;color:#0a151c}
/* En la tarjeta angosta, "TOTAL AL MES" no se parte: si no cabe, el monto baja completo a la derecha */
.ticket__total{flex-wrap:wrap;column-gap:8px;row-gap:2px}
.ticket__total span{white-space:nowrap}
.ticket__total b{margin-left:auto;white-space:nowrap}
.ticket.imprime .ticket__nota{animation:linea .35s ease 2.45s both}
/* "Desde" chico antes del precio, alineado arriba como "al mes" */
.precio__desde{align-self:flex-start;margin-top:8px;margin-right:2px;font-family:var(--font-texto);font-size:16px;font-weight:700;letter-spacing:0;line-height:1;color:var(--tinta-media)}
/* Botón a los planes: dentro de la portada oscura, sobre la tarjeta clara lleva la tinta normal */
.precio__planes{align-self:flex-start;margin-top:var(--space-2)}
.zona-noche .b--claro .st-btn--contorno{color:var(--tinta);border-color:var(--tinta);background:transparent;box-shadow:inset 0 1px 0 var(--brillo)}
.zona-noche .b--claro .st-btn--contorno:hover{background:var(--verde-suave);border-color:var(--tinta);box-shadow:inset 0 1px 0 var(--brillo),var(--sombra-suave)}
/* La impresión: el papel baja de la ranura y las líneas salen una por una */
.ticket.imprime .ticket__papel{animation:imprime 1.1s steps(9) both}
@keyframes imprime{from{translate:0 -100%}}
.ticket.imprime .ticket__lista li{animation:linea .35s ease both;animation-delay:calc(1.1s + var(--i) * .28s)}
@keyframes linea{from{opacity:0;translate:-6px 0}}
.ticket.imprime .ticket__lista b{animation:entra .4s var(--resorte) both;animation-delay:calc(1.25s + var(--i) * .28s)}
.ticket.imprime .ticket__total{animation:linea .35s ease 2.3s both}

@media (min-width: 640px){
  .b{padding:var(--space-6)}
  .b__cifra{font-size:72px}
  .b__cifra--precio{font-size:60px}
}
@media (min-width: 1024px){
  .bento{grid-template-columns:1.9fr 1fr 1fr;grid-template-rows:auto auto;gap:var(--space-4)}
  .b--ejemplo{grid-column:1;grid-row:1 / span 2}
  .b--dias,.b--chat,.b--mapa,.b--precio{min-height:250px}
}

/* Ejemplo de página en ventana de navegador */
.navegador{width:100%;overflow:hidden;border-radius:var(--radius-md);background:var(--superficie-alta);border:1px solid color-mix(in srgb,var(--en-noche) 16%,transparent);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.navegador__barra{display:flex;align-items:center;gap:var(--space-3);height:32px;padding-inline:var(--space-3);background:color-mix(in srgb,var(--en-noche) 12%,var(--noche))}
.navegador__puntos{display:flex;gap:5px}
.navegador__puntos i{width:8px;height:8px;border-radius:2px;background:color-mix(in srgb,var(--en-noche) 30%,transparent)}
.navegador__puntos i:first-child{background:var(--verde)}
.navegador__url{flex:1;max-width:220px;margin-inline:auto;padding:2px var(--space-3);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--en-noche) 8%,transparent);font-family:var(--font-mono);font-size:11px;line-height:18px;text-align:center;color:color-mix(in srgb,var(--en-noche) 75%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navegador img{width:100%;height:auto;aspect-ratio:1200/785;object-fit:cover}
.ejemplo__pie{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;margin-top:auto;font-size:14px;line-height:1.4;color:color-mix(in srgb,var(--en-noche) 78%,transparent)}
.ejemplo__pie strong{display:block;font-family:var(--font-display);font-size:18px;color:var(--en-noche)}
.ejemplo__pie .st-tag{flex:none}
/* Chat vivo de WhatsApp */
.b--chat{justify-content:flex-start}
.wa{position:relative;display:flex;flex-direction:column;margin-top:auto;border-radius:var(--radius-md);background:color-mix(in srgb,var(--noche) 55%,transparent);border:1px solid color-mix(in srgb,var(--en-noche) 8%,transparent);cursor:pointer}
.wa__cabeza{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-bottom:1px solid color-mix(in srgb,var(--en-noche) 8%,transparent)}
.wa__avatar{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;font-size:11px;font-weight:700;color:var(--en-verde);background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 70%,var(--en-noche)),var(--verde));transition:opacity .25s ease}
.wa__quien{display:grid;line-height:1.2;min-width:0}
.wa__quien strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s ease}
.wa__quien small{font-size:11px;color:color-mix(in srgb,var(--en-noche) 60%,transparent);transition:color .2s ease}
.wa__quien small.escribiendo{color:var(--verde)}
.wa__mensajes{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:178px;padding:var(--space-2) var(--space-3) var(--space-3);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 36px);mask-image:linear-gradient(transparent,#000 36px)}
.wa__mensajes.saliendo > *{opacity:0;translate:0 -12px;transition:opacity .35s ease,translate .35s ease}
.burbuja{position:relative;flex:none;align-self:flex-start;max-width:86%;font-size:13px;line-height:1.35;padding:6px var(--space-3);border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 2px;background:color-mix(in srgb,var(--en-noche) 14%,transparent);transform-origin:left bottom}
.burbuja--negocio{align-self:flex-end;background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 80%,var(--en-noche)),var(--verde) 60%);color:var(--en-verde);font-weight:700;border-radius:var(--radius-md) var(--radius-md) 2px var(--radius-md);transform-origin:right bottom}
.burbuja.entra{animation:entra .45s var(--resorte) both}
@keyframes entra{from{opacity:0;scale:.5;translate:0 8px}}
.burbuja.festeja{animation:festeja .6s var(--resorte)}
@keyframes festeja{40%{scale:1.08}}
.burbuja__meta{float:right;display:inline-flex;align-items:center;gap:2px;margin:5px 0 -3px 8px;font-size:10px;font-weight:500;line-height:1;opacity:.65}
.burbuja__checks{width:16px;height:10px;stroke:currentColor;stroke-width:1.6;fill:none;opacity:.55;transition:opacity .3s ease,color .3s ease}
.burbuja__checks.leido{opacity:1;stroke-width:2}
/* Escribiendo… */
.burbuja--escribe{display:flex;gap:4px;padding:10px 12px}
.burbuja--escribe i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6;animation:salta 1s ease-in-out infinite}
.burbuja--escribe i:nth-child(2){animation-delay:.15s}
.burbuja--escribe i:nth-child(3){animation-delay:.3s}
@keyframes salta{30%{translate:0 -4px;opacity:1}}
/* Reacción del cliente sobre el mensaje del negocio */
.burbuja__reaccion{position:absolute;bottom:-12px;left:-6px;display:grid;place-items:center;min-width:24px;height:22px;padding:0 4px;border-radius:11px;font-size:13px;line-height:1;background:var(--noche);border:2px solid color-mix(in srgb,var(--en-noche) 12%,var(--noche));animation:entra .5s var(--resorte) both}
.burbuja:has(.burbuja__reaccion){margin-bottom:10px}
/* Lluvia de emojis */
.wa__fiesta{position:absolute;inset:0;pointer-events:none;z-index:3}
.wa__fiesta span{position:absolute;font-size:20px;line-height:1;will-change:transform,opacity}
@media (max-width: 1023px){
  .bento > .b{grid-column:span 2}
  .wa__mensajes{height:210px}
}

/* Vitrina de páginas (tarjeta grande de la portada) */
.b--ejemplo{gap:var(--space-4);justify-content:space-between}
.pv__cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%}
.pv__controles{display:flex;align-items:center;gap:var(--space-2)}
.pv__contador{font-family:var(--font-display);font-weight:800;font-size:14px;color:color-mix(in srgb,var(--en-noche) 60%,transparent);font-variant-numeric:tabular-nums}
.pv__contador b{color:var(--en-noche);font-size:18px}
.pv__pausa{display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:10px;border:1px solid color-mix(in srgb,var(--en-noche) 20%,transparent);background:transparent;color:var(--en-noche);cursor:pointer}
.pv__pausa .icono{width:14px;height:14px}
.pv__pausa .icono--play,.b--ejemplo.pausada .pv__pausa .icono--pausa{display:none}
.b--ejemplo.pausada .pv__pausa .icono--play{display:block}
.navegador__url{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.navegador__url svg{width:8px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
/* La banda: dos páginas a la vista; avanzan hacia arriba. La altura la calcula main.js (--item-alto) */
.pvb__banda{position:relative;width:100%;--hueco:16px;height:calc(var(--item-alto,300px) * 2 + var(--hueco))}
.pvb{position:absolute;left:0;right:0;top:0;display:grid;gap:8px;transform-origin:50% 0;
  translate:0 calc(var(--fila,0) * (var(--item-alto,300px) + var(--hueco)));
  transition:translate .9s cubic-bezier(.65,0,.25,1),opacity .6s ease,scale .9s cubic-bezier(.65,0,.25,1)}
.pvb[data-pos="0"]{--fila:0;z-index:2}
.pvb[data-pos="1"]{--fila:1;scale:.97;opacity:.92;cursor:pointer;z-index:1}
/* Fuera de vista: todas abajo, salvo la que acaba de salir por arriba (sirve para cualquier número de páginas) */
.pvb:not([data-pos="0"]):not([data-pos="1"]){--fila:2;scale:.9;opacity:0;pointer-events:none}
.pvb.pvb--sale:not([data-pos="0"]):not([data-pos="1"]){--fila:-1}
.pvb.sin-paso{transition:none}
.pvb .navegador img{aspect-ratio:1200/611;object-fit:cover;object-position:top center}
.pvb[data-pos="0"] .navegador{box-shadow:0 0 0 2px var(--verde),0 0 0 7px color-mix(in srgb,var(--verde) 18%,transparent),0 26px 50px -22px color-mix(in srgb,var(--verde) 80%,transparent);transition:box-shadow .6s ease}
.pvb[data-pos="1"]:hover .navegador{box-shadow:0 0 0 2px color-mix(in srgb,var(--verde) 60%,transparent),0 18px 40px -20px rgba(0,0,0,.7)}
/* Etiqueta de cada página */
.pvb__eti{display:flex;align-items:center;gap:8px;min-height:28px;font-size:14px;color:var(--en-noche)}
.pvb__eti b{font-weight:800}
.pvb__eti em{margin-left:auto;padding:3px 8px;border-radius:7px;font-style:normal;font-weight:700;font-size:12px;background:color-mix(in srgb,var(--en-noche) 10%,transparent)}
.pvb__eti em.pvb__real{background:var(--verde);color:var(--en-verde)}
.pvb__dice{padding:4px 9px;border-radius:8px;font-weight:800;font-size:12px;white-space:nowrap}
.pvb[data-pos="0"] .pvb__dice{background:var(--verde);color:var(--en-verde);box-shadow:0 0 14px -2px var(--verde)}
.pvb[data-pos="0"] .pvb__dice::before{content:"Esta podría ser tu página"}
.pvb[data-pos="1"] .pvb__dice{background:color-mix(in srgb,var(--en-noche) 12%,transparent);color:var(--en-noche)}
.pvb[data-pos="1"] .pvb__dice::before{content:"Siguiente"}
.pvb[data-pos="0"] .pvb__eti{animation:palabra-sube .6s var(--resorte) .3s both}
/* Pie: puntos de avance y llamado */
.pvb__pie{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);width:100%}
.pvb__puntos{display:flex;gap:6px}
.pvb__puntos i{width:8px;height:8px;border-radius:3px;background:color-mix(in srgb,var(--en-noche) 22%,transparent);transition:width .45s var(--resorte),background-color .3s ease}
.pvb__puntos i.activo{width:28px;background:var(--verde);box-shadow:0 0 10px var(--verde)}

/* Logos de WhatsApp y Google en las tarjetas */
.logo-insignia{position:absolute;top:var(--space-4);right:var(--space-4);z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--en-noche);box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--noche) 10%,transparent),0 10px 24px -10px rgba(0,0,0,.7);animation:flota 4s ease-in-out infinite}
.logo-insignia svg,.logo-insignia img{width:24px;height:24px;object-fit:cover}
.b--chat .logo-insignia{animation-delay:-2s}
.b--chat .b__titulo,.b--mapa .b__titulo{padding-right:48px}
@keyframes flota{50%{translate:0 -4px}}
.perilla--logo{background:var(--en-noche) !important;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--noche) 10%,transparent),0 2px 6px -2px rgba(0,0,0,.5) !important}
.perilla--logo svg,.perilla--logo img{width:16px;height:16px;object-fit:cover}

/* Mapa vivo: búsqueda → negocios → el tuyo destaca → ruta → ficha */
.b--mapa{justify-content:flex-start}
.mapa{position:relative;aspect-ratio:300/170;margin-top:auto;border-radius:var(--radius-md);overflow:hidden;perspective:700px;cursor:pointer;background:color-mix(in srgb,var(--en-noche) 5%,transparent);border:1px solid color-mix(in srgb,var(--en-noche) 8%,transparent);--rx:0deg;--ry:0deg;--mx:50%;--my:50%}
.mapa::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(180px circle at var(--mx) var(--my),color-mix(in srgb,var(--verde) 16%,transparent),transparent 70%);opacity:0;transition:opacity .3s ease}
.mapa:hover::after{opacity:1}
.mapa__lienzo{position:absolute;inset:0;transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(1.05);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mapa__lienzo::before{content:"";position:absolute;inset:-24px;background-image:linear-gradient(color-mix(in srgb,var(--en-noche) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--en-noche) 6%,transparent) 1px,transparent 1px);background-size:24px 24px;animation:deriva 14s linear infinite}
@keyframes deriva{to{translate:24px 24px}}
.mapa__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mapa__rio{fill:none;stroke:color-mix(in srgb,var(--en-noche) 6%,transparent);stroke-width:14;stroke-linecap:round}
.mapa__parque{fill:color-mix(in srgb,var(--verde) 12%,transparent)}
.mapa__calle{fill:none;stroke:color-mix(in srgb,var(--en-noche) 15%,transparent);stroke-width:7;stroke-linecap:round}
.mapa__calle--chica{stroke-width:3.5;stroke:color-mix(in srgb,var(--en-noche) 10%,transparent)}
.mapa__auto{fill:color-mix(in srgb,var(--en-noche) 75%,transparent)}
.mapa__auto--verde{fill:var(--verde)}
.mapa__ruta{fill:none;stroke:var(--verde);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 3px var(--verde))}
.mapa.ruta .mapa__ruta{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1)}
.mapa__viajero{fill:var(--en-noche);opacity:0;filter:drop-shadow(0 0 4px var(--verde))}
.mapa.ruta .mapa__viajero{opacity:1}

.mapa__punto{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%}
/* Tú: quien está buscando */
.mapa__tu{width:12px;height:12px;border-radius:50%;background:var(--en-noche);border:3px solid color-mix(in srgb,var(--verde) 80%,var(--en-noche));animation:late 2s ease-out infinite}
@keyframes late{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--en-noche) 50%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
/* La competencia: aparece y luego se apaga */
.mapa__competidor{width:12px;height:12px;border-radius:50% 50% 50% 2px;rotate:-45deg;background:color-mix(in srgb,var(--en-noche) 40%,transparent);opacity:0;scale:0;transition:opacity .3s ease var(--d),scale .45s var(--resorte) var(--d)}
.mapa.competidores .mapa__competidor{opacity:1;scale:1}
.mapa.encontrado .mapa__competidor{opacity:.35;scale:.75;transition-delay:0s}
/* Tu negocio */
.mapa__onda,.mapa__pin{--x:65.3%;--y:50.6%}
.mapa__onda{width:28px;height:28px;border-radius:50%;border:2px solid var(--verde);opacity:0}
.mapa.encontrado .mapa__onda{animation:onda 2.1s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:calc(var(--i) * .7s)}
@keyframes onda{0%{opacity:.9;scale:.3}100%{opacity:0;scale:4.5}}
.mapa__pin{position:absolute;left:var(--x);top:var(--y);z-index:2;display:grid;place-items:center;width:34px;height:34px;margin:-42px 0 0 -17px;border-radius:var(--radius-sm);background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 70%,var(--en-noche)),var(--verde) 60%);color:var(--en-verde);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 55%,transparent),0 0 22px -2px var(--verde);opacity:0}
.mapa__pin::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:8px;margin-left:-6px;background:var(--verde);clip-path:polygon(0 0,100% 0,50% 100%)}
.mapa__pin .icono{width:20px;height:20px}
.mapa.encontrado .mapa__pin{animation:cae .75s cubic-bezier(.3,1.5,.6,1) forwards}
@keyframes cae{0%{opacity:0;translate:0 -70px;scale:.6}55%{opacity:1;translate:0 4px;scale:1.05 .92}100%{opacity:1;translate:0 0;scale:1}}
/* Ficha con reseñas */
.mapa__ficha{position:absolute;right:calc(34.7% + 24px);top:calc(50.6% - 44px);z-index:3;display:grid;gap:1px;padding:6px 10px;border-radius:8px;background:var(--en-noche);color:var(--noche);font-size:11px;line-height:1.3;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.8);opacity:0;translate:0 8px;scale:.9;transform-origin:right center;transition:opacity .2s ease,translate .2s ease,scale .2s ease}
.mapa__ficha strong{font-family:var(--font-display);font-size:13px}
.mapa__ficha b{color:color-mix(in srgb,var(--verde) 55%,var(--noche));letter-spacing:-.05em}
.mapa.ficha .mapa__ficha{opacity:1;translate:0 0;scale:1;transition:opacity .3s ease,translate .5s var(--resorte),scale .5s var(--resorte)}
/* Buscador */
.mapa__buscador{position:absolute;left:8px;top:8px;right:16%;z-index:4;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:var(--en-noche);color:var(--noche);font-size:12px;font-weight:500;box-shadow:0 8px 18px -8px rgba(0,0,0,.7)}
.mapa__buscador svg{width:14px;height:14px;flex:none}
.mapa__consulta{overflow:hidden;white-space:nowrap}
.mapa__cursor{flex:none;width:1.5px;height:14px;background:var(--noche);animation:parpadea 1s steps(1) infinite}
@keyframes parpadea{50%{opacity:0}}
@media (max-width: 1023px){
  .b--mapa,.b--precio{grid-column:span 2}
}
/* Escritorio: cada fila toma la altura de su tarjeta más alta; el mapa y el chat
   crecen para llenar su tarjeta en vez de dejar un hueco entre el título y el contenido */
@media (min-width: 1024px){
  .b--mapa .mapa{flex:1;aspect-ratio:auto;min-height:170px;margin-top:0}
  .b--chat .wa{flex:1;margin-top:0}
  .b--chat .wa__mensajes{flex:1;height:auto;min-height:178px}
}
/* Mapa angosto (escritorio, columna chica): ficha debajo del pin y buscador más compacto */
.mapa{container-type:inline-size}
@container (max-width: 320px){
  .mapa__ficha{right:auto;left:65.3%;top:calc(50.6% + 8px);margin-left:-70px;width:140px;transform-origin:center top}
  .mapa__buscador{right:8px;height:24px;font-size:11px;padding:0 8px}
}

/* ---------- Giros ---------- */
.giros{padding-block:var(--space-12);border-bottom:1px solid var(--linea)}
.giros__titulo{display:flex;justify-content:center;margin-bottom:var(--space-8)}
/* Palabra que cambia dentro de la etiqueta: "Hacemos páginas para talleres" */
.giros__palabra{display:inline-grid;overflow:hidden;margin-left:-.15em;color:var(--verde-texto);transition:width .45s var(--resorte)}
.giros__palabra > span{grid-area:1/1;white-space:nowrap}
.giros__palabra .sale{animation:palabra-sale .35s ease forwards}
.giros__palabra .entra{animation:palabra-entra .5s var(--resorte) both}
@keyframes palabra-sale{to{translate:0 -110%;opacity:0}}
@keyframes palabra-entra{from{translate:0 110%;opacity:0}}

/* Reflector de giros */
.giros__lista{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
.giro{position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);border:1px solid transparent;font-family:var(--font-display);font-weight:700;font-size:clamp(16px,1.6vw,19px);color:var(--tinta-media);cursor:default;
  transition:color .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease,translate .45s var(--resorte)}
.giro__icono{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta);box-shadow:inset 0 1px 0 var(--brillo);
  transition:background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}
.giro__icono .icono{transform-box:fill-box}
.giro__barra{position:absolute;left:var(--space-3);right:var(--space-3);bottom:0;height:2px;border-radius:2px;background:var(--verde);transform-origin:left;scale:0 1}
/* Encendido */
.giro.activo{color:var(--tinta);background:var(--superficie);border-color:var(--linea);box-shadow:var(--sombra-suave);translate:0 -4px}
.giro.activo .giro__icono{color:var(--en-verde);border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 70%,var(--en-noche)),var(--verde) 60%);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 55%,transparent),0 0 0 4px color-mix(in srgb,var(--verde) 16%,transparent),0 8px 20px -8px var(--verde)}
.giro.activo .giro__barra{animation:barra var(--paso,2.2s) linear forwards}
.giros__lista.pausa .giro.activo .giro__barra{animation:none;scale:1 1}
@keyframes barra{to{scale:1 1}}
/* Cada ícono, a su manera */
.giro.activo .giro__icono .icono{animation:var(--anim) .9s var(--resorte) both}
.giro--llave{--anim:aprieta}
.giro--cruz{--anim:late}
.giro--tijeras{--anim:corta}
.giro--maletin{--anim:brinca}
.giro--cubiertos{--anim:choca}
.giro--bolsa{--anim:columpia}
@keyframes aprieta{0%{rotate:0deg}35%{rotate:-50deg}70%{rotate:12deg}100%{rotate:0deg}}
@keyframes late{0%,100%{scale:1}20%{scale:1.3}40%{scale:.95}60%{scale:1.18}}
@keyframes corta{0%,100%{scale:1 1;rotate:0deg}20%{scale:1 .7;rotate:-8deg}40%{scale:1 1.05;rotate:4deg}60%{scale:1 .75;rotate:-6deg}80%{scale:1 1}}
@keyframes brinca{0%,100%{translate:0 0;scale:1}25%{translate:0 1px;scale:1.15 .85}50%{translate:0 -9px;scale:.92 1.1}75%{translate:0 0;scale:1.1 .9}}
@keyframes choca{0%,100%{rotate:0deg}20%{rotate:-18deg}40%{rotate:16deg}60%{rotate:-10deg}80%{rotate:6deg}}
@keyframes columpia{0%{rotate:0deg}25%{rotate:18deg}50%{rotate:-14deg}75%{rotate:8deg}100%{rotate:0deg}}
.giro--bolsa .icono{transform-origin:50% 10%}
.giro--llave .icono{transform-origin:20% 80%}
@media (min-width: 640px){ .giros__lista{grid-template-columns:repeat(3,1fr)} }
@media (min-width: 1024px){
  .giros__lista{grid-template-columns:repeat(6,1fr);gap:var(--space-2)}
  .giro{flex-direction:column;gap:var(--space-3);padding:var(--space-4) var(--space-2) var(--space-6);text-align:center}
  .giro__icono{width:56px;height:56px;border-radius:16px}
  .giro__icono .icono{width:26px;height:26px}
}

/* ---------- Secciones ---------- */
.seccion{padding-block:var(--seccion-y)}
.seccion--superficie{background:var(--superficie);border-block:1px solid var(--linea)}
.cabeza-seccion{display:grid;gap:var(--space-6);align-items:end}
.cabeza-seccion .st-tag{margin-bottom:var(--space-4)}
.cabeza-seccion__lado{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);max-width:420px}
@media (min-width: 1024px){
  .cabeza-seccion{grid-template-columns:1.5fr 1fr;gap:var(--space-16)}
  .cabeza-seccion__lado{justify-self:end}
}

/* ---------- Servicios: vitrina con celular HD ---------- */
.vitrina{display:grid;gap:var(--space-8);margin-top:var(--space-12)}
/* Pestañas */
.vitrina__tabs{display:grid;gap:var(--space-2);order:2}
.vtab{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:var(--space-4);width:100%;padding:var(--space-4);text-align:left;cursor:pointer;border-radius:var(--radius-lg);border:1px solid transparent;background:transparent;color:var(--tinta-media);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,color .3s ease}
.vtab:hover{background:color-mix(in srgb,var(--superficie) 60%,transparent)}
.vtab__icono{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta);box-shadow:inset 0 1px 0 var(--brillo);transition:background .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}
.vtab__texto{display:grid;gap:var(--space-1);padding-top:2px}
.vtab__texto strong{font-family:var(--font-display);font-weight:800;font-size:clamp(18px,1.7vw,21px);line-height:1.2;letter-spacing:-.01em}
.vtab__texto span{display:none;font-size:15px;line-height:1.5;color:var(--tinta-media)}
.vtab__barra{position:absolute;left:var(--space-4);right:var(--space-4);bottom:0;height:2px;border-radius:2px;background:var(--verde);transform-origin:left;scale:0 1}
.vtab[aria-selected="true"]{color:var(--tinta);background:var(--superficie);border-color:var(--linea);box-shadow:var(--sombra-suave)}
.vtab[aria-selected="true"] .vtab__texto span{display:block}
.vtab[aria-selected="true"] .vtab__icono{color:var(--en-verde);border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 70%,var(--en-noche)),var(--verde) 60%);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 55%,transparent),0 0 0 4px color-mix(in srgb,var(--verde) 16%,transparent),0 8px 20px -8px var(--verde)}
.vitrina.auto .vtab[aria-selected="true"] .vtab__barra{animation:barra var(--dura,7s) linear forwards}
.vitrina.auto.retenida .vtab[aria-selected="true"] .vtab__barra{animation-play-state:paused}

/* Escena */
.vitrina__escena{position:relative;display:grid;place-items:center;padding-block:var(--space-8);perspective:1200px;--rx:0deg;--ry:0deg;--px:0px;--py:0px}
.vitrina__planos span{position:absolute;top:50%;left:50%;pointer-events:none;transition:translate .6s cubic-bezier(.2,.7,.2,1)}
.vitrina__planos span:first-child{width:min(300px,62vw);height:min(520px,108vw);margin:calc(min(520px,108vw) / -2) 0 0 calc(min(300px,62vw) * -.95);background:var(--verde);clip-path:polygon(0 22%,100% 0,100% 78%,0 100%);opacity:.9;translate:calc(var(--px) * -1) calc(var(--py) * -1)}
.vitrina__planos span:last-child{width:min(120px,24vw);height:min(470px,98vw);margin:calc(min(470px,98vw) / -2) 0 0 calc(min(300px,62vw) * .02);background:var(--noche);clip-path:polygon(0 0,100% 22%,100% 100%,0 78%);translate:calc(var(--px) * -.6) calc(var(--py) * -.6)}
.vitrina__chip{position:absolute;z-index:3;right:max(0px,calc(50% - 250px));top:0;padding:var(--space-2) var(--space-4);border-radius:12px;background:var(--superficie);color:var(--tinta);border:1px solid var(--linea);font-weight:700;font-size:14px;box-shadow:var(--sombra-suave),0 18px 40px -18px rgba(0,0,0,.45);translate:var(--px) var(--py);transition:translate .6s cubic-bezier(.2,.7,.2,1)}
.vitrina__chip::before{content:"";display:inline-block;width:8px;height:8px;margin-right:var(--space-2);border-radius:2px;background:var(--verde);box-shadow:0 0 8px var(--verde)}
.vitrina__chip.entra{animation:chip-entra .6s var(--resorte) both}
@keyframes chip-entra{from{opacity:0;scale:.7;rotate:-6deg}}

/* El celular (materiales del equipo: tokens locales) */
.cel{
  --c-fondo:#ffffff;--c-suave:#f1f5f3;--c-linea:#e2e9e5;--c-tinta:#0a151c;--c-media:#5b6b71;--c-verde:#00cc84;--c-verde-texto:#007a4d;--c-noche:#0a151c;
  position:relative;z-index:2;width:min(300px,76vw);aspect-ratio:300/620;border-radius:54px;padding:11px;
  background:linear-gradient(150deg,#5d666c 0%,#22292e 14%,#3b444a 40%,#171d21 62%,#4a5359 86%,#262d32 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 4px #0b0f12,0 2px 0 1px rgba(255,255,255,.06),0 60px 90px -40px rgba(0,0,0,.6),0 40px 80px -30px color-mix(in srgb,var(--verde) 55%,transparent);
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s cubic-bezier(.2,.7,.2,1);animation:cel-flota 6s ease-in-out infinite;
}
@keyframes cel-flota{50%{translate:0 -10px}}
.cel.cambia{animation:cel-flota 6s ease-in-out infinite,cel-cambia .6s var(--resorte)}
@keyframes cel-cambia{40%{scale:.97}}
.cel__boton{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#1b2125,#59626a,#1b2125)}
.cel__boton--accion{left:-3px;top:17%;height:5%}
.cel__boton--sube{left:-3px;top:26%;height:9%}
.cel__boton--baja{left:-3px;top:37%;height:9%}
.cel__boton--lado{right:-3px;top:29%;height:14%}
.cel__pantalla{position:relative;height:100%;overflow:hidden;border-radius:44px;background:var(--c-fondo);color:var(--c-tinta);font-family:var(--font-texto);isolation:isolate}
.cel__isla{position:absolute;z-index:20;top:10px;left:50%;width:31%;height:27px;margin-left:-15.5%;border-radius:20px;background:#000;box-shadow:inset 0 0 0 1px #111}
.cel__barra{position:absolute;z-index:19;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:46px;padding:2px 24px 0 32px;font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--c-tinta);pointer-events:none}
.cel__estado{display:flex;align-items:center;gap:5px}
.cel__estado svg{height:11px;width:auto;fill:currentColor}
.cel__brillo{position:absolute;inset:0;z-index:30;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 22%,transparent 40%);mix-blend-mode:screen}

/* Pantallas */
.pantalla{position:absolute;inset:0;padding:50px 14px 14px;opacity:0;translate:40px 0;transition:opacity .3s ease,translate .5s cubic-bezier(.2,.7,.2,1)}
.pantalla.activa{opacity:1;translate:0 0}
.pantalla.sale{opacity:0;translate:-40px 0}
.pantalla[hidden]{display:none}
.mock{position:relative;height:100%;display:flex;flex-direction:column;gap:10px;font-size:12px;line-height:1.35}
.mchip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:8px;background:var(--c-suave);font-size:11px;font-weight:700;white-space:nowrap}
.mchip--verde{color:var(--c-verde-texto)}
.mchip--verde i{width:6px;height:6px;border-radius:50%;background:var(--c-verde);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-verde) 25%,transparent)}
.mbtn{display:grid;place-items:center;padding:10px;border-radius:12px;font-weight:700;font-size:12px;background:var(--c-suave);color:var(--c-tinta)}
.mbtn--verde{background:linear-gradient(180deg,#3ddc9f,var(--c-verde) 60%);color:var(--c-tinta);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 16px -8px var(--c-verde)}
/* Dedo que toca la pantalla */
.dedo{position:absolute;z-index:8;left:var(--x);top:var(--y);width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(10,21,28,.18);border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;pointer-events:none}
.pantalla.activa .dedo{animation:toca 1s ease var(--t) both}
@keyframes toca{0%{opacity:0;scale:1.6}30%{opacity:1;scale:1}45%{scale:.78;box-shadow:0 0 0 0 rgba(0,204,132,.6)}70%{opacity:1;scale:1;box-shadow:0 0 0 16px rgba(0,204,132,0)}100%{opacity:0;scale:1}}

/* 1 · Tu página se construye */
.p1__progreso{display:grid;gap:6px;padding:8px 10px;border-radius:12px;background:var(--c-noche);color:#fff}
.p1__progreso span{display:flex;justify-content:space-between;font-size:11px}
.p1__progreso em{font-style:normal;color:var(--c-verde)}
.p1__progreso i{height:4px;border-radius:2px;background:var(--c-verde);transform-origin:left;box-shadow:0 0 10px var(--c-verde)}
.pantalla.activa .p1__progreso i{animation:barra-desde 2.2s cubic-bezier(.4,0,.2,1) both}
@keyframes barra-desde{from{scale:0 1}}
.p1__url{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px;border-radius:8px;background:var(--c-suave);font-size:10.5px;color:var(--c-media)}
.p1__url svg{width:9px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6}
.p1__hero{position:relative;overflow:hidden;display:grid;align-content:end;gap:2px;min-height:118px;padding:12px;border-radius:14px;background:linear-gradient(160deg,#16303a,var(--c-noche) 70%);color:#fff}
.p1__hero strong{position:relative;font-family:var(--font-display);font-size:21px;line-height:1.05;letter-spacing:-.02em}
.p1__hero > span:not(.p1__plano){position:relative;font-size:11px;opacity:.8}
.p1__plano{position:absolute;right:16px;top:-10px;width:56px;height:110px;background:var(--c-verde);clip-path:polygon(0 22%,100% 0,100% 78%,0 100%);opacity:.9}
.p1__plano--2{right:-6px;top:4px;width:24px;height:100px;background:#fff;opacity:.18;clip-path:polygon(0 0,100% 22%,100% 100%,0 78%)}
.p1__chips{display:flex;gap:6px}
.p1__botones{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.p1__lista{display:grid;gap:6px}
.p1__lista li{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid var(--c-linea)}
.p1__lista span{color:var(--c-media);font-size:11px}
/* Bloques: primero esqueleto, luego contenido */
.bloque{position:relative}
.bloque::after{content:"";position:absolute;inset:0;border-radius:inherit;border-radius:10px;background:linear-gradient(100deg,var(--c-suave) 30%,#fff 50%,var(--c-suave) 70%) 0 0/300% 100%;opacity:0;pointer-events:none}
.pantalla.activa .bloque{animation:bloque-entra .5s var(--resorte) var(--d) both}
.pantalla.activa .bloque::after{animation:esqueleto .35s ease var(--d) both,brilla 1s linear infinite}
@keyframes esqueleto{from{opacity:1}to{opacity:0}}
@keyframes brilla{to{background-position:-150% 0}}
@keyframes bloque-entra{from{scale:.96}}

/* 2 · WhatsApp */
.p2__hero{min-height:150px}
.p2__boton{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;background:var(--c-noche);color:#fff;font-weight:700;font-size:12.5px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.p2__boton img{width:20px;height:20px;border-radius:6px;background:#fff;object-fit:cover}
.pantalla.activa .p2__boton{animation:late-boton 1.2s ease-in-out 2 both}
@keyframes late-boton{50%{scale:1.04;box-shadow:0 0 0 6px color-mix(in srgb,var(--c-verde) 30%,transparent),0 10px 24px -10px rgba(0,0,0,.5)}}
.p2__chat{position:absolute;inset:-6px -14px -14px;z-index:6;display:flex;flex-direction:column;background:#eef2ef;border-radius:20px 20px 0 0;box-shadow:0 -20px 40px -20px rgba(0,0,0,.35)}
.pantalla.activa .p2__chat{animation:sube-hoja .55s var(--resorte) 1.5s both}
@keyframes sube-hoja{from{translate:0 100%}}
.p2__cabeza{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:20px 20px 0 0;background:var(--c-noche);color:#fff}
.p2__cabeza small{display:block;font-size:10px;color:var(--c-verde)}
.p2__avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#16252e;--puerta-ext:var(--c-verde);--puerta-int:#fff}
.p2__avatar .puerta{width:10px;height:15px}
.p2__mensajes{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px}
.p2__mensajes::before{content:"Hoy";align-self:center;margin-bottom:auto;padding:3px 10px;border-radius:8px;background:rgba(255,255,255,.8);font-size:10px;font-weight:700;color:var(--c-media)}
.mb{max-width:82%;padding:7px 10px;border-radius:12px;font-size:11.5px;line-height:1.35;background:#fff;align-self:flex-start;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.mb small{display:block;text-align:right;margin-top:2px;font-size:9px;opacity:.55}
.mb--yo{align-self:flex-end;background:#c9f5df;border-bottom-right-radius:3px}
.mb--ellos{border-bottom-left-radius:3px}
.pantalla.activa .mb{animation:entra .45s var(--resorte) var(--t) both}
.mb--escribe{display:flex;gap:3px;padding:9px 11px;opacity:0;max-height:0;overflow:hidden;margin-block:-3px}
.mb--escribe i{width:5px;height:5px;border-radius:50%;background:var(--c-media);animation:salta 1s ease-in-out infinite}
.mb--escribe i:nth-child(2){animation-delay:.15s}
.mb--escribe i:nth-child(3){animation-delay:.3s}
.pantalla.activa .mb--escribe{animation:escribe-vive 1s ease var(--t) both}
@keyframes escribe-vive{0%{opacity:0;max-height:0;margin-block:-3px}15%,85%{opacity:1;max-height:30px;margin-block:0}100%{opacity:0;max-height:0;margin-block:-3px}}
.p2__escribir{display:flex;align-items:center;gap:8px;margin:0 10px 14px;padding:8px 8px 8px 14px;border-radius:20px;background:#fff;color:var(--c-media);font-size:11px}
.p2__escribir span{flex:1}
.p2__escribir i{width:26px;height:26px;border-radius:50%;background:var(--c-verde)}

/* 3 · Google */
.p3__buscar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:22px;background:#fff;border:1px solid var(--c-linea);box-shadow:0 4px 14px -6px rgba(0,0,0,.18);font-size:12.5px}
.p3__buscar svg{width:16px;height:16px;flex:none}
.p3__consulta{white-space:nowrap}
.pantalla.activa .p3__consulta{animation:teclea 1.3s steps(18) .3s both}
@keyframes teclea{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.p3__cursor{width:1.5px;height:15px;margin-left:-6px;background:#4285f4;animation:parpadea 1s steps(1) infinite}
.p3__mapa{position:relative;height:130px;overflow:hidden;border-radius:14px;background:#e9efe9}
.p3__mapa svg{position:absolute;inset:0;width:100%;height:100%}
.p3__calle{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round}
.p3__calle--chica{stroke-width:4}
.p3__parque{fill:#c8ecd6}
.p3__otro{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-12px 0 0 -6px;border-radius:50% 50% 50% 2px;rotate:-45deg;background:#b9c3c0}
.pantalla.activa .p3__otro{animation:aparece-pin .4s var(--resorte) var(--d) both}
@keyframes aparece-pin{from{scale:0;opacity:0}}
.p3__pin{position:absolute;left:58%;top:58%;z-index:2;display:grid;place-items:center;width:30px;height:30px;margin:-38px 0 0 -15px;border-radius:9px;background:var(--c-verde);color:var(--c-tinta);box-shadow:0 0 18px var(--c-verde)}
.p3__pin::after{content:"";position:absolute;bottom:-6px;left:50%;margin-left:-5px;width:10px;height:7px;background:var(--c-verde);clip-path:polygon(0 0,100% 0,50% 100%)}
.p3__pin .icono{width:17px;height:17px}
.pantalla.activa .p3__pin{animation:cae .75s cubic-bezier(.3,1.5,.6,1) 2.1s both}
.p3__onda{position:absolute;left:58%;top:58%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--c-verde);opacity:0}
.pantalla.activa .p3__onda{animation:onda 1.8s cubic-bezier(.2,.7,.2,1) 2.5s infinite}
.p3__res{position:relative;display:grid;gap:2px;padding:10px 12px;border-radius:14px;border:1px solid var(--c-linea);font-size:11px;color:var(--c-media)}
.p3__res b{font-family:var(--font-display);font-size:15px;color:var(--c-tinta)}
.p3__res--tu{border-color:color-mix(in srgb,var(--c-verde) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-verde) 18%,transparent),0 12px 24px -14px var(--c-verde)}
.pantalla.activa .p3__res--tu{animation:sube-res .6s var(--resorte) 2.5s both}
@keyframes sube-res{from{opacity:0;translate:0 30px}}
.p3__lugar{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--c-verde);color:var(--c-tinta);font-weight:800;font-size:11px}
.p3__estrellas{color:var(--c-tinta);font-weight:700}
.p3__estrellas i{font-style:normal;color:#f4b400;letter-spacing:-.05em}
.p3__abierto{color:var(--c-verde-texto);font-weight:700}
.p3__acciones{display:flex;gap:5px;margin-top:6px}
.p3__acciones span{padding:4px 8px;border-radius:12px;border:1px solid var(--c-linea);color:#1a73e8;font-weight:700;font-size:10px}
.p3__res--otro{gap:6px;opacity:.6}
.p3__res--otro i{height:8px;border-radius:4px;background:var(--c-suave)}
.p3__res--otro i:first-child{width:55%;height:10px;background:var(--c-linea)}
.pantalla.activa .p3__res--otro{animation:sube-res .5s var(--resorte) var(--d) both}

/* 4 · Agenda a las 11 de la noche */
.pantalla--agenda .mock{gap:8px}
.p4__titulo{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.02em;margin-top:4px}
.p4__lugar{margin-top:-6px;color:var(--c-media);font-size:11px}
.p4__dias{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.p4__dias span{display:grid;justify-items:center;padding:7px 0;border-radius:10px;border:1px solid var(--c-linea);font-weight:800;font-size:14px}
.p4__dias small{font-weight:500;font-size:9.5px;color:var(--c-media)}
.p4__dia--sel{background:var(--c-noche);color:#fff;border-color:transparent !important}
.p4__dia--sel small{color:var(--c-verde)}
.p4__sub{font-weight:700;font-size:11px;margin-top:4px}
.p4__horas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.p4__horas span{display:grid;place-items:center;padding:8px 0;border-radius:10px;background:var(--c-suave);font-weight:700}
.p4__hora--sel{background:var(--c-verde) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-verde) 25%,transparent)}
.pantalla.activa .p4__hora--sel{animation:elige .3s ease 1.25s both}
@keyframes elige{from{background:var(--c-suave);box-shadow:none}}
.p4__confirmar{margin-top:auto}
.p4__ok{position:absolute;inset:-50px -14px -14px;z-index:6;display:grid;place-content:center;justify-items:center;gap:4px;text-align:center;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pantalla.activa .p4__ok{animation:aparece-ok .4s ease 2.4s both}
@keyframes aparece-ok{from{opacity:0}}
.p4__ok svg{width:72px;height:72px;padding:10px;border-radius:50%;background:var(--c-verde);fill:none;stroke:var(--c-tinta);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;box-shadow:0 0 0 10px color-mix(in srgb,var(--c-verde) 20%,transparent),0 0 40px var(--c-verde)}
.p4__ok svg path{stroke-dasharray:40;stroke-dashoffset:0}
.pantalla.activa .p4__ok svg{animation:entra .5s var(--resorte) 2.5s both}
.pantalla.activa .p4__ok svg path{animation:traza .5s ease 2.8s both}
@keyframes traza{from{stroke-dashoffset:40}}
.p4__ok b{margin-top:10px;font-family:var(--font-display);font-size:20px}
.p4__ok span{font-weight:700;font-size:13px}
.p4__ok small{color:var(--c-media)}
.p4__noti{position:absolute;z-index:9;left:-6px;right:-6px;top:-4px;display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:18px;background:rgba(245,247,246,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 30px -12px rgba(0,0,0,.35);font-size:11px;line-height:1.35}
.p4__noti b{display:block;font-size:11.5px}
.p4__noti-icono{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:var(--c-noche);--puerta-ext:var(--c-verde);--puerta-int:#fff}
.p4__noti-icono .puerta{width:9px;height:14px}
.pantalla.activa .p4__noti{animation:baja-noti .6s var(--resorte) 3.7s both}
@keyframes baja-noti{from{translate:0 -150%;opacity:0}}

@media (min-width: 1024px){
  .vitrina{grid-template-columns:1fr 1.15fr;align-items:center;gap:var(--space-12)}
  .vitrina__tabs{order:0}
  .cel{width:310px}
  .vitrina__chip{top:18%}
}

/* ---------- Proceso: dial que gira al bajar + emoticones Situ ---------- */
.proceso{position:relative;margin-top:var(--space-8);--paso:0;--giro:0;--avance:0}
.proceso__escena{display:grid;gap:var(--space-6);justify-items:center;text-align:center}
.dial{display:none}

/* Pestañas (en celular son la navegación; en escritorio, un atajo) */
.proceso__nav{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-6)}
.pnav{min-width:52px;height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta-media);font-family:var(--font-display);font-weight:800;font-size:15px;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--brillo);transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.pnav[aria-selected="true"]{border-color:transparent;color:var(--en-verde);background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 76%,var(--en-noche)),var(--verde) 65%);box-shadow:0 0 0 4px color-mix(in srgb,var(--verde) 16%,transparent),0 10px 22px -10px var(--verde)}

/* Contenido del paso */
.proceso__pasos{display:grid;max-width:520px}
.pp{grid-area:1/1}
.pp.entra{animation:pp-entra .6s var(--resorte) both}
@keyframes pp-entra{from{opacity:0;translate:0 24px;filter:blur(6px)}}
.pp__dia{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:700;font-size:15px;color:var(--verde-texto)}
.pp__dia span{padding:4px 10px;border-radius:8px;background:var(--noche);color:var(--en-noche);font-size:12px;letter-spacing:.02em}
.pp h3{margin-top:var(--space-3);font-size:clamp(34px,4.2vw,58px);line-height:1;letter-spacing:-.035em}
.pp__texto{margin-top:var(--space-4);font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--tinta-media)}
.pp__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-6)}
.pp__chips li{padding:7px 14px;border-radius:999px;border:1px solid var(--linea);background:var(--superficie);font-weight:700;font-size:13px;box-shadow:inset 0 1px 0 var(--brillo)}
.pp.entra .pp__chips li{animation:pp-entra .5s var(--resorte) both}
.pp.entra .pp__chips li:nth-child(1){animation-delay:.18s}
.pp.entra .pp__chips li:nth-child(2){animation-delay:.26s}
.pp.entra .pp__chips li:nth-child(3){animation-delay:.34s}

/* Emoticón Situ del paso */
.proceso__emo{position:relative;display:grid;place-items:center;order:-1;width:min(260px,64vw);aspect-ratio:260/345}
.proceso__halo{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--verde) 34%,transparent),transparent 72%);animation:halo 4s ease-in-out infinite}
@keyframes halo{50%{scale:1.12;opacity:.7}}
.emo{display:block;overflow:visible}
.proceso__emo .emo{grid-area:1/1;width:100%;height:100%;opacity:0;scale:.5;rotate:-14deg;translate:0 30px;transition:opacity .35s ease,scale .7s var(--resorte),rotate .7s var(--resorte),translate .7s var(--resorte)}
.proceso__emo .emo.activo{opacity:1;scale:1;rotate:0deg;translate:0 0;animation:emo-flota 4s ease-in-out .7s infinite}
@keyframes emo-flota{50%{translate:0 -12px;rotate:2deg}}

@media (min-width: 1024px){
  /* El recorrido: 4 pasos de scroll mientras la escena queda fija */
  /* La escena mide lo que necesita (no toda la pantalla) y, al quedarse fija, se centra en el espacio visible */
  .proceso{--alto-escena:min(620px,calc(100vh - var(--alto-cabecera) - 32px));height:calc(var(--alto-escena) + 4 * 60vh)}
  .proceso__escena{position:sticky;top:calc(var(--alto-cabecera) + (100vh - var(--alto-cabecera) - var(--alto-escena)) / 2);height:var(--alto-escena);grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr);align-items:center;justify-items:start;text-align:left;gap:var(--space-8)}
  .proceso__nav{justify-content:flex-start}
  .pnav{min-width:44px;height:36px;font-size:13px;padding:0 10px}
  .pp__chips{justify-content:flex-start}
  /* Tamaños atados también a la altura de la escena: en pantallas bajas nada se recorta */
  .proceso__emo{order:0;justify-self:center;width:min(300px,24vw,calc((var(--alto-escena) - 110px) * .75))}

  /* El dial */
  .dial{--d:min(560px,44vw,calc(var(--alto-escena) - 50px));--radio:calc(var(--d) / 2 + 34px);position:relative;display:block;width:var(--d);aspect-ratio:1;justify-self:end;margin-right:calc(var(--d) * .22)}
  .dial__aro{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .dial__aro circle{fill:none;stroke:var(--linea);stroke-width:.3}
  .dial__aro .dial__avance{stroke:var(--verde);stroke-width:.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--avance) * 100);filter:drop-shadow(0 0 1.5px var(--verde));transition:stroke-dashoffset .2s linear}
  .dial__num{position:absolute;left:50%;top:50%;width:0;height:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--tinta-media);opacity:.4;white-space:nowrap;
    transform:rotate(calc((var(--i) - var(--giro)) * 32deg)) translateX(var(--radio)) rotate(calc((var(--giro) - var(--i)) * 32deg));
    transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .4s ease,color .4s ease,font-size .4s ease}
  .dial__num.activo{opacity:1;color:var(--tinta);font-size:44px;letter-spacing:-.03em}
  .dial__punto{position:absolute;left:100%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 6px color-mix(in srgb,var(--verde) 22%,transparent),0 0 18px var(--verde)}
  .dial__punto::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--verde);animation:onda 2s ease-out infinite}
}

/* ---------- Confianza: tarjetas en bucle + contadores ---------- */
/* clip (no hidden) para no romper el sticky del dial */
#como-trabajamos{overflow-x:clip}
.confianza{position:relative;margin-top:var(--space-12);padding-block:var(--space-8) var(--space-4)}
.confianza::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:30%;height:120px;pointer-events:none;
  background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--verde) 45%,transparent) 0 1px,transparent 1px 10px);
  -webkit-mask:linear-gradient(90deg,#000,transparent 30%,transparent 70%,#000);mask:linear-gradient(90deg,#000,transparent 30%,transparent 70%,#000)}
.confianza__cartas{position:relative;height:360px}
.ccarta{position:absolute;left:50%;top:10px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:min(230px,58vw);height:320px;margin:0 0 0 calc(min(230px,58vw) / -2);padding:22px 18px 24px;border-radius:24px;text-align:center;
  background:linear-gradient(165deg,#2a3f48,#0a151c 70%);color:#fff;border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 50px -24px rgba(0,0,0,.55);
  transition:translate .8s cubic-bezier(.3,1.25,.4,1),rotate .8s cubic-bezier(.3,1.25,.4,1),scale .8s cubic-bezier(.3,1.25,.4,1),filter .5s ease,z-index 0s .3s}
.ccarta[data-pos="0"]{translate:-96% 22px;rotate:-9deg;scale:.9;filter:brightness(.8);z-index:1}
.ccarta[data-pos="1"]{translate:0 0;rotate:0deg;scale:1.04;z-index:3}
.ccarta[data-pos="2"]{translate:96% 22px;rotate:9deg;scale:.9;filter:brightness(.8);z-index:2}
.ccarta__emo{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--verde) 45%,#ffffff),color-mix(in srgb,var(--verde) 25%,#0a151c) 70%);box-shadow:inset 0 -10px 24px rgba(0,0,0,.3),0 0 0 6px rgba(255,255,255,.06)}
.ccarta__emo .emo{width:94px;height:auto;aspect-ratio:260/345}
.ccarta[data-pos="1"] .ccarta__emo .emo{animation:emo-flota 3s ease-in-out infinite}
.ccarta figcaption{display:grid;gap:4px}
.ccarta b{font-family:var(--font-display);font-size:24px;letter-spacing:-.02em}
.ccarta figcaption span{font-size:13px;color:rgba(255,255,255,.7)}
.ccarta figcaption::before{content:"";display:block;width:40px;height:1px;margin:0 auto 10px;background:rgba(255,255,255,.25)}

.confianza__cifras{display:grid;gap:var(--space-6);margin-top:var(--space-8)}
.confianza__cifras > div{display:flex;flex-direction:column-reverse;align-items:center;gap:var(--space-1);text-align:center}
.confianza__cifras dt{font-size:14px;color:var(--tinta-media);max-width:22ch}
.confianza__cifras dd{margin:0;display:flex;align-items:flex-start;font-family:var(--font-display);font-weight:800;font-size:clamp(44px,5vw,64px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.confianza__cifras dd b{font-size:.55em;color:var(--verde-texto);margin-left:2px}
.confianza__cifras dd .cifra{display:inline-flex;min-width:1ch}
/* Rodillos del contador: una tira de dígitos que sube y frena en el número final */
.rodillo{display:inline-block;height:1em;overflow:hidden;line-height:1}
.rodillo__tira{display:block;white-space:pre;text-align:center;translate:0 0}
.rodillo__tira::before{content:attr(data-d)}
.confianza__cifras dd .cifra-texto{display:inline-block}
.confianza.contando .rodillo__tira{animation:rueda var(--dura) cubic-bezier(.15,.75,.2,1) both}
.confianza.sin-movimiento .rodillo__tira{animation:none;translate:0 calc(var(--fin) * -1em)}
@keyframes rueda{to{translate:0 calc(var(--fin) * -1em)}}
.rodillo__signo{display:inline-block}
.confianza__cifras dd b{transition:opacity .3s ease,scale .4s var(--resorte)}
.confianza:not(.contando) .confianza__cifras dd b{opacity:0;scale:.4}
.confianza.contando .confianza__cifras dd b{transition-delay:1.6s}
@media (min-width: 768px){
  .confianza__cifras{grid-template-columns:repeat(3,1fr);gap:0}
  .confianza__cifras > div + div{border-left:1px solid var(--linea)}
}

/* ---------- Antes y después ---------- */
.ad{position:relative;margin-top:var(--space-12);border-radius:28px;overflow:hidden;overflow:clip;border:1px solid var(--linea);box-shadow:var(--sombra-suave),0 40px 80px -40px rgba(0,0,0,.35);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;--pos:50%}
.ad__capa{padding:var(--space-16) var(--space-4) var(--space-6)}
.ad__capa--despues{position:relative;background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--verde) 22%,transparent),transparent 60%),var(--superficie)}
.ad__capa--antes{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),#e7e6e3;color:#3d4246}
.ad__capa--antes .adt{filter:grayscale(1);background:#f4f3f0;border-color:#d6d4cf;box-shadow:none}
.ad__capa--antes .adt:nth-child(1){rotate:-1.2deg}
.ad__capa--antes .adt:nth-child(2){rotate:.8deg}
.ad__capa--antes .adt:nth-child(3){rotate:-.6deg}
.ad__capa--antes .adt:nth-child(4){rotate:1.1deg}
.ad__lado{position:absolute;top:var(--space-4);display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 12px;border-radius:10px;font-weight:700;font-size:14px}
.ad__lado--antes{left:var(--space-4);background:#d6d4cf;color:#3d4246}
.ad__lado--despues{right:var(--space-4);background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 76%,var(--en-noche)),var(--verde) 65%);color:var(--en-verde);box-shadow:0 8px 20px -10px var(--verde);--puerta-ext:var(--en-verde);--puerta-int:color-mix(in srgb,var(--en-verde) 45%,transparent)}
.ad__lado .puerta{width:10px;height:15px}
.ad__grid{display:grid;gap:var(--space-4)}
.adt{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border-radius:18px;background:var(--fondo);border:1px solid var(--linea);box-shadow:var(--sombra-suave)}
.adt__titulo{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:800;font-size:17px}
.adt__titulo span{font-size:12px;color:var(--tinta-media)}
.ad__capa--antes .adt__titulo span{color:inherit;opacity:.6}
.adt__escena{flex:1;display:grid;align-content:start;gap:var(--space-2);font-size:13px}
.adt__pie{font-weight:700;font-size:15px;line-height:1.35}
.ad__capa--despues .adt__pie{color:var(--verde-texto)}

/* Mini escenas */
.m-busca{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:20px;background:var(--superficie);border:1px solid var(--linea);font-size:12.5px}
.ad__capa--antes .m-busca{background:#fff;border-color:#d6d4cf}
.m-busca svg{width:14px;height:14px}
.m-res{display:grid;gap:6px}
.m-res li{position:relative;display:flex;justify-content:space-between;gap:var(--space-2);padding:8px 10px;border-radius:10px;border:1px solid var(--linea);font-size:12.5px}
.ad__capa--antes .m-res li{border-color:#d6d4cf;background:#fff}
.m-res span{color:var(--tinta-media);white-space:nowrap}
.m-res--tu{border-color:var(--verde) !important;background:var(--verde-suave);box-shadow:0 0 0 3px color-mix(in srgb,var(--verde) 18%,transparent)}
.m-res--tu em{position:absolute;right:-8px;top:-8px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-style:normal;font-weight:800;font-size:11px;background:var(--verde);color:var(--en-verde)}
.ad__capa--despues .m-res li:not(.m-res--tu){opacity:.55}
.m-res--falta{justify-content:center !important;border-style:dashed !important;background:transparent !important;font-weight:700;color:#8a3a35}
.m-llamadas{display:grid;gap:6px}
.m-llamadas li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid #d6d4cf;font-weight:700;color:#8a3a35}
.m-llamadas i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#efdcda;font-style:normal;font-size:10px}
.m-llamadas span{margin-left:auto;font-weight:500;color:#6d7276}
.m-chat{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:var(--verde-suave)}
.m-msg{align-self:flex-start;max-width:85%;padding:7px 10px;border-radius:12px 12px 12px 3px;background:var(--superficie);font-size:12.5px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.m-msg--tu{align-self:flex-end;border-radius:12px 12px 3px 12px;background:var(--verde);color:var(--en-verde);font-weight:700}
.m-msg small{margin-left:6px;font-size:10px;opacity:.7}
.m-cuaderno{position:relative;padding:10px 12px 10px 28px;border-radius:6px;background:repeating-linear-gradient(#fbfaf6 0 23px,#d9dde3 23px 24px);border-left:2px solid #c9a3a0;font-style:italic;font-size:13.5px;line-height:24px;color:#4a4f54}
.m-cuaderno s{text-decoration-thickness:2px;text-decoration-color:#8a3a35}
.m-postit{position:absolute;right:-6px;bottom:-12px;rotate:4deg;padding:8px 10px;max-width:130px;background:#f2e7a6;color:#4a4f54;font-style:normal;font-weight:700;font-size:11.5px;line-height:1.3;box-shadow:0 6px 12px -6px rgba(0,0,0,.4)}
.m-agenda{display:grid;gap:6px}
.m-agenda li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:8px 10px;border-radius:10px;background:var(--superficie);border:1px solid var(--linea);font-size:12.5px}
.m-agenda b{grid-row:span 2;font-family:var(--font-display);font-size:15px}
.m-agenda span{font-size:11px;color:var(--tinta-media)}
.m-ok{color:var(--verde-texto) !important;font-weight:700}
.m-ok::before{content:"✓ "}
.m-mapa{position:relative;height:120px;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--verde) 10%,var(--superficie));border:1px solid var(--linea)}
.m-mapa svg{position:absolute;inset:0;width:100%;height:100%}
.m-calle{fill:none;stroke:var(--superficie);stroke-width:8;stroke-linecap:round}
.m-ruta{fill:none;stroke:var(--verde);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:5 5;animation:ruta-avanza 1s linear infinite}
@keyframes ruta-avanza{to{stroke-dashoffset:-10}}
.m-pin{position:absolute;left:59%;top:51%;display:grid;place-items:center;width:28px;height:28px;margin:-34px 0 0 -14px;border-radius:9px;background:var(--verde);color:var(--en-verde);box-shadow:0 0 16px var(--verde)}
.m-pin .icono{width:16px;height:16px}
.m-llega{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:8px;background:var(--superficie);font-weight:700;font-size:11.5px;box-shadow:var(--sombra-suave)}
.m-mapa--perdido{background:#eceae5;border-color:#d6d4cf}
.m-mapa--perdido .m-calle{stroke:#fff}
.m-vueltas{fill:none;stroke:#8a3a35;stroke-width:2;stroke-dasharray:4 4;opacity:.7}
.m-preg{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#b9b6b0;color:#fff;font-weight:800}
.m-llega--mal{right:8px;font-style:italic;font-weight:600;background:#fff;color:#4a4f54;box-shadow:none;border:1px solid #d6d4cf}

/* La línea que se arrastra */
.ad__linea{position:absolute;top:0;bottom:0;left:var(--pos);z-index:5;width:62px;margin-left:-31px;cursor:ew-resize;outline:none}
/* La perilla acompaña al visitante mientras baja por la comparación */
.ad__linea .ad__perilla{position:sticky;top:calc(50vh - 22px);margin-top:min(50vh,220px)}
.ad__linea::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:linear-gradient(var(--verde),var(--verde)) center/3px 100% no-repeat;box-shadow:0 0 16px var(--verde)}
.ad__perilla{position:relative;display:flex;align-items:center;justify-content:center;width:62px;height:44px;border-radius:16px;color:var(--en-verde);
  background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 65%,var(--en-noche)),var(--verde) 55%,var(--verde-hover));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 60%,transparent),0 0 0 6px color-mix(in srgb,var(--verde) 20%,transparent),0 10px 24px -6px rgba(0,0,0,.4),0 0 24px -2px var(--verde);
  transition:scale .3s var(--resorte)}
.ad__perilla .icono{width:16px;height:16px;stroke-width:2.5}
.ad:hover .ad__perilla,.ad.arrastrando .ad__perilla{scale:1.08}
.ad.arrastrando .ad__perilla{scale:.94 1.04}
.ad__linea:focus-visible .ad__perilla{outline:3px solid var(--foco);outline-offset:4px}

.ad__cierre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);margin-top:var(--space-8)}
.ad__cierre p{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.2vw,26px);line-height:1.25;letter-spacing:-.01em;max-width:28ch}
.ad__cierre strong{color:var(--verde-texto)}

@media (min-width: 768px){
  .ad__capa{padding:var(--space-16) var(--space-8) var(--space-8)}
  .ad__grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1024px){
  .ad__grid{grid-template-columns:repeat(4,1fr)}
  .adt{min-height:310px}
}

/* ---------- Planes ---------- */
.planes{position:relative;overflow:hidden}
.planes__fondo{position:absolute;top:var(--space-8);left:50%;transform:translateX(-50%);font-family:var(--font-display);font-weight:800;font-size:clamp(110px,22vw,300px);line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--linea);white-space:nowrap;pointer-events:none;user-select:none}
.planes__cabeza{position:relative;text-align:center;max-width:720px;margin-inline:auto}
.planes__cabeza .st-tag{margin-bottom:var(--space-4)}
.planes__cabeza .cuerpo-l{margin-top:var(--space-4)}
@property --giro{syntax:"<angle>";inherits:false;initial-value:0deg}
.planes__fondo{animation:fondo-deriva 18s ease-in-out infinite alternate}
@keyframes fondo-deriva{from{translate:-3% 0}to{translate:3% 0}}

/* ¿Cuál es para ti? */
.planes__elige{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-8)}
.planes__elige > span{width:100%;text-align:center;font-weight:700;color:var(--tinta-media);margin-bottom:var(--space-1)}
.elige{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:8px 16px 8px 10px;border-radius:14px;border:1px solid var(--linea);cursor:pointer;
  background:linear-gradient(180deg,var(--superficie),color-mix(in srgb,var(--superficie) 94%,var(--tinta)));color:var(--tinta);font-weight:700;font-size:15px;box-shadow:inset 0 1px 0 var(--brillo),var(--sombra-suave);
  transition:background .3s ease,color .3s ease,box-shadow .3s ease,translate .3s var(--resorte)}
.elige .icono{width:28px;height:28px;padding:5px;border-radius:9px;background:var(--verde-suave);color:var(--tinta);transition:background .3s ease,color .3s ease}
.elige:hover{translate:0 -2px}
.elige[aria-pressed="true"]{border-color:transparent;color:var(--en-verde);background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 76%,var(--en-noche)),var(--verde) 65%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--en-noche) 50%,transparent),0 0 0 4px color-mix(in srgb,var(--verde) 16%,transparent),0 10px 24px -10px var(--verde)}
.elige[aria-pressed="true"] .icono{background:var(--en-verde);color:var(--verde)}

/* Tarjetas */
.planes__grid{position:relative;display:grid;gap:var(--space-4);margin-top:var(--space-8)}
/* Las tarjetas no se mueven ni se desvanecen; solo cambia la luz de la elegida */
.st-plan{position:relative;overflow:hidden;isolation:isolate;padding:var(--space-4) var(--space-6) var(--space-8);border-radius:24px;cursor:pointer;transition:box-shadow .45s ease}
.st-plan > *{position:relative;z-index:1}
.st-plan__nombre{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2);font-size:24px;line-height:1.2}
.st-plan__precio{display:flex;align-items:baseline;gap:var(--space-1);font-size:clamp(48px,5vw,60px);line-height:1;letter-spacing:-.04em}
.precio__num{display:inline-block;min-width:4.6ch}
.st-plan__precio small{font-size:16px}
.plan__incluye{margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--linea);color:var(--tinta-media)}
.st-plan .st-btn{margin-top:auto;width:100%}
.st-plan__lista{margin-bottom:var(--space-6)}
.st-plan .st-btn--contorno{border-color:var(--tinta)}
.st-plan--destacado{border-color:transparent}
.st-plan--destacado::after{content:"";position:absolute;z-index:0;right:-60px;bottom:-40px;width:220px;height:300px;background:var(--verde);opacity:.12;clip-path:polygon(0 22%,100% 0,100% 78%,0 100%);pointer-events:none}
.st-plan--destacado .plan__incluye{color:color-mix(in srgb,var(--en-noche) 75%,transparent);border-color:color-mix(in srgb,var(--en-noche) 15%,transparent)}
.st-plan--destacado .st-plan__precio small{color:color-mix(in srgb,var(--en-noche) 70%,transparent);opacity:1}

/* Plan elegido: aro verde, resplandor intenso y un borde de luz que lo recorre (sin moverse) */
.st-plan.foco{border-color:transparent;box-shadow:0 0 0 2px var(--verde),0 0 0 8px color-mix(in srgb,var(--verde) 20%,transparent),0 0 56px -6px color-mix(in srgb,var(--verde) 80%,transparent),0 40px 80px -34px color-mix(in srgb,var(--verde) 85%,transparent)}
.st-plan.foco::before{content:"";position:absolute;z-index:3;inset:0;padding:3px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--giro),transparent 0deg,transparent 210deg,var(--verde) 280deg,#ffffff 300deg,var(--verde) 320deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:borde-gira 3.5s linear infinite}
@keyframes borde-gira{to{--giro:360deg}}

/* Mini escenas de cada plan */
.plan__escena{position:relative;overflow:hidden;height:104px;margin-inline:calc(var(--space-6) * -1 + var(--space-4));border-radius:16px;background:var(--verde-suave);display:grid;place-items:center}
.st-plan--destacado .plan__escena{background:color-mix(in srgb,var(--en-noche) 7%,transparent)}
/* Base: una página con el botón de WhatsApp latiendo */
.pe-ventana{position:relative;display:grid;align-content:start;gap:6px;width:150px;height:74px;padding:18px 12px 0;border-radius:10px;background:var(--superficie);box-shadow:var(--sombra-suave);rotate:-4deg}
.pe-ventana i{position:absolute;top:7px;width:5px;height:5px;border-radius:2px;background:var(--linea)}
.pe-ventana i:nth-child(1){left:8px;background:var(--verde)}
.pe-ventana i:nth-child(2){left:16px}
.pe-ventana i:nth-child(3){left:24px}
.pe-ventana b{height:6px;border-radius:3px;background:var(--linea)}
.pe-ventana b:first-of-type{width:70%;height:9px;background:var(--tinta)}
.pe-ventana b.corta{width:45%}
.pe-wa{position:absolute;right:16%;bottom:14px;display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:10px;background:var(--noche);color:var(--en-noche);font-weight:700;font-size:11px;box-shadow:0 8px 16px -8px rgba(0,0,0,.5);animation:wa-late 2s ease-in-out infinite}
.pe-wa img{width:14px;height:14px;border-radius:4px;background:#fff;object-fit:cover}
@keyframes wa-late{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--verde) 50%,transparent),0 8px 16px -8px rgba(0,0,0,.5)}60%{box-shadow:0 0 0 10px transparent,0 8px 16px -8px rgba(0,0,0,.5)}}
/* Citas: el calendario marca la cita */
.plan__escena--citas{grid-template-columns:auto auto;gap:6px 14px;align-content:center;justify-content:center}
.pe-mes{grid-column:1/-1;font-weight:700;font-size:12px;color:var(--verde)}
.pe-cal{display:grid;grid-template-columns:repeat(7,12px);gap:4px}
.pe-cal i{width:12px;height:12px;border-radius:3px;background:color-mix(in srgb,var(--en-noche) 14%,transparent)}
.pe-cal i.hoy{background:var(--verde);box-shadow:0 0 10px var(--verde);animation:hoy-late 1.6s ease-in-out infinite}
@keyframes hoy-late{50%{scale:1.35}}
.pe-cita{align-self:center;padding:6px 10px;border-radius:10px;background:var(--verde);color:var(--en-verde);font-weight:700;font-size:11.5px;box-shadow:0 8px 18px -8px var(--verde);animation:cita-entra 3.2s var(--resorte) infinite}
@keyframes cita-entra{0%,12%{opacity:0;translate:-8px 0;scale:.8}24%,88%{opacity:1;translate:0 0;scale:1}100%{opacity:0}}
/* Pro: tu pin con ondas y estrellas en órbita */
.pe-pin{position:relative;z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 70%,var(--en-noche)),var(--verde) 60%);color:var(--en-verde);box-shadow:0 0 22px var(--verde)}
.pe-pin em{position:absolute;right:-8px;top:-8px;display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:var(--tinta);color:var(--fondo);font-style:normal;font-weight:800;font-size:11px}
.pe-onda{position:absolute;width:40px;height:40px;border-radius:50%;border:2px solid var(--verde);animation:onda 2.4s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:calc(var(--i,0) * 1.2s)}
.pe-orbita{position:absolute;width:96px;height:96px;animation:orbita 6s linear infinite}
.pe-orbita b{position:absolute;color:#f4b400;font-size:15px;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.2)}
.pe-orbita b:nth-child(1){left:50%;top:-4px;margin-left:-6px}
.pe-orbita b:nth-child(2){left:2px;bottom:12px}
.pe-orbita b:nth-child(3){right:2px;bottom:12px}
@keyframes orbita{to{rotate:360deg}}

/* Palomitas que entran una por una */
.planes__grid.en-vista .st-plan__lista li::before{animation:palomita .5s var(--resorte) both}
.planes__grid.en-vista .st-plan__lista li:nth-child(2)::before{animation-delay:.08s}
.planes__grid.en-vista .st-plan__lista li:nth-child(3)::before{animation-delay:.16s}
.planes__grid.en-vista .st-plan__lista li:nth-child(4)::before{animation-delay:.24s}
.planes__grid.en-vista .st-plan__lista li:nth-child(5)::before{animation-delay:.32s}
@keyframes palomita{from{scale:0;rotate:-60deg}}

.planes__bonificacion{position:relative;text-align:center;margin-top:var(--space-6);font-size:15px;font-weight:700;color:var(--tinta)}
.planes__bonificacion--sub{margin-top:var(--space-2);font-weight:500;color:var(--tinta-media)}
.planes__nota{position:relative;text-align:center;margin-top:var(--space-8);font-size:15px;color:var(--tinta-media)}

/* Pago inicial: cajita bajo el precio. En celular puede bajar a dos renglones sin romperse */
.plan__inicial{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:calc(var(--space-2) * -1);padding:8px 12px;border-radius:10px;
  border:1px dashed color-mix(in srgb,var(--tinta) 22%,transparent);background:color-mix(in srgb,var(--superficie) 94%,var(--tinta));font-size:14px;font-weight:600;line-height:1.4;color:var(--tinta-media)}
.plan__inicial b{font-family:var(--font-display);font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--tinta);font-variant-numeric:tabular-nums}
.plan__inicial s{font-family:var(--font-display);font-weight:700;color:color-mix(in srgb,var(--tinta-media) 70%,transparent);text-decoration-thickness:1.5px}
.plan__ahorro{padding:3px 8px;border-radius:6px;font-family:var(--font-texto);font-size:12.5px;font-weight:700;white-space:nowrap;color:var(--verde-texto);background:color-mix(in srgb,var(--verde) 14%,transparent)}
.st-plan--destacado .plan__inicial{background:color-mix(in srgb,var(--en-noche) 7%,transparent);border-color:color-mix(in srgb,var(--en-noche) 22%,transparent);color:color-mix(in srgb,var(--en-noche) 72%,transparent)}
.st-plan--destacado .plan__inicial b{color:var(--en-noche)}
.st-plan--destacado .plan__inicial s{color:color-mix(in srgb,var(--en-noche) 45%,transparent)}
.st-plan--destacado .plan__ahorro{color:var(--verde);background:color-mix(in srgb,var(--verde) 16%,transparent)}

/* Cómo se paga: mismo estilo de tarjeta del sitio, tres pasos */
.pagos{position:relative;margin-top:var(--space-8);padding:var(--space-6);border-radius:24px;background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra-suave)}
.pagos__titulo{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em}
.pagos__lista{display:grid;gap:var(--space-6);margin-top:var(--space-6)}
.pago{display:grid;gap:var(--space-2);align-content:start}
.pago__num{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--en-verde);background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 70%,var(--en-noche)),var(--verde) 60%);box-shadow:0 8px 18px -10px var(--verde)}
.pago h4{margin:var(--space-2) 0 0;font-weight:800;font-size:17px;line-height:1.3}
.pago p{font-size:15px;line-height:1.55;color:var(--tinta-media)}
.pago strong{font-weight:800;color:var(--tinta)}
@media (min-width: 768px){
  .pagos{padding:var(--space-8)}
  .pagos__lista{grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
}
@media (min-width: 1024px){
  .planes__grid{grid-template-columns:repeat(3,1fr);align-items:start}
  .st-plan{padding:var(--space-4) var(--space-8) var(--space-8)}
  .plan__escena{margin-inline:calc(var(--space-8) * -1 + var(--space-4))}
}

/* ---------- Testimonios ---------- */
.testimonios__cabeza{text-align:center;max-width:720px;margin-inline:auto}
.testimonios__cabeza .st-tag{margin-bottom:var(--space-4)}
.testimonios__cabeza .cuerpo-l{margin-top:var(--space-4)}
.resenas{display:grid;gap:var(--space-12);align-items:center;margin-top:var(--space-12)}
/* La reseña */
.resenas__texto{position:relative;display:grid;gap:var(--space-6);margin:0;justify-items:start}
/* La reseña va en un recuadro blanco, como las fotos instantáneas (blanco también en modo oscuro) */
.resenas__tarjeta{position:relative;overflow:hidden;display:grid;gap:var(--space-4);width:100%;max-width:540px;padding:var(--space-8) var(--space-6) var(--space-6);border-radius:24px;
  background:#ffffff;color:#0a151c;border:1px solid #e2e9e5;box-shadow:0 1px 1px rgba(0,0,0,.06),0 30px 60px -30px rgba(0,0,0,.45),0 0 0 6px color-mix(in srgb,var(--verde) 10%,transparent)}
.resenas__comillas{position:absolute;right:18px;top:-10px;display:flex;gap:10px;pointer-events:none}
.resenas__comillas i{width:30px;height:52px;background:var(--verde);opacity:.22;clip-path:polygon(0 22%,100% 0,100% 78%,0 100%)}
.resenas__tarjeta .resenas__google{background:#f6f9f7;border-color:#e2e9e5;color:#0a151c;box-shadow:none}
.resenas__tarjeta .resenas__estrellas{font-size:20px}
.resenas__tarjeta .resenas__estrellas i{color:#e2e9e5}
.resenas__tarjeta .autor{margin-top:var(--space-2);padding-top:var(--space-4);border-top:1px solid #e2e9e5}
.resenas__tarjeta .autor__nombre{color:#0a151c;font-size:16px}
.resenas__tarjeta .autor__rol{color:#5b6b71;font-size:13px}
.resenas__tarjeta .autor__logo{box-shadow:none;border-color:#e2e9e5}
.resenas__fuente{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.resenas__google{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:12px;background:var(--superficie);border:1px solid var(--linea);font-weight:700;font-size:14px;box-shadow:inset 0 1px 0 var(--brillo),var(--sombra-suave)}
.resenas__google svg{width:18px;height:18px}
.resenas__estrellas{display:flex;gap:2px;font-size:26px;line-height:1}
.resenas__estrellas i{position:relative;font-style:normal;color:color-mix(in srgb,var(--tinta) 15%,transparent)}
.resenas__estrellas i::after{content:"★";position:absolute;inset:0;color:#f4b400;text-shadow:0 0 12px rgba(244,180,0,.45);clip-path:inset(0 100% 0 0)}
.resenas.anima .resenas__estrellas i::after{animation:llena-estrella .35s ease forwards;animation-delay:calc(var(--i) * .12s + .2s)}
.resenas__estrellas i:nth-child(1){--i:0}.resenas__estrellas i:nth-child(2){--i:1}.resenas__estrellas i:nth-child(3){--i:2}.resenas__estrellas i:nth-child(4){--i:3}.resenas__estrellas i:nth-child(5){--i:4}
@keyframes llena-estrella{to{clip-path:inset(0 0 0 0)}}
.resenas__cita p{position:relative;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.5vw,20px);line-height:1.45;letter-spacing:-.01em;text-wrap:pretty}
.resenas__cita p::before{content:"“";color:var(--verde-texto)}
.resenas__cita p::after{content:"”";color:var(--verde-texto)}
.resenas__cita .palabra{display:inline-block;white-space:pre}
.resenas.anima .resenas__cita .palabra{animation:palabra-sube .5s var(--resorte) both;animation-delay:calc(var(--i) * 28ms)}
@keyframes palabra-sube{from{opacity:0;translate:0 .4em;filter:blur(4px)}}
.autor{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}
.resenas.anima .autor{animation:palabra-sube .6s var(--resorte) .35s both}
.autor__avatar{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;font-weight:800;color:var(--en-verde);background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 70%,var(--en-noche)),var(--verde));box-shadow:0 0 0 4px var(--superficie),0 0 0 6px color-mix(in srgb,var(--verde) 35%,transparent)}
/* Logo de la empresa (en lugar de iniciales): caja de 64×40, logo completo y centrado.
   Fondo blanco en los dos modos para que los logos oscuros no se pierdan en modo oscuro */
.autor__logo{display:grid;place-items:center;width:64px;height:40px;flex:none;padding:4px 6px;border-radius:10px;background:#ffffff;border:1px solid var(--linea);box-shadow:var(--sombra-suave)}
.autor__logo img{display:block;width:52px;max-width:52px;height:32px;object-fit:contain}
.polaroid__foto.polaroid__foto--logo{background:#ffffff}
.polaroid__foto--logo .polaroid__avatar{width:62%;height:62%;object-fit:contain}
.autor__nombre{display:block;font-weight:800;font-size:17px}
.autor__rol{display:block;font-size:14px;color:var(--tinta-media)}
.resenas__controles{display:flex;align-items:center;gap:var(--space-4);color:var(--tinta-media)}
.resenas__contador{font-family:var(--font-display);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}

/* El mazo de fotos instantáneas */
.resenas__mazo{position:relative;order:-1;height:440px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.polaroid{position:absolute;left:50%;top:50%;width:min(300px,76vw);margin:calc(min(300px,76vw) * -0.62) 0 0 calc(min(300px,76vw) / -2);padding:14px 14px 0;background:#fdfdfb;border-radius:6px;color:#0a151c;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 24px 40px -20px rgba(0,0,0,.45);
  translate:var(--x,0) var(--y,0);rotate:var(--r,0deg);scale:var(--s,1);z-index:calc(10 - var(--d));
  transition:translate .6s cubic-bezier(.2,.8,.2,1),rotate .6s cubic-bezier(.2,.8,.2,1),scale .6s cubic-bezier(.2,.8,.2,1),filter .4s ease;cursor:grab}
.polaroid:not([data-d="0"]):not([data-d="1"]):not([data-d="2"]){opacity:0}
.polaroid[data-d="0"]{--x:0px;--y:0px;--s:1;z-index:6}
.polaroid[data-d="1"]{z-index:5}
.polaroid[data-d="2"]{z-index:4}
.polaroid.vuela{z-index:7}
.polaroid[data-d="1"]{--x:26px;--y:14px;--s:.95;filter:brightness(.97)}
.polaroid[data-d="2"]{--x:-22px;--y:26px;--s:.9;filter:brightness(.94)}
.polaroid.arrastrando{transition:none;cursor:grabbing}
.polaroid.vuela{transition:translate .45s cubic-bezier(.5,0,.75,0),rotate .45s ease-in,opacity .45s ease;translate:var(--vx,140%) -60px;rotate:var(--vr,28deg);opacity:0}
.polaroid__foto{position:relative;overflow:hidden;aspect-ratio:1;border-radius:2px;background:#0a151c;display:grid;place-items:center}
.polaroid__foto img{width:100%;height:100%;object-fit:cover}
.polaroid__foto::before,.polaroid__foto::after{content:"";position:absolute;top:12%;height:76%}
.polaroid__foto::before{left:18%;width:34%;background:var(--verde);clip-path:polygon(0 22%,100% 0,100% 100%,0 78%)}
.polaroid__foto::after{left:52%;width:16%;background:#ffffff;opacity:.16;clip-path:polygon(0 0,100% 20%,100% 100%,0 80%)}
.polaroid__foto:has(img)::before,.polaroid__foto:has(img)::after{display:none}
.polaroid__icono{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;margin:18% 0 0 18%;border-radius:18px;background:#ffffff;color:#0a151c;box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
.polaroid__icono .icono{width:30px;height:30px}
.polaroid__brillo{position:absolute;inset:0;z-index:2;background:linear-gradient(120deg,rgba(255,255,255,.25),transparent 40%)}
.polaroid__pie{display:grid;gap:2px;padding:14px 4px 18px;font-size:14px}
.polaroid__pie b{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em}
.polaroid__pie span{color:#5b6b71;font-style:italic}
.polaroid__cinta{position:absolute;left:50%;top:-14px;width:96px;height:28px;margin-left:-48px;rotate:-3deg;background:color-mix(in srgb,var(--verde) 40%,rgba(255,255,255,.6));opacity:.85;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.resenas__pista{position:absolute;z-index:8;left:0;right:0;bottom:-6px;display:flex;align-items:center;justify-content:center;gap:var(--space-3);font-weight:700;font-size:13px;color:var(--tinta-media)}
.resenas__flecha{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:12px;border:1px solid var(--linea);background:var(--superficie);color:var(--tinta);cursor:pointer;box-shadow:inset 0 1px 0 var(--brillo),var(--sombra-suave);transition:background .2s ease,color .2s ease,scale .2s var(--resorte)}
.resenas__flecha:hover{background:var(--verde);color:var(--en-verde);border-color:transparent}
.resenas__flecha:active{scale:.92}
.resenas__flecha .icono{width:16px;height:16px;animation:pista 1.6s ease-in-out infinite}
.resenas__flecha:last-child .icono{animation-direction:reverse}
@keyframes pista{50%{translate:-4px 0}}
@media (min-width: 1024px){
  .resenas{grid-template-columns:1.1fr 1fr;gap:var(--space-16)}
  .resenas__mazo{order:0;height:520px}
  .polaroid{width:340px;margin:-215px 0 0 -170px}
}

/* ---------- Blog ---------- */
.blog__grid{display:grid;gap:var(--space-12) var(--space-6);margin-top:var(--space-12)}
.articulo{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.articulo__portada{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--linea)}
.articulo__portada::before,.articulo__portada::after{content:"";position:absolute;top:14%;height:72%;width:30%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.articulo__portada::before{left:22%;clip-path:polygon(0 22%,100% 0,100% 100%,0 78%)}
.articulo__portada::after{left:52%;width:20%;clip-path:polygon(0 0,100% 20%,100% 100%,0 80%)}
.articulo__portada .etiqueta{position:absolute;left:var(--space-4);bottom:var(--space-4);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}
.articulo__portada--1{background:var(--noche)}
.articulo__portada--1::before{background:var(--verde)}
.articulo__portada--1::after{background:color-mix(in srgb,var(--en-noche) 20%,transparent)}
.articulo__portada--1 .etiqueta{background:var(--verde);color:var(--en-verde)}
.articulo__portada--2{background:var(--verde-suave)}
.articulo__portada--2::before{background:var(--verde)}
.articulo__portada--2::after{background:var(--tinta)}
.articulo__portada--2 .etiqueta{background:var(--tinta);color:var(--fondo)}
.articulo__portada--3{background:var(--verde)}
.articulo__portada--3::before{background:var(--en-verde);opacity:.9}
.articulo__portada--3::after{background:var(--superficie)}
.articulo__portada--3 .etiqueta{background:var(--en-verde);color:var(--verde)}
.articulo:hover .articulo__portada::before{transform:translateX(-6px)}
.articulo:hover .articulo__portada::after{transform:translateX(6px) skewY(-4deg)}
.articulo h3{font-size:22px;line-height:1.25}
.articulo h3 a{color:inherit;text-decoration:none}
.articulo h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg)}
.articulo h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.articulo p{font-size:15px;color:var(--tinta-media)}
.articulo__autor{display:flex;align-items:center;gap:var(--space-3);font-size:14px;margin-top:auto}
.articulo__autor img{width:40px;height:40px;border-radius:var(--radius-sm)}
.articulo__autor strong,.articulo__autor time{display:block}
.articulo__autor time{color:var(--tinta-media)}
@media (min-width: 768px){ .blog__grid{grid-template-columns:repeat(3,1fr)} }

/* ---------- Preguntas ---------- */
.faq{display:grid;gap:var(--space-12)}
.faq__cabeza .st-tag{margin-bottom:var(--space-4)}
.faq__cabeza .cuerpo-l{margin-top:var(--space-4)}
.faq__lista{border-top:1px solid var(--linea)}
.faq__lista details{border-bottom:1px solid var(--linea)}
.faq__lista summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-6) 0;font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.8vw,21px);line-height:1.3;cursor:pointer;list-style:none}
.faq__lista summary::-webkit-details-marker{display:none}
.faq__lista summary .icono{transition:transform var(--transicion);color:var(--verde-texto)}
.faq__lista details[open] summary .icono{transform:rotate(45deg)}
.faq__lista summary:hover{color:var(--verde-texto)}
.faq__lista details p{max-width:62ch;padding-bottom:var(--space-6);color:var(--tinta-media)}
@media (min-width: 1024px){ .faq{grid-template-columns:1fr 1.5fr;gap:var(--space-16)} }

/* ---------- Contacto ---------- */
.contacto{display:grid;gap:var(--space-12);align-items:start}
.contacto__info .st-tag{margin-bottom:var(--space-4)}
.contacto__info .cuerpo-l{margin-top:var(--space-4)}
.contacto__datos{display:grid;gap:var(--space-6);margin-top:var(--space-8)}
.contacto__datos li{display:flex;gap:var(--space-4);align-items:flex-start}
.contacto__datos li > .icono{margin-top:2px;color:var(--verde-texto)}
.contacto__datos .etiqueta{display:block;color:var(--tinta-media);margin-bottom:var(--space-1)}
.contacto__datos a{font-weight:700;font-size:18px}
.contacto__horario{display:block;font-weight:700;font-size:16px;line-height:1.5}
.despues{margin-top:var(--space-8);padding:var(--space-4) var(--space-6) var(--space-6);border:1px solid var(--linea);border-radius:16px;background:var(--superficie)}
.despues__titulo{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em}
.despues__lista{display:grid;gap:var(--space-3);margin-top:var(--space-3)}
.despues__lista li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:15px;line-height:1.5}
.despues__num{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--verde);color:var(--en-verde);font-family:var(--font-display);font-weight:800;font-size:14px}
.formulario{display:grid;gap:var(--space-4);padding:var(--space-6);background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radius-lg);box-shadow:var(--sombra-1)}
.formulario__nota{font-size:14px;color:var(--tinta-media)}
.campo{display:grid;gap:6px}
.campo label{font-weight:700;font-size:15px}
.campo__opcional{font-weight:500;color:var(--tinta-media)}
.campo input,.campo select,.campo textarea{width:100%;min-height:48px;padding:var(--space-3) 14px;font-size:16px;background:var(--superficie);color:var(--tinta);border:1px solid var(--tinta-media);border-radius:var(--radius-sm);transition:border-color var(--transicion)}
.campo textarea{resize:vertical;min-height:112px}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--foco);outline-offset:1px;border-color:var(--foco)}
.campo [aria-invalid="true"]{border-color:var(--error);border-width:2px}
.campo__ayuda{font-size:14px;color:var(--tinta-media)}
.campo__error{font-size:14px;font-weight:700;color:var(--error)}
.error-resumen{padding:var(--space-4);border:2px solid var(--error);border-radius:var(--radius-sm);color:var(--tinta)}
.error-resumen p{font-weight:700;color:var(--error)}
.error-resumen ul{list-style:disc;padding-left:var(--space-6);margin-top:var(--space-2)}
.error-resumen a{color:var(--tinta)}
.formulario__enviar{width:100%;margin-top:var(--space-2)}
.formulario__pie{text-align:center}
/* Campo anti-spam "website": fuera de la vista para personas, visible para robots */
.trampa{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media (min-width: 640px){ .formulario{padding:var(--space-8)} }
@media (min-width: 1024px){ .contacto{grid-template-columns:1fr 1.1fr;gap:var(--space-16)} }

/* ---------- Cinta ---------- */
.cinta{position:relative;height:220px;overflow:hidden;margin-top:var(--space-8);background:linear-gradient(to bottom,var(--fondo) 62%,var(--noche) 62%)}
.cinta__banda{position:absolute;left:-5%;width:110%;display:flex;overflow:hidden;padding-block:var(--space-4)}
.cinta__banda--verde{top:40px;transform:rotate(3deg);background:var(--verde);color:var(--en-verde)}
.cinta__banda--noche{top:112px;transform:rotate(-2.5deg);background:var(--noche);color:var(--en-noche);box-shadow:0 -1px 0 color-mix(in srgb,var(--en-noche) 8%,transparent)}
.cinta__pista{display:flex;flex:none;align-items:center;gap:var(--space-8);padding-right:var(--space-8);font-family:var(--font-display);font-weight:800;font-size:clamp(22px,3vw,34px);line-height:1.1;white-space:nowrap;animation:desliza 40s linear infinite}
.cinta__banda--noche .cinta__pista{animation-direction:reverse}
.cinta__pista i{display:inline-block;width:14px;height:22px;background:currentColor;clip-path:polygon(0 22%,100% 0,100% 78%,0 100%)}
.cinta__banda--noche .cinta__pista i{background:var(--verde)}
.cinta.pausada .cinta__pista{animation-play-state:paused}
.cinta__pausa{position:absolute;right:var(--space-4);top:0;z-index:2;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--linea);border-radius:var(--radius-sm);background:var(--superficie);color:var(--tinta);cursor:pointer}
.cinta__pausa .icono--play,.cinta.pausada .cinta__pausa .icono--pausa{display:none}
.cinta.pausada .cinta__pausa .icono--play{display:block}
@keyframes desliza{to{transform:translateX(-100%)}}

/* ---------- Pie ---------- */
.pie{position:relative;overflow:hidden;padding-top:var(--space-16)}
.pie__arriba{display:grid;gap:var(--space-12)}
.pie__marca img{width:160px;height:auto}
.pie__slogan{margin-top:var(--space-2);color:color-mix(in srgb,var(--en-noche) 78%,transparent)}
.pie__cta-titulo{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.02em;margin:var(--space-8) 0 var(--space-4)}
.pie__columnas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8) var(--space-6)}
.pie__columnas .etiqueta{color:var(--verde);margin-bottom:var(--space-4)}
.pie__columnas ul{display:grid;gap:var(--space-1)}
.pie__columnas li{color:color-mix(in srgb,var(--en-noche) 80%,transparent);font-size:15px}
.pie__columnas a{display:inline-block;padding-block:var(--space-1);text-decoration:none;opacity:.85}
.pie__columnas a:hover{opacity:1;text-decoration:underline}
.pie__redes{display:flex !important;gap:var(--space-2)}
.pie .btn-red{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid color-mix(in srgb,var(--en-noche) 20%,transparent);border-radius:var(--radius-sm);opacity:1}
.pie .btn-red:hover{border-color:var(--verde);color:var(--verde)}
.pie__abajo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-16);padding-block:var(--space-6);border-top:1px solid color-mix(in srgb,var(--en-noche) 12%,transparent);font-size:14px;color:color-mix(in srgb,var(--en-noche) 72%,transparent)}
.pie__gigante{font-family:var(--font-display);font-weight:800;font-size:clamp(64px,16vw,230px);line-height:.8;letter-spacing:-.05em;text-align:center;white-space:nowrap;color:color-mix(in srgb,var(--en-noche) 6%,transparent);margin-bottom:-.1em;user-select:none;padding-top:var(--space-4)}
@media (min-width: 768px){ .pie__columnas{grid-template-columns:repeat(4,1fr)} }
@media (min-width: 1024px){ .pie__arriba{grid-template-columns:1fr 1.6fr;gap:var(--space-16)} }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:30;width:56px;height:56px;padding:0;box-shadow:0 6px 20px rgba(10,21,28,.25)}
.wa-flotante .icono{width:24px;height:24px}

/* ---------- Arma tu plan (arma-tu-plan.html) ---------- */
.arma__cabeza{padding-block:var(--space-12) var(--space-8);text-align:center}
.arma__cabeza .st-tag{margin-bottom:var(--space-4)}
.arma__cabeza .cuerpo-l{max-width:620px;margin:var(--space-4) auto 0}
.arma__grid{display:grid;gap:var(--space-8);align-items:start;padding-bottom:var(--space-16)}
.arma__form{scroll-margin-top:calc(var(--alto-cabecera) + var(--space-4));padding:var(--space-6) var(--space-4);background:var(--superficie);border:1px solid var(--linea);border-radius:28px;box-shadow:var(--sombra-suave);--avance:0}
/* Avance */
.arma__avance{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:var(--space-8)}
.arma__avance::before,.arma__avance::after{content:"";position:absolute;top:15px;left:12.5%;height:3px;border-radius:2px}
.arma__avance::before{right:12.5%;background:var(--linea)}
.arma__avance::after{width:calc(75% * var(--avance));background:var(--verde);box-shadow:0 0 10px var(--verde);transition:width .6s var(--resorte)}
.arma__avance li{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;color:var(--tinta-media)}
/* Cada número es un botón que lleva a su paso */
.arma__ir{display:grid;justify-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.arma__ir:hover span{border-color:var(--verde)}
.arma__ir:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
.arma__avance span{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--superficie);border:2px solid var(--linea);font-family:var(--font-display);font-size:14px;transition:background .3s ease,border-color .3s ease,color .3s ease}
.arma__avance li.activo{color:var(--tinta)}
.arma__avance li.activo span{border-color:var(--verde);box-shadow:0 0 0 5px color-mix(in srgb,var(--verde) 18%,transparent)}
.arma__avance li.hecho span{background:var(--verde);border-color:var(--verde);color:var(--en-verde)}
/* Pasos */
.arma__paso{border:0;padding:0;margin:0;min-width:0}
.arma__paso.activo{animation:pp-entra .5s var(--resorte) both}
.arma__paso legend{display:flex;align-items:center;gap:var(--space-3);padding:0;margin-bottom:var(--space-3);font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.02em;outline:none}
.arma__num{flex:none;padding:4px 8px;border-radius:8px;background:var(--noche);color:var(--en-noche);font-size:13px}
.arma__ayuda{margin:-4px 0 var(--space-4);color:var(--tinta-media);font-size:15px}
.arma__paso .campo{margin-top:var(--space-6)}
/* Tarjetas de opción */
.opciones{display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.opciones--giro{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.opciones--extras{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.opcion{position:relative;display:grid;gap:4px;padding:14px;border-radius:16px;border:1.5px solid var(--linea);background:var(--fondo);cursor:pointer;transition:border-color .25s ease,background .25s ease,box-shadow .25s ease,scale .25s var(--resorte)}
.opcion:hover{border-color:var(--tinta-media)}
.opcion:active{scale:.98}
.opcion input,.pastilla input,.tuplan__opcion input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opcion:has(input:focus-visible),.pastilla:has(input:focus-visible),.tuplan__opcion:has(input:focus-visible){outline:2px solid var(--foco);outline-offset:2px}
.opcion b{font-size:15px;line-height:1.25}
.opcion small{font-size:13px;color:var(--tinta-media)}
.opcion__icono{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--superficie);border:1px solid var(--linea);color:var(--tinta);transition:background .25s ease,color .25s ease,border-color .25s ease}
.opcion__icono .icono{width:20px;height:20px}
.opciones--giro .opcion{justify-items:center;text-align:center;padding:16px 10px}
.opcion--meta,.opcion--extra{grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding-right:40px}
.opcion--meta .opcion__icono{grid-row:span 3}
/* Plan que incluye cada meta: chico, monoespaciado y gris */
.opcion__plan{grid-column:2;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-media)}
.opcion:has(input:checked){border-color:var(--verde);background:var(--verde-suave);box-shadow:0 0 0 4px color-mix(in srgb,var(--verde) 14%,transparent)}
.opcion:has(input:checked) .opcion__icono{background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 70%,var(--en-noche)),var(--verde) 60%);border-color:transparent;color:var(--en-verde)}
.opcion--meta::after,.opcion--extra::after{content:"";position:absolute;right:14px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:6px;border:1.5px solid var(--linea);background:var(--superficie)}
.opcion--meta:has(input:checked)::after,.opcion--extra:has(input:checked)::after{content:"✓";display:grid;place-items:center;border-color:var(--verde);background:var(--verde);color:var(--en-verde);font-size:12px;font-weight:800}
/* Preguntas con pastillas */
.pregunta{margin-top:var(--space-6)}
.pregunta__titulo{margin-bottom:var(--space-3);font-weight:700;font-size:16px}
.pastillas{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pastilla{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--linea);background:var(--fondo);font-weight:700;font-size:14px;cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease}
.pastilla:hover{border-color:var(--tinta-media)}
.pastilla:has(input:checked){border-color:transparent;background:var(--verde);color:var(--en-verde);box-shadow:0 8px 18px -10px var(--verde)}
/* Botones del formulario */
.arma__botones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-8)}
#arma-sigue{margin-left:auto}
#arma-sigue[hidden] + #arma-envia{margin-left:auto}
.arma__enviado{margin-top:var(--space-3);color:var(--verde-texto);font-weight:700}
.arma__enviado:empty{display:none}

/* Tu plan, en vivo */
.tuplan__tarjeta{position:relative;overflow:hidden;padding:var(--space-6);border-radius:28px;background:linear-gradient(165deg,color-mix(in srgb,var(--noche) 80%,var(--verde)),var(--noche) 45%);color:var(--en-noche);
  box-shadow:0 0 0 2px var(--verde),0 0 0 8px color-mix(in srgb,var(--verde) 18%,transparent),0 0 50px -8px color-mix(in srgb,var(--verde) 70%,transparent),0 40px 80px -40px rgba(0,0,0,.6)}
/* Al cambiar de plan solo pulsa la luz: nada se escala ni se recorta (el texto siempre se lee completo) */
.tuplan__tarjeta.pulsa{animation:tuplan-pulsa .7s ease}
@keyframes tuplan-pulsa{35%{box-shadow:0 0 0 3px var(--verde),0 0 0 14px color-mix(in srgb,var(--verde) 25%,transparent),0 0 80px 0 color-mix(in srgb,var(--verde) 80%,transparent),0 40px 80px -40px rgba(0,0,0,.6)}}
.tuplan__cabeza{display:flex;align-items:center;gap:var(--space-4)}
.tuplan__emo{flex:none;width:84px;height:112px;animation:emo-flota 4s ease-in-out infinite}
.tuplan__eti{display:inline-block;padding:3px 8px;border-radius:7px;background:var(--verde);color:var(--en-verde);font-weight:800;font-size:12px}
.tuplan__nombre{margin-top:6px;font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em}
.tuplan__precio{margin-top:6px;font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tuplan__precio small{font-family:var(--font-texto);font-size:14px;font-weight:500;color:color-mix(in srgb,var(--en-noche) 70%,transparent)}
/* Mensajes: recomendación (verde), le falta algo (ámbar) y consejos (gris) */
.tuplan__mensajes{display:grid;gap:var(--space-2);margin-top:var(--space-4)}
.tuplan__mensaje{padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--verde) 35%,transparent);background:color-mix(in srgb,var(--verde) 10%,transparent);font-size:14.5px;line-height:1.5}
.tuplan__mensaje--aviso{border-color:rgba(244,180,0,.45);background:rgba(244,180,0,.1)}
.tuplan__tip{padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--en-noche) 7%,transparent);font-size:13.5px;line-height:1.45;color:color-mix(in srgb,var(--en-noche) 78%,transparent)}
.tuplan__cambia{display:inline;padding:0;border:0;background:none;color:var(--verde);font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tuplan__elige{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:var(--space-4)}
.tuplan__opcion{position:relative;display:grid;justify-items:center;gap:2px;min-height:44px;padding:10px 6px;border-radius:14px;border:1px solid color-mix(in srgb,var(--en-noche) 18%,transparent);background:none;color:var(--en-noche);font:inherit;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.tuplan__opcion b{font-family:var(--font-display);font-size:15px}
.tuplan__opcion span{font-size:12px;opacity:.75}
.tuplan__opcion:hover{border-color:color-mix(in srgb,var(--en-noche) 45%,transparent)}
.tuplan__opcion:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.tuplan__opcion[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:var(--en-verde)}
.tuplan__opcion[aria-pressed="true"] span{opacity:.85}
.tuplan__opcion.recomendado::after{content:"★";position:absolute;top:-8px;right:-4px;display:grid;place-items:center;width:20px;height:20px;border-radius:7px;background:#f4b400;color:#0a151c;font-size:11px;box-shadow:0 4px 10px -4px rgba(0,0,0,.6)}
.tuplan__medidor{margin-top:var(--space-4)}
.tuplan__medidor p{display:flex;justify-content:space-between;font-size:13px;color:color-mix(in srgb,var(--en-noche) 75%,transparent);margin-bottom:6px}
.tuplan__medidor p b{color:var(--en-noche)}
.tuplan__medidor i{display:block;height:8px;border-radius:4px;background:color-mix(in srgb,var(--en-noche) 12%,transparent);overflow:hidden}
.tuplan__medidor i b{display:block;height:100%;width:0;border-radius:4px;background:var(--verde);transition:width .6s var(--resorte)}
.tuplan__medidor.completo i b{box-shadow:0 0 12px var(--verde)}
.tuplan__sub{margin-top:var(--space-6);margin-bottom:var(--space-3);color:color-mix(in srgb,var(--en-noche) 60%,transparent)}
.tuplan__lista{margin-bottom:0}
/* Desglose de pagos (borde punteado, como la cajita de pago inicial de los planes) */
.tuplan__desglose{display:grid;gap:8px;margin-top:var(--space-4);padding:12px 14px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--en-noche) 25%,transparent);background:color-mix(in srgb,var(--en-noche) 5%,transparent);font-size:14px}
.tuplan__fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px}
.tuplan__fila > span:first-child{color:color-mix(in srgb,var(--en-noche) 70%,transparent)}
.tuplan__fila b{font-weight:800;font-variant-numeric:tabular-nums}
.tuplan__inicial{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 8px}
.tuplan__inicial s{color:color-mix(in srgb,var(--en-noche) 45%,transparent)}
.tuplan__inicial .plan__ahorro{color:var(--verde);background:color-mix(in srgb,var(--verde) 16%,transparent)}
.tuplan__fino{font-size:12.5px;line-height:1.45;color:color-mix(in srgb,var(--en-noche) 65%,transparent)}
/* Barrita en celular */
.tuplan__mini{position:fixed;z-index:30;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-2);padding:12px 16px;border-radius:16px;background:var(--noche);color:var(--en-noche);text-decoration:none;box-shadow:0 0 0 1.5px var(--verde),0 14px 30px -10px rgba(0,0,0,.6)}
.tuplan__mini{transition:opacity .25s ease,translate .3s ease,visibility .3s}
.tuplan__mini.oculto{opacity:0;translate:0 120%;pointer-events:none;visibility:hidden}
.tuplan__mini span{font-size:12px;opacity:.7}
.tuplan__mini b{font-family:var(--font-display);font-size:16px}
.tuplan__mini em{margin-left:auto;font-style:normal;font-weight:800;color:var(--verde)}
.arma .arma__grid{padding-bottom:calc(var(--space-16) + 40px)}
/* Listo */
.arma__listo{display:grid;justify-items:center;gap:var(--space-4);padding-block:var(--space-12) var(--space-16);text-align:center;outline:none}
.arma__listo .emo{width:150px;height:200px;animation:emo-flota 4s ease-in-out infinite}
.arma__listo .cuerpo-l{max-width:560px}
.arma__listo .arma__botones{justify-content:center}
.pie--simple{padding-top:0}
.pie--simple .pie__abajo{margin-top:0}
@media (min-width: 640px){
  .arma__form{padding:var(--space-8)}
  .opciones--metas{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1024px){
  .arma__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--space-12)}
  .tuplan{position:sticky;top:calc(var(--alto-cabecera) + var(--space-6))}
  .tuplan__mini{display:none}
  .arma .arma__grid{padding-bottom:var(--space-16)}
}

/* ---------- Brief de cliente (brief.html) ----------
   Reutiliza el formulario de "Arma tu plan" (.arma__form, .arma__paso, .campo, .pastilla). Preguntas en js/brief.js. */
.brief [hidden]{display:none !important} /* .campo, .st-btn y .arma__listo traen display propio */
.brief__centro{display:grid;justify-items:center;gap:var(--space-4)}
.brief__centro .emo{width:120px;height:160px}
.brief__centro .cuerpo-l{max-width:600px}
.brief__guardado{padding:10px 14px;border-radius:12px;background:var(--verde-suave);color:var(--tinta);font-weight:700;font-size:14.5px}
.brief__cuerpo{max-width:800px;padding-block:var(--space-8) var(--space-16)}
.brief__avance{scroll-margin-top:calc(var(--alto-cabecera) + var(--space-4));margin-bottom:var(--space-4)}
.brief__avance p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-bottom:8px;font-size:14px;color:var(--tinta-media)}
.brief__avance p b{color:var(--tinta)}
.brief__avance i{display:block;height:8px;border-radius:4px;background:var(--linea);overflow:hidden}
.brief__avance i b{display:block;height:100%;width:var(--avance-pct,0%);border-radius:4px;background:var(--verde);box-shadow:0 0 10px var(--verde);transition:width .5s var(--resorte)}
.brief__nota{margin-bottom:var(--space-6);padding:12px 14px;border-radius:12px;background:var(--verde-suave);color:var(--tinta);font-size:14.5px;line-height:1.5}
.req{margin-left:2px;color:var(--verde-texto);font-weight:800}
.brief__ayuda{margin-top:var(--space-2);padding:12px 14px;border-radius:12px;border:1px dashed var(--linea);color:var(--tinta-media);font-size:14.5px;line-height:1.5}
.brief .pregunta .campo__ayuda{margin:-6px 0 var(--space-3)}
.brief .pregunta .campo__error,.brief .campo .campo__error{margin-top:var(--space-2)}
.brief .con-error .pregunta__titulo{color:var(--error)}
.pastilla.bloqueada{opacity:.45;cursor:not-allowed}
.brief__chico{min-height:40px;margin-top:var(--space-3);padding:8px 14px;font-size:14px}
.brief__chico .icono{width:18px;height:18px}
.brief__chico[disabled]{opacity:.5;cursor:not-allowed}
.brief input[type="checkbox"]{accent-color:var(--verde)}

/* Servicios: tarjetas repetibles */
.servs{display:grid;gap:var(--space-3)}
.serv{display:grid;gap:var(--space-3);padding:var(--space-4);border:1.5px solid var(--linea);border-radius:16px;background:var(--fondo)}
.brief .serv .campo{margin-top:0}
.serv__cabeza{display:flex;align-items:center;justify-content:space-between;min-height:28px;font-family:var(--font-display);font-weight:800;font-size:15px}
.serv__cabeza .mini__quitar{position:static}

/* Horario: un renglón por día */
.horario{display:grid;gap:var(--space-2)}
.horario__dia{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;padding:10px 12px;border:1.5px solid var(--linea);border-radius:14px;background:var(--fondo)}
.horario__nombre{font-weight:800}
.horario__horas{grid-column:1 / -1;display:flex;align-items:center;gap:8px;color:var(--tinta-media);font-size:14px}
.horario__horas input{flex:1;min-width:0;min-height:44px;padding:8px 6px;font-size:16px;color:var(--tinta);background:var(--superficie);border:1px solid var(--tinta-media);border-radius:var(--radius-sm)}
.horario__horas input:focus-visible{outline:2px solid var(--foco);outline-offset:1px;border-color:var(--foco)}
.horario__horas input[aria-invalid="true"]{border-color:var(--error);border-width:2px}
.horario__cerrado{grid-column:2;grid-row:1;display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:14px;font-weight:700;cursor:pointer}
.horario__cerrado input{width:18px;height:18px}
.horario__dia.cerrado .horario__horas{opacity:.4}

/* Subir archivos: zona para elegir y miniaturas que se pueden quitar */
.subida{display:grid;gap:var(--space-3)}
.subida__zona{position:relative;display:grid;justify-items:center;gap:4px;padding:var(--space-6) var(--space-4);border:2px dashed var(--linea);border-radius:16px;background:var(--fondo);text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.subida__zona:hover{border-color:var(--verde);background:var(--verde-suave)}
.subida__zona:has(input:focus-visible){outline:2px solid var(--foco);outline-offset:2px}
.subida__zona .icono{width:28px;height:28px;color:var(--verde-texto)}
.subida__zona small{max-width:42ch;font-size:13px;color:var(--tinta-media)}
.subida__zona input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.subida.llena .subida__zona{opacity:.5;cursor:not-allowed}
.subida__estado{font-size:14px;font-weight:700;color:var(--tinta-media)}
.miniaturas{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--space-2)}
.miniaturas:empty{display:none}
.mini{position:relative;aspect-ratio:1;max-width:100%;overflow:hidden;border-radius:12px;border:1px solid var(--linea);background:var(--superficie)}
.mini img{display:block;width:100%;height:100%;object-fit:cover}
.mini--logo{grid-column:span 2;aspect-ratio:auto;display:flex;align-items:center;gap:10px;padding:8px 40px 8px 8px}
.mini--logo img,.mini--logo .mini__pdf{flex:none;width:64px;height:64px;border-radius:8px;object-fit:contain;padding:6px;background:#ffffff}
.mini__pdf{display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:#0a151c}
.mini__nombre{min-width:0;overflow-wrap:anywhere;font-size:13px;font-weight:700}
.mini__quitar{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:var(--noche);color:var(--en-noche);cursor:pointer}
.mini__quitar .icono{width:16px;height:16px}
.mini__quitar:focus-visible{outline:2px solid var(--foco);outline-offset:2px}

/* Colores elegidos (selector opcional) */
.colores{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.colores:empty{display:none}
.color{position:relative;display:inline-flex}
.color input[type="color"]{width:52px;height:44px;padding:3px;border:1.5px solid var(--linea);border-radius:12px;background:var(--superficie);cursor:pointer}
.color .mini__quitar{top:-8px;right:-10px;width:24px;height:24px}

/* Aviso de privacidad, mensajes y error al enviar */
.casilla{display:flex;align-items:flex-start;gap:10px;font-weight:700;cursor:pointer}
.casilla input{flex:none;width:20px;height:20px;margin-top:2px}
.casilla a{color:var(--verde-texto)}
.brief__aviso{margin-top:var(--space-4);font-weight:700;color:var(--error)}
.brief__aviso:empty{display:none}
.brief__fallo{display:grid;justify-items:start;gap:var(--space-3);margin-top:var(--space-4);padding:var(--space-4);border:2px solid var(--error);border-radius:14px;outline:none}
.brief__fallo p{font-weight:700}
#brief-sigue,#brief-envia{margin-left:auto}
#brief-envia[disabled]{opacity:.7;cursor:progress}
@media (min-width: 640px){
  .serv{grid-template-columns:1fr 1.3fr .8fr;align-items:start}
  .serv__cabeza{grid-column:1 / -1}
  .horario__dia{grid-template-columns:110px 1fr auto}
  .horario__horas{grid-column:auto}
  .horario__cerrado{grid-column:auto;grid-row:auto}
}

/* ---------- Laptops de poca altura (1366×768 y similares) ----------
   La portada se compacta para que, con el ajuste a pantalla de main.js, se vea completa */
@media (min-width: 1024px) and (max-height: 820px){
  .bento .b--dias{min-height:330px}
  .b--ejemplo .pvb__banda{--hueco:10px}
  .b--ejemplo .pvb .navegador{width:90%;margin-inline:auto}
  .b--dias .b__cifra{font-size:84px}
  .dias7__baliza{bottom:96px}
  .b__cifra--precio{font-size:48px}
  .ticket{margin-top:var(--space-2)}
  .ticket__papel{padding:10px 12px 14px}
  .ticket__cabeza{padding-bottom:6px;margin-bottom:6px}
  .ticket__lista{gap:4px}
  .ticket__lista li{font-size:12px}
  .ticket__logo{width:20px;height:20px}
  .ticket__total{margin-top:6px;padding-top:6px}
  .ticket__total b{font-size:19px}
}

/* ===================== Consejos (consejos/*.html) ===================== */
/* Barra de lectura */
.lectura-barra{position:fixed;z-index:50;left:0;right:0;top:0;height:4px;pointer-events:none}
.lectura-barra i{display:block;height:100%;background:var(--verde);box-shadow:0 0 12px var(--verde);transform:scaleX(0);transform-origin:left}

/* Ilustración de portada: planos de la puerta, decoración del tema y el emoticón Situ */
.arte{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/3;width:100%;border-radius:24px;border:1px solid var(--linea)}
.arte--noche{background:radial-gradient(120% 90% at 80% 10%,#1f3a44,var(--noche) 60%)}
.arte--suave{background:radial-gradient(120% 90% at 80% 10%,#ffffff,var(--verde-suave) 65%)}
.arte--verde{background:radial-gradient(120% 90% at 80% 10%,color-mix(in srgb,var(--verde) 70%,#ffffff),var(--verde) 65%)}
.arte--pronto{background:repeating-linear-gradient(135deg,var(--superficie) 0 14px,color-mix(in srgb,var(--superficie) 92%,var(--tinta)) 14px 28px);border-style:dashed;border-width:2px}
.arte__plano{position:absolute;z-index:-1;top:12%;height:76%;transition:translate .7s var(--resorte)}
.arte__plano--a{left:12%;width:30%;background:var(--verde);clip-path:polygon(0 22%,100% 0,100% 100%,0 78%)}
.arte__plano--b{left:42%;width:16%;background:color-mix(in srgb,var(--tinta) 75%,transparent);clip-path:polygon(0 0,100% 20%,100% 100%,0 80%)}
.arte--noche .arte__plano--b{background:rgba(255,255,255,.18)}
.arte--verde .arte__plano--a{background:#0a151c}
.arte--verde .arte__plano--b{background:rgba(255,255,255,.55)}
.arte--pronto .arte__plano--a{background:color-mix(in srgb,var(--verde) 35%,transparent)}
.arte--pronto .arte__plano--b{background:color-mix(in srgb,var(--tinta) 15%,transparent)}
.arte__emo{position:absolute;right:8%;bottom:6%;width:30%;height:auto;aspect-ratio:260/345;animation:emo-flota 4s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgba(0,0,0,.25))}
.arte__eti{position:absolute;left:16px;bottom:16px;padding:5px 10px;border-radius:9px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:var(--verde);color:var(--en-verde)}
.arte--verde .arte__eti{background:#0a151c;color:var(--verde)}
.arte--pronto .arte__eti{background:var(--tinta);color:var(--fondo)}
/* Decoraciones de cada tema */
.arte__deco{position:absolute;inset:0;z-index:0;pointer-events:none}
.arte__deco--mapa svg{position:absolute;inset:0;width:100%;height:100%}
.arte__deco--mapa path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:7;stroke-linecap:round}
.arte__deco--mapa i{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;border-radius:50% 50% 50% 2px;rotate:-45deg;background:rgba(255,255,255,.35)}
.arte__pin{position:absolute;left:58%;top:22%;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--verde);color:var(--en-verde);box-shadow:0 0 0 8px color-mix(in srgb,var(--verde) 22%,transparent),0 0 30px var(--verde);animation:pin-salta 2.6s var(--resorte) infinite}
.arte__pin .icono{width:22px;height:22px}
@keyframes pin-salta{0%,70%,100%{translate:0 0}80%{translate:0 -10px}}
.arte__deco--chat{display:flex;flex-direction:column;gap:8px;padding:14% 10% 0 10%}
.arte__deco--chat i{align-self:flex-start;max-width:62%;padding:8px 12px;border-radius:14px 14px 14px 3px;background:#ffffff;color:#0a151c;font-style:normal;font-weight:700;font-size:clamp(11px,1.1vw,14px);box-shadow:0 8px 18px -10px rgba(0,0,0,.4);animation:burbuja-sale 4s var(--resorte) infinite both}
.arte__deco--chat i.tu{align-self:flex-start;margin-left:8%;background:var(--verde);color:var(--en-verde);border-radius:14px 14px 3px 14px;animation-delay:.5s}
@keyframes burbuja-sale{0%{opacity:0;scale:.6;translate:0 10px}12%,80%{opacity:1;scale:1;translate:0 0}100%{opacity:0;translate:0 -6px}}
.arte__deco--estrellas{display:flex;gap:4%;padding:12% 10% 0}
.arte__deco--estrellas i{font-style:normal;font-size:clamp(22px,3vw,40px);color:#f4b400;text-shadow:0 4px 14px rgba(0,0,0,.25);animation:estrella-sale 3.2s var(--resorte) infinite both}
.arte__deco--estrellas i:nth-child(2){animation-delay:.12s}.arte__deco--estrellas i:nth-child(3){animation-delay:.24s}.arte__deco--estrellas i:nth-child(4){animation-delay:.36s}.arte__deco--estrellas i:nth-child(5){animation-delay:.48s}
@keyframes estrella-sale{0%{opacity:0;scale:.2;rotate:-40deg}15%,85%{opacity:1;scale:1;rotate:0deg}100%{opacity:0;scale:.8}}
.arte__esqueleto{position:absolute;left:10%;top:16%;display:grid;gap:10px;width:46%}
.arte__esqueleto i{height:12px;border-radius:6px;background:linear-gradient(100deg,color-mix(in srgb,var(--tinta) 10%,transparent) 30%,color-mix(in srgb,var(--tinta) 3%,transparent) 50%,color-mix(in srgb,var(--tinta) 10%,transparent) 70%) 0 0/300% 100%;animation:brilla 1.4s linear infinite}
.arte__esqueleto i:nth-child(2){width:80%}.arte__esqueleto i:nth-child(3){width:60%}
.arte--pronto .arte__emo{filter:grayscale(.2) drop-shadow(0 18px 24px rgba(0,0,0,.2))}

/* Portada del artículo */
.art__portada{padding-block:var(--space-12) var(--space-8)}
.art__portada-fila{display:grid;gap:var(--space-8);align-items:center}
.art__portada-texto{display:grid;gap:var(--space-4);justify-items:start}
.art__migas{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--tinta-media)}
.art__migas a{color:inherit;text-decoration:none}
.art__migas a:hover{color:var(--verde-texto);text-decoration:underline}
.art__portada .display-l{font-size:clamp(34px,4.4vw,56px)}
.art__meta{display:flex;align-items:center;gap:12px;font-size:14px}
.art__meta img{border-radius:10px}
.art__meta b{display:block}
.art__meta span span{color:var(--tinta-media)}
.arte--grande{border-radius:32px;box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
/* Cuerpo: índice y texto */
.art__cuerpo{display:grid;gap:var(--space-8);padding-bottom:var(--space-12)}
.art__indice{display:none}
.art__indice .etiqueta{color:var(--tinta-media);margin-bottom:var(--space-3)}
.art__indice ol{display:grid;gap:2px;counter-reset:indice;border-left:2px solid var(--linea)}
.art__indice li{counter-increment:indice}
.art__indice a{position:relative;display:block;padding:8px 12px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--tinta-media);text-decoration:none;transition:color .2s ease,border-color .2s ease,background .2s ease}
.art__indice a:hover{color:var(--tinta)}
.art__indice a.activo{color:var(--tinta);font-weight:700;border-left-color:var(--verde);background:linear-gradient(90deg,color-mix(in srgb,var(--verde) 12%,transparent),transparent)}
/* Texto del artículo */
.prosa{max-width:68ch;font-size:18px;line-height:1.7}
.prosa > * + *{margin-top:1.1em}
.prosa h2{display:flex;align-items:center;gap:12px;margin-top:2.2em;font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em;scroll-margin-top:calc(var(--alto-cabecera) + 24px)}
.prosa__num{flex:none;display:grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border-radius:13px;font-size:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--verde) 70%,var(--en-noche)),var(--verde) 60%);color:var(--en-verde);box-shadow:0 8px 18px -8px var(--verde)}
.prosa__num--no{background:#ffe1e1;color:#b3261e;box-shadow:none}
.prosa__num--si{background:var(--noche);color:var(--verde);box-shadow:none}
.prosa strong{font-weight:800;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--verde) 35%,transparent) 0)}
.prosa a{font-weight:700;color:var(--verde-texto)}
.prosa ul,.prosa ol{display:grid;gap:.6em;padding-left:0}
.prosa ul li{position:relative;padding-left:26px}
.prosa ul li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:14px;background:var(--verde);clip-path:polygon(0 30%,100% 0,100% 70%,0 100%)}
.prosa ol{counter-reset:paso}
.prosa ol li{position:relative;padding-left:40px;counter-increment:paso}
.prosa ol li::before{content:counter(paso);position:absolute;left:0;top:.1em;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--noche);color:var(--verde);font-family:var(--font-display);font-weight:800;font-size:14px}
.prosa__no li::before{content:"✕" !important;display:grid;place-items:center;width:20px !important;height:20px !important;top:.2em !important;border-radius:6px;clip-path:none !important;background:#ffe1e1 !important;color:#b3261e;font-size:11px;font-weight:800}
.prosa__destacado{margin-block:1.6em !important;padding:var(--space-6);border-radius:20px;background:var(--noche);color:var(--en-noche);font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.2vw,28px);line-height:1.25;letter-spacing:-.01em;box-shadow:0 0 0 6px color-mix(in srgb,var(--verde) 14%,transparent)}
.prosa__destacado strong{background:none;color:var(--verde)}
/* Mensajes de ejemplo como burbujas de WhatsApp */
.prosa__mensaje{position:relative;max-width:min(480px,92%);margin-left:0;padding:12px 16px 22px;border-radius:18px 18px 18px 4px;background:#dcf8c6;color:#0a151c;font-size:16px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.08),0 14px 30px -18px rgba(0,0,0,.4)}
.prosa__mensaje::before{content:"Mensaje de ejemplo";display:block;margin-bottom:4px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#007a4d}
.prosa__mensaje-hora{position:absolute;right:12px;bottom:6px;font-size:11px;color:#5b6b71}
.prosa__mensaje strong{background:none}
/* Resumen */
.prosa__resumen{margin-top:1.4em !important;padding:var(--space-6);border-radius:22px;background:var(--verde-suave);border:1px solid color-mix(in srgb,var(--verde) 35%,transparent)}
.prosa__resumen-titulo{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-3);font-weight:800;color:var(--verde-texto)}
.prosa__resumen-lista li::before{background:var(--verde) !important;color:var(--en-verde) !important}
/* Recuadro verde final */
.art__cta{position:relative;overflow:hidden;display:grid;gap:var(--space-4);justify-items:start;margin-block:var(--space-8) var(--space-16);padding:var(--space-8) var(--space-6);border-radius:28px;background:radial-gradient(120% 120% at 100% 0%,color-mix(in srgb,var(--verde) 70%,#ffffff),var(--verde) 60%);color:var(--en-verde);box-shadow:0 30px 60px -30px var(--verde)}
.art__cta h2{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.02em}
.art__cta p{max-width:46ch;margin-top:var(--space-2)}
.art__cta-emo{position:absolute;right:-10px;bottom:-30px;width:150px;height:200px;opacity:.95;rotate:-8deg;animation:emo-flota 4s ease-in-out infinite}
/* Tarjetas de artículos */
.sigue{padding-bottom:var(--space-16)}
.sigue__cabeza{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-8)}
.cnt__grid{display:grid;gap:var(--space-6)}
.cnt{position:relative;display:grid;gap:var(--space-4);align-content:start}
.cnt[hidden]{display:none}
.cnt.entra{animation:pp-entra .5s var(--resorte) both;animation-delay:calc(var(--i,0) * 60ms)}
.cnt__enlace{position:absolute;inset:0;z-index:3;border-radius:24px}
.cnt__enlace:focus-visible{outline:3px solid var(--foco);outline-offset:4px}
.cnt__texto{display:grid;gap:var(--space-2)}
.cnt__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--tinta-media)}
.cnt h3,.cnt h2{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.2;letter-spacing:-.01em}
.cnt__texto > p:not(.cnt__meta):not(.cnt__pie){color:var(--tinta-media);font-size:15px}
.cnt__pie{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:var(--space-2);font-size:13px;color:var(--tinta-media)}
.cnt__leer{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--verde-texto)}
.cnt__leer .icono{width:16px;height:16px;transition:translate .3s var(--resorte)}
.cnt:hover .cnt__leer .icono{translate:4px 0}
.cnt:hover .arte__plano--a{translate:-8px 0}
.cnt:hover .arte__plano--b{translate:8px 0}
.cnt:hover .arte{box-shadow:0 0 0 2px var(--verde),0 24px 50px -24px color-mix(in srgb,var(--verde) 70%,transparent)}
.cnt .arte{transition:box-shadow .3s ease}
/* Próximas publicaciones */
.cnt--pronto .cnt__pronto-tag{background:var(--noche);color:var(--en-noche)}
.cnt__esqueleto{display:grid;gap:8px}
.cnt__esqueleto i{height:10px;border-radius:5px;background:color-mix(in srgb,var(--tinta) 9%,transparent)}
.cnt__esqueleto i:last-child{width:70%}
.cnt__avisa{justify-self:start;margin-top:var(--space-2);position:relative;z-index:4}

/* Página con todas las ediciones */
.blog__cabeza{padding-block:var(--space-12) var(--space-8);text-align:center}
.blog__cabeza .st-tag{margin-bottom:var(--space-4)}
.blog__cabeza .cuerpo-l{max-width:620px;margin:var(--space-4) auto 0}
.blog__filtros{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-8)}
.blog__filtro{min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--linea);background:var(--superficie);color:var(--tinta);font-weight:700;font-size:14px;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.blog__filtro:hover{border-color:var(--tinta-media)}
.blog__filtro[aria-pressed="true"]{background:var(--verde);color:var(--en-verde);border-color:transparent;box-shadow:0 8px 18px -10px var(--verde)}
.cnt--destacado{margin-top:var(--space-8);padding:var(--space-4);border-radius:32px;background:var(--superficie);border:1px solid var(--linea);box-shadow:var(--sombra-suave)}
.cnt--destacado h2{font-size:clamp(26px,3vw,38px);line-height:1.1}
.cnt--destacado .cnt__enlace{border-radius:32px}
.blog__sub{margin:var(--space-16) 0 var(--space-6);font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em}
.blog__vacio{margin-top:var(--space-6);color:var(--tinta-media)}
.blog .art__cta{margin-top:var(--space-16)}

@media (min-width: 768px){
  .cnt__grid{grid-template-columns:repeat(2,1fr)}
  .cnt--destacado{grid-template-columns:1.2fr 1fr;align-items:center;gap:var(--space-8);padding:var(--space-6)}
  .art__cta{grid-template-columns:1fr auto;align-items:center;padding:var(--space-12) var(--space-12) var(--space-12) var(--space-8)}
  .art__cta .st-btn{margin-right:110px}
}
@media (min-width: 1024px){
  .art__portada-fila{grid-template-columns:1.1fr 1fr;gap:var(--space-12)}
  .art__cuerpo{grid-template-columns:240px minmax(0,1fr);gap:var(--space-16)}
  .art__indice{display:block;position:sticky;top:calc(var(--alto-cabecera) + var(--space-8));align-self:start}
  .cnt__grid:not(.cnt__grid--dos){grid-template-columns:repeat(3,1fr)}
}

/* ===================== Transiciones (js/comun.js) ===================== */
/* A · Scroll suave (Lenis): sin el scroll suave nativo para que no peleen */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* B · Títulos por líneas: cada renglón sube desde una máscara, con un leve giro desde la esquina */
.tl-linea{display:block;overflow:clip;overflow-clip-margin:.12em;padding-bottom:.06em;margin-bottom:-.06em}
.tl-linea__in{display:inline-block;transform-origin:0 100%}
.tl-listo:not(.tl-visible) .tl-linea__in{translate:0 110%;rotate:4deg}
.tl-listo.tl-visible .tl-linea__in{translate:0 0;rotate:0deg;transition:translate 1s cubic-bezier(.22,1,.36,1),rotate 1s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 90ms)}

/* C · Cortina de la puerta entre páginas */
.cortina{position:fixed;inset:0;z-index:1000;pointer-events:none;display:grid;place-items:center}
.cortina__hoja{position:absolute;top:-10%;bottom:-10%;width:60%;transition:translate .6s cubic-bezier(.76,0,.24,1)}
.cortina__hoja--verde{left:-5%;background:var(--verde);clip-path:polygon(0 0,100% 6%,92% 100%,0 100%);translate:-105% 0}
.cortina__hoja--noche{right:-5%;background:var(--noche);clip-path:polygon(8% 0,100% 0,100% 100%,0 94%);translate:105% 0}
.cortina__puerta{position:relative;width:46px;height:66px;--puerta-ext:var(--verde);--puerta-int:var(--en-noche);opacity:0;scale:.6;transition:opacity .3s ease,scale .5s var(--resorte)}
.cortina.cerrando,.cortina.cerrada{pointer-events:auto}
.cortina.cerrando .cortina__hoja,.cortina.cerrada .cortina__hoja{translate:0 0}
.cortina.cerrando .cortina__puerta,.cortina.cerrada .cortina__puerta{opacity:1;scale:1;transition-delay:.3s}
.cortina.cerrada .cortina__hoja,.cortina.cerrada .cortina__puerta{transition:none}
.cortina.abriendo .cortina__hoja{transition-delay:.15s}

/* D · Piezas visuales que se revelan con una cortina de abajo hacia arriba */
.por-revelar{clip-path:inset(100% 0 0 0 round 24px)}
.revelando{animation:revela-cortina 1.1s cubic-bezier(.77,0,.18,1) backwards}
@keyframes revela-cortina{from{clip-path:inset(100% 0 0 0 round 24px)}to{clip-path:inset(0 0 0 0 round 0)}}

/* ---------- Aparición al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference){
  .js [data-revela]{opacity:0;translate:0 20px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.2,1)}
  .js [data-revela].visible{opacity:1;translate:0 0}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
  .cinta__pausa{display:none}
}