/* ============================================================================
   TAXSIYA · Capa premium compartida por las tres páginas (general, pasajero y
   conductor): fondos por sección con luz de marca y tramas, grano, marco de
   móvil para las capturas reales, acordeón de preguntas y cierre.
   Se carga DESPUÉS de ds-landing.css.
   ========================================================================== */
/* ---------------------------------------------------------------------
         Página de captación de pasajero. Va SIEMPRE en claro, como la app:
         el sistema del visitante no debe cambiarle el fondo a esta página.
         Solo vive aquí lo que el design system no tiene: el marco de móvil y
         el acordeón de preguntas.
         ------------------------------------------------------------------ */

      /* Logo de la barra un 30 % mayor (32 → 42 px) con la barra algo más alta. */
      .nav { height: 84px; }
      .nav-logo-img { height: 42px; }
      .logo-pill { padding: 6px 12px; border-radius: var(--r-md); }
      .footer-brand .nav-logo-img { height: 42px; }

      /* ---- FONDOS -------------------------------------------------------
         Cada sección tiene su propio tratamiento: luz de marca difusa, una
         trama fina y una capa de grano. El grano es lo que quita el aspecto
         de "color plano de plantilla" y da acabado de imprenta.
         ------------------------------------------------------------------ */
      .sec, .hero.heroA { position: relative; overflow: hidden; }
      .sec > .wrap, .hero.heroA > .wrap { position: relative; z-index: 2; }
      /* Al llegar desde el menú, el título no debe quedar debajo de la barra fija. */
      main section[id] { scroll-margin-top: calc(84px + 16px); }

      /* Grano: UNA sola capa fija para toda la página (una por sección obligaba al
         navegador a repintar seis superficies grandes y se notaba). */
      body::after {
        content: '';
        position: fixed; inset: 0;
        z-index: 9998;
        pointer-events: none;
        opacity: 0.55;
        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.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
      }

      /* HERO — luz roja arriba a la derecha, azul abajo a la izquierda y trama de puntos. */
      .hero.heroA {
        background:
          radial-gradient(1000px 560px at 92% -12%, rgba(253, 38, 36, 0.13), transparent 60%),
          radial-gradient(820px 520px at -6% 30%, rgba(37, 48, 75, 0.10), transparent 62%),
          linear-gradient(180deg, #FFFFFF 0%, var(--n-25) 55%, var(--n-50) 100%);
      }
      .hero.heroA::before {
        content: '';
        position: absolute; inset: 0;
        z-index: 0;
        background-image: radial-gradient(rgba(11, 19, 37, 0.10) 1px, transparent 1px);
        background-size: 26px 26px;
        -webkit-mask-image: radial-gradient(900px 520px at 20% 20%, #000, transparent 72%);
        mask-image: radial-gradient(900px 520px at 20% 20%, #000, transparent 72%);
        pointer-events: none;
      }

      /* CÓMO FUNCIONA — papel gris con una banda de luz superior. */
      #como {
        background:
          radial-gradient(900px 300px at 50% 0%, rgba(253, 38, 36, 0.055), transparent 70%),
          linear-gradient(180deg, var(--n-50) 0%, var(--n-100) 100%);
      }

      /* LA APP POR DENTRO — fondo tinta: las capturas oscuras piden marco oscuro. */
      #app {
        background:
          radial-gradient(760px 420px at 50% -10%, rgba(253, 38, 36, 0.22), transparent 62%),
          linear-gradient(180deg, var(--ink-900) 0%, #131C33 100%);
        color: var(--fg-on-dark);
      }
      #app::before {
        content: '';
        position: absolute; inset: 0; z-index: 0;
        background-image:
          linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
        background-size: 72px 72px;
        -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
        mask-image: linear-gradient(to bottom, #000, transparent 88%);
        pointer-events: none;
      }
      #app .sec-head h2 { color: #fff; }
      #app .sec-head p { color: var(--fg-on-dark-2); }
      #app .sec-head .eyebrow { color: #FF6361; }
      #app .shot-title { color: #fff; }
      #app .shot-text { color: var(--fg-on-dark-2); }

      /* PRECIO — trama diagonal muy fina, como papel de seguridad. */
      #precio {
        background:
          radial-gradient(700px 320px at 88% 8%, rgba(253, 38, 36, 0.06), transparent 66%),
          linear-gradient(180deg, var(--n-50), var(--n-25));
      }
      #precio::before {
        content: '';
        position: absolute; inset: 0; z-index: 0;
        background-image: repeating-linear-gradient(-45deg, rgba(11, 19, 37, 0.028) 0 1px, transparent 1px 11px);
        pointer-events: none;
      }

      /* PREGUNTAS — blanco limpio con un halo tenue detrás del acordeón. */
      #faq {
        background:
          radial-gradient(680px 420px at 50% 0%, rgba(37, 48, 75, 0.06), transparent 68%),
          var(--surface);
      }

      /* Marco de móvil con la captura REAL de la app dentro. */
      .phone {
        position: relative;
        width: min(320px, 82vw);
        margin: 0 auto;
        border-radius: 44px;
        padding: 12px;
        background: linear-gradient(160deg, #2A3550, #0B1325 60%);
        box-shadow: var(--sh-lg), 0 0 0 1px rgba(11, 19, 37, 0.25);
      }
      .phone::after { /* altavoz: la isla/notch taparía el logo de la propia app */
        content: '';
        position: absolute;
        top: 20px; left: 50%; transform: translateX(-50%);
        width: 54px; height: 5px;
        background: rgba(255, 255, 255, 0.22);
        border-radius: var(--r-pill);
        z-index: 2;
      }
      .phone img { display: block; width: 100%; height: auto; border-radius: 33px; }
      /* Halo de marca detrás del móvil del hero + flotación muy leve. */
      .phone-wrap { display: grid; place-items: center; position: relative; }
      .phone-wrap::before {
        content: '';
        position: absolute;
        width: 460px; height: 460px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(253, 38, 36, 0.20), transparent 66%);
        filter: blur(18px);
        top: 6%;
        pointer-events: none;
      }
      .phone-cap {
        margin: 18px auto 0;
        max-width: 300px;
        text-align: center;
        font-size: var(--fs-xs);
        color: var(--fg-3);
        line-height: 1.5;
      }
      /* Trío de pantallas de la app: el central, elevado y algo mayor. */
      .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
      .shots .phone {
        width: min(250px, 84vw); border-radius: 38px; padding: 10px;
        background: linear-gradient(160deg, #46527A, #1B2540 62%);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
        transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur) var(--ease);
      }
      .shots .phone img { border-radius: 29px; }
      .shots .phone::after { top: 17px; width: 46px; }
      .shots > div:nth-child(2) .phone { box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.10), 0 0 90px rgba(253, 38, 36, 0.22); }
      .shots > div:hover .phone { transform: translateY(-8px); }
      .shot-title { text-align: center; margin: 18px 0 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--fg); }
      .shot-text { text-align: center; margin: 0 auto; max-width: 260px; font-size: .92rem; color: var(--fg-2); line-height: 1.5; }

      /* Preguntas: acordeón nativo, sin JavaScript. */
      .faq { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
      .faq details {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-xs);
        overflow: hidden;
      }
      .faq details[open] { box-shadow: var(--sh-sm); border-color: var(--border-2); }
      .faq summary {
        cursor: pointer;
        list-style: none;
        padding: 20px 24px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--fg);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
      }
      .faq summary::-webkit-details-marker { display: none; }
      .faq summary::after {
        content: '+';
        flex: none;
        font-size: 1.5rem;
        line-height: 1;
        color: var(--brand-red);
        transition: transform var(--dur) var(--ease);
      }
      /* Al abrir, un menos: girar el «+» 45° lo convierte en un aspa roja que se lee como error. */
      .faq details[open] summary::after { content: '−'; }
      .faq p { margin: 0; padding: 0 24px 22px; color: var(--fg-2); font-size: 1rem; line-height: 1.6; }

      /* Cierre: bloque de descarga sobre fondo tinta. */
      .close-cta { background: var(--ink-900); color: var(--fg-on-dark); text-align: center; }
      /* Sobre tinta, el rojo oscuro del antetítulo no contrasta: aquí va el rojo claro. */
      .close-cta .eyebrow { color: #FF8583; }
      .close-cta h2 { color: #fff; }
      .close-cta p { color: var(--fg-on-dark-2); }
      .close-cta .store-badges { justify-content: center; margin-top: 28px; }
      .close-cta .driver-note { margin-top: 34px; font-size: .95rem; color: var(--fg-on-dark-2); }
      .close-cta .driver-note a { color: #FF6361; text-decoration: underline; text-underline-offset: 3px; }

      /* Pasos: número con degradado de marca e hilo que los une. */
      .steps { position: relative; }
      .step { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
      .step:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--border-2); }
      .step .n {
        background: linear-gradient(140deg, var(--brand-red), #B3140F);
        box-shadow: 0 8px 18px rgba(253, 38, 36, 0.28);
      }
      @media (min-width: 901px) {
        .steps::before {
          content: '';
          position: absolute;
          top: 50px; left: 12%; right: 12%;
          height: 2px;
          background: repeating-linear-gradient(to right, var(--border-2) 0 8px, transparent 8px 16px);
          z-index: 0;
        }
        .step { z-index: 1; }
      }

      /* Comparativa de precio: la columna nuestra, con filo de marca arriba. */
      .diff-col.us { position: relative; overflow: hidden; }
      .diff-col.us::before {
        content: '';
        position: absolute; top: 0; left: 0; right: 0; height: 4px;
        background: linear-gradient(to right, var(--brand-red), #FF8583);
      }
      .diff-col li i { flex: none; margin-top: 3px; }
      .diff-col.us li i { color: var(--green); }
      .diff-col.them li i { color: var(--fg-3); }

      /* Banda de confianza: rejilla tenue sobre el fondo tinta. */
      .sec.trust { position: relative; overflow: hidden; }
      .sec.trust::before {
        content: '';
        position: absolute; inset: 0;
        background-image:
          radial-gradient(700px 340px at 82% 0%, rgba(253, 38, 36, 0.16), transparent 60%),
          linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        background-size: auto, 64px 64px, 64px 64px;
        pointer-events: none;
      }
      .sec.trust > .wrap { position: relative; z-index: 1; }
      .trust-item { transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease); }
      .trust-item:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.07); }

      /* Cierre con el mismo tratamiento y el botón con brillo de marca. */
      .close-cta { position: relative; overflow: hidden; }
      .close-cta::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(760px 380px at 50% 120%, rgba(253, 38, 36, 0.28), transparent 62%);
        pointer-events: none;
      }
      .close-cta > .wrap { position: relative; z-index: 1; }

      /* Aparición con desplazamiento (el .reveal del sitio solo cambia opacidad). */
      .reveal:not(.in) { transform: translateY(14px); }
      .reveal { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }

      @media (prefers-reduced-motion: reduce) {
        .reveal, .step, .shots .phone, .trust-item { transition: none; }
        .reveal:not(.in) { transform: none; }
      }

      @media (max-width: 900px) {
        .shots { grid-template-columns: 1fr; gap: 44px; }
        .phone-wrap::before { width: 300px; height: 300px; }
      }