/* ============================================================
   630x320 — Mobile (320px – 630px)
   ============================================================ */

:root {
    --px: 1rem;
    --section-py-three: 25px;
}

/* ── HEADER ────────────────────────────────────────────────── */

#header .header-brand {
    width: 62%;
}
#header .header-logo {
    width: 230px;
}
#header .header-cta {
    padding: 10px 15px;
    font-size: 0.8rem;
}

/* Ocultar última palabra del CTA en móvil */
#header .header-cta span {
    display: none;
}

/* ── HAMBURGUESA — aplica en 630x320 ────────────────────────  */

/* Ocultar nav por defecto en móvil */
#header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--white);
    box-shadow: var(--shadow-md);
    padding: 0.75rem var(--px);
    z-index: 39;
}

#header-nav.is-open {
    display: block;
}

#header-nav .header-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

#header-nav .header-menu li a {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--gray-100);
    border-radius: 0;
    font-size: 0.95rem;
}

#header-nav .header-menu li:last-child a {
    border-bottom: none;
}

/* Sub-menu en mobile — desplegable inline */
#header-nav .header-menu .sub-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background-color: var(--gray-50);
}

#header-nav .header-menu .sub-menu li a {
    padding-left: 1.5rem;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--gray-100);
    border-radius: 0;
}

#header-nav .header-menu li.menu-item-has-children > a::after {
    margin-left: auto;
}

/* Mostrar hamburguesa */
#header .header-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

#header .header-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-dark);
    border-radius: 9999px;
    transition: transform var(--transition), opacity var(--transition);
    transform-origin: center;
}

/* Animación X al abrir */
#header .header-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
#header .header-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}
#header .header-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Header position relative para que el nav absolute se posicione bien */
#header {
    position: sticky;
    top: 0;
    z-index: 40;
}

#header .header-inner {
    position: relative;
}

/* ============================================================
   HERO — 630x320 (mobile)
   Agregar en css/630x320.css
   ============================================================ */
 
#hero {
    padding: 30px var(--px);
}
#hero .hero-inner{
    grid-template-columns: 1fr;
}
#hero .hero-title {
    font-size: 2rem;
}
 
#hero .hero-desc {
    font-size: 0.95rem;
}
 
#hero .hero-actions {
    flex-direction: column;
}
 
#hero .hero-btn-primary,
#hero .hero-btn-wa {
    justify-content: center;
    padding: 0.85rem 1.5rem;
    font-size: 0.95rem;
}
 
#hero .hero-stats {
    gap: 0.5rem;
    flex-wrap: wrap;
}
#hero .hero-stat{
    width: 30%;
    text-align: center;
}
 
#hero .hero-stat-number {
    font-size: 1.6rem;
}
 
#hero .hero-card-img {
    aspect-ratio: 3 / 2;
}

/* ============================================================
   VENTAJAS — 630x320 (mobile)
   Agregar en css/630x320.css
   ============================================================ */
 
#ventajas {
    padding: var(--section-py) var(--px);
}
 
#ventajas .ventajas-inner {
    gap: 1.75rem;
}
 
#ventajas .ventajas-title {
    font-size: 1.75rem;
}
 
#ventajas .ventajas-desc {
    font-size: 0.9rem;
}
 
#ventajas .ventajas-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
}
 
#ventajas .ventaja-card {
    padding: 1.25rem 0.875rem;
    gap: 0.625rem;
}
 
#ventajas .ventaja-icon {
    width: 56px;
    height: 56px;
}
 
#ventajas .ventaja-icon i {
    font-size: 1.35rem;
}
 
#ventajas .ventajas-banner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
}
 
#ventajas .ventajas-banner-title {
    font-size: 1.3rem;
}
 
#ventajas .ventajas-banner-img {
    aspect-ratio: 4 / 3;
}

/* ============================================================
   PROCEDIMIENTOS — 630x320 (mobile)
   Agregar en css/630x320.css
   ============================================================ */
