/* ============================================================
   VELIORA — Mobile Experience Layer
   Carga después de components.css para sobreescribir con
   precisión. Cubre: touch targets, iOS quirks, safe areas,
   tap delay, scroll lock, tipografía y layout mobile-first.
   ============================================================ */

/* ── 1. GLOBAL TOUCH OPTIMIZATIONS ── */

/* Elimina el flash azul/gris al tocar en iOS/Android */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Elimina el delay de 300ms en todos los elementos interactivos */
a,
button,
[role="button"],
input,
select,
textarea,
label,
.btn,
  .faq-trigger,
  .mobile-toggle,
  .mobile-nav__close,
  .service-card__link,
  .header__nav-link,
  .mobile-nav__link,
  .footer__link {
  touch-action: manipulation;
}

/* Suavizado de scroll en iOS */
html {
  -webkit-overflow-scrolling: touch;
}

/* Safe area insets para iPhone con notch/Dynamic Island */
.header__inner {
  padding-inline: max(var(--space-8), env(safe-area-inset-left));
}

.hero__content,
.container {
  padding-inline: max(var(--space-8), env(safe-area-inset-left));
}

.footer {
  padding-bottom: max(var(--space-20), calc(var(--space-20) + env(safe-area-inset-bottom)));
}

/* ── 2. TOUCH TARGETS ── */

/* Todos los botones tienen mínimo 44×44px (Apple HIG / WCAG 2.5.8) */
.btn {
  min-height: 44px;
}

.btn--lg {
  min-height: 52px;
}

/* Mobile toggle: área mínima de 48px (umbral Lighthouse / WCAG 2.5.8) */
.mobile-toggle {
  min-width: 48px;
  min-height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
}

/* FAQ triggers: fáciles de pulsar */
.faq-trigger {
  min-height: 56px;
  padding-block: var(--space-5);
}

/* Service card links: amplía zona táctil */
.service-card__link {
  padding-block: var(--space-3);
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
}

/* Footer links: zona táctil suficiente */
.footer__link {
  display: inline-block;
  padding-block: var(--space-2);
}

/* ── 3. IOS SCROLL LOCK FIX ── */

/* La clase la añade JS. Preserva la posición de scroll
   usando --scroll-y como custom property */
body.nav-is-open {
  position: fixed;
  width: 100%;
  /* El JS asigna top: -scrollY para que no salte */
  overflow-y: scroll; /* mantiene el ancho del scrollbar */
}

/* ── 4. MOBILE NAV — DRAWER: SAFE AREA ── */

.mobile-nav__head {
  padding-top: max(var(--space-5), env(safe-area-inset-top));
  padding-right: max(var(--space-5), env(safe-area-inset-right));
}

.mobile-nav__body {
  padding-bottom: var(--space-8);
}

.mobile-nav__footer {
  padding-left: max(var(--space-5), env(safe-area-inset-left));
  padding-right: max(var(--space-5), env(safe-area-inset-right));
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
}

/* ── 5. HEADER MOBILE — CTA ACCESIBLE ── */

@media (max-width: 768px) {
  .header__inner {
    padding-inline: var(--space-5);
  }

  /* Barra mobile mínima: solo logo a la izquierda + hamburguesa a la derecha.
     El CTA vive en el drawer (mobile-nav__cta). */
  .header__actions #header-cta {
    display: none;
  }

  .header__actions {
    gap: var(--space-3);
  }

  .mobile-toggle {
    display: flex;
  }
}

@media (max-width: 360px) {
  /* Sin reglas extra: el header ya queda solo logo + toggle */
}

@media (max-width: 400px) {
  /* Evita overflow horizontal: botones full-width con texto largo deben poder quebrar */
  .btn {
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }
}

/* ── 6. HERO MOBILE ── */

@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: max(var(--space-16), env(safe-area-inset-bottom));
  }

  .hero__headline {
    font-size: clamp(2.4rem, 8vw, 3.2rem);
    max-width: 100%;
  }

  .hero__sub {
    font-size: var(--text-base);
    max-width: 100%;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    justify-content: center;
    text-align: center;
  }

  .hero__scroll {
    display: none; /* Ocupa espacio sin propósito en mobile */
  }

  .hero__content {
    padding-inline: var(--space-5);
  }
}

