/* ============================================================
   TapTrack — prueba de rediseño
   Lenguaje visual inspirado en tramasoftware.com (tipografía
   liviana a gran escala con acentos en negrita/píldora, navbar
   flotante en cápsula, tarjetas con vidrio esmerilado, curvas
   decorativas y textura de grano) adaptado a la marca de
   TapTrack: negro + dorado, contenido y fotos propias.
   Sin JavaScript. CSP sin 'unsafe-inline': todo el CSS vive acá.
   ============================================================ */

/* Manrope alojada en el sitio (fuente variable, subset latin): un solo archivo
   cubre los pesos 300-800. Mismo unicode-range que servía Google Fonts.
   Licencia: fonts/OFL.txt. Si se actualiza el archivo, cambiar también su nombre
   (el .htaccess lo cachea 1 año). */
@font-face{
  font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Marca */
  --negro:#000;
  --carbon:#141414;
  --carbon-2:#0e0e0e;
  --dorado:#d4a24a;
  --dorado-claro:#e8bd6d;
  --dorado-resalte:#ecb746;      /* palabras resaltadas (.marcador): dorado vivo */
  --dorado-resalte-hover:#f4c55a;
  --dorado-resalte-texto:#cc9214;   /* mismo dorado, un poco más oscuro, para texto grande sobre fondo claro (2,4:1) */
  --dorado-oscuro:#a9782f;
  --dorado-texto:#865f25;

  /* Superficie clara (equivalente al beige de referencia, sobre
     la calidez del dorado de TapTrack) */
  --crema:#f7f2e6;
  --crema-2:#f0e9d8;

  /* Texto */
  --texto:#171512;
  --texto-medio:#5a564c;
  --tenue:#726e5e;
  --borde:rgba(20,17,10,.1);
  --borde-claro:rgba(255,255,255,.14);

  /* Semántico (contraste bien/mal, sentimiento de reseñas) */
  --verde:#1f9c4d;
  --rojo:#d1544a;
  /* Variantes para texto y chips con texto blanco (>= 4.5:1 sobre blanco).
     Los gráficos y los íconos siguen usando --verde / --rojo. */
  --verde-texto:#1b8743;
  --rojo-texto:#c14e44;
  --ambar:#dda322;
  --ambar-texto:#976f17;

  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Escala tipográfica */
  --f-display:clamp(2.6rem,6.6vw,5.6rem);
  --f-h2:clamp(2.1rem,4.4vw,3.4rem);
  --f-h3:clamp(1.5rem,2.6vw,1.95rem);
  --f-h4:1.28rem;
  --f-lead:1.18rem;
  --f-body:1.08rem;
  --f-sm:.98rem;
  --f-xs:.86rem;
  --f-eyebrow:.98rem;
  --f-cifra:clamp(3.2rem,8vw,5.2rem);

  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:32px;
  --r-full:999px;

  --s-baja:0 4px 16px rgba(20,17,10,.07);
  --s-media:0 14px 36px rgba(20,17,10,.10);
  --s-alta:0 24px 60px rgba(20,17,10,.16);
}

html{scrollbar-color:var(--dorado) var(--carbon-2);scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-top:110px}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--carbon-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--dorado-claro),var(--dorado));border-radius:var(--r-full);border:3px solid var(--carbon-2)}
::-webkit-scrollbar-thumb:hover{background:var(--dorado-claro)}

*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none}
::selection{background:var(--dorado);color:#241802}

body{
  font-family:var(--font);color:var(--texto);line-height:1.6;
  background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.wrap-ang{max-width:1000px}

section{padding:clamp(64px,9vh,112px) 0;position:relative;overflow:hidden}
.oscura{background:var(--carbon);color:#fff}
.crema{background:var(--crema)}
@media(max-width:860px){section{padding:52px 0}}

/* ---------- Grano y bruma (sin imágenes: sólo gradientes) ---------- */
.grano{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px),radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:4px 4px,7px 7px;background-position:0 0,2px 2px;mix-blend-mode:screen;opacity:.5;
}
.crema .grano{background-image:radial-gradient(rgba(20,17,10,.05) 1px,transparent 1px),radial-gradient(rgba(20,17,10,.035) 1px,transparent 1px);mix-blend-mode:multiply;opacity:.4}

.bruma{position:absolute;pointer-events:none;border-radius:50%;filter:blur(60px);z-index:0}
.bruma-oro{background:radial-gradient(circle,rgba(212,162,74,.5),transparent 70%)}
.bruma-oro-suave{background:radial-gradient(circle,rgba(212,162,74,.22),transparent 70%)}

/* ============================================================
   TÍTULOS — escala "display" liviana con acentos en negrita
   ============================================================ */
h1,h2{
  font-family:var(--font);font-weight:300;
  letter-spacing:-.025em;text-wrap:balance;
}
h1{font-size:var(--f-display);line-height:1.28}
h2{font-size:var(--f-h2);line-height:1.28;margin-bottom:16px}
h1 strong,h2 strong{font-weight:800}
h3{font-size:var(--f-h4);font-weight:700;letter-spacing:-.015em}

/* Rótulo de sección: guion + texto en versalita */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--f-eyebrow);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dorado-texto);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--dorado-oscuro);display:inline-block}
.oscura .eyebrow{color:var(--dorado-resalte)}
.oscura .eyebrow::before{background:var(--dorado-resalte)}

/* Palabra/frase resaltada dentro de un título:
   .marcador = píldora sólida dorada (equivalente al "marker")
   .contorno = sólo borde dorado, sin relleno (equivalente a "capsule")
   El fondo usa --dorado-resalte (dorado vivo) y el texto es casi negro.
   Cada línea del resaltado es una píldora (cápsula de extremos redondos).
   js/marcador.js la dibuja detrás del texto (.marcador-fondo, una por línea,
   conectadas entre sí) y oculta este fondo (.dibujado); sin JS queda el fondo CSS. */