#procedimientos {
    padding: var(--section-py) var(--px);
}
 
#procedimientos .procedimientos-grid {
    grid-template-columns: 1fr;
}
 
#procedimientos .procedimientos-title {
    font-size: 1.75rem;
}
 
#procedimientos .proc-card-img {
    aspect-ratio: 4 / 3;
}
 
#procedimientos .proc-card-body {
    padding: 1.25rem;
}
 
#procedimientos .proc-card-monto {
    font-size: 1.1rem;
}

/* ============================================================
   ANTES Y DESPUÉS — 630x320 (mobile)
   Agregar en css/630x320.css
   ============================================================ */

#antes-despues .ad-title {
    font-size: 1.75rem;
}

#antes-despues .ad-card-principal {
    grid-template-columns: 1fr;
    gap: 1rem;
}

#antes-despues .ad-casos-grid {
    grid-template-columns: 1fr;
}

/* ============================================================
   TESTIMONIOS — 630x320 (mobile)
   Agregar en css/630x320.css
   ============================================================ */
#testimonios .testi-title {
    font-size: 1.75rem;
}

#testimonios .testi-videos-grid {
    grid-template-columns: 1fr;
}

#testimonios .testi-google-grid {
    grid-template-columns: 1fr;
}

#testimonios .testi-google-header {
    flex-direction: column;
    gap: 0.75rem;
}

/* ============================================================
   DOCTOR — 630x320 (mobile)
   Agregar en css/630x320.css
   ============================================================ */
#doctor .doctor-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

#doctor .doctor-foto {
    max-width: 280px;
    margin: 0 auto;
}

#doctor .doctor-nombre {
    font-size: 1.75rem;
}

/* ============================================================
   CONTACTO — 630x320 (mobile)
   Agregar en css/630x320.css
   ============================================================ */
#contacto .contacto-grid {
    grid-template-columns: 1fr;
}

#contacto .contacto-title {
    font-size: 1.75rem;
}

#contacto .cf7-row-2 {
    grid-template-columns: 1fr;
}

#contacto .contacto-form-card {
    padding: 1.25rem;
}

/* ============================================================
   FOOTER — 630x320 (mobile)
   Agregar en css/630x320.css
   ============================================================ */
#footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 2rem var(--px) 1.5rem;
}

#footer .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

#footer .footer-legal {
    gap: 1rem;
}

#wa-chicklet {
    bottom: 1rem;
    right: 1rem;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
}

/* ============================================================
   ABOUT — 630x320 (mobile) — descomentar en 630x320.css
   ============================================================ */
#about-hero { height: 360px; }
#about-hero .about-hero-title { font-size: 1.75rem; }

#about-story .about-story-grid { grid-template-columns: 1fr; gap: 1.5rem; }
#about-story .about-story-textos { grid-template-columns: 1fr; }
#about-story .about-story-img-wrap { height: 280px; }
#about-story .about-story-ctas { flex-direction: column; }
.about-btn-primary { justify-content: center; }

#about-valor .about-valor-banner { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem; }
#about-valor .about-valor-titulo { font-size: 1.5rem; }
#about-valor .about-valor-cards { grid-template-columns: 1fr; }

#about-facilities .about-facilities-grid { grid-template-columns: 1fr; }
#about-facilities .about-facilities-features { grid-template-columns: 1fr; }
#about-facilities .about-video-wrap { min-height: 260px; }
#about-facilities .about-facilities-slider { height: 240px; }

#about-faqs .about-faqs-grid { grid-template-columns: 1fr; }
#about-faqs .about-faqs-title { font-size: 1.75rem; }

/* ============================================================
   MÉDICOS — 630x320 (mobile) — descomentar en 630x320.css
   ============================================================ */