@media (max-width: 480px) {
  .hero__headline {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
}

/* ── 7. PAGE HERO MOBILE ── */

@media (max-width: 768px) {
  .page-hero {
    padding-top: calc(var(--space-24) + 70px);
    padding-bottom: var(--space-12);
    text-align: left;
  }

  .page-hero__title {
    font-size: clamp(2.2rem, 8vw, 3rem);
    text-align: left;
    margin-inline: 0;
  }

  .page-hero__lead {
    text-align: left;
    margin-inline: 0;
    font-size: var(--text-base);
  }
}

/* ── 8. SECCIONES: ESPACIADO MOBILE ── */

@media (max-width: 768px) {
  .container {
    padding-inline: var(--space-5);
  }

  .section {
    padding-block: var(--space-16);
  }

  .section--sm {
    padding-block: var(--space-10);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }

  .section-header__lead {
    font-size: var(--text-base);
  }
}

/* ── 9. SPLIT LAYOUT MOBILE ── */

@media (max-width: 768px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .split--reverse {
    direction: ltr;
  }

  /* Imagen va siempre primero en mobile para dar contexto visual */
  .split__image {
    order: -1;
    max-height: 340px;
    aspect-ratio: 16 / 9;
  }

  .split__content {
    padding-block: 0;
  }
}

/* ── 10. SERVICE CARDS MOBILE ── */

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    background-color: transparent;
    border: none;
    gap: var(--space-3);
  }

  .service-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-8);
  }
}

/* ── 11. PROCESO MOBILE ── */

@media (max-width: 768px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
  }

  /* Línea vertical en lugar de horizontal */
  .process-steps::before { display: none; }

  .process-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding: var(--space-5) 0;
    gap: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    position: relative;
  }

  .process-step:last-child {
    border-bottom: none;
  }

  .process-step__number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
  }

  .process-step__title,
  .process-step__desc {
    text-align: left;
  }
}

/* ── 12. TECH FEATURES MOBILE ── */

@media (max-width: 768px) {
  .tech-features {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .tech-feature {
    padding: var(--space-6);
  }
}

/* ── 13. STAT STRIP MOBILE ── */

@media (max-width: 768px) {
  .stat-strip {
    grid-template-columns: 1fr 1fr;
  }

  .stat-item__number {
    font-size: var(--text-4xl);
  }
}

/* ── 14. FAQ MOBILE ── */

@media (max-width: 768px) {
  .faq-list {
    max-width: 100%;
  }

  .faq-trigger {
    font-size: var(--text-base);
    gap: var(--space-4);
  }

  .faq-body__content {
    font-size: var(--text-sm);
  }
}

/* ── 15. CTA SECTION MOBILE ── */

@media (max-width: 768px) {
  .cta-section {
    padding-block: var(--space-20);
    padding-inline: var(--space-5);
  }

  .cta-section__title {
    font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl));
  }

  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .cta-section__actions .btn {
    justify-content: center;
    text-align: center;
  }
}

/* ── 16. FORMULARIO MOBILE — iOS ZOOM FIX ── */