.marcador{
  background:var(--dorado-resalte);color:#171310;font-weight:800;
  padding:0 .3em;border-radius:var(--r-full);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.marcador.dibujado{background:transparent}
.con-marcador{position:relative;isolation:isolate}
.marcador-fondo{position:absolute;left:0;top:0;z-index:-1;overflow:visible;pointer-events:none;display:none}
.marcador-fondo.activo{display:block}
.marcador-fondo rect{fill:var(--dorado-resalte)}
.contorno{
  position:relative;display:inline-block;padding:0 .18em;font-weight:800;
  color:inherit;white-space:nowrap;
}
.contorno::before{
  content:"";position:absolute;top:.06em;bottom:.06em;left:-.06em;right:-.06em;
  border:2px solid var(--dorado);border-radius:var(--r-full);pointer-events:none;
}

.sub{color:var(--texto-medio);font-size:var(--f-lead);max-width:44rem;margin-bottom:44px;text-wrap:pretty}
.oscura .sub{color:#a8a49a}

/* ============================================================
   BOTONES Y PÍLDORAS
   ============================================================ */
.btn{
  font-weight:700;font-size:var(--f-body);letter-spacing:-.01em;line-height:1;
  display:inline-flex;align-items:center;gap:10px;
  border:0;border-radius:var(--r-full);padding:15px 28px;cursor:pointer;
  text-decoration:none;transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),color .22s var(--ease);
}
.btn-oro{background:linear-gradient(135deg,var(--dorado-claro),var(--dorado));color:#1a1200;box-shadow:0 6px 22px rgba(212,162,74,.4)}
.btn-oro:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(212,162,74,.55)}
.btn-negro{background:var(--negro);color:#fff}
.btn-negro:hover{background:#000;transform:translateY(-2px)}
.btn-fantasma{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);padding:13.5px 26.5px}
.btn-fantasma:hover{background:#fff;color:var(--carbon);border-color:transparent;transform:translateY(-2px)}
.btn .flecha{
  width:26px;height:26px;border-radius:var(--r-full);background:#1a1200;color:var(--dorado-claro);
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:transform .22s var(--ease);
}
.btn-negro .flecha,.btn-fantasma .flecha{background:var(--dorado);color:#1a1200}
.btn:hover .flecha{transform:translateX(3px)}

/* ---------- Botón de envío: 3 estados (estático / enviando / recibido) ---------- */
.btn:disabled{cursor:default}
.btn:disabled:hover{transform:none}
.btn-icono.btn-puntos,.btn-icono.btn-check{display:none}
.btn.enviando .flecha,.btn.recibido .flecha{display:none}
.btn.enviando .btn-puntos{display:inline-flex;align-items:center;gap:3px;width:26px;justify-content:center}
.btn-puntos i{
  width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block;
  animation:tt-puntito 1s infinite ease-in-out;
}
.btn-puntos i:nth-child(2){animation-delay:.15s}
.btn-puntos i:nth-child(3){animation-delay:.3s}
@keyframes tt-puntito{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.btn.recibido .btn-check{display:inline-flex;align-items:center;justify-content:center;width:26px}
.btn.recibido .btn-check svg{width:22px;height:22px;color:var(--verde)}

/* ============================================================
   NAVBAR — cápsula flotante fija, vidrio esmerilado
   ============================================================ */
.nav-caparazon{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;flex-direction:column;align-items:center;padding:18px clamp(20px,4vw,64px);pointer-events:none}
.nav-vidrio{
  pointer-events:auto;width:100%;max-width:1240px;
  display:flex;align-items:center;gap:22px;
  padding:9px 10px 9px 24px;border-radius:var(--r-full);
  background:rgba(14,14,14,.74);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(212,162,74,.16);box-shadow:0 12px 34px rgba(0,0,0,.28);
}
.nav-marca{display:flex;align-items:center;flex:0 0 auto}
.nav-marca img{height:32px;width:auto}
.nav-links{display:flex;gap:clamp(14px,1.45vw,26px);margin:0 auto}
.nav-links a{
  position:relative;color:#dcdcdc;font-size:var(--f-sm);font-weight:500;padding:6px 0;transition:color .2s;white-space:nowrap;
}
.nav-links a:hover{color:#fff}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--dorado);
  transform:scaleX(0);transform-origin:left;transition:transform .26s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{flex:0 0 auto;background:var(--dorado-resalte);color:#1a1200;font-weight:700;font-size:var(--f-sm);padding:11px 22px;border-radius:var(--r-full);transition:transform .22s var(--ease),background .22s}
.nav-cta:hover{background:var(--dorado-resalte-hover);transform:translateY(-1px)}
.nav-links.movil{display:none}

.menu-check{position:absolute;opacity:0;pointer-events:none}
.menu-boton{display:none;pointer-events:auto;cursor:pointer;padding:10px;border-radius:var(--r-full);line-height:0;margin-left:auto}
.menu-boton span{display:block;width:20px;height:2px;background:#e8e8e8;border-radius:var(--r-full);transition:transform .2s,opacity .2s}
.menu-boton span+span{margin-top:5px}
.menu-check:checked~.nav-caparazon .menu-boton span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-check:checked~.nav-caparazon .menu-boton span:nth-child(2){opacity:0}
.menu-check:checked~.nav-caparazon .menu-boton span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1219px){
  .nav-links,.nav-cta{display:none}
  .nav-links.movil{
    display:none;pointer-events:auto;width:100%;max-width:1240px;margin-top:8px;
    background:rgba(14,14,14,.95);backdrop-filter:blur(18px);border:1px solid rgba(212,162,74,.18);
    border-radius:var(--r-xl);padding:16px;flex-direction:column;gap:4px;
  }
  .menu-check:checked~.nav-caparazon .nav-links.movil{display:flex}
  .nav-links.movil a{padding:12px 10px;border-radius:var(--r-sm);font-size:var(--f-body)}
  .nav-links.movil a:hover{background:rgba(255,255,255,.06)}
  .nav-links.movil .nav-cta{display:flex;justify-content:center;margin-top:6px}
  .nav-links.movil a.nav-cta,.nav-links.movil a.nav-cta:hover{color:#1a1200;background:var(--dorado-resalte)}
  .menu-boton{display:block}
}

/* ============================================================
   HERO
   ============================================================ */
header{
  background:var(--carbon);color:#fff;
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:150px 0 70px;position:relative;overflow:hidden;
}
.bruma-hero-1{width:640px;height:640px;right:-14%;top:-10%}
.bruma-hero-2{width:420px;height:420px;left:-10%;bottom:-16%}
/* Sin unsafe-inline en el CSP: nada de style="" en el HTML, todo acá */
.bruma-como{width:460px;height:460px;right:-12%;top:10%}
.bruma-modelos{width:480px;height:480px;left:-12%;bottom:-14%}
.bruma-portal{width:560px;height:560px;right:-8%;top:6%}
.contacto-copy .sub{margin-bottom:6px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;position:relative;z-index:2}
.hero-copy{display:flex;flex-direction:column;gap:26px}
.estrellas{color:var(--dorado-resalte);letter-spacing:5px;font-size:1.55rem}
.hero-copy h1{color:#fff}
.hero-sub{font-size:var(--f-lead);color:rgba(255,255,255,.72);max-width:30rem;line-height:1.6}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}

.hero-marco{position:relative}
.hero-cuadro{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);background:#000;
}
.hero-cuadro img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  header{padding:132px 0 48px}
  .hero{grid-template-columns:1fr}
}

/* ============================================================
   DATO DESTACADO
   ============================================================ */
.dato{
  padding:76px 0;background:var(--carbon-2);
  border-top:1px solid rgba(212,162,74,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.dato-wrap{text-align:center;max-width:50rem;margin:0 auto;position:relative;z-index:2}
.dato .eyebrow{justify-content:center}
.dato .cifra{font-size:var(--f-cifra);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--dorado-resalte)}
.dato p{color:rgba(255,255,255,.7);font-size:var(--f-lead);margin-top:14px}

/* ============================================================
   PROBLEMA — tarjetas de contraste
   ============================================================ */
.contraste{display:grid;grid-template-columns:1fr 1fr;gap:22px;position:relative;z-index:2}
.caja{
  padding:34px;border-radius:var(--r-lg);border:1px solid var(--borde);
  background:#fff;box-shadow:var(--s-baja);
}
.caja.mal{background:#fdf6f5;border-color:#f2d9d6}
.caja.bien{background:#f5fbf6;border-color:#d3ead9}
.caja-ico{
  width:52px;height:52px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;background:#fff;
}
.caja.mal .caja-ico{color:var(--rojo);border:1.5px solid #ecc4bf}
.caja.bien .caja-ico{color:var(--verde);border:1.5px solid #bfe0c9}
.caja-ico svg{width:26px;height:26px}
.caja h3{margin-bottom:10px}
.caja p{color:var(--texto-medio);font-size:var(--f-body)}
.remate{margin-top:28px;text-align:center;font-size:var(--f-h4);font-weight:700;letter-spacing:-.02em;position:relative;z-index:2}
.remate span{color:var(--dorado-resalte-texto)}
@media(max-width:760px){.contraste{grid-template-columns:1fr}}

/* ============================================================
   CÓMO FUNCIONA — filas numeradas al estilo "value-row"
   ============================================================ */
.filas-paso{display:flex;flex-direction:column;gap:16px;margin-top:28px;position:relative;z-index:2}
.fila-paso{
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  padding:28px 30px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .22s var(--ease),transform .22s var(--ease);
}
.fila-paso:hover{border-color:rgba(212,162,74,.4);transform:translateY(-2px)}
.fila-num{
  font-weight:700;font-size:var(--f-xs);color:var(--dorado-resalte);
  padding:7px 15px;border:1.5px solid var(--dorado-resalte);border-radius:var(--r-full);letter-spacing:.05em;
}
.fila-cuerpo{display:flex;flex-direction:column;gap:6px}
.fila-cuerpo h3{color:#fff}
.fila-cuerpo p{color:rgba(255,255,255,.66);font-size:var(--f-body);line-height:1.55;max-width:38rem}
.fila-ico{
  width:52px;height:52px;border-radius:var(--r-full);background:rgba(236,183,70,.12);
  color:var(--dorado-resalte);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.fila-ico svg{width:24px;height:24px}
@media(max-width:700px){
  .fila-paso{grid-template-columns:1fr;text-align:left}
  .fila-ico{display:none}
}

/* ============================================================
   EL INFORME — zonas (contenido de producto, tokens unificados)
   ============================================================ */
.seccion-informe{--if-verde:var(--verde);--if-ambar:var(--ambar);--if-rojo:var(--rojo);
  --if-verde-txt:var(--verde-texto);--if-rojo-txt:var(--rojo-texto);--if-ambar-txt:var(--ambar-texto);
  --if-pieza:#fff;--if-pieza-borde:#eaeaea;--if-texto:var(--texto);
  --if-texto-medio:var(--texto-medio);--if-tenue:var(--tenue);--if-pista:#e4e4e4;
}
.informe-txt{max-width:44rem;margin:0 auto 48px;text-align:center}
.informe-txt .sub{margin:0 auto}

.zona{display:grid;grid-template-columns:minmax(15rem,21rem) 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;padding:clamp(2.2rem,5vw,3.2rem) 0}
.zona.espejo{grid-template-columns:1fr minmax(15rem,21rem)}
.zona.espejo .zona-texto{order:2}
.zona.espejo .zona-piezas{order:1}
.zona-texto h3{font-size:var(--f-h3);color:var(--dorado-resalte-texto);font-weight:800;line-height:1.14;letter-spacing:-.02em;margin:0 0 11px}
.zona-texto .zona-sub{font-size:var(--f-lead);font-weight:700;color:var(--texto);line-height:1.35;margin:0 0 26px}
.zona-texto p{color:var(--texto-medio);line-height:1.68;font-size:var(--f-body);margin:0}
.zona-texto p+p{margin-top:14px}

.zona-piezas{display:grid;gap:1rem}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}

.tarjeta,.resena,.linea-google{background:var(--if-pieza);border:1px solid var(--if-pieza-borde);border-radius:var(--r-lg)}
.tarjeta{padding:1.5rem}
.tarjeta h4{font-size:var(--f-h4);font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
.tarjeta .aclara{font-size:var(--f-sm);color:var(--if-tenue);margin:0 0 1.1rem}

.cifra-caja{text-align:center;height:100%;display:flex;flex-direction:column;justify-content:center}
.cifra-icono{color:var(--dorado);line-height:0;margin-bottom:.8rem;display:flex;justify-content:center}
.cifra-icono svg{width:2.6rem;height:2.6rem}
.cifra-caja .cifra{font-size:2.85rem;font-weight:800;line-height:1;letter-spacing:-.035em}
.cifra-pie{color:var(--if-texto-medio);font-size:var(--f-sm);margin-top:.4rem}
.comparativa{border-top:1px solid var(--if-pieza-borde);margin-top:1rem;padding-top:.8rem;font-size:var(--f-xs);color:var(--if-tenue);line-height:1.45}
.delta{display:block;margin-top:.2rem;font-size:var(--f-body);font-weight:700}
.delta.sube{color:var(--if-verde-txt)}
.delta.baja{color:var(--if-rojo-txt)}
.comparativa .respondidas{display:block;margin-top:.5rem}

/* Desglose por cantidad de estrellas (tarjeta "Promedio del mes") */
.desglose{border-top:1px solid var(--if-pieza-borde);margin-top:1rem;padding-top:.8rem;display:grid;gap:.35rem;text-align:left}
.desglose div{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;font-size:var(--f-xs);color:var(--if-tenue)}
.desglose .dg-estrellas{color:var(--dorado);letter-spacing:.05em;flex:0 0 auto}

.sentimiento{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.donut{--pos:79%;--neu:95%;width:7.2rem;height:7.2rem;flex:0 0 auto;border-radius:50%;
  background:conic-gradient(var(--if-verde) 0 var(--pos),var(--if-ambar) var(--pos) var(--neu),var(--if-rojo) var(--neu) 100%);
  display:grid;place-items:center;position:relative;
}
.donut::after{content:"";position:absolute;top:1.35rem;right:1.35rem;bottom:1.35rem;left:1.35rem;background:var(--if-pieza);border-radius:50%}
.donut b{position:relative;z-index:1;font-size:1.35rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.donut b small{display:block;font-size:.6rem;font-weight:600;color:var(--if-tenue);margin-top:.15rem}
.leyenda{flex:1 1 9.5rem;display:grid;gap:.7rem}
.leyenda div{display:flex;align-items:baseline;gap:.55rem;font-size:var(--f-body)}
.punto{width:.6rem;height:.6rem;border-radius:50%;flex:0 0 auto;transform:translateY(-.08rem)}
.punto.p{background:var(--if-verde)}
.punto.n{background:var(--if-ambar)}
.punto.g{background:var(--if-rojo)}
.leyenda .val{margin-left:auto;font-weight:700;text-align:right;line-height:1.25}
.leyenda .val small{display:block;font-weight:500;color:var(--if-tenue);font-size:var(--f-xs)}

.linea-google{margin:0;padding:1.15rem 1.4rem;font-size:var(--f-body);color:var(--if-texto-medio)}
.linea-google b{color:var(--if-texto);font-size:var(--f-h4);font-weight:700;margin-right:.35rem}
.linea-google a{color:#1a5fc4;text-decoration:underline;text-underline-offset:.16em}

.resena{padding:1.3rem 1.4rem}
.resena-cab{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.resena-cab .nombre{font-weight:700;font-size:var(--f-h4)}
.rs-estrellas{color:var(--dorado);font-size:var(--f-body);letter-spacing:.06em}
.marca-sent{margin-left:auto;font-size:var(--f-xs);font-weight:700;color:#fff;padding:.28rem .8rem;border-radius:var(--r-full)}
.marca-sent.pos{background:var(--if-verde-txt)}
.marca-sent.neg{background:var(--if-rojo-txt)}
.rs-fecha{color:var(--if-tenue);font-size:var(--f-xs);margin:.35rem 0 .6rem}
.resena p{margin:0 0 .85rem;font-size:var(--f-body);line-height:1.55}
.respuesta{background:var(--crema);border-left:3px solid var(--dorado);border-radius:var(--r-sm);padding:.85rem 1rem;margin:0 0 .85rem}
.respuesta-tag{display:block;font-size:var(--f-xs);font-weight:700;color:var(--dorado-texto);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.respuesta p{margin:0;font-size:var(--f-body);line-height:1.55;color:var(--texto-medio)}
.chips{display:flex;gap:.45rem;flex-wrap:wrap}
.chip{background:var(--if-pista);color:var(--texto-medio);font-size:var(--f-xs);padding:.28rem .7rem;border-radius:var(--r-full)}

.fila{margin-bottom:1rem}
.fila:last-child{margin-bottom:0}
.fila-cab{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;margin-bottom:.38rem}
.fila-cab .et{font-size:var(--f-body)}
.fila-cab .et.fuerte{font-weight:700}
.fila-cab .tag{font-size:var(--f-sm);font-weight:600}
.fila-cab .tag.pos{color:var(--if-verde-txt)}
.fila-cab .tag.neg{color:var(--if-rojo-txt)}
.fila-cab .tag.neu{color:var(--if-ambar-txt)}
.fila-cab .conteo{font-size:var(--f-xs);color:var(--if-tenue)}
.barra{height:.55rem;border-radius:var(--r-full);background:var(--if-pista);overflow:hidden;display:flex}
.barra i{display:block;height:100%}
.barra i.v{background:var(--if-verde)}
.barra i.a{background:var(--if-ambar)}
.barra i.r{background:var(--if-rojo)}

.puesto{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.puesto:last-child{margin-bottom:0}
.pos-num{width:1.8rem;height:1.8rem;border-radius:50%;display:grid;place-items:center;font-size:var(--f-xs);font-weight:700;color:var(--texto);background:#b9c0c9;flex:0 0 auto}
.puesto.lider .pos-num{background:var(--dorado)}
.puesto.vos .pos-num{background:#8d97a3}
.puesto .quien{font-size:var(--f-body)}
.puesto.vos .quien{font-weight:700}
.puesto .quien .est{color:var(--dorado);margin-left:.18rem}
.puesto .rk-valor{margin-left:auto;font-weight:800;font-size:1.2rem;letter-spacing:-.02em;color:#8a919b}
.puesto.vos .rk-valor{color:#9c6d1f}
.puesto .rk-valor .est{color:var(--dorado);font-weight:400;margin-right:.12rem}
.ranking-nota .puesto .rk-valor,.ranking-nota .puesto.vos .rk-valor{color:var(--texto)}
.barra-rank{height:.55rem;border-radius:var(--r-full);background:var(--if-pista);margin:-.45rem 0 .9rem 2.5rem;overflow:hidden}
.barra-rank i{display:block;height:100%;background:#8a919b;border-radius:var(--r-full)}
.barra-rank.vos i{background:var(--dorado)}

.oportunidades{border:1.5px solid var(--dorado);border-radius:var(--r-lg);padding:1.6rem;background:linear-gradient(180deg,#fffaf1,#fff)}
.oportunidades>h3{font-size:var(--f-h3);font-weight:800;margin:0 0 .3rem;letter-spacing:-.015em}
.oportunidades>p{font-size:var(--f-sm);color:var(--if-texto-medio);margin:0 0 1.3rem;line-height:1.55}
.area-neg{font-size:var(--f-h4);font-weight:700;margin:0 0 .8rem}
.area-neg.siguiente{margin-top:1.5rem}
.area-neg span{color:var(--if-rojo-txt);font-weight:600;font-size:var(--f-sm)}
.cita{background:#fff;border:1px solid var(--if-pieza-borde);border-radius:var(--r-sm);padding:1rem 1.15rem;margin-bottom:.7rem}
.cita:last-child{margin-bottom:0}
.cita-cab{font-size:var(--f-sm);margin-bottom:.4rem;color:var(--if-tenue)}
.cita-cab b{color:var(--if-rojo-txt);font-weight:700}
.cita p{margin:0;font-size:var(--f-body);line-height:1.55;color:#48453c}

.cierre{
  margin:clamp(2rem,4vw,3rem) 0 0;border:1.5px solid var(--dorado);border-radius:var(--r-xl);
  background:linear-gradient(180deg,#fdf6e8,#fffdf9);padding:clamp(1.8rem,4vw,2.8rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.8rem;flex-wrap:wrap;
}
.cierre h3{font-size:clamp(1.35rem,2.5vw,1.75rem);font-weight:800;letter-spacing:-.022em;margin:0 0 .45rem}
.cierre p{margin:0;color:var(--if-texto-medio);font-size:var(--f-body);line-height:1.55;max-width:38rem}
.btn-descarga{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--carbon);color:#fff;font-weight:700;
  font-size:var(--f-body);padding:.95rem 1.7rem;border-radius:var(--r-full);flex:0 0 auto;transition:background .2s,transform .2s;
}
.btn-descarga:hover{background:#000;transform:translateY(-2px)}
.btn-descarga svg{width:1.2rem;height:1.2rem}

@media(max-width:920px){
  .zona,.zona.espejo{grid-template-columns:1fr}
  .zona.espejo .zona-texto{order:1}
  .zona.espejo .zona-piezas{order:2}
}
@media(max-width:760px){
  .trio{grid-template-columns:1fr}
}
@media(max-width:560px){
  .cifra-caja .cifra{font-size:2.3rem}
  .duo{grid-template-columns:1fr}
  .marca-sent{margin-left:0}
  .donut{width:6.2rem;height:6.2rem}
  .donut::after{top:1.15rem;right:1.15rem;bottom:1.15rem;left:1.15rem}
}
.w8{width:8%}.w9{width:9%}.w10{width:10%}.w14{width:14%}.w15{width:15%}.w23{width:23%}
.w25{width:25%}.w28{width:28%}.w33{width:33%}.w35{width:35%}.w40{width:40%}.w44{width:44%}
.w45{width:45%}.w46{width:46%}.w50{width:50%}.w55{width:55%}.w58{width:58%}.w60{width:60%}
.w75{width:75%}.w78{width:78%}.w80{width:80%}.w82{width:82%}.w85{width:85%}.w90{width:90%}
.w92{width:92%}.w100{width:100%}

/* ============================================================
   MODELOS — tarjetas tipo "vlog-card": imagen + meta
   ============================================================ */
#modelos .sub{margin-bottom:72px}
.modelos{display:grid;grid-template-columns:1fr 1fr;gap:26px;position:relative;z-index:2}
.modelo{display:flex;flex-direction:column;gap:16px}
.modelo-marco{
  border-radius:var(--r-lg);overflow:hidden;position:relative;background:#fafafa;
  box-shadow:var(--s-media);transition:box-shadow .3s var(--ease);
}
.modelo:hover .modelo-marco{box-shadow:var(--s-alta)}
.modelo-marco img{width:100%}
.modelo-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.modelo-meta h3{margin:0}
.medida{
  color:#1a1200;background:var(--dorado-resalte);font-weight:800;font-size:var(--f-xs);
  padding:.32rem .85rem;border-radius:var(--r-full);white-space:nowrap;
}
.modelo p{color:var(--texto-medio);font-size:var(--f-body)}
.oscura .modelo p{color:#a8a49a}

/* ---------- Carrusel de dos fotos por modelo, sin JS (checkbox hack) ---------- */
.carrusel{isolation:isolate}
.car-check{position:absolute;opacity:0;pointer-events:none}
/* El degradado imita el fondo de estudio de las fotos (gris, más oscuro
   arriba) para que el "letterbox" de object-fit:contain sea invisible en
   vez de cortar contenido importante, como la etiqueta de medida. */
.car-slides{position:relative;aspect-ratio:4/5;background:linear-gradient(180deg,#c6c6c6,#e2e2e2)}
/* Navegadores sin aspect-ratio: la altura sale del padding (125% = 4:5) */
@supports not (aspect-ratio:1/1){.car-slides{height:0;padding-top:125%}}
.slide{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:contain;opacity:0;transition:opacity .3s var(--ease);
}
.slide-a{opacity:1}
.car-check:checked ~ .car-slides .slide-a{opacity:0}
.car-check:checked ~ .car-slides .slide-b{opacity:1}
.car-flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:var(--r-full);cursor:pointer;
  background:rgba(20,17,10,.55);color:#fff;backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  transition:background .2s,transform .2s;
}
.car-flecha:hover{background:rgba(20,17,10,.8);transform:translateY(-50%) scale(1.06)}
.car-izq{left:14px}
.car-der{right:14px}
.car-puntos{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:7px;z-index:3}
.car-puntos span{width:7px;height:7px;border-radius:50%;background:rgba(20,17,10,.28)}
.car-check:not(:checked) ~ .car-puntos .punto-a{background:var(--dorado)}
.car-check:checked ~ .car-puntos .punto-b{background:var(--dorado)}
.nota-modelos{
  margin-top:64px;padding:22px 28px;border-radius:var(--r-md);background:#fff;
  border:1px dashed var(--dorado);text-align:center;color:var(--texto-medio);font-size:var(--f-body);position:relative;z-index:2;
}
.nota-modelos a{color:var(--texto);text-decoration:none;border-bottom:2px solid var(--dorado-resalte);padding-bottom:1px}
.nota-modelos a:hover{color:var(--dorado-resalte)}
@media(max-width:760px){.modelos{grid-template-columns:1fr}}

/* ============================================================
   CÓMO LO PEDÍS — pasos numerados con ilustración
   ============================================================ */
.proceso{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 64px}
.etapa{text-align:center}
.etapa .bolita{
  width:56px;height:56px;border-radius:50%;margin:0 auto 18px;background:#fff;border:2px solid var(--dorado);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem;color:var(--dorado-texto);
}
.etapa h3{margin-bottom:8px}
.etapa p{max-width:34rem;margin:0 auto;color:var(--texto-medio);font-size:var(--f-sm);line-height:1.55}
.etapa .ilustra{
  margin-top:20px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--s-media);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.etapa .ilustra:hover{transform:translateY(-4px);box-shadow:var(--s-alta)}
.etapa .ilustra img{width:100%}
@media(max-width:860px){
  .proceso{grid-template-columns:1fr;gap:40px}
  .etapa .ilustra{max-width:420px;margin:18px auto 0}
}

/* ============================================================
   CONTACTO — sobre crema, tarjeta blanca con formulario de línea
   ============================================================ */
.contacto-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,88px);align-items:start;position:relative;z-index:2}
.contacto-copy{display:flex;flex-direction:column;gap:24px}
.contacto-canales{display:flex;flex-direction:column;gap:12px;margin-top:6px;align-items:flex-start}
.canal{
  display:inline-flex;align-items:center;gap:12px;color:var(--texto);text-decoration:none;
  padding:13px 20px;border:1px solid rgba(20,17,10,.2);border-radius:var(--r-full);
  font-size:var(--f-body);font-weight:600;transition:all .22s var(--ease);
}
.canal svg{width:19px;height:19px;flex:0 0 auto}
.canal:hover{color:var(--dorado-texto);border-color:var(--dorado-oscuro);background:rgba(169,120,47,.08)}

.contacto-tarjeta{
  background:#fff;border:1px solid rgba(20,17,10,.08);border-radius:var(--r-xl);
  padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--s-media);
}
.contacto-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo.ancho{grid-column:1/-1}
.campo label{font-weight:700;font-size:var(--f-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--dorado-texto)}
.campo input,.campo textarea{
  font-family:inherit;font-size:var(--f-body);color:var(--texto);background:transparent;
  border:0;border-bottom:1.5px solid rgba(20,17,10,.25);padding:12px 0;outline:none;resize:none;width:100%;
  transition:border-color .22s var(--ease);
}
.campo textarea{min-height:168px}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(23,21,18,.5)}
.campo input:focus,.campo textarea:focus{border-bottom-color:var(--dorado-oscuro)}
.contacto-acciones{grid-column:1/-1;display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:8px}
.contacto-acciones .btn{width:100%;justify-content:center}
.form-nota{margin:0;font-size:var(--f-xs);color:var(--tenue);text-align:center}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ¿Querés ver una demo del portal? — dos píldoras (Sí / No). El radio nativo queda
   oculto pero sigue siendo accesible por teclado; el estado se dibuja en el <span>. */
.pregunta{grid-column:1/-1;border:0;margin:0;padding:0;min-width:0}
.pregunta legend{padding:0;margin-bottom:12px;font-weight:700;font-size:var(--f-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--dorado-texto)}
.opciones{display:flex;gap:12px;flex-wrap:wrap}
.opcion{position:relative;display:inline-flex;cursor:pointer}
.opcion input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opcion span{
  display:inline-flex;align-items:center;justify-content:center;min-width:96px;padding:11px 28px;
  border:1.5px solid rgba(20,17,10,.25);border-radius:var(--r-full);
  font-weight:700;font-size:var(--f-body);color:var(--texto);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.opcion:hover span{border-color:var(--dorado-oscuro)}
.opcion input:checked+span{background:var(--dorado-resalte);border-color:var(--dorado-resalte);color:#171310}
.opcion input:focus-visible+span{outline:2px solid var(--texto);outline-offset:3px}

.aviso{display:none;border-radius:var(--r-md);padding:12px 16px;margin:0 0 18px;font-size:var(--f-sm);grid-column:1/-1}
.aviso-ok{background:rgba(31,154,73,.10);border:1px solid rgba(31,154,73,.45);color:#17643a}
.aviso-error{background:rgba(214,67,54,.08);border:1px solid rgba(214,67,54,.45);color:#a3352b}

@media(max-width:860px){.contacto-grid,.contacto-form{grid-template-columns:1fr}}

/* ============================================================
   COMING SOON — "Mi Portal TapTrack" + mockup de laptop y celular
   Sin style="" en el HTML (CSP): todo el mockup vive en clases dv-*
   ============================================================ */
.soon{padding:clamp(72px,11vh,130px) 0}
.soon-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,7.6vw,110px);align-items:center;position:relative;z-index:2}
.soon-texto{display:flex;flex-direction:column;align-items:flex-start}

.soon-pildora{
  display:inline-flex;align-items:center;gap:11px;padding:9px 18px;border-radius:var(--r-full);
  background:rgba(236,183,70,.14);border:1px solid rgba(236,183,70,.38);
  color:var(--dorado-resalte);font-size:.925rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
/* Punto con efecto de onda: el círculo de atrás crece y se desvanece en loop */
.soon-pildora i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--dorado-resalte);display:inline-block;flex:0 0 auto}
.soon-pildora i::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--dorado-resalte);opacity:.75;
  animation:tt-onda 1.5s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes tt-onda{75%,100%{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.soon-pildora i::before{animation:none;opacity:0}}

.soon-titulo{
  font-size:clamp(2.5rem,5.2vw,4.6rem);line-height:1.3;letter-spacing:-.025em;
  text-transform:uppercase;color:#fff;margin:56px 0 76px;
}
.soon-desc{font-size:var(--f-lead);color:#a8a49a;max-width:31rem;margin:0}

.soon-lista{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:28px}
.soon-lista li{display:flex;align-items:center;gap:14px;font-size:var(--f-body);font-weight:500;color:rgba(255,255,255,.9)}
.soon-check{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  background:rgba(236,183,70,.18);color:var(--dorado-resalte);
  display:flex;align-items:center;justify-content:center;
}
.soon-check svg{width:12px;height:10px}

/* Mockup: se diseña a 680x490 y se muestra escalado. Sin aspect-ratio, sin unidades
   de contenedor ni trigonometría en CSS: solo calc() y variables, que entienden todos
   los navegadores, incluidos los viejos y los integrados de apps. --s es la escala. */
.dv-marco{--s:.34;--ext:0px;position:relative;justify-self:center;width:calc(680px * var(--s));height:calc(490px * var(--s))}
.dv-escena{position:absolute;left:0;top:0;width:680px;height:490px;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(var(--s));transform:scale(var(--s))}
/* Escalas por ancho de pantalla: una sola columna (celular y tablet) */
@media(min-width:320px){.dv-marco{--s:.37}}
@media(min-width:340px){.dv-marco{--s:.4}}
@media(min-width:360px){.dv-marco{--s:.43}}
@media(min-width:380px){.dv-marco{--s:.46}}
@media(min-width:400px){.dv-marco{--s:.49}}
@media(min-width:420px){.dv-marco{--s:.52}}
@media(min-width:440px){.dv-marco{--s:.55}}
@media(min-width:470px){.dv-marco{--s:.59}}
@media(min-width:500px){.dv-marco{--s:.64}}
@media(min-width:530px){.dv-marco{--s:.68}}
@media(min-width:560px){.dv-marco{--s:.72}}
@media(min-width:600px){.dv-marco{--s:.78}}
@media(min-width:640px){.dv-marco{--s:.84}}
@media(min-width:680px){.dv-marco{--s:.9}}
@media(min-width:720px){.dv-marco{--s:.96}}
@media(min-width:744px){.dv-marco{--s:1}}
/* Escritorio: dos columnas; el mockup se corre a la derecha usando el margen libre */
@media(min-width:961px){.dv-marco{justify-self:end;margin-right:calc(-1 * var(--ext))}}
@media(min-width:961px){.dv-marco{--s:.69;--ext:0px}}
@media(min-width:1001px){.dv-marco{--s:.72;--ext:0px}}
@media(min-width:1041px){.dv-marco{--s:.75;--ext:0px}}
@media(min-width:1081px){.dv-marco{--s:.78;--ext:0px}}
@media(min-width:1121px){.dv-marco{--s:.81;--ext:0px}}
@media(min-width:1161px){.dv-marco{--s:.84;--ext:0px}}
@media(min-width:1201px){.dv-marco{--s:.87;--ext:0px}}
@media(min-width:1241px){.dv-marco{--s:.9;--ext:0px}}
@media(min-width:1281px){.dv-marco{--s:.94;--ext:20px}}
@media(min-width:1321px){.dv-marco{--s:.97;--ext:40px}}
@media(min-width:1361px){.dv-marco{--s:1;--ext:60px}}
@media(min-width:1401px){.dv-marco{--s:1.02;--ext:80px}}
@media(min-width:1441px){.dv-marco{--s:1.02;--ext:80px}}

.dv-laptop{position:absolute;left:26px;top:0;width:610px}
.dv-lap-pantalla{width:610px;height:390px;background:#18181b;border-radius:14px 14px 0 0;border:2px solid #3c3c42;overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.6),0 0 0 1px rgba(236,183,70,.12),0 0 90px rgba(236,183,70,.10)}
.dv-lap-camara{height:22px;background:#111114;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #222226}
.dv-lap-camara i{width:5px;height:5px;border-radius:50%;background:#2c2c30}
.dv-app{display:flex;width:100%;height:calc(100% - 22px)}

.dv-side{width:142px;height:100%;background:#18181b;border-right:1px solid #2c2c30;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.dv-side-cab{padding:13px 13px 11px;border-bottom:1px solid #2c2c30}
.dv-cliente{display:flex;align-items:center;gap:8px}
.dv-cliente-logo{width:48px;height:48px;padding:3px;background:var(--dorado-resalte);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dv-cliente-logo img{width:100%;height:100%;object-fit:contain}
.dv-cliente-nombre{font-size:11.5px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-.01em}
.dv-cliente-sub{font-size:7.5px;color:#7e8189;margin-top:6px}
.dv-side-label{padding:11px 13px 5px;font-size:7.5px;font-weight:600;color:#7e8288;text-transform:uppercase;letter-spacing:.09em}
.dv-nav{margin:1px 7px;padding:7px 9px;display:flex;align-items:center;gap:7px;border-radius:7px;font-size:10.5px;color:#9a9488;line-height:1.2}
.dv-nav svg{width:12px;height:12px;flex-shrink:0}
.dv-nav.on{background:var(--dorado-resalte);color:#0b0b0d;font-weight:700}
.dv-side-pie{margin-top:auto;padding:11px 13px;border-top:1px solid #2c2c30}
.dv-side-pie img{height:19px;width:auto}

.dv-main{flex:1;background:#f5f0e5;display:flex;flex-direction:column;overflow:hidden}
.dv-top{padding:11px 15px;background:#18181b;border-bottom:1px solid #2c2c30;display:flex;justify-content:space-between;align-items:center}
.dv-top-t{font-size:11.5px;font-weight:700;color:#fff;letter-spacing:-.01em}
.dv-top-s{font-size:7.5px;color:#7e8189;margin-top:1px}
.dv-btn-out{background:rgba(236,183,70,.1);border:1px solid rgba(236,183,70,.3);border-radius:6px;padding:5px 10px;display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:600;color:var(--dorado-resalte)}
.dv-btn-out svg{width:9px;height:9px}

.dv-kpis{padding:11px 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dv-kpi{background:#fff;border-radius:10px;padding:11px;border:1px solid #e5dfd3}
.dv-kpi-fila{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:5px}
.dv-kpi-num{font-size:21px;font-weight:800;color:#1a1614;letter-spacing:-.03em;line-height:1}
.dv-kpi-num.verde{color:#3fa34d}
.dv-kpi svg{width:15px;height:15px;color:var(--dorado)}
.dv-kpi-et{font-size:8px;color:#7c756c}
.dv-kpi-d{font-size:7.5px;margin-top:4px;font-weight:600;color:#7c756c}
.dv-kpi-d.sube{color:#34863f}

.dv-fechas{margin:0 14px;padding:11px 12px;background:#fff;border-radius:10px;border:1px solid #e5dfd3}
.dv-fechas-t{font-size:8.5px;font-weight:700;color:var(--dorado-texto);margin-bottom:8px;text-transform:uppercase;letter-spacing:.07em}
.dv-fechas-fila{display:flex;gap:6px;align-items:center}
.dv-campo{flex:1;background:#e8e8e8;border:1px solid #cecece;border-radius:6px;padding:6px 9px}
.dv-campo small{display:block;font-size:6.5px;color:#686868;margin-bottom:2px}
.dv-campo b{font-size:9px;font-weight:600;color:#1a1614}
.dv-flecha-f{color:#c0b8ae;font-size:11px}
.dv-boton{background:var(--dorado-resalte);color:#0b0b0d;border-radius:6px;padding:8px 12px;font-size:8.5px;font-weight:700;white-space:nowrap;flex-shrink:0}

.dv-lap-menton{width:622px;height:12px;background:#26262b;border-radius:0 0 3px 3px;margin-left:-6px;border:2px solid #3c3c42;border-top:none;display:flex;align-items:center;justify-content:center}
.dv-lap-menton i{width:42px;height:2.5px;border-radius:2px;background:#3c3c42}
.dv-lap-base{width:660px;height:5px;background:#34343a;border-radius:0 0 70px 70px;margin-left:-25px}

.dv-cel{position:absolute;left:486px;top:94px;z-index:3}
.dv-cel-carcasa{width:192px;height:392px;background:#18181b;border-radius:28px;border:2px solid #3c3c42;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 0 1px rgba(236,183,70,.12)}
.dv-cel-estado{height:30px;background:#0d0d10;display:flex;align-items:center;justify-content:space-between;padding:0 14px;position:relative}
.dv-cel-hora{font-size:9px;font-weight:700;color:#fff;position:relative;z-index:2}
.dv-cel-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:66px;height:20px;background:#18181b;border-radius:0 0 14px 14px;z-index:1}
.dv-cel-iconos{display:flex;align-items:center;gap:3px;position:relative;z-index:2}
.dv-cel-pantalla{height:calc(100% - 30px);background:#f5f0e5;display:flex;flex-direction:column;overflow:hidden}
.dv-cel-cab{padding:10px 13px 8px;background:#18181b;border-bottom:1px solid #2c2c30}
.dv-cel-cab b{display:block;font-size:11.5px;font-weight:700;color:#fff;letter-spacing:-.01em}
.dv-cel-cab small{display:block;font-size:7.5px;color:#7e8189;margin-top:2px}
.dv-cel-lista{flex:1;padding:8px 9px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.dv-res{background:#fff;border-radius:10px;padding:9px;border:1px solid #e5dfd3}
.dv-res.tenue{opacity:.4}
.dv-res-cab{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px}
.dv-res.tenue .dv-res-cab{margin-bottom:0}
.dv-res-nombre{font-size:9px;font-weight:700;color:#1a1614}
.dv-res-est{font-size:10px;color:var(--dorado);letter-spacing:.04em;margin-top:1.5px}
.dv-tag{border-radius:5px;padding:2px 6px;margin-left:6px;font-size:7px;font-weight:700;flex-shrink:0}
.dv-tag.pos{background:rgba(63,163,77,.12);border:1px solid rgba(63,163,77,.3);color:#317c37}
.dv-tag.neg{background:rgba(220,53,53,.1);border:1px solid rgba(220,53,53,.28);color:#c43535}
.dv-res p{font-size:8px;color:#6a6458;line-height:1.45;margin-bottom:7px}
.dv-resp{display:flex;gap:5px;align-items:center}
.dv-resp-in{flex:1;background:#e8e8e8;border:1px solid #cecece;border-radius:5px;padding:5px 7px;font-size:7.5px;color:#686868}
.dv-resp-go{width:26px;height:26px;background:var(--dorado-resalte);border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dv-resp-go svg{width:11px;height:11px}

@media(max-width:960px){
  .soon-grid{grid-template-columns:1fr}
  .soon-titulo{margin:40px 0 52px}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--carbon-2);color:#fff;padding:64px 0 0;position:relative;overflow:hidden;
  border-top:1px solid rgba(212,162,74,.16);
}
.pie-grid{
  display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:56px;
  align-items:center;padding-bottom:44px;position:relative;z-index:2;
}
.pie-marca{display:flex;align-items:center}
.pie-marca img{height:52px;width:auto}
.pie-col{display:flex;flex-direction:column;gap:10px}
.pie-col h2{font-size:var(--f-xs);font-weight:700;color:var(--dorado-resalte);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;line-height:inherit;text-wrap:wrap}
.pie-col a{color:rgba(255,255,255,.65);font-size:var(--f-sm);transition:color .2s}
.pie-col a:hover{color:var(--dorado)}
.pie-social{display:flex;gap:10px;flex-wrap:wrap}
.pie-social a{
  width:40px;height:40px;border-radius:var(--r-full);background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;transition:all .22s var(--ease);
}
.pie-social a svg{width:19px;height:19px}
.pie-social a:hover{background:var(--dorado);color:#1a1200}
.pie-base{
  padding:22px 0 28px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:rgba(255,255,255,.5);font-size:var(--f-xs);position:relative;z-index:2;
}
@media(max-width:980px){
  .pie-grid{grid-template-columns:1fr 1fr}
  .pie-marca{grid-column:1/-1}
}
@media(max-width:520px){.pie-grid{grid-template-columns:1fr}}

/* ============================================================
   PÁGINA DE PRIVACIDAD — cabecera simple + texto corrido
   ============================================================ */
.nav-simple{position:relative;background:var(--carbon);padding:20px 0}
.nav-simple .wrap{display:flex;align-items:center}
.nav-simple img{height:38px;width:auto}
/* Estas reglas son sólo de la página de privacidad (<main class="legal">):
   el home también usa <main> como landmark y no debe heredarlas. */
main.legal{padding:64px 0 76px}
main.legal .wrap{max-width:760px}
main.legal h1{color:var(--texto);font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-bottom:10px}
main.legal .fecha{color:var(--texto-medio);font-size:var(--f-sm);margin-bottom:38px}
main.legal h2{color:var(--texto);font-size:var(--f-h4);font-weight:800;letter-spacing:-.01em;margin:40px 0 14px;line-height:1.3}
main.legal p{color:var(--texto-medio);line-height:1.75;margin-bottom:15px;font-size:var(--f-body)}
main.legal ul{margin:0 0 16px 22px;color:var(--texto-medio);line-height:1.75;font-size:var(--f-body)}
main.legal li{margin-bottom:8px}
main.legal a{color:var(--dorado-texto);text-decoration:underline}
main.legal strong{font-weight:700;color:var(--texto)}
.dest{background:var(--crema);border-left:3px solid var(--dorado);padding:20px 24px;border-radius:0 var(--r-md) var(--r-md) 0;margin:24px 0}
.dest p:last-child{margin-bottom:0}
.pie-privacidad{background:var(--carbon);color:rgba(255,255,255,.55);padding:26px 0;font-size:var(--f-xs)}
.pie-privacidad a{color:var(--dorado)}

/* ============================================================
   ANIMACIÓN DE ENTRADA (js/reveal.js)
   Lo que lleva .rv arranca invisible y 24px más abajo, y sube al entrar en pantalla.
   Solo se oculta si el JS puso .anim en <html>; sin JS o con "reducir movimiento"
   el contenido se ve siempre. reveal.js saca .rv al terminar, así no pisa los hover.
   ============================================================ */
html.anim .rv{
  opacity:0;transform:translateY(24px);will-change:opacity,transform;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
html.anim .rv.rv-in{opacity:1;transform:none}

/* ============================================================
   NÚMEROS Y BARRAS (js/numeros.js) — extra opcional
   Para quitarlo: borrar este bloque, js/numeros.js y su <script> en index.html.
   Las barras se tapan con un ::after del color de la pista que se encoge hacia la
   derecha y va destapando el relleno de izquierda a derecha. Solo si el JS puso .num.
   ============================================================ */
.cifra-cuenta{display:table;margin-left:auto;margin-right:auto;text-align:left;font-variant-numeric:tabular-nums}
html.num .barra,html.num .barra-rank{position:relative}
html.num .barra::after,html.num .barra-rank::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:var(--if-pista);border-radius:inherit;
  -webkit-transform-origin:100% 50%;transform-origin:100% 50%;
  transition:transform 1s var(--ease);transition-delay:var(--espera,0ms);
}
html.num .barra[data-llena]::after,html.num .barra-rank[data-llena]::after{
  -webkit-transform:scaleX(0);transform:scaleX(0);
}