:root{
    /* --- paleta extraida del logo --- */
    --accent:      #D9021A;   /* rojo vivo */
    --accent-mid:  #B00619;   /* rojo medio */
    --accent-deep: #52101A;   /* vino */
    --accent-dark: #3C121C;   /* vino oscuro */

    --bg: #0A0406;            /* negro con matiz calido, no negro puro */
    --text: #F3E7E9;          /* claro tintado en rojo, no blanco puro */
    --text-dim: #A08D91;
    --accent-ink: #FDECEE;    /* texto sobre el rojo */
    --hairline: rgba(243,231,233,.12);

    --ring: var(--bg);
    --border: var(--text);
    /* Geometria del stack: borde 2 + padding 11 = 13px de aro blanco a cada
       lado. El solape vale justo eso, asi tapa aro y nunca el logotipo. */
    --avatar-size: 58px;
    --avatar-pad: 11px;
    --avatar-overlap: 13px;

    --maxw: 940px;
  }

  *{ box-sizing:border-box; }

  /* iconos vectoriales: miden 1em y heredan el color del texto */
  .ico{
    width:1em; height:1em; flex:none;
    fill:none; stroke:currentColor; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round;
    vertical-align:-.14em;
  }
  .ico--play{ width:.85em; height:.85em; margin-right:2px; vertical-align:-.08em; }
  .scarcity .ico, .authority__chip .ico{ color:var(--accent); font-size:16px; }
  .calc__leaks .ico{ color:var(--accent); font-size:16px; margin-top:1px; }
  .checklist__verdict{ display:flex; align-items:center; justify-content:center; gap:8px; }
  .checklist__verdict-ico{ display:none; color:#2FBF71; font-size:22px; stroke-width:2; }
  .checklist--lista .checklist__verdict-ico{ display:block; }
  /* hidden tiene que ganarle a .btn{display:inline-flex}, que lo pisaba */
  [hidden]{ display:none !important; }
  /* en pantallas estrechas el texto de los botones grandes baja de linea */
  .btn--hero{ max-width:100%; white-space:normal; text-align:center; }

  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    /* los sliders se salen del contenedor a lo ancho de la pantalla */
    overflow-x:hidden;
  }

  /* Marcador de dato pendiente. Van ocultos con el atributo "hidden": la frase
     se lee bien sin ellos. Para publicar uno, se escribe el dato dentro del
     span y se le quita el "hidden". */
  .todo{
    color:var(--accent);
    border-bottom:1px dashed currentColor;
  }

  /* ---------------- HEADER ---------------- */
  .header{
    position:sticky;
    top:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 24px;
    background:rgba(10,4,6,.80);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--hairline);
  }
  .logo{
    font-weight:800;
    letter-spacing:-.02em;
    font-size:18px;
  }
  .logo span{ color:var(--accent); }

  /* ---------------- BOTONES ---------------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    /* degradado del logo: rojo vivo -> vino */
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 55%, var(--accent-deep) 100%);
    color:var(--accent-ink);
    font-weight:700;
    font-size:15px;
    letter-spacing:-.01em;
    text-decoration:none;
    padding:13px 22px;
    border-radius:999px;
    border:0;
    cursor:pointer;
    white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 26px rgba(217,2,26,.42);
  }
  .btn--sm{ font-size:14px; padding:10px 18px; }
  .btn--hero{ font-size:18px; padding:18px 34px; }

  /* ---------------- HERO ---------------- */
  .hero{
    max-width:var(--maxw);
    margin:0 auto;
    padding:56px 24px 72px;
    text-align:center;
  }

  /* avatar stack */
  .social-proof{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:26px;
  }
  /* Stack solapado como en la referencia. El solape se calibra para comerse
     el aro blanco vacio de cada circulo, no el logotipo: por eso el padding
     es ajustado y el solape queda por debajo del margen del logo. */
  .avatars{ display:flex; align-items:center; }
  .avatars img{
    width:var(--avatar-size);
    height:var(--avatar-size);
    border-radius:50%;
    object-fit:contain;
    background:#fff;
    padding:var(--avatar-pad);
    display:block;
    position:relative;
    border:2px solid #fff;
    box-shadow:
      0 0 0 3px var(--ring),          /* separacion entre circulos */
      0 6px 16px -6px rgba(0,0,0,.9);
    margin-left:calc(var(--avatar-overlap) * -1);
  }
  .avatars img:first-child{ margin-left:0; }
  /* cada uno se apila sobre el anterior, igual que en la referencia */
  .avatars img:nth-child(1){ z-index:1; }
  .avatars img:nth-child(2){ z-index:2; }
  .avatars img:nth-child(3){ z-index:3; }
  .avatars img:nth-child(4){ z-index:4; }
  .avatars img:nth-child(5){ z-index:5; }
  .social-proof__label{
    font-size:16px;
    letter-spacing:-.01em;
    white-space:nowrap;
  }
  .social-proof__label em{
    font-family:Georgia,"Times New Roman",serif;
    font-style:italic;
    font-size:1.06em;
  }

  h1{
    font-size:clamp(30px, 5.2vw, 54px);
    line-height:1.08;
    letter-spacing:-.032em;
    font-weight:800;
    margin:0 auto 22px;
    max-width:28ch;
    text-wrap:balance;
  }
  h1 .dash{ color:var(--accent); }

  .sub{
    font-size:clamp(16px, 2vw, 19px);
    line-height:1.55;
    color:var(--text-dim);
    max-width:60ch;
    margin:0 auto 36px;
    text-wrap:pretty;
  }

  /* VSL */
  /* El reproductor de VTurb trae su propia proporcion: aqui solo el marco. */
  .vsl{
    position:relative;
    width:100%;
    border-radius:14px;
    overflow:hidden;
    background:#150A0D;
    border:1px solid rgba(217,2,26,.28);
    min-height:120px;
    /* Sombra en cuatro capas. Cada una hace un trabajo distinto:
       filo de contacto, cuerpo medio, caida larga y halo de marca.
       Una sola sombra grande se ve como una mancha; apiladas dan volumen. */
    box-shadow:
      0 2px 4px rgba(0,0,0,.85),
      0 12px 24px -8px rgba(0,0,0,.9),
      0 48px 80px -28px rgba(0,0,0,1),
      0 80px 130px -50px rgba(0,0,0,1),
      0 0 120px -18px rgba(217,2,26,.55);
  }
  /* resplandor difuso por detras, para despegarlo del fondo negro */
  .vsl::before{
    content:"";
    position:absolute;
    inset:-46px -30px -70px;
    z-index:-1;
    border-radius:40px;
    background:
      radial-gradient(55% 55% at 50% 45%, rgba(217,2,26,.34), transparent 72%),
      radial-gradient(70% 40% at 50% 105%, rgba(0,0,0,.95), transparent 70%);
    filter:blur(34px);
    pointer-events:none;
  }
  .vsl__play{
    width:74px;
    height:74px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 55%, var(--accent-deep) 100%);
    display:grid;
    place-items:center;
    transition:transform .18s ease;
  }
  .vsl:hover .vsl__play{ transform:scale(1.07); }
  .vsl__play svg{ margin-left:4px; }
  .vsl__placeholder{
    position:absolute;
    bottom:14px;
    left:0; right:0;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#6B5257;
  }

  .vsl-caption{
    margin:20px 0 30px;
    font-size:15px;
    color:var(--text-dim);
  }

  .cta-block{ display:flex; flex-direction:column; align-items:center; gap:12px; }
  .cta-micro{ font-size:14px; color:var(--text-dim); }
  .scarcity{
    font-size:14px;
    color:var(--text);
    background:rgba(217,2,26,.12);
    border:1px solid rgba(217,2,26,.40);
    padding:8px 16px;
    border-radius:999px;
  }
  .link-secondary{
    display:inline-block;
    margin-top:6px;
    color:var(--text-dim);
    font-size:15px;
    text-decoration:none;
    border-bottom:1px solid var(--hairline);
    padding-bottom:2px;
  }
  .link-secondary:hover{ color:var(--text); }

  /* metricas */
  .metrics{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    margin-top:56px;
    padding-top:36px;
    border-top:1px solid var(--hairline);
  }
  .metric__num{
    font-size:clamp(26px, 4vw, 38px);
    font-weight:800;
    letter-spacing:-.03em;
    line-height:1;
  }
  .metric__label{
    margin-top:9px;
    font-size:13px;
    line-height:1.4;
    color:var(--text-dim);
  }

  /* ---------------- SECCIONES GENERICAS ---------------- */
  .section{
    max-width:var(--maxw);
    margin:0 auto;
    padding:88px 24px;
    /* evita que el header fijo tape el titulo al saltar por anchor */
    scroll-margin-top:72px;
  }
  .section--line{ border-top:1px solid var(--hairline); }

  .section--center{ text-align:center; }

  h2{
    font-size:clamp(26px, 4vw, 40px);
    line-height:1.14;
    letter-spacing:-.028em;
    font-weight:800;
    margin:0 auto 26px;
    max-width:24ch;
    text-wrap:balance;
  }

  /* etiqueta corta sobre cada h2: dice de que va la seccion antes del titulo */
  .eyebrow{
    margin:0 0 14px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .subhead{
    font-size:clamp(20px, 2.6vw, 26px);
    line-height:1.2;
    letter-spacing:-.02em;
    font-weight:800;
    margin:64px auto 22px;
    scroll-margin-top:72px;
  }

  /* el texto del checklist es largo: en movil tiene que poder partirse */
  .rescue .btn{ white-space:normal; max-width:100%; text-align:center; }

  .lead{
    font-size:clamp(17px, 2.1vw, 20px);
    line-height:1.55;
    margin:0 auto 34px;
    max-width:62ch;
    color:var(--text-dim);
    text-wrap:pretty;
  }
  .lead strong{ color:var(--text); font-weight:700; }

  /* ---------------- PROBLEMA: tarjetas de dolor ---------------- */
  .pains{
    list-style:none;
    margin:0 0 60px;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
  }
  .pains li{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:38px 24px;
    border-radius:18px;
    font-size:16px;
    line-height:1.55;
    color:#C9B6BA;
    text-wrap:pretty;
    /* volumen: degradado de arriba a abajo + borde superior iluminado */
    background:linear-gradient(180deg, #1C1114 0%, #130C0F 55%, #0E080A 100%);
    border:1px solid rgba(243,231,233,.085);
    box-shadow:
      inset 0 1px 0 rgba(243,231,233,.10),      /* filo superior */
      inset 0 -1px 0 rgba(0,0,0,.55),           /* filo inferior */
      0 22px 44px -22px rgba(0,0,0,.95),        /* sombra proyectada */
      0 3px 10px -4px rgba(0,0,0,.6);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  /* halo rojo tenue en la parte alta de la tarjeta */
  .pains li::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(120% 60% at 50% -10%, rgba(217,2,26,.16), transparent 70%);
    pointer-events:none;
  }
  .pains li:hover{
    transform:translateY(-4px);
    border-color:rgba(217,2,26,.34);
    box-shadow:
      inset 0 1px 0 rgba(243,231,233,.14),
      inset 0 -1px 0 rgba(0,0,0,.55),
      0 30px 56px -24px rgba(0,0,0,1),
      0 0 34px -12px rgba(217,2,26,.45);
  }

  .pain__icon{
    position:relative;
    z-index:1;
    flex:none;
    width:62px;
    height:62px;
    border-radius:20px;
    display:grid;
    place-items:center;
    font-size:28px;
    line-height:1;
    color:var(--text);
    background:linear-gradient(160deg, rgba(217,2,26,.32) 0%, rgba(82,16,26,.42) 100%);
    border:1px solid rgba(217,2,26,.42);
    box-shadow:
      inset 0 1px 0 rgba(255,235,238,.22),
      inset 0 -2px 6px rgba(0,0,0,.45),
      0 10px 22px -10px rgba(217,2,26,.65);
  }
  .pains li span:not(.pain__icon){ position:relative; z-index:1; }

  .kicker{
    font-size:clamp(21px, 2.7vw, 28px);
    line-height:1.35;
    font-weight:800;
    letter-spacing:-.024em;
    max-width:26ch;
    margin:0 auto 56px;
    text-wrap:balance;
  }
  .kicker span{ color:var(--accent); }

  /* ---------------- COMPARATIVA ---------------- */
  .compare{
    border:1px solid var(--hairline);
    border-radius:14px;
    overflow:hidden;
  }
  .compare__row{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .compare__row + .compare__row{ border-top:1px solid var(--hairline); }

  .compare__cell{
    padding:20px 22px;
    font-size:16px;
    line-height:1.45;
    display:flex;
    align-items:flex-start;
    gap:11px;
    text-align:left;   /* la seccion es centrada, las celdas no */
  }
  .compare__cell:first-child{
    border-right:1px solid var(--hairline);
    color:var(--text-dim);
  }
  .compare__cell--good{
    background:linear-gradient(90deg, rgba(217,2,26,.07), rgba(217,2,26,.02));
  }

  .compare__row--head .compare__cell{
    padding-top:16px;
    padding-bottom:16px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
    background:rgba(243,231,233,.04);
  }
  .compare__row--head .compare__cell--good{
    color:var(--accent);
    background:rgba(217,2,26,.12);
  }

  .compare__mark{ flex:none; margin-top:2px; font-size:16px; line-height:0; }
  .compare__cell--good .compare__mark{ color:var(--accent); }

  /* ---------------- CASOS DE EXITO ---------------- */
  .cases{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin-top:8px;
    /* se sale del ancho del contenedor para que las capturas se vean mas
       grandes; se centra con translate porque el margen es asimetrico */
    width:min(1180px, calc(100vw - 40px));
    margin-left:50%;
    transform:translateX(-50%);
  }
  .case{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:18px;
    border-radius:18px;
    background:linear-gradient(180deg, #1C1114 0%, #130C0F 55%, #0E080A 100%);
    border:1px solid rgba(243,231,233,.085);
    box-shadow:
      inset 0 1px 0 rgba(243,231,233,.10),
      inset 0 -1px 0 rgba(0,0,0,.55),
      0 22px 44px -22px rgba(0,0,0,.95),
      0 3px 10px -4px rgba(0,0,0,.6);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .case::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(120% 60% at 50% -10%, rgba(217,2,26,.18), transparent 70%);
    pointer-events:none;
  }
  .case:hover{
    transform:translateY(-4px);
    border-color:rgba(217,2,26,.34);
    box-shadow:
      inset 0 1px 0 rgba(243,231,233,.14),
      inset 0 -1px 0 rgba(0,0,0,.55),
      0 30px 56px -24px rgba(0,0,0,1),
      0 0 34px -12px rgba(217,2,26,.45);
  }
  .case > *{ position:relative; z-index:1; }

  .case__num{
    font-size:clamp(34px, 4.4vw, 46px);
    font-weight:800;
    letter-spacing:-.035em;
    line-height:1;
    background:linear-gradient(160deg, #FF3B4E 0%, var(--accent) 45%, var(--accent-deep) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .case__unit{
    margin-top:9px;
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-dim);
  }
  .case__desc{
    margin:20px 0 0;
    font-size:15px;
    line-height:1.5;
    color:#C9B6BA;
    text-wrap:pretty;
  }
  /* captura real del panel, sobre placa blanca porque el pantallazo
     viene con fondo claro */
  .case__proof{
    width:100%;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
    padding:8px;
    box-shadow:0 14px 28px -16px rgba(0,0,0,.95);
  }
  .case__proof img{
    display:block;
    width:100%;
    height:auto;
  }

  .case__meta{
    margin-top:20px;
    padding-top:16px;
    width:100%;
    border-top:1px solid var(--hairline);
    font-size:12.5px;
    line-height:1.5;
    color:var(--text-dim);
  }
  .case__brand{
    display:block;
    font-size:14px;
    font-weight:700;
    color:var(--text);
    letter-spacing:-.01em;
  }

  /* ---------------- SLIDER (anuncios / videos) ---------------- */
  .slider{
    position:relative;
    margin-top:8px;
  }
  /* borde a borde: rompe el ancho del contenedor y ocupa toda la pantalla */
  .slider--full{
    margin-left:calc(-50vw + 50%);
    margin-right:calc(-50vw + 50%);
  }
  .slider--full .slider__nav--prev{ left:14px; }
  .slider--full .slider__nav--next{ right:14px; }

  /* Testimonios: solo 5 videos. Van dentro de la columna centrada, no a
     borde completo, porque no llenan la pantalla y quedaba un hueco a la
     derecha. Las 5 tarjetas caben justas, asi que no hace falta scroll. */
  .slider--testimonios .slide{ width:164px; }
  .slider--testimonios .slider__track{
    justify-content:center;
    gap:10px;
  }

  .slider__track{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:4px 0 6px;
    /* oculta la barra de scroll sin perder el gesto de arrastre */
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .slider__track::-webkit-scrollbar{ display:none; }

  .slide{
    flex:0 0 auto;
    width:230px;
    scroll-snap-align:start;
    border-radius:14px;
    overflow:hidden;
    background:#150A0D;
    border:1px solid rgba(243,231,233,.09);
    box-shadow:
      0 18px 36px -20px rgba(0,0,0,.95),
      inset 0 1px 0 rgba(243,231,233,.08);
    transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  }
  .slide:hover{
    transform:translateY(-4px);
    border-color:rgba(217,2,26,.4);
    box-shadow:
      0 26px 46px -22px rgba(0,0,0,1),
      0 0 30px -12px rgba(217,2,26,.5);
  }
  .slide img{
    display:block;
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
  }

  /* video vertical 9:16 */
  .slide--video{ width:230px; }
  .slide__frame{
    position:relative;
    aspect-ratio:9/16;
    background:#150A0D;
    cursor:pointer;
  }
  .slide__frame img,
  .slide__frame video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  /* boton de play sobre el poster */
  .slide__play{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    z-index:2;
    background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
    transition:opacity .2s ease;
  }
  .slide__play::before{
    content:"";
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--accent), var(--accent-deep));
    box-shadow:0 8px 22px -6px rgba(217,2,26,.75);
  }
  .slide__play::after{
    content:"";
    position:absolute;
    width:0; height:0;
    border-left:15px solid var(--accent-ink);
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    margin-left:4px;
  }
  .slide--playing .slide__play{ opacity:0; pointer-events:none; }

  /* testimonios: video vertical dentro del carrusel */
  .testimonial-video{
    display:block;
    width:100%;
    aspect-ratio:9/16;
    object-fit:cover;
    background:#150A0D;
  }

  /* flechas */
  .slider__nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:44px;
    height:44px;
    border-radius:50%;
    display:grid;
    place-items:center;
    cursor:pointer;
    border:1px solid rgba(243,231,233,.16);
    background:rgba(20,10,13,.86);
    backdrop-filter:blur(8px);
    color:var(--text);
    font-size:18px;
    line-height:1;
    transition:background .18s ease, border-color .18s ease, opacity .18s ease;
  }
  .slider__nav:hover{
    background:linear-gradient(135deg, var(--accent), var(--accent-deep));
    border-color:transparent;
  }
  .slider__nav--prev{ left:-14px; }
  .slider__nav--next{ right:-14px; }
  .slider__nav[disabled]{ opacity:.28; cursor:default; }
  .slider__nav[disabled]:hover{
    background:rgba(20,10,13,.86);
    border-color:rgba(243,231,233,.16);
  }

  .disclaimer{
    margin:34px auto 0;
    max-width:60ch;
    font-size:13px;
    line-height:1.55;
    color:#7C6A6E;
  }

  /* ---------------- LOGOS ---------------- */
  .logos{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:14px;
    margin-top:8px;
  }
  .logo-card{
    transition:transform .2s ease;
  }
  .logo-card:hover{ transform:translateY(-4px); }
  /* placa blanca: los logos son marcas oscuras y sobre negro no se verian */
  .logo-card__plate{
    height:98px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px 20px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 16px 32px -18px rgba(0,0,0,.9);
    transition:box-shadow .2s ease;
  }
  .logo-card:hover .logo-card__plate{
    box-shadow:0 20px 38px -18px rgba(0,0,0,1), 0 0 26px -10px rgba(217,2,26,.55);
  }
  .logo-card__plate img{
    /* el limite de alto va en px: en porcentaje no se resuelve dentro del
       grid y los logos cuadrados (Ariag) se desbordaban de la placa */
    max-width:100%;
    max-height:62px;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
  }

  /* ---------------- FILTRO DE CALIFICACION ---------------- */
  .filter-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:8px;
    text-align:left;
  }
  .filter-card{
    padding:30px 26px;
    border-radius:18px;
    background:linear-gradient(180deg, #1C1114 0%, #130C0F 55%, #0E080A 100%);
    border:1px solid rgba(243,231,233,.085);
    box-shadow:
      inset 0 1px 0 rgba(243,231,233,.10),
      0 22px 44px -22px rgba(0,0,0,.95);
  }
  .filter-card__title{
    font-size:17px;
    font-weight:800;
    letter-spacing:-.015em;
    margin:0 0 18px;
  }
  .filter-card--yes .filter-card__title{ color:var(--accent); }
  .filter-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
  .filter-card li{
    display:flex;
    gap:11px;
    align-items:flex-start;
    font-size:15px;
    line-height:1.5;
    color:#C9B6BA;
  }
  .filter-card li::before{
    content:"";
    flex:none;
    width:16px;
    height:16px;
    margin-top:3px;
    background:currentColor;
    -webkit-mask:center / contain no-repeat;
    mask:center / contain no-repeat;
    --m-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --m-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  }
  .filter-card--yes li::before{ color:var(--accent); -webkit-mask-image:var(--m-check); mask-image:var(--m-check); }
  .filter-card--no  li::before{ color:#6B5257; -webkit-mask-image:var(--m-x); mask-image:var(--m-x); }

  .rescue{
    margin-top:34px;
    padding:26px 24px;
    border-radius:16px;
    border:1px dashed rgba(217,2,26,.4);
    background:rgba(217,2,26,.05);
  }
  .rescue p{ margin:0 0 16px; font-size:16px; line-height:1.5; color:#C9B6BA; }
  .rescue strong{ color:var(--text); }

  .btn--ghost{
    background:transparent;
    color:var(--text);
    border:1px solid rgba(243,231,233,.24);
  }
  .btn--ghost:hover{
    background:rgba(217,2,26,.12);
    border-color:rgba(217,2,26,.5);
    box-shadow:none;
  }

  /* ---------------- PILARES ---------------- */
  .pillars{
    display:grid;
    gap:14px;
    margin-top:8px;
    text-align:left;
  }
  .pillar{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:22px;
    align-items:start;
    padding:28px 30px;
    border-radius:18px;
    background:linear-gradient(120deg, #1C1114 0%, #120B0E 60%, #0E080A 100%);
    border:1px solid rgba(243,231,233,.085);
    box-shadow:
      inset 0 1px 0 rgba(243,231,233,.10),
      0 22px 44px -22px rgba(0,0,0,.95);
    transition:border-color .2s ease, transform .2s ease;
  }
  .pillar:hover{ border-color:rgba(217,2,26,.32); transform:translateY(-3px); }
  .pillar__num{
    font-size:34px;
    font-weight:800;
    letter-spacing:-.04em;
    line-height:1;
    background:linear-gradient(160deg, #FF3B4E, var(--accent) 50%, var(--accent-deep));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    min-width:52px;
  }
  .pillar__title{
    margin:0 0 8px;
    font-size:19px;
    font-weight:800;
    letter-spacing:-.018em;
  }
  .pillar__text{
    margin:0;
    font-size:15.5px;
    line-height:1.55;
    color:#C9B6BA;
    text-wrap:pretty;
  }

  /* ---------------- TESTIMONIOS ---------------- */
  .testimonials{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    /* los videos son verticales: con tarjetas anchas quedarian larguisimas */
    max-width:640px;
    margin:8px auto 0;
    text-align:left;
    align-items:start;
  }
  .testimonial{
    display:flex;
    flex-direction:column;
    border-radius:18px;
    overflow:hidden;
    background:linear-gradient(180deg, #1C1114 0%, #130C0F 55%, #0E080A 100%);
    border:1px solid rgba(243,231,233,.085);
    box-shadow:0 22px 44px -22px rgba(0,0,0,.95);
  }
  /* El reproductor de VTurb define su propia altura segun el video,
     por eso aqui no se fija aspect-ratio. */
  .testimonial__video{
    position:relative;
    background:#150A0D;
    min-height:60px;
  }
  .testimonial__video vturb-smartplayer{
    display:block;
    width:100%;
  }
  .testimonial__body{ padding:22px 22px 24px; }
  .testimonial__quote{
    margin:0 0 18px;
    font-size:15.5px;
    line-height:1.55;
    color:#C9B6BA;
    text-wrap:pretty;
  }
  .testimonial__who{
    font-size:14px;
    font-weight:700;
    letter-spacing:-.01em;
  }
  .testimonial__role{
    margin-top:3px;
    font-size:12.5px;
    color:var(--text-dim);
  }

  /* ---------------- GARANTIA ---------------- */
  .guarantee{
    max-width:660px;
    margin:8px auto 0;
    padding:44px 38px;
    border-radius:22px;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(217,2,26,.20), transparent 65%),
      linear-gradient(180deg, #1C1114 0%, #120B0E 60%, #0E080A 100%);
    border:1px solid rgba(217,2,26,.30);
    box-shadow:
      inset 0 1px 0 rgba(243,231,233,.12),
      0 30px 60px -28px rgba(0,0,0,1);
  }
  .guarantee__seal{
    width:74px;
    height:74px;
    margin:0 auto 22px;
    border-radius:22px;
    display:grid;
    place-items:center;
    font-size:36px;
    color:var(--text);
    background:linear-gradient(160deg, rgba(217,2,26,.32), rgba(82,16,26,.42));
    border:1px solid rgba(217,2,26,.42);
    box-shadow:
      inset 0 1px 0 rgba(255,235,238,.22),
      0 10px 22px -10px rgba(217,2,26,.65);
  }
  .guarantee__title{
    margin:0 0 14px;
    font-size:clamp(21px, 2.6vw, 27px);
    font-weight:800;
    letter-spacing:-.024em;
  }
  .guarantee__text{
    margin:0;
    font-size:16px;
    line-height:1.6;
    color:#C9B6BA;
    text-wrap:pretty;
  }

  /* ---------------- FAQ ---------------- */
  .faq{
    max-width:760px;
    margin:8px auto 0;
    text-align:left;
  }
  .faq details{
    border-bottom:1px solid var(--hairline);
  }
  .faq details[open]{ background:linear-gradient(180deg, rgba(217,2,26,.05), transparent); }
  .faq summary{
    list-style:none;
    cursor:pointer;
    padding:22px 44px 22px 4px;
    position:relative;
    font-size:17px;
    font-weight:700;
    letter-spacing:-.015em;
    line-height:1.4;
  }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{
    content:"+";
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    font-size:23px;
    font-weight:400;
    color:var(--accent);
    transition:transform .2s ease;
  }
  .faq details[open] summary::after{ content:"−"; }
  .faq__answer{
    margin:0;
    padding:0 44px 24px 4px;
    font-size:15.5px;
    line-height:1.6;
    color:#C9B6BA;
    text-wrap:pretty;
  }

  /* ---------------- CIERRE ---------------- */
  .closing{
    background:
      radial-gradient(90% 70% at 50% 0%, rgba(217,2,26,.16), transparent 70%);
  }

  /* ---------------- FOOTER ---------------- */
  .footer{
    border-top:1px solid var(--hairline);
    padding:52px 24px 40px;
    text-align:center;
  }
  .footer__logo{
    font-size:19px;
    font-weight:800;
    letter-spacing:-.02em;
    margin-bottom:20px;
  }
  .footer__logo span{ color:var(--accent); }
  .footer__contact{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 26px;
    font-size:14.5px;
    color:#C9B6BA;
    margin-bottom:24px;
  }
  .footer__links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 20px;
    font-size:13.5px;
    margin-bottom:22px;
  }
  .footer__links a{
    color:var(--text-dim);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .footer__links a:hover{ color:var(--text); border-bottom-color:var(--hairline); }
  .footer__copy{ font-size:12.5px; color:#6B5257; }

  /* ---------------- BARRA DE ANUNCIO (urgencia) ---------------- */
  .topbar{
    background:linear-gradient(90deg, var(--accent-deep), var(--accent-mid), var(--accent-deep));
    color:var(--accent-ink);
    text-align:center;
    padding:9px 18px;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:-.005em;
    line-height:1.4;
  }
  .topbar b{ font-weight:800; }

  /* ---------------- RAZON DE LA ESCASEZ ---------------- */
  /* La escasez sin motivo se lee como truco. Con motivo, se lee como criterio. */
  .scarcity-why{
    max-width:46ch;
    margin:2px auto 0;
    font-size:13px;
    line-height:1.5;
    color:var(--text-dim);
  }

  /* ---------------- COSTO DE ESPERAR (anclaje + aversion a la perdida) --- */
  .cost{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin-top:8px;
  }
  .cost__item{
    padding:30px 22px;
    border-radius:18px;
    background:linear-gradient(180deg, #1C1114 0%, #130C0F 55%, #0E080A 100%);
    border:1px solid rgba(243,231,233,.085);
    box-shadow:inset 0 1px 0 rgba(243,231,233,.10), 0 22px 44px -22px rgba(0,0,0,.95);
  }
  .cost__num{
    font-size:clamp(28px, 3.6vw, 38px);
    font-weight:800;
    letter-spacing:-.035em;
    line-height:1;
    color:var(--accent);
  }
  .cost__label{
    margin-top:12px;
    font-size:14.5px;
    line-height:1.5;
    color:#C9B6BA;
    text-wrap:pretty;
  }

  /* ---------------- 90 DIAS (proyeccion a futuro) ---------------- */
  .timeline{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0;
    margin-top:8px;
    text-align:left;
    counter-reset:fase;
  }
  .phase{
    position:relative;
    padding:34px 24px 28px;
    border-top:2px solid rgba(217,2,26,.30);
  }
  .phase::before{
    content:"";
    position:absolute;
    top:-7px;
    left:24px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px var(--bg), 0 0 16px rgba(217,2,26,.8);
  }
  .phase__when{
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700;
  }
  .phase__title{
    margin:10px 0 8px;
    font-size:18px;
    font-weight:800;
    letter-spacing:-.018em;
  }
  .phase__text{
    margin:0;
    font-size:15px;
    line-height:1.55;
    color:#C9B6BA;
    text-wrap:pretty;
  }

  /* ---------------- AUTORIDAD ---------------- */
  .authority{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    margin-bottom:34px;
  }
  .authority__chip{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:11px 18px;
    border-radius:999px;
    border:1px solid rgba(243,231,233,.14);
    background:rgba(243,231,233,.035);
    font-size:14px;
    color:#C9B6BA;
  }
  .authority__chip b{ color:var(--text); font-weight:800; }

  /* ---------------- OBJECIONES EN EL CIERRE ---------------- */
  .objections{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    max-width:820px;
    margin:34px auto 0;
    text-align:left;
  }
  .objection{
    padding:18px 20px;
    border-radius:14px;
    border:1px solid var(--hairline);
    background:rgba(243,231,233,.03);
  }
  .objection__q{
    margin:0 0 7px;
    font-size:14px;
    font-weight:800;
    color:var(--text);
  }
  .objection__a{
    margin:0;
    font-size:13.5px;
    line-height:1.5;
    color:var(--text-dim);
    text-wrap:pretty;
  }

  /* ---------------- WHATSAPP ---------------- */
  .wa{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:200;
    width:56px;
    height:56px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#25D366;
    box-shadow:0 10px 28px -8px rgba(0,0,0,.9);
    text-decoration:none;
    font-size:28px;
    transition:transform .18s ease;
  }
  .wa:hover{ transform:scale(1.08); }

  /* ---------------- CALCULADORA DE FUGAS ---------------- */
  .calc{
    margin:56px auto 0;
    padding:40px 34px 30px;
    border-radius:24px;
    background:linear-gradient(180deg, #1A0F12 0%, #0F080A 100%);
    border:1px solid rgba(217,2,26,.28);
    box-shadow:0 0 0 1px rgba(243,231,233,.04) inset, 0 30px 80px -30px rgba(217,2,26,.35);
    text-align:left;
  }
  .calc__eyebrow{
    margin:0 0 10px; text-align:center;
    font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--accent);
  }
  .calc__title{
    margin:0 0 8px; text-align:center;
    font-size:clamp(22px, 3vw, 30px); font-weight:800; letter-spacing:-.025em; line-height:1.15;
  }
  .calc__intro{ margin:0 0 30px; text-align:center; color:var(--text-dim); font-size:15.5px; }
  .calc__grid{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; }

  .calc__field{ display:block; margin-bottom:26px; }
  .calc__field:last-child{ margin-bottom:0; }
  .calc__label{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    font-size:14.5px; color:var(--text-dim); margin-bottom:12px;
  }
  .calc__label output{ color:var(--text); font-weight:800; font-size:18px; letter-spacing:-.02em; white-space:nowrap; }

  .calc input[type=range]{
    -webkit-appearance:none; appearance:none;
    width:100%; height:8px; margin:0; border-radius:99px; cursor:pointer;
    background:linear-gradient(90deg, var(--accent) 0%, var(--accent-mid) var(--p,50%), rgba(243,231,233,.12) var(--p,50%));
  }
  .calc input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:24px; height:24px; border-radius:50%;
    background:var(--text); border:4px solid var(--accent);
    box-shadow:0 0 0 6px rgba(217,2,26,.18); transition:transform .15s;
  }
  .calc input[type=range]::-moz-range-thumb{
    width:16px; height:16px; border-radius:50%;
    background:var(--text); border:4px solid var(--accent);
  }
  .calc input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.15); }
  .calc input[type=range]:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }

  .calc__result{
    padding:28px 24px; border-radius:18px; text-align:center;
    background:rgba(217,2,26,.07); border:1px solid rgba(217,2,26,.22);
  }
  .calc__result-label{ margin:0; font-size:14px; color:var(--text-dim); }
  .calc__total{
    margin:6px 0 18px; line-height:1;
    font-size:clamp(38px, 5.4vw, 54px); font-weight:800; letter-spacing:-.04em; color:var(--accent);
    font-variant-numeric:tabular-nums;
  }
  .calc__total small{ font-size:16px; font-weight:600; letter-spacing:0; color:var(--text-dim); }
  .calc__leaks{ list-style:none; margin:0 0 16px; padding:0; text-align:left; }
  .calc__leaks li{
    display:flex; justify-content:space-between; gap:12px;
    padding:9px 0; font-size:14px; color:var(--text-dim);
    border-top:1px solid var(--hairline);
  }
  .calc__leaks span{ display:flex; gap:8px; }
  .calc__leaks b{ color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; }
  .calc__year{ margin:0 0 20px; font-size:14px; line-height:1.5; color:var(--text-dim); }
  .calc__year b{ color:var(--text); }
  .calc__cta{ width:100%; white-space:normal; text-align:center; }
  .calc__result .cta-micro{ display:block; margin-top:10px; }
  .calc__note{ margin:0 0 14px; font-size:14px; line-height:1.5; color:var(--text-dim); }
  .calc__assumptions{ margin:22px 0 0; font-size:12px; line-height:1.55; color:var(--text-dim); opacity:.75; text-align:center; }

  /* ---------------- CHECKLIST (ventana) ---------------- */
  .checklist{
    width:min(640px, calc(100vw - 24px));
    max-height:calc(100dvh - 24px);
    padding:0; margin:auto;
    border-radius:24px;
    border:1px solid rgba(217,2,26,.30);
    background:linear-gradient(180deg, #1A0F12 0%, #0C0608 100%);
    color:var(--text);
    box-shadow:0 40px 120px -20px rgba(0,0,0,.9), 0 0 80px -30px rgba(217,2,26,.45);
    overflow:auto;
    overscroll-behavior:contain;
  }
  .checklist::backdrop{ background:rgba(5,2,3,.78); backdrop-filter:blur(6px); }
  .checklist[open]{ animation:checklist-in .28s ease-out; }
  @keyframes checklist-in{ from{ opacity:0; transform:translateY(16px) scale(.98); } }
  .checklist__inner{ position:relative; padding:40px 34px 32px; }
  .checklist__close{
    position:absolute; top:14px; right:14px;
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--hairline); background:rgba(243,231,233,.05);
    color:var(--text); font-size:22px; line-height:1; cursor:pointer;
  }
  .checklist__close:hover{ background:rgba(243,231,233,.12); }
  .checklist__title{ font-size:clamp(22px, 3.4vw, 28px); max-width:22ch; margin:0 auto 10px; text-align:center; }
  .checklist__intro{ margin:0 0 24px; text-align:center; color:var(--text-dim); font-size:15px; }

  .checklist__progress{ height:6px; border-radius:99px; background:rgba(243,231,233,.10); overflow:hidden; }
  .checklist__progress span{
    display:block; height:100%; width:0;
    background:linear-gradient(90deg, var(--accent), var(--accent-mid));
    transition:width .35s ease, background .35s;
  }
  .checklist--lista .checklist__progress span{ background:linear-gradient(90deg, #2FBF71, #1E9E5A); }
  .checklist__count{ margin:10px 0 18px; font-size:13.5px; color:var(--text-dim); text-align:right; }
  .checklist__count b{ color:var(--text); }

  .checklist__items{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
  .checklist__items label{
    display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
    padding:16px 18px; border-radius:14px; cursor:pointer;
    background:rgba(243,231,233,.035); border:1px solid var(--hairline);
    font-size:14.5px; line-height:1.5; color:var(--text-dim);
    transition:background .2s, border-color .2s;
  }
  .checklist__items label:hover{ background:rgba(243,231,233,.06); }
  .checklist__items b{ display:block; color:var(--text); font-size:15.5px; margin-bottom:2px; }
  .checklist__items input{ position:absolute; opacity:0; pointer-events:none; }
  .checklist__box{
    width:24px; height:24px; margin-top:1px; border-radius:7px;
    border:2px solid rgba(243,231,233,.35);
    display:grid; place-items:center;
    transition:background .2s, border-color .2s, transform .2s;
  }
  .checklist__box::after{
    content:""; width:6px; height:11px; margin-top:-2px;
    border:solid var(--accent-ink); border-width:0 2.5px 2.5px 0;
    transform:rotate(45deg) scale(0); transition:transform .2s;
  }
  .checklist__items input:checked + .checklist__box{ background:var(--accent); border-color:var(--accent); transform:scale(1.06); }
  .checklist__items input:checked + .checklist__box::after{ transform:rotate(45deg) scale(1); }
  .checklist__items input:checked ~ span:last-child{ color:var(--text); }
  .checklist__items label:has(input:checked){ border-color:rgba(217,2,26,.45); background:rgba(217,2,26,.08); }
  .checklist__items input:focus-visible + .checklist__box{ outline:2px solid var(--accent); outline-offset:3px; }

  .checklist__result{
    margin-top:22px; padding:24px 22px; border-radius:16px; text-align:center;
    background:rgba(243,231,233,.04); border:1px solid var(--hairline);
    transition:background .3s, border-color .3s;
  }
  .checklist--lista .checklist__result{ background:rgba(47,191,113,.08); border-color:rgba(47,191,113,.35); }
  .checklist__verdict{ margin:0 0 8px; font-size:19px; font-weight:800; letter-spacing:-.02em; }
  .checklist__advice{ margin:0 0 18px; font-size:14.5px; line-height:1.55; color:var(--text-dim); }
  .checklist__result .cta-micro{ display:block; margin-top:10px; }

  @media (max-width:600px){
    .checklist{ border-radius:20px; }
    .checklist__inner{ padding:34px 16px 22px; }
    .checklist__items label{ padding:14px; }
  }

  @media (max-width:760px){
    .calc{ padding:30px 18px 24px; border-radius:20px; }
    .calc__grid{ grid-template-columns:1fr; gap:26px; }
  }

  @media (max-width:600px){
    .header{ padding:12px 16px; }
    .logo{ font-size:16px; }
    .hero{ padding:40px 18px 56px; }
    .social-proof{ flex-direction:column; gap:10px; }
    .vsl__play{ width:58px; height:58px; }
    .metrics{ grid-template-columns:1fr; gap:26px; }

    .section{ padding:60px 18px; }
    .kicker{ margin-bottom:40px; }
    /* identico a escritorio: las 3 en fila, solo compactadas */
    .pains{ grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:44px; }
    .pains li{ padding:20px 10px; gap:12px; border-radius:14px; font-size:12.5px; line-height:1.4; }
    .pain__icon{ width:42px; height:42px; font-size:20px; border-radius:13px; }

    /* la comparativa mantiene las 2 columnas, solo se compacta */
    .compare__cell{ padding:14px 12px; font-size:13.5px; gap:7px; }
    .compare__mark{ font-size:11px; margin-top:3px; }
    .compare__row--head .compare__cell{
      padding:12px;
      font-size:10.5px;
      letter-spacing:.09em;
    }

    /* casos: se apilan, aqui una fila de 3 seria ilegible */
    .cases{ grid-template-columns:1fr; gap:14px; }
    .case{ padding:28px 20px 22px; }

    /* slider: se arrastra con el dedo, las flechas sobran */
    .slide, .slide--video{ width:172px; }
    .slider__track{ gap:10px; }
    .slider__nav{ display:none; }

    .filter-grid{ grid-template-columns:1fr; }
    .pillar{ grid-template-columns:1fr; gap:12px; padding:24px 22px; }
    .pillar__num{ font-size:28px; }
    .testimonials{ grid-template-columns:1fr; }
    .guarantee{ padding:34px 24px; }
    .faq summary{ font-size:16px; padding-right:38px; }
    .faq__answer{ padding-right:0; }

    .cost{ grid-template-columns:1fr; }
    .timeline{ grid-template-columns:1fr; }
    .phase{ padding:26px 0 22px 22px; border-top:0; border-left:2px solid rgba(217,2,26,.30); }
    .phase::before{ top:18px; left:-7px; }
    .objections{ grid-template-columns:1fr; }
    .authority{ gap:10px; }
    .authority__chip{ font-size:13px; padding:9px 14px; }
  }