/* ==========================================================================
   EL SISTEMA DE DISENO DE LA PAGINA DE VENTAS

   Salio tal cual del HTML que entrego el propietario el 26-08. Vive aqui, y
   no dentro de la pagina, porque el quiz de /evaluacion tiene que verse
   igual: son dos pasos del mismo embudo y duplicar los tokens es como dos
   paginas que empiezan iguales acaban distintas.

   NO es el sistema de diseno de la aplicacion. Ese vive en
   packages/design-system y no se toca desde aqui.
   ========================================================================== */

    /* ======================================================
       TOKENS / DESIGN SYSTEM
       ====================================================== */
    :root {
      --bg-primary: #0B0F13;
      --bg-elevated: #111820;
      --bg-card: #151B22;
      --surface-0: #0B0F13;
      --surface-1: #111820;
      --surface-2: #151B22;
      --surface-glass: rgba(17, 24, 32, 0.85);
      --border-subtle: rgba(255, 255, 255, 0.04);
      --border-active: rgba(69, 174, 194, 0.3);
      --text-primary: #F5F7FA;
      --text-secondary: #AAB4BE;
      --text-muted: #6b7a86;
      --accent: #45AEC2;
      --accent-soft: #7FD4E4;
      --success: #4CAF50;
      --warning: #E68A2E;
      --danger: #C44545;
      --radius-sm: 12px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --radius-xl: 32px;
      --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.2);
      --shadow-medium: 0 20px 60px rgba(0, 0, 0, 0.4);
      --shadow-hero: 0 30px 80px rgba(0, 0, 0, 0.5);
      --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      --font-mono: 'IBM Plex Mono', monospace;
      --header-height: 72px;
      --max-width: 1200px;
      --transition: 0.25s ease;
    }

    /* ======================================================
       RESET & BASE
       ====================================================== */
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      background: var(--bg-primary);
      color: var(--text-primary);
      font-family: var(--font-sans);
      line-height: 1.6;
      overflow-x: clip;
      /* defensa, pero no oculta errores */;
    }

    a {
      color: var(--accent);
      text-decoration: none;
    }
    img,
    svg {
      display: block;
      max-width: 100%;
      height: auto;
    }
    .container {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ======================================================
       BUTTONS
       ====================================================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 32px;
      border: none;
      border-radius: 60px;
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.2;
      cursor: pointer;
      transition: background var(--transition), transform 0.15s, box-shadow var(--transition);
      text-align: center;
      min-height: 52px;
      min-width: 44px;
      font-family: var(--font-sans);
    }
    .btn:active {
      transform: scale(0.97);
    }
    .btn-primary {
      background: var(--accent);
      color: #0B0F13;
    }
    .btn-primary:hover {
      background: #5fc2d6;
      box-shadow: 0 8px 30px rgba(69, 174, 194, 0.3);
    }
    .btn-secondary {
      background: transparent;
      color: var(--text-primary);
      border: 1.5px solid rgba(255, 255, 255, 0.2);
    }
    .btn-secondary:hover {
      border-color: var(--accent-soft);
      background: rgba(69, 174, 194, 0.08);
    }
    .btn-outline {
      background: transparent;
      color: var(--accent);
      border: 1.5px solid var(--accent);
    }
    .btn-outline:hover {
      background: var(--accent);
      color: #0B0F13;
    }
    .btn-ghost {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-primary);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .btn-ghost:hover {
      background: rgba(255, 255, 255, 0.12);
    }
    .btn-block {
      width: 100%;
      justify-content: center;
    }
    .btn-sm {
      padding: 8px 18px;
      font-size: 0.85rem;
      min-height: 40px;
    }

    /* ======================================================
       TYPOGRAPHY
       ====================================================== */
    .section-eyebrow {
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 600;
      margin-bottom: 12px;
      display: inline-block;
    }

    .section-title {
      font-size: clamp(1.8rem, 5vw, 3.2rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
    }

    .section-sub {
      font-size: 1.125rem;
      color: var(--text-secondary);
      max-width: 640px;
      margin-bottom: 32px;
    }

    .text-accent {
      color: var(--accent);
    }
    .text-gradient {
      background: linear-gradient(135deg, var(--accent), var(--accent-soft));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .desktop-break {
      display: inline;
    }
    @media (max-width: 480px) {
      .desktop-break {
        display: none;
      }
    }

    /* ======================================================
       HEADER
       ====================================================== */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      height: var(--header-height);
      display: flex;
      align-items: center;
      transition: background var(--transition), box-shadow var(--transition);
      background: transparent;
      padding: 0 24px;
    }
    .header.scrolled {
      background: rgba(11, 15, 19, 0.82);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .logo svg {
      width: 32px;
      height: 32px;
    }
    .logo span {
      color: var(--accent);
    }

    .nav-desktop {
      display: none;
      align-items: center;
      gap: 28px;
    }
    .nav-desktop a {
      color: var(--text-secondary);
      font-size: 0.9rem;
      font-weight: 500;
      transition: color var(--transition);
    }
    .nav-desktop a:hover {
      color: var(--text-primary);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .header-actions .btn {
      padding: 10px 22px;
      font-size: 0.9rem;
      min-height: 44px;
    }
    .header-cta {
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.2s ease, transform 0.2s ease;
      pointer-events: none;
    }
    .header-cta.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .menu-toggle {
      background: none;
      border: none;
      color: var(--text-primary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
    }
    .menu-toggle svg {
      width: 28px;
      height: 28px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .nav-mobile {
      display: none;
      flex-direction: column;
      background: var(--bg-primary);
      padding: 24px;
      gap: 20px;
      position: absolute;
      top: var(--header-height);
      left: 0;
      width: 100%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .nav-mobile.open {
      display: flex;
    }
    .nav-mobile a {
      color: var(--text-secondary);
      font-size: 1.1rem;
      font-weight: 500;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }
    .nav-mobile a:hover {
      color: var(--text-primary);
    }

    @media (min-width: 1024px) {
      .nav-desktop {
        display: flex;
      }
      .menu-toggle {
        display: none;
      }
      .nav-mobile {
        display: none !important;
      }
    }

    /* ======================================================
       SECTIONS
       ====================================================== */
    section {
      padding: 80px 0;
      position: relative;
    }
    .section-dark {
      background: var(--bg-primary);
    }
    .section-elevated {
      background: var(--bg-elevated);
    }
    .section-card {
      background: var(--bg-card);
    }
    .section-light {
      background: #F2F6F7;
      color: #0B0F13;
    }
    .section-light .section-sub {
      color: #2d3748;
    }
    .section-light .text-secondary {
      color: #2d3748;
    }

    /* ======================================================
       HERO V3 — escena cinematográfica en capas
       ======================================================
       Antes esto era texto y un teléfono sobre un fondo plano con
       dos degradados. Ahora es una escena: la fotografía detrás, el
       velo que la deja legible, la atmósfera de cian, los anillos
       sísmicos y, delante de todo, el aparato con la aplicación de
       verdad.

       El orden de apilado, de atrás a delante:

         0  .hero-foto       la fotografía
         1  .hero-velo       el degradado que sostiene el texto
         2  .hero-atmosfera  el brillo de cian y el grano
         3  .hero-sismos     los anillos
         4  .hero-grid       texto, botones y teléfono

       Nada de la escena recibe el puntero: todo lleva
       `pointer-events: none` para que no se coma un clic del CTA.
       ====================================================== */
    .hero {
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding-top: var(--header-height);
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: var(--bg-primary);
    }

    .hero-escena {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .hero-foto,
    .hero-foto img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
    }

    /*
      `object-position: center right` en escritorio.

      La composición tiene el hueco oscuro a la izquierda y la escena a
      la derecha. Al recortar por altura hay que sacrificar los lados,
      y lo que no se puede perder es la familia: anclando a la derecha,
      lo que se pierde es negro.
    */
    .hero-foto img {
      object-fit: cover;
      object-position: center right;
      /*
        La entrada: un empuje de 1,04 a 1,00 en quince segundos.

        Va con `forwards` y sin `alternate` a propósito. Un vaivén se
        nota como bucle a los treinta segundos, y en cuanto se nota
        deja de leerse como cine y empieza a leerse como un GIF.
      */
      animation: heroEntradaFondo 15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      will-change: transform;
    }

    @keyframes heroEntradaFondo {
      from {
        transform: scale(1.045) translate3d(8px, 0, 0);
      }
      to {
        transform: scale(1) translate3d(0, 0, 0);
      }
    }

    /*
      EL VELO.

      Horizontal en escritorio: opaco donde va el titular, casi
      transparente sobre las caras. Es lo que permite tener una
      fotografía de verdad detrás de un texto de verdad sin que
      ninguno de los dos estorbe al otro.
    */
    .hero-velo {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        90deg,
        rgba(7, 14, 19, 0.96) 0%,
        rgba(7, 14, 19, 0.84) 32%,
        rgba(7, 14, 19, 0.35) 58%,
        rgba(7, 14, 19, 0.1) 100%
      );
    }

    /* Un segundo velo, vertical y suave, que asienta la escena abajo. */
    .hero-velo::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(7, 14, 19, 0.5) 0%,
        rgba(7, 14, 19, 0) 26%,
        rgba(7, 14, 19, 0) 72%,
        rgba(7, 14, 19, 0.72) 100%
      );
    }

    .hero-atmosfera {
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        radial-gradient(ellipse 60% 50% at 68% 34%, rgba(69, 174, 194, 0.14), transparent 62%),
        radial-gradient(ellipse 50% 40% at 22% 74%, rgba(56, 122, 190, 0.1), transparent 58%);
    }

    /* El grano: rompe las bandas del degradado y da textura de película. */
    .hero-atmosfera::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.045;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* --- Los anillos sísmicos ---------------------------------- */

    .hero-sismos {
      position: absolute;
      inset: 0;
      z-index: 3;
    }

    .hero-anillo {
      position: absolute;
      top: 30%;
      left: 68%;
      width: 220px;
      height: 220px;
      margin: -110px 0 0 -110px;
      border-radius: 50%;
      border: 1px solid rgba(69, 174, 194, 0.2);
      opacity: 0;
      animation: heroAnillo 4.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    }

    .hero-anillo[data-a='2'] {
      animation-delay: 1.5s;
    }

    .hero-anillo[data-a='3'] {
      animation-delay: 3s;
    }

    @keyframes heroAnillo {
      0% {
        transform: scale(0.7);
        opacity: 0;
      }
      12% {
        opacity: 0.3;
      }
      100% {
        transform: scale(1.8);
        opacity: 0;
      }
    }

    .hero::before,
    .hero::after {
      content: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 48px;
      align-items: center;
      position: relative;
      z-index: 4;
    }

    /* --- El contenido, con entrada escalonada ------------------- */

    .hero-content {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /*
      La entrada es de 500 ms y empieza en el primer fotograma.

      No se retrasa la interacción: los botones ya se pueden pulsar
      mientras terminan de aparecer. Una animación de entrada que
      bloquea un CTA medio segundo es medio segundo de gente que ya
      había decidido.
    */
    .hero-eyebrow,
    .hero-title,
    .hero-sub,
    .hero-actions,
    .hero-micro {
      animation: heroSube 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .hero-title {
      animation-delay: 60ms;
    }

    .hero-sub {
      animation-delay: 180ms;
    }

    .hero-actions {
      animation-delay: 320ms;
    }

    .hero-micro {
      animation-delay: 420ms;
    }

    @keyframes heroSube {
      from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .hero-eyebrow {
      font-size: 0.8rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 600;
    }

    .hero-title {
      font-size: clamp(1.85rem, 4.2vw, 3.9rem);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: -0.03em;
      text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
    }

    .hero-title .highlight {
      background: linear-gradient(135deg, var(--accent), var(--accent-soft));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-sub {
      font-size: 1.125rem;
      color: var(--text-secondary);
      max-width: 600px;
      text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 8px;
    }

    .hero-micro {
      font-size: 0.85rem;
      color: var(--text-secondary);
      opacity: 0.7;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* Hero Visual — contenedor principal */
    .hero-visual {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 20px 0;
      min-height: 400px;
    }

    .hero-device {
      width: 100%;
      /*
        El tope tambien depende del ALTO de la pantalla.

        Con 340 px fijos, un portatil de 1280x720 se comia 715 px solo de
        telefono y el hero se iba a 1,26 pantallas. Atandolo tambien a
        40svh, en una pantalla baja el aparato se encoge y el hero cabe; en
        una alta no cambia nada porque gana el tope de 340.
      */
      max-width: min(340px, 40svh);
      aspect-ratio: 9 / 19;
      background: #1a232c;
      border-radius: 40px;
      border: 2px solid rgba(255, 255, 255, 0.06);
      padding: 12px;
      position: relative;
      box-shadow: var(--shadow-hero);
      z-index: 2;
      overflow: hidden;
    }
    .hero-device img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 30px;
      background: #0e141a;
    }
    .hero-device .placeholder-label {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.6);
      color: var(--text-secondary);
      font-size: 0.7rem;
      padding: 4px 14px;
      border-radius: 40px;
      border: 1px solid var(--border-subtle);
      pointer-events: none;
      z-index: 3;
    }

    /* Floating cards — posiciones definidas por CSS */
    .hero-float {
      position: absolute;
      background: var(--surface-glass);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--radius-sm);
      padding: 10px 16px;
      font-size: 0.75rem;
      color: var(--text-primary);
      box-shadow: var(--shadow-soft);
      display: flex;
      align-items: center;
      gap: 8px;
      animation: float 6s ease-in-out infinite;
      /*
        POR ENCIMA DEL TELEFONO, NO POR DETRAS.

        Estaban en el nivel 3 y el aparato en el 5, asi que el marco las
        tapaba: se veian los trozos que sobresalian por los lados y el resto
        desaparecia debajo. Una chapa medio escondida detras del telefono no
        se lee como un aviso flotando sobre la escena; se lee como un fallo
        de maquetacion.

        En el 6 flotan por delante de todo y se leen enteras.
      */
      z-index: 6;
      white-space: nowrap;
    }
    .hero-float .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }
    .hero-float .dot.success {
      background: var(--success);
    }
    .hero-float .dot.warning {
      background: var(--warning);
    }
    @keyframes float {
      0%,
      100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-6px);
      }
    }

    /* Posiciones por defecto (desktop) */
    .hero-float--event {
      top: 8%;
      right: 4%;
      animation-delay: 0s;
    }
    .hero-float--checkin {
      bottom: 18%;
      left: 2%;
      animation-delay: 0.8s;
    }
    .hero-float--ready {
      bottom: 38%;
      right: 6%;
      animation-delay: 1.6s;
    }
    .hero-float--meeting {
      top: 30%;
      left: 0;
      animation-delay: 2.4s;
    }

    /* Tablet */
    @media (max-width: 1023px) and (min-width: 768px) {
      .hero-float--event {
        top: 6%;
        right: 2%;
      }
      .hero-float--checkin {
        bottom: 14%;
        left: 0;
      }
      .hero-float--ready {
        bottom: 34%;
        right: 2%;
      }
      .hero-float--meeting {
        top: 28%;
        left: -4%;
      }
    }

    /* Mobile grande */
    @media (max-width: 767px) and (min-width: 481px) {
      .hero-float--event {
        top: 4%;
        right: 0;
      }
      .hero-float--checkin {
        bottom: 10%;
        left: 0;
      }
      .hero-float--ready {
        bottom: 30%;
        right: 0;
      }
      .hero-float--meeting {
        display: none;
      }
    }

    /* Mobile pequeño */
    @media (max-width: 480px) {
      .hero-float {
        font-size: 0.65rem;
        padding: 6px 12px;
      }
      .hero-float--event {
        top: 2%;
        right: 0;
      }
      .hero-float--checkin {
        bottom: 6%;
        left: 0;
      }
      .hero-float--ready {
        bottom: 26%;
        right: 0;
      }
      .hero-float--meeting {
        display: none;
      }
      .hero-device {
        max-width: 260px;
      }
    }

    @media (min-width: 768px) {
      .hero-grid {
        grid-template-columns: 1.06fr 0.94fr;
      }
    }


    /* ======================================================
       HERO · EL APARATO, EL MÓVIL Y EL MOMENTO DE ALERTA
       ====================================================== */

    /*
      EL TELÉFONO EMERGE DE LA ESCENA.

      Una sombra proyectada larga y un filo de cian arriba. Sin eso, el
      aparato se ve pegado encima de la fotografía como un recorte; con
      eso parece que la luz del globo del fondo le da por detrás.
    */
    .hero-device {
      position: relative;
      z-index: 5;
      box-shadow:
        0 0 0 1px rgba(122, 200, 222, 0.14),
        0 40px 80px -30px rgba(0, 0, 0, 0.95),
        0 0 70px -34px rgba(69, 174, 194, 0.85);
      animation:
        heroDeviceEntra 900ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both,
        heroTiembla 320ms ease-in-out 1450ms 2;
    }

    @keyframes heroDeviceEntra {
      from {
        opacity: 0;
        transform: translate3d(0, 26px, 0) scale(0.965);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    /*
      LA MICROVIBRACIÓN, DOS VECES Y SE ACABA.

      Píxel y medio a cada lado, no una sacudida. Ocurre a los 1,45 s,
      justo después de que entre el aparato: se lee como que acaba de
      llegar el aviso. Repetirla en bucle convertiría el hero en un
      teléfono estropeado.
    */
    @keyframes heroTiembla {
      0%,
      100% {
        translate: 0 0;
      }
      20% {
        translate: -1.5px 0;
      }
      40% {
        translate: 1.5px 0;
      }
      60% {
        translate: -1px 0;
      }
      80% {
        translate: 1px 0;
      }
    }

    /* El barrido de luz: cruza el marco UNA vez y no vuelve. */
    .hero-device::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: -40%;
      width: 34%;
      border-radius: inherit;
      background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(160, 235, 255, 0.16) 50%,
        transparent 100%
      );
      transform: skewX(-14deg);
      pointer-events: none;
      z-index: 4;
      animation: heroBarrido 1.6s ease-in-out 1900ms 1 both;
    }

    @keyframes heroBarrido {
      from {
        left: -40%;
        opacity: 0;
      }
      18% {
        opacity: 1;
      }
      to {
        left: 130%;
        opacity: 0;
      }
    }

    /*
      LAS CHAPAS, UNA DETRÁS DE OTRA.

      Entran escalonadas después del aparato y solo entonces empiezan a
      flotar. Antes aparecían las cuatro a la vez y con el mismo vaivén:
      cuatro cosas moviéndose igual no se leen como avisos, se leen como
      un fondo de pantalla.
    */
    .hero-float {
      opacity: 0;
      animation:
        heroChapaEntra 420ms cubic-bezier(0.16, 1, 0.3, 1) both,
        float 6s ease-in-out infinite;
    }

    .hero-float--event {
      animation-delay: 1200ms, 1700ms;
    }

    .hero-float--checkin {
      animation-delay: 1360ms, 2100ms;
    }

    .hero-float--ready {
      animation-delay: 1520ms, 2500ms;
    }

    .hero-float--meeting {
      animation-delay: 1680ms, 2900ms;
    }

    @keyframes heroChapaEntra {
      from {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.98);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    /* ======================================================
       HERO · MÓVIL
       ======================================================
       El noventa y nueve por ciento del tráfico entra por aquí, así que
       esta parte no es una adaptación: es el diseño principal.

       El objetivo es que el hero entero quepa en poco más de una
       pantalla. Antes medía más de dos y media —el teléfono solo, a 340
       px de ancho y proporción 9/19, son más de setecientos píxeles de
       alto— y quien entraba tenía que hacer scroll dos veces para
       enterarse de qué se vende.
       ====================================================== */

    @media (max-width: 767px) {
      .hero {
        min-height: 100svh;
        padding-top: var(--header-height);
        padding-bottom: 4px;
      }

      /* La composición vertical tiene la familia abajo: se ancla ahí. */
      .hero-foto img {
        object-position: center 58%;
      }

      /*
        El velo se vuelve vertical.

        El de escritorio va de izquierda a derecha porque el hueco está
        a la izquierda. Aquí el hueco está arriba, así que el degradado
        tiene que ir de arriba abajo o el titular acabaría encima de las
        caras.
      */
      .hero-velo {
        background: linear-gradient(
          180deg,
          rgba(7, 14, 19, 0.82) 0%,
          rgba(7, 14, 19, 0.86) 35%,
          rgba(7, 14, 19, 0.45) 60%,
          rgba(7, 14, 19, 0.18) 100%
        );
      }

      .hero-velo::after {
        background: linear-gradient(180deg, rgba(7, 14, 19, 0) 62%, rgba(7, 14, 19, 0.6) 100%);
      }

      .hero-anillo {
        top: 46%;
        left: 50%;
        width: 170px;
        height: 170px;
        margin: -85px 0 0 -85px;
      }

      /* El aire entre bloques baja de 48 a 18: es scroll que se ahorra. */
      .hero-grid {
        gap: 12px;
      }

      .hero-content {
        gap: 12px;
      }

      .hero-title {
        font-size: clamp(1.85rem, 8.6vw, 2.35rem);
        line-height: 1.01;
      }

      .hero-sub {
        font-size: 1rem;
        line-height: 1.45;
        max-width: 92%;
      }

      .hero-actions {
        gap: 10px;
        margin-top: 2px;
      }

      /* Los dos botones a lo ancho: el pulgar no busca, encuentra. */
      .hero-actions .btn {
        flex: 1 1 100%;
        justify-content: center;
      }

      .hero-micro {
        gap: 6px 14px;
        font-size: 0.78rem;
      }

      .hero-visual {
        min-height: 0;
        padding: 4px 0 0;
      }

      /*
        EL TELÉFONO, MÁS PEQUEÑO Y MÁS ARRIBA.

        A 340 px de ancho ocupaba media segunda pantalla él solo. A 200
        mide unos 420 de alto, entra en el primer viewport junto con el
        botón y sigue leyéndose perfectamente: es un aparato dentro de
        una escena, no una captura para inspeccionar.
      */
      .hero-device {
        max-width: 168px;
      }
    }

    @media (max-width: 380px) {
      .hero-device {
        max-width: 150px;
      }

      .hero-title {
        font-size: 1.72rem;
      }
    }

    /* ======================================================
       HERO · QUIEN PIDE MENOS MOVIMIENTO
       ======================================================
       Se apaga la escena entera: el empuje del fondo, los anillos, la
       vibración, el barrido, la entrada de las chapas y su vaivén. No se
       esconde nada — se ve la composición final, quieta.
       ====================================================== */

    @media (prefers-reduced-motion: reduce) {
      .hero-foto img,
      .hero-anillo,
      .hero-device,
      .hero-device::after,
      .hero-float,
      .hero-eyebrow,
      .hero-title,
      .hero-sub,
      .hero-actions,
      .hero-micro {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }

      .hero-anillo {
        opacity: 0.18 !important;
      }
    }

    /* ======================================================
       TENSION / FAMILY MAP V2 — con mapa y tarjetas
       ====================================================== */
    .tension-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: center;
    }
    .tension-questions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
    }
    .tension-questions li {
      list-style: none;
      font-size: 1.2rem;
      font-weight: 500;
      color: var(--text-secondary);
      padding-left: 28px;
      position: relative;
    }
    .tension-questions li::before {
      content: "→";
      position: absolute;
      left: 0;
      color: var(--accent);
    }

    .family-event-map {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      padding: 24px;
      border: 1px solid var(--border-subtle);
      position: relative;
      min-height: 320px;
      display: flex;
      flex-direction: column;
    }
    .family-event-map .map-container {
      flex: 1;
      background: #1b2a33;
      border-radius: var(--radius-sm);
      min-height: 180px;
      position: relative;
      background-image: radial-gradient(circle at 30% 40%, #2a3f4a 1px, transparent 1px);
      background-size: 18px 18px;
      margin-bottom: 16px;
    }
    .family-event-map .map-container .epicenter {
      position: absolute;
      top: 35%;
      left: 30%;
      width: 14px;
      height: 14px;
      background: var(--accent);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px rgba(69, 174, 194, 0.5);
    }
    .family-event-map .map-container .epicenter::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 2px solid rgba(69, 174, 194, 0.2);
      transform: translate(-50%, -50%);
      animation: pulse-ring 2.5s ease-out infinite;
    }
    @keyframes pulse-ring {
      0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.7;
      }
      100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
      }
    }
    .family-event-map .map-container .distance-ring {
      position: absolute;
      top: 35%;
      left: 30%;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 1px dashed rgba(255, 255, 255, 0.1);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .family-event-map .family-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .family-member-card {
      background: rgba(255, 255, 255, 0.03);
      border-radius: var(--radius-sm);
      padding: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid var(--border-subtle);
    }
    .family-member-card .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #2a3f4a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.8rem;
      flex-shrink: 0;
      color: var(--text-primary);
    }
    .family-member-card .info {
      flex: 1;
    }
    .family-member-card .info .name {
      font-weight: 600;
      font-size: 0.95rem;
    }
    .family-member-card .info .detail {
      font-size: 0.7rem;
      color: var(--text-secondary);
    }
    .family-member-card .status-badge {
      font-size: 0.65rem;
      padding: 2px 10px;
      border-radius: 40px;
      font-weight: 500;
      white-space: nowrap;
    }
    .family-member-card .status-badge.ok {
      background: rgba(76, 175, 80, 0.15);
      color: var(--success);
    }
    .family-member-card .status-badge.warning {
      background: rgba(230, 138, 46, 0.15);
      color: var(--warning);
    }
    .family-member-card .status-badge.danger {
      background: rgba(196, 69, 69, 0.15);
      color: var(--danger);
    }

    @media (min-width: 768px) {
      .tension-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    @media (max-width: 600px) {
      .family-event-map .family-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ======================================================
       THREE QUESTIONS
       ====================================================== */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      margin-top: 32px;
    }
    .card-feature {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      padding: 32px 24px;
      border: 1px solid var(--border-subtle);
      transition: border-color var(--transition), transform 0.2s;
    }
    .card-feature:hover {
      border-color: var(--border-active);
      transform: translateY(-4px);
    }
    .card-feature .icon-svg {
      width: 40px;
      height: 40px;
      margin-bottom: 12px;
      color: var(--accent);
    }
    .card-feature h3 {
      font-size: 1.3rem;
      margin-bottom: 8px;
    }
    .card-feature p {
      color: var(--text-secondary);
      font-size: 0.95rem;
    }

    @media (min-width: 768px) {
      .cards-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    /* ======================================================
       GUARDIAN SECTION — con anillos y líneas
       ====================================================== */
    #guardian {
      background: var(--bg-elevated);
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
    }
    .guardian-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }
    .guardian-visual {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .guardian-rings {
      position: relative;
      width: 280px;
      height: 280px;
    }
    .guardian-rings .ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(69, 174, 194, 0.08);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .guardian-rings .ring-outer {
      width: 100%;
      height: 100%;
      border-color: rgba(69, 174, 194, 0.05);
    }
    .guardian-rings .ring-middle {
      width: 76%;
      height: 76%;
      border-color: rgba(69, 174, 194, 0.08);
    }
    .guardian-rings .ring-inner {
      width: 52%;
      height: 52%;
      border-color: rgba(69, 174, 194, 0.12);
    }
    .guardian-rings .core {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 2px solid var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--accent);
      text-align: center;
      line-height: 1.3;
      z-index: 2;
    }
    .guardian-rings .node {
      position: absolute;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 40px;
      padding: 6px 16px;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-secondary);
      white-space: nowrap;
      z-index: 3;
    }
    .guardian-rings .node:nth-child(3) {
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
    }
    .guardian-rings .node:nth-child(4) {
      right: -10px;
      top: 30%;
    }
    .guardian-rings .node:nth-child(5) {
      bottom: -6px;
      right: 30%;
    }
    .guardian-rings .node:nth-child(6) {
      bottom: -6px;
      left: 30%;
    }
    .guardian-rings .node:nth-child(7) {
      left: -10px;
      top: 30%;
    }

    @media (max-width: 768px) {
      .guardian-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .guardian-rings {
        width: 220px;
        height: 220px;
      }
      .guardian-rings .core {
        width: 80px;
        height: 80px;
        font-size: 0.9rem;
      }
      .guardian-rings .node {
        font-size: 0.65rem;
        padding: 4px 12px;
      }
    }

    /* ======================================================
       SISTEMA FAMILIAR 360 — anillo con conexiones y timeline
       ====================================================== */
    .system-360-visual {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 32px 0;
    }
    .system-ring {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
      max-width: 500px;
      width: 100%;
      position: relative;
    }
    .system-ring::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60%;
      height: 60%;
      border-radius: 50%;
      border: 1px dashed rgba(69, 174, 194, 0.08);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    .system-node {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      padding: 20px 12px;
      text-align: center;
      border: 1px solid var(--border-subtle);
      transition: border-color var(--transition), transform 0.2s;
      cursor: default;
      position: relative;
      z-index: 1;
    }
    .system-node:hover {
      border-color: var(--accent);
      transform: translateY(-3px);
    }
    .system-node .num {
      display: block;
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--accent);
      margin-bottom: 4px;
    }
    .system-node .label {
      font-weight: 600;
      font-size: 0.9rem;
    }
    .system-node .desc {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-top: 4px;
    }
    .system-center {
      grid-column: 2;
      grid-row: 2;
      background: var(--accent);
      color: #0B0F13;
      border-radius: 50%;
      aspect-ratio: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      padding: 8px;
      text-align: center;
      line-height: 1.3;
      z-index: 2;
      position: relative;
    }
    .system-center small {
      font-weight: 400;
      font-size: 0.65rem;
      opacity: 0.8;
    }

    /* Mobile: timeline vertical */
    @media (max-width: 600px) {
      .system-ring {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 300px;
        margin: 0 auto;
      }
      .system-ring::before {
        display: none;
      }
      .system-node {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        text-align: left;
        border-left: 3px solid var(--accent);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      }
      .system-node .num {
        font-size: 1.2rem;
        margin-bottom: 0;
        min-width: 30px;
      }
      .system-node .desc {
        margin-top: 0;
        font-size: 0.7rem;
      }
      .system-center {
        grid-column: auto;
        grid-row: auto;
        border-radius: var(--radius-md);
        aspect-ratio: auto;
        padding: 16px;
        margin-top: 8px;
        font-size: 1rem;
      }
      .system-center small {
        font-size: 0.7rem;
      }
    }

    /* ======================================================
       ESTOY BIEN — CINEMATOGRÁFICA, sin emojis
       ====================================================== */
    .checkin-cinema {
      background: #080B0E;
      padding: 80px 0;
      text-align: center;
    }
    .checkin-cinema .pre {
      font-size: 1.1rem;
      color: var(--text-secondary);
      margin-bottom: 16px;
    }
    .checkin-cinema .big {
      font-size: clamp(3.6rem, 12vw, 7rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      background: linear-gradient(135deg, var(--accent), var(--accent-soft));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 16px 0;
    }
    .checkin-notification {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      background: var(--bg-card);
      border-radius: var(--radius-sm);
      padding: 12px 24px;
      border-left: 3px solid var(--accent);
      margin: 20px 0;
      text-align: left;
      font-size: 0.95rem;
      max-width: 400px;
    }
    .checkin-notification .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #2a4a4a;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 1rem;
      flex-shrink: 0;
    }
    .checkin-notification .content {
      flex: 1;
    }
    .checkin-notification .content .name {
      font-weight: 600;
    }
    .checkin-notification .content .time {
      font-size: 0.7rem;
      color: var(--text-muted);
    }
    .checkin-statuses {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 24px;
    }
    .checkin-statuses .status {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      padding: 6px 16px;
      border-radius: 40px;
      background: rgba(255, 255, 255, 0.04);
    }
    .checkin-statuses .status .icon-svg {
      width: 20px;
      height: 20px;
    }
    .checkin-statuses .status.ok {
      color: var(--success);
    }
    .checkin-statuses .status.danger {
      color: var(--danger);
    }
    .checkin-statuses .status.warning {
      color: var(--warning);
    }

    /* ======================================================
       RESPONSABLES + ACCESIBILIDAD (unificadas)
       ====================================================== */
    .family-plan-canvas {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-top: 32px;
    }
    .plan-card {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      padding: 20px;
      border: 1px solid var(--border-subtle);
    }
    .plan-card .person {
      font-weight: 700;
      font-size: 1.1rem;
    }
    .plan-card .role {
      color: var(--text-secondary);
      font-size: 0.9rem;
    }
    .plan-card .detail {
      font-size: 0.8rem;
      color: var(--accent);
      margin-top: 4px;
    }
    .plan-card .access {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border-subtle);
      font-size: 0.85rem;
    }
    .plan-card .access strong {
      color: var(--text-primary);
    }

    /* ======================================================
       PUNTOS DE ENCUENTRO
       ====================================================== */
    .meeting-mockup {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      padding: 24px;
      max-width: 500px;
      margin: 0 auto;
      border: 1px solid var(--border-subtle);
    }
    .meeting-mockup .point {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .meeting-mockup .point:last-child {
      border-bottom: none;
    }
    .meeting-mockup .point .label {
      font-weight: 500;
    }
    .meeting-mockup .point .badge {
      font-size: 0.7rem;
      padding: 2px 10px;
      border-radius: 40px;
      background: rgba(69, 174, 194, 0.12);
      color: var(--accent);
    }

    /* ======================================================
       PREPAREDNESS SCORE
       ====================================================== */
    .score-dashboard {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      margin-top: 32px;
    }
    .score-ring {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: conic-gradient(var(--accent) 43%, #2a3f4a 43%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
    }
    .score-ring .inner {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: var(--bg-primary);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 2.8rem;
      font-weight: 700;
    }
    .score-ring .inner small {
      font-size: 1rem;
      font-weight: 400;
      color: var(--text-secondary);
    }
    .score-checklist {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .score-checklist .item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .score-checklist .item .icon {
      font-size: 1.2rem;
      width: 28px;
      text-align: center;
    }
    .score-checklist .item .label {
      flex: 1;
    }
    .score-checklist .item .status {
      font-weight: 500;
      font-size: 0.85rem;
    }
    .score-checklist .item .status.done {
      color: var(--success);
    }
    .score-checklist .item .status.pending {
      color: var(--warning);
    }

    @media (max-width: 768px) {
      .score-dashboard {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    /* ======================================================
       PRICING (se mantiene, pero usará config)
       ====================================================== */
    .pricing-card {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      padding: 40px 32px;
      max-width: 480px;
      margin: 0 auto;
      border: 1px solid var(--border-active);
      text-align: center;
    }
    .pricing-card .price {
      font-size: 3rem;
      font-weight: 700;
      margin: 16px 0 4px;
    }
    .pricing-card .price small {
      font-size: 1.2rem;
      font-weight: 400;
      color: var(--text-secondary);
    }
    .pricing-card .daily {
      color: var(--text-secondary);
      font-size: 0.9rem;
    }
    .pricing-card .features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 24px 0;
      text-align: left;
      font-size: 0.9rem;
    }
    .pricing-card .features .check {
      color: var(--success);
    }

    /* ======================================================
       FAQ
       ====================================================== */
    .faq-list {
      max-width: 720px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .faq-item {
      background: var(--bg-card);
      border-radius: var(--radius-sm);
      overflow: hidden;
      border: 1px solid var(--border-subtle);
    }
    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: 20px 24px;
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      font-family: var(--font-sans);
      transition: background var(--transition);
    }
    .faq-question:hover {
      background: rgba(255, 255, 255, 0.02);
    }
    .faq-question .arrow {
      transition: transform 0.3s;
      font-size: 1.2rem;
      color: var(--accent);
    }
    .faq-item.open .faq-question .arrow {
      transform: rotate(180deg);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      padding: 0 24px;
      color: var(--text-secondary);
    }
    .faq-item.open .faq-answer {
      max-height: 300px;
      padding: 0 24px 20px;
    }

    /* ======================================================
       FOOTER
       ====================================================== */
    .footer {
      padding: 48px 0 32px;
      border-top: 1px solid var(--border-subtle);
      margin-top: 40px;
    }
    .footer-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 32px;
    }
    .footer-links {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
    }
    .footer-links a {
      color: var(--text-secondary);
      font-size: 0.9rem;
      transition: color var(--transition);
    }
    .footer-links a:hover {
      color: var(--text-primary);
    }
    .footer-copy {
      color: var(--text-secondary);
      font-size: 0.8rem;
      opacity: 0.6;
      margin-top: 16px;
      width: 100%;
      text-align: center;
    }

    /* ======================================================
       STICKY CTA (mobile)
       ====================================================== */
    .sticky-cta {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 12px 16px;
      background: rgba(11, 15, 19, 0.92);
      backdrop-filter: blur(12px);
      border-top: 1px solid var(--border-subtle);
      z-index: 999;
      display: none;
      transition: opacity 0.25s ease;
    }
    .sticky-cta .btn {
      width: 100%;
      justify-content: center;
    }
    .sticky-cta.hidden {
      opacity: 0;
      pointer-events: none;
    }
    @media (max-width: 768px) {
      .sticky-cta:not(.hidden) {
        display: block;
      }
      body {
        padding-bottom: 80px;
      }
    }

    /* ======================================================
       UTILITIES
       ====================================================== */
    .text-center {
      text-align: center;
    }
    .mt-16 {
      margin-top: 16px;
    }
    .mt-32 {
      margin-top: 32px;
    }
    .mt-48 {
      margin-top: 48px;
    }
    .flex-center {
      display: flex;
      justify-content: center;
    }
    .gap-16 {
      gap: 16px;
    }

    /* ======================================================
       RESPONSIVE FINE-TUNE
       ====================================================== */
    @media (max-width: 480px) {
      .hero-title {
        font-size: 1.9rem;
      }
      .section-title {
        font-size: 1.6rem;
      }
      .btn {
        padding: 12px 24px;
        font-size: 0.9rem;
        min-height: 48px;
      }
      .pricing-card .price {
        font-size: 2.4rem;
      }
    }

    /* ======================================================
       REDUCED MOTION
       ====================================================== */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* ======================================================
       CAPABILITY GATING (ocultar secciones)
       ====================================================== */
    [data-capability="false"] {
      display: none !important;
    }
/* ==========================================================================
   LOS PLANES · tres tamanos

   Aqui habia una sola tarjeta. Con tres, la pregunta que de verdad se hace
   quien compra --a cuanta gente quiero avisar-- se contesta mirando.

   La del medio se levanta y se ilumina. No es decoracion: es la respuesta a
   «cual elijo», que es donde se pierde una venta por indecision.
   ========================================================================== */

.planes-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 8px auto 32px;
  border-radius: 999px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
}

.planes-opcion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.planes-opcion.activa {
  background: var(--accent);
  color: #0b0f13;
}

.planes-ahorro {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(11, 15, 19, 0.22);
}

.planes-opcion:not(.activa) .planes-ahorro {
  background: rgba(87, 201, 127, 0.14);
  color: #57c97f;
}

.planes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  text-align: left;
  max-width: 1040px;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .planes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 20px;
  }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border-radius: var(--radius-lg, 24px);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 260ms ease;
}