#medicos-hero { height: 340px; border-radius: 0.75rem; margin: 1rem var(--px); }
#medicos-hero .medicos-hero-title { font-size: 1.75rem; }
#medicos-hero .medicos-hero-content { padding: 1.25rem; }

#medicos-filosofia .medicos-filosofia-grid { grid-template-columns: 1fr; }
#medicos-filosofia .medicos-filosofia-title { font-size: 1.75rem; }

#medicos-especialistas .medicos-especialistas-grid { grid-template-columns: repeat(2, 1fr); }
#medicos-especialistas .medicos-especialistas-title { font-size: 1.75rem; }
#medicos-especialistas .medicos-esp-foto { height: 200px; }

#medicos-faqs .medicos-faqs-grid { grid-template-columns: 1fr; }
#medicos-faqs .medicos-faqs-title { font-size: 1.75rem; }

#medicos-contacto .medicos-form-card { padding: 1.25rem; }
#medicos-contacto .cf7-row-2 { grid-template-columns: 1fr; }
#medicos-contacto .medicos-contacto-title { font-size: 1.75rem; }

/* ============================================================
   PERFIL — 630x320 (mobile) — descomentar en 630x320.css
   ============================================================ */
#perfil-bio .perfil-hero { height: 340px; }
#perfil-bio .perfil-hero-nombre { font-size: 1.75rem; }
#perfil-bio .perfil-hero-inner { margin-left: var(--px); }
#perfil-bio .perfil-bio-grid { grid-template-columns: 1fr; gap: 1.5rem; }
#perfil-bio .perfil-video-wrap { width: 100%; max-width: 320px; margin: 0 auto; }
#perfil-bio .perfil-video-col { justify-content: center; }

#perfil-credentials .perfil-credentials-grid { grid-template-columns: 1fr; }
#perfil-credentials .perfil-credentials-title { font-size: 1.75rem; }

#perfil-faqs .perfil-faqs-grid { grid-template-columns: 1fr; }
#perfil-faqs .perfil-faqs-title { font-size: 1.75rem; }

#perfil-form .perfil-form-card { padding: 1.25rem; }
#perfil-form .cf7-row-2 { grid-template-columns: 1fr; }
#perfil-form .perfil-form-title { font-size: 1.75rem; }
#perfil-form .perfil-form-garantias { flex-direction: column; gap: 0.75rem; }

/* ============================================================
   SERVICIOS — 630x320 (mobile) — descomentar en 630x320.css
   ============================================================ */
#serv-hero { height: 380px; }
#serv-hero .serv-hero-title { font-size: 1.75rem; }
#serv-hero .serv-hero-ctas { flex-direction: column; }
 
#serv-innovacion .serv-innovacion-grid { grid-template-columns: 1fr; }
#serv-innovacion .serv-inn-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
 
#serv-soluciones .serv-soluciones-grid { grid-template-columns: 1fr; }
#serv-soluciones .serv-sol-card-img { height: 220px; }
#serv-soluciones .serv-sol-cta-banner { flex-direction: column; }
 
#serv-galeria .serv-gal-col { height: 280px; }
#serv-galeria .serv-gal-stats { grid-template-columns: repeat(2, 1fr); }
#serv-galeria .serv-gal-btn { width: 42px; height: 42px; font-size: 0.9rem; }
 
#serv-faqs .serv-faqs-grid { grid-template-columns: 1fr; }
 
#serv-form .serv-form-card { padding: 1.25rem; }
#serv-form .cf7-row-2 { grid-template-columns: 1fr; }
#serv-form .serv-form-garantias { flex-direction: column; gap: 0.75rem; }
 
/* Agregar en 630x320.css */
.bc-inner {
    font-size: 0.8rem;
}
 
.bc-current {
    max-width: 180px;
}

/* ============================================================
   SERVICIO DETALLE — 630x320 (mobile) — descomentar en 630x320.css
   ============================================================ */
   
