/* Servicios Menetan — mobile.css — Responsive básico */

/* ─────────────────────────────────────────────
    RESPONSIVE — MOBILE (≤ 768px)
───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --navbar-height: 64px;
    --trust-bar-height: 0px;
  }

  .trust-bar { display: none; }

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

  /* Navbar mobile - Básico */
  .navbar__hamburger { 
    display: flex;
    z-index: 101;
  }

  .navbar__nav {
    display: none;
    position: fixed;
    top: calc(var(--navbar-height));
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    z-index: 99;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .navbar__nav.open { display: flex; }

  .navbar__link {
    padding: var(--space-4) var(--space-5);
    font-size: var(--size-md);
    color: var(--text-body);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    white-space: normal;
  }

  .navbar__link:hover {
    background: var(--color-gray-50);
    color: var(--color-navy);
  }

  .navbar__link--highlight {
    background: var(--color-navy);
    color: var(--color-white);
    font-weight: 700;
  }

  .btn--nav {
    margin-top: var(--space-4);
    padding: var(--space-4);
    text-align: center;
    font-size: var(--size-base);
  }

  /* Hero mobile */
  .hero { 
    padding-block: var(--space-16); 
    min-height: 500px;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__card { min-width: auto; }
  .hero__visual { flex-direction: column; }
  
  .hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .hero__subtitle {
    font-size: var(--size-sm);
    max-width: 100%;
  }

  /* About */
  .about__stats { gap: var(--space-6); flex-wrap: wrap; }
  .about__pillars { grid-template-columns: 1fr; }
  .about__grid { gap: var(--space-8); }

  /* Alert */
  .alert-section__inner { grid-template-columns: 1fr; }
  .alert-section__icon  { display: none; }
  .alert-section__lead {
    font-size: var(--size-base);
  }

  /* Steps - ya en columna */
  .step__connector { 
    rotate: 90deg;
    height: auto;
  }
  
  .steps {
    gap: var(--space-6);
  }
  .step {
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-md);
  }
  
  /* Mejorar Steps móvil */
  .step__title {
    font-size: var(--size-base);
  }
  .step__text {
    font-size: 0.9rem;
  }
  .step__number {
    font-size: var(--size-2xl);
  }
  
  /* Servicios */
  .services__grid  { grid-template-columns: 1fr; }
  .audience__grid  { grid-template-columns: 1fr; }
  .legal__grid     { grid-template-columns: 1fr; }

  /* Contacto */
  .contact__grid         { grid-template-columns: 1fr; }
  .contact__form-wrapper { padding: var(--space-6); }
  
  .form__input, .form__select, .form__textarea {
    font-size: var(--size-sm);
    padding: 0.65rem 0.875rem;
  }
  
  .contact__info-title {
    font-size: var(--size-base);
  }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer__bottom-inner {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }

  /* Sección alert CTA */
  .alert-section__cta { flex-direction: column; align-items: flex-start; }
  
  /* FAQ mobile */
  .faq__question {
    font-size: var(--size-sm);
    padding: var(--space-4) var(--space-5);
  }
  .faq__answer p {
    font-size: var(--size-sm);
    padding: 0 var(--space-5) var(--space-5);
  }
  
  /* Asegurar scroll en formularios */
  .contact__form-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Logo como imagen SVG ── */
.navbar__logo img {
  height: 48px;
  width: auto;
  display: block;
}

.navbar__logo--footer img {
  height: 42px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .navbar__logo img        { height: 40px; }
  .navbar__logo--footer img { height: 36px; }
}

/* ─────────────────────────────────────────────
    RESPONSIVE — MOBILE PEQUEÑO (≤ 480px)
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; text-align: center; }
  .about__stats  { flex-direction: column; gap: var(--space-5); }
  
  /* Hero muy pequeño */
  .hero__title {
    font-size: 2rem;
  }
  .hero {
    min-height: 400px;
  }
  
  /* Pillars en móvil muy pequeño */
  .about__pillars {
    gap: var(--space-4);
  }
  .pillar {
    padding: var(--space-3);
  }
  .pillar__icon {
    width: 40px;
    height: 40px;
  }
  
  /* Steps móvil pequeño */
  .step__number {
    font-size: 1rem;
  }
  .step__title {
    font-size: var(--size-base);
  }
  
  /* FAQ móvil pequeño */
  .faq__question {
    font-size: 0.9rem;
    padding: var(--space-3) var(--space-4);
  }
  .faq__answer p {
    font-size: 0.85rem;
  }
  
  /* Servicios cards */
  .service-card__title {
    font-size: var(--size-base);
  }
  .service-card__text {
    font-size: 0.85rem;
  }
  
  /* Footer */
  .footer__brand-desc {
    font-size: 0.85rem;
  }
  .footer__col-title {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .hero { padding-block: 4rem; min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero__title { font-size: clamp(2rem, 8vw, 2.4rem); }
  .hero__subtitle { max-width: 100%; margin-bottom: 2rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__stats-block { padding: 1.5rem; }
  .hero__stats-row { gap: 1rem; }
  .hero__top-line { display: none; }
}

@media (max-width: 480px) {
  .hero__badge { font-size: 10px; padding: 4px 10px; }
  .hero__stat-num { font-size: 1.8rem; }
}

@media (max-width: 768px) {
  .clients { padding-block: 1.5rem; }
  .clients__logos { gap: 0.5rem; }
  .clients__logo-placeholder { font-size: 11px; padding: 0.4rem 0.75rem; }
  .clients__label span { font-size: 10px; }
}

@media (max-width: 768px) {
  .comparison__table-wrapper { border-radius: 8px; }
  .comparison__th-feature { display: none; }
  .comparison__feature { display: none; }
  .comparison__table colgroup { display: none; }
  .comparison__manual,
  .comparison__menetan { width: 50%; }
}
/* ── SPRINT-F2: Navbar mobile ── */
@media (max-width: 768px) {
  .navbar {
    height: 64px;
  }
  .navbar__hamburger {
    display: flex;
  }
  .navbar__nav {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    gap: 0;
    z-index: 99;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(13,43,85,0.16);
  }
  .navbar__nav.open {
    display: flex;
  }
  .navbar__link {
    padding: 1rem;
    font-size: 1rem;
    border-radius: 8px;
    border-bottom: 1px solid var(--color-gray-50);
  }
  .navbar__link--cuenta {
    margin-top: 0.5rem;
    justify-content: center;
  }
  .btn--nav {
    margin-top: 1rem;
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
    width: 100%;
  }
}

/* ── SPRINT-F3: Hero mobile ── */
@media (max-width: 768px) {
  .hero {
    padding-block: 3.5rem;
    min-height: auto;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .hero__badge {
    margin-inline: auto;
  }
  .hero__title {
    font-size: clamp(1.9rem, 7vw, 2.4rem);
    letter-spacing: -0.02em;
  }
  .hero__subtitle {
    max-width: 100%;
    margin-inline: auto;
  }
  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero__stats-block {
    padding: 1.25rem;
  }
  .hero__stats-label span {
    font-size: 10px;
  }
  .hero__stat-num {
    font-size: 1.8rem;
  }
  .hero__trust-item {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: 1.75rem;
  }
  .hero__stats-row {
    gap: 0.75rem;
  }
}

/* ── SPRINT-F4: Grids de secciones mobile ── */
@media (max-width: 768px) {

  /* Quiénes somos — stats */
  .about2__stats {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .about2__stat {
    width: 100%;
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--color-gray-100);
    align-items: center;
  }
  .about2__stat:last-child {
    border-bottom: none;
  }
  .about2__stat-divider {
    display: none;
  }
  .about2__stat-num {
    font-size: 2.8rem;
  }

  /* Servicios 2x2 */
  .services2__grid {
    grid-template-columns: 1fr;
  }
  .services2__item {
    border-right: none;
    border-bottom: 1px solid var(--color-gray-100);
    padding: 1.5rem;
  }
  .services2__item:last-child {
    border-bottom: none;
  }

  /* Audiencia */
  .audience2__grid {
    grid-template-columns: 1fr;
  }
  .audience2__item {
    border-right: none;
    border-bottom: 1px solid var(--color-gray-100);
    padding: 1.75rem 1.5rem;
  }
  .audience2__item:last-child {
    border-bottom: none;
  }

  /* Transparencia split */
  .legal2__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .legal2__left {
    position: static;
  }
  .legal2__left .btn {
    width: 100%;
    justify-content: center;
  }

   /* Bancos */
   .banks__logos {
     flex-direction: column;
     gap: 1rem;
     align-items: center;
     width: 100%;
   }
   .banks__sep {
     width: 60px;
     height: 1px;
   }
   .banks__logo-box {
     width: 100%;
     max-width: 220px;
     flex-shrink: 0;
   }
   .banks__label span {
     font-size: 10px;
   }

   /* Clientes/sectores */
   .clients__logos {
     gap: 0.5rem;
     justify-content: center;
     flex-wrap: wrap;
   }
   .clients__logo-placeholder {
     font-size: 11px;
     padding: 0.4rem 0.75rem;
     white-space: normal;
   }
   .clients__logo-item img {
     max-width: 100%;
     height: auto;
   }

  /* Tabla comparativa */
  .comparison__table-wrapper {
    font-size: 11px;
  }
  .comparison__th-feature,
  .comparison__feature {
    display: none;
  }
  .comparison__manual,
  .comparison__menetan {
    width: 50%;
    padding: 0.6rem 0.75rem;
  }
}

/* ── SPRINT-F5: Sistema y FAQ mobile ── */
@media (max-width: 768px) {

  /* Sistema Fase 2 */
  .sistema__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .sistema__title {
    font-size: 1.75rem;
  }
  .sistema__left {
    align-items: stretch;
  }
  .sistema__left .btn--gold {
    width: 100%;
    justify-content: center;
  }
  .sistema__feature {
    gap: 1rem;
  }
  .sistema__feature-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  /* FAQ */
  .faq__list {
    max-width: 100%;
  }
  .faq__question {
    font-size: 0.9rem;
    padding: 1rem 1.25rem;
  }
  .faq__answer p {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.875rem;
  }

  /* Contacto */
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact__form-wrapper {
    padding: 1.25rem;
  }
  .contact__info-title {
    font-size: 1rem;
  }
}
/* ── SPRINT-F6: Footer y globales mobile ── */
@media (max-width: 768px) {

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-block: 3rem;
  }
  .footer__bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }

  /* Section headers */
  .section-header {
    margin-bottom: 2.5rem;
  }
  .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  .section-subtitle {
    font-size: 0.9rem;
  }

  /* Timeline */
  .timeline2 {
    padding-left: 0;
  }
  .timeline2__item {
    grid-template-columns: 28px 1fr;
    gap: 1rem;
  }
  .timeline2__content {
    padding-bottom: 2rem;
  }
  .timeline2__title {
    font-size: 1rem;
  }
  .timeline2__text {
    font-size: 0.875rem;
  }

  /* Alert section */
  .alert-section__inner {
    grid-template-columns: 1fr;
  }
  .alert-section__icon {
    display: none;
  }
  .alert-section__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .alert-section__cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Sección general padding */
  .section {
    padding-block: 3.5rem;
  }
}

@media (max-width: 480px) {
  .section {
    padding-block: 2.5rem;
  }
  .container {
    padding-inline: 1rem;
  }
  .navbar__logo img {
    height: 36px;
  }
  .about2__stat-num {
    font-size: 2.4rem;
  }
}