/* ============================================================
   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,
.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 44px */
.mobile-toggle {
  min-width: 44px;
  min-height: 44px;
  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 — MEJORAS ── */

.mobile-nav {
  /* Safe area: contenido no queda detrás del notch */
  padding-top: max(var(--space-24), env(safe-area-inset-top));
  padding-bottom: max(var(--space-12), env(safe-area-inset-bottom));
  padding-inline: max(var(--space-8), env(safe-area-inset-left));
  /* Mejor animación: scale + opacity en vez de solo opacity */
  transform: scale(0.97);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.mobile-nav.is-open {
  transform: scale(1);
}

/* Links del menú móvil: más espaciados y fáciles de tocar */
.mobile-nav__link {
  padding-block: var(--space-4);
  width: 100%;
  text-align: center;
  display: block;
}

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

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

  /* CTA principal en header: más grande y legible */
  .header__actions .btn--primary {
    min-height: 40px;
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
  }

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

  .mobile-toggle {
    display: flex;
  }
}

/* ── 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: 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 {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    overflow-y: auto;
  }

  .mobile-nav__link {
    font-size: var(--text-2xl);
    width: auto;
    padding: var(--space-3) var(--space-6);
  }
}