@media (max-width: 768px) {
  /* iOS hace zoom si font-size < 16px en inputs.
     Forzamos 16px aunque el diseño use otro tamaño visual. */
  .form-input,
  .form-textarea,
  select.form-input {
    font-size: 16px !important;
    /* Compensamos visualmente con padding */
    padding: var(--space-4) var(--space-4);
  }

  .contact-form {
    gap: var(--space-5);
    max-width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ── 17. FOOTER MOBILE ── */

@media (max-width: 768px) {
  .footer {
    padding-inline: var(--space-5);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  /* Brand column full-width */
  .footer__grid > div:first-child {
    grid-column: 1 / -1;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer__legal {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}

@media (max-width: 480px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ── 18. LEGAL PAGES MOBILE ── */

@media (max-width: 768px) {
  .legal-hero {
    padding-top: calc(var(--space-20) + 70px);
    padding-bottom: var(--space-10);
  }

  .legal-hero__title {
    font-size: clamp(var(--text-2xl), 7vw, var(--text-4xl));
  }

  .legal-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .legal-meta__sep {
    display: none;
  }

  .entity-table-wrapper {
    font-size: var(--text-xs);
  }

  .entity-table thead th,
  .entity-table tbody td {
    padding: var(--space-3);
  }

  .policy-section__header {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-3);
  }

  .policy-section__num {
    font-size: var(--text-2xl);
    min-width: 2ch;
  }

  .step-list__item {
    padding: var(--space-4) var(--space-5);
  }

  .notice-box {
    padding: var(--space-6);
  }
}

/* ── 19. PHILOSOPHY QUOTE MOBILE ── */

@media (max-width: 768px) {
  .philosophy-quote {
    font-size: clamp(var(--text-xl), 5.5vw, var(--text-3xl));
    max-width: 100%;
  }
}

/* ── 20. REVEAL — AJUSTE PARA MOBILE ── */

/* En mobile, elementos más altos necesitan threshold menor
   para dispararse antes de que entren por completo en pantalla.
   El ajuste se hace en JS, pero añadimos esta clase helper. */
@media (max-width: 768px) {
  .reveal {
    transform: translateY(16px); /* Reducimos desplazamiento inicial */
  }
}

/* ── 21. ACCESIBILIDAD: MODO REDUCIR MOVIMIENTO ── */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__bg {
    transition: none;
  }

  .hero__scroll-line {
    animation: none;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 22. TYPOGRAPHY: DARK MODE RESPETO ── */

@media (prefers-color-scheme: dark) {
  /* El diseño usa dark explícito en secciones —
     no necesita dark mode automático.
     Solo aseguramos que las selecciones del sistema sean legibles. */
  ::selection {
    background-color: var(--color-accent);
    color: var(--color-white);
  }
}

/* ── 23. LANDSCAPE MOBILE ── */

@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 100svh;
    padding-bottom: var(--space-10);
  }

  .page-hero {
    padding-top: calc(var(--space-16) + 60px);
    padding-bottom: var(--space-8);
  }

  .mobile-nav {
    width: min(78vw, 360px);
  }

  .mobile-nav__link {
    font-size: var(--text-xl);
  }
}

/* ── 24. EXPERIENCIA APP-LIKE: FAB + TAP FEEDBACK ── */

/* Botón flotante de acción (CTA persistente tipo app, sin nav inferior) */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: var(--z-above);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 22px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgba(223,187,113,0.5);
  box-shadow: 0 8px 24px rgba(2,40,53,0.35), 0 2px 8px rgba(2,40,53,0.25);
  transition: transform var(--transition-base), opacity var(--transition-base), box-shadow var(--transition-base);
  will-change: transform;
}
.fab__icon { width: 20px; height: 20px; flex-shrink: 0; }
.fab:active { transform: scale(0.94); box-shadow: 0 4px 12px rgba(2,40,53,0.3); }
.vlr-drawer-open .fab {
  opacity: 0;
  transform: translateY(14px) scale(0.92);
  pointer-events: none;
}
@media (min-width: 769px) {
  .fab { display: none; }
}

/* Tap feedback nativo en elementos interactivos */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .service-card,
  .faq-trigger,
  .tech-feature,
  .process-step {
    transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
                color 220ms ease,
                background-color 220ms ease,
                border-color 220ms ease,
                padding-left 220ms ease,
                box-shadow 220ms ease;
  }
  .btn:active,
  .service-card:active,
  .faq-trigger:active,
  .tech-feature:active {
    transform: scale(0.97);
  }
  .process-step:active .process-step__number,
  .tech-feature:active {
    transform: scale(0.97);
  }
  .mobile-nav__link:active {
    color: var(--color-accent-light);
    transform: translateX(4px);
  }
}