@media (hover: hover) and (min-width: 900px) {
  .plan:hover {
    transform: translateY(-4px);
    border-color: rgba(69, 174, 194, 0.4);
  }
}

.plan-popular {
  border: 2px solid var(--accent);
  background: var(--surface-2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.plan-recomendado-quiz {
  border-color: rgba(87, 201, 127, 0.75);
  box-shadow: 0 0 0 3px rgba(87, 201, 127, 0.1), 0 20px 60px rgba(0, 0, 0, 0.34);
}

@media (min-width: 900px) {
  .plan-popular {
    transform: scale(1.045);
    z-index: 1;
  }
  .plan-popular:hover {
    transform: scale(1.045) translateY(-4px);
  }
}

.plan-insignia {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: var(--accent);
  color: #0b0f13;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
}

.plan-nombre {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.plan-sub {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 4px;
}

.plan-precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 22px;
}

.plan-cifra {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.plan-cifra::before {
  content: '$';
  font-size: 0.5em;
  vertical-align: super;
  color: var(--text-secondary);
  margin-right: 2px;
}

.plan-periodo {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.plan-equivalente {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 6px;
  min-height: 1.2em;
}

.plan-ventajas {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-ventajas li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.plan-ventajas svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--accent);
}

.plan-comprar {
  margin-top: 24px;
}

.plan-nota {
  color: var(--text-muted);
  font-size: 0.76rem;
  text-align: center;
  margin-top: 10px;
}

.plan-legal {
  max-width: 620px;
  margin: 32px auto 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

.plan-error {
  color: #d9614f;
  font-size: 0.88rem;
  min-height: 1.2em;
  margin-top: 12px;
}

/* La nota que aparece solo para quien llega del diagnostico. */
.desde-quiz {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(69, 174, 194, 0.1);
  border: 1px solid rgba(69, 174, 194, 0.3);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   REPORTES DEL CIRCULO · rejilla de dos columnas en movil
   ==========================================================================
   Antes era un flex con tarjetas de width:160px. En un telefono el ancho
   disponible no daba para dos, asi que caian en UNA columna: cuatro tarjetas
   apiladas, y un scroll largo en la seccion que mas tiene que convencer.

   Con grid la decision es explicita --- dos columnas siempre en movil, cuatro
   desde 760px --- en vez de depender de si caben. `minmax(0,1fr)` evita que un
   nombre largo ensanche su columna y descuadre la pareja.
   ========================================================================== */
.reportes-circulo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 28px auto 0;
  max-width: 760px;
}

@media (min-width: 760px) {
  .reportes-circulo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

/* La tarjeta base es una fila horizontal; aqui va en columna y centrada. */
.reportes-circulo .family-member-card {
  position: relative;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 12px 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  overflow: hidden;
}

/*
  Una banda de color arriba, del ancho de la tarjeta.

  El estado ya se lee en la insignia, pero en una rejilla de cuatro lo que se
  quiere es distinguir de un vistazo quien falta por reportar SIN leer nada.
  Dos pixeles bastan y no compiten con el texto.
*/
.reportes-circulo .family-member-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--acento-reporte, transparent);
}

.reportes-circulo .family-member-card.ok {
  --acento-reporte: rgba(76, 175, 80, 0.7);
}

.reportes-circulo .family-member-card.pendiente {
  --acento-reporte: rgba(255, 167, 38, 0.7);
}

.reportes-circulo .avatar {
  width: 48px;
  height: 48px;
  font-size: 1.05rem;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.045);
}

.reportes-circulo .name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}

.reportes-circulo .lugar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-secondary);
}