#sl2-hero-wrap { padding: 1rem var(--px); }
#sl2-hero-wrap .sl2-hero-container { height: 380px; border-radius: 1rem; }
#sl2-hero-wrap .sl2-hero-title { font-size: 1.9rem; }
#sl2-hero-wrap .sl2-hero-content { padding: 0 1.5rem; }
 
#sl2-descripcion .sl2-descripcion-grid { grid-template-columns: 1fr; gap: 1.5rem; }
#sl2-descripcion .sl2-descripcion-img { min-height: 260px; padding: 1.5rem; }
 
#sl2-beneficios .sl2-beneficios-grid { grid-template-columns: repeat(1, 1fr); }
#sl2-beneficios .sl2-ben-stats { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
#sl2-beneficios .sl2-ben-stat-num { font-size: 1.75rem; }
 
#sl2-galeria .sl2-gal-col { height: 280px; }
#sl2-galeria .sl2-gal-btn { width: 42px; height: 42px; font-size: 0.9rem; }
 
#sl2-galeria .sl2-faqs-grid { grid-template-columns: 1fr; }
 
#sl2-form .sl2-form-card { padding: 1.25rem; }
#sl2-form .cf7-row-2 { grid-template-columns: 1fr; }
#sl2-form .sl2-form-garantias { flex-direction: column; gap: 0.75rem; }
 
/* Slider antes/después — columna en mobile */
#sl2-galeria .sl2-gal-antes-despues {
    grid-template-columns: 1fr;
}
 
#sl2-galeria .sl2-gal-col {
    height: 260px;
    width: 80%;
}
#sl2-galeria .sl2-gal-caption {
    padding: 1.5rem 1rem;
    width: calc(100% - 2rem);
}    
/* Badge ANTES: arriba izq / DESPUÉS: arriba der → en mobile ambos arriba izq */
#sl2-galeria .sl2-gal-badge--antes {
    left: 1rem;
    top: 1rem;
}
 
#sl2-galeria .sl2-gal-badge--despues {
    right: auto;
    left: 1rem;
    top: 1rem;
}
 
/* Botones slider — centrados verticalmente sobre el stack */
#sl2-galeria .sl2-gal-btn {
    top: calc(260px - 28px); /* altura de la primera col + ajuste */
}
 
/* Mismo fix para serv-galeria */
#serv-galeria .serv-gal-antes-despues {
    grid-template-columns: 1fr;
}
 
#serv-galeria .serv-gal-col {
    height: 260px;
}
 
#serv-galeria .serv-gal-badge--antes {
    left: 1rem;
    top: 1rem;
}
 
#serv-galeria .serv-gal-badge--despues {
    right: auto;
    left: 1rem;
    top: 1rem;
}
 
#serv-galeria .serv-gal-btn {
    top: calc(260px - 28px);
}

/* ============================================================
   TESTIMONIOS — 630x320 (mobile) — descomentar en 630x320.css
   ============================================================ */
.test-section-title { font-size: 1.75rem; }
.test-section-desc-grid { grid-template-columns: 1fr; }

#test-videos .test-vid-grid { grid-template-columns: 1fr; }
#test-videos .test-vid-card--featured { grid-row: auto; }
#test-videos .test-vid-card--featured .test-vid-thumb { min-height: 300px; }
#test-videos .test-vid-thumb { min-height: 200px; }

#test-slider .test-sl-cols { grid-template-columns: 1fr; }
#test-slider .test-sl-col { height: 260px; }
#test-slider .test-sl-badge--despues { right: auto; left: 1rem; }
#test-slider .test-sl-btn { top: calc(260px - 28px); }

#test-mosaico .test-mos-grid { grid-template-columns: 1fr; }
#test-mosaico .test-mos-item { height: 260px; }

#test-google .test-goo-grid { grid-template-columns: 1fr; }

#test-form .test-form-card { padding: 1.25rem; }
#test-form .cf7-row-2 { grid-template-columns: 1fr; }