/*
 * Eduard Sedó Glass — Clean professional medical style
 * Inspirado en cotxe-net. Sin glassmorphism, plano, sólido.
 * v2.0
 */

/* ============================================
   1. BASE
   ============================================ */

body.es-glass-active {
    background: var(--bg-base) !important;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-base);
    line-height: var(--leading-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.es-glass-active h1,
body.es-glass-active h2,
body.es-glass-active h3,
body.es-glass-active h4,
body.es-glass-active .entry-title {
    font-family: var(--font-display);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
}

body.es-glass-active h1 { font-size: var(--font-3xl); font-weight: 700; }
body.es-glass-active h2 { font-size: var(--font-2xl); font-weight: 700; }
body.es-glass-active h3 { font-size: var(--font-xl); font-weight: 600; }
body.es-glass-active h4 { font-size: var(--font-lg); font-weight: 600; }

body.es-glass-active a {
    color: var(--brand-500);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-base);
}
body.es-glass-active a:hover { color: var(--brand-700); }

body.es-glass-active p {
    color: var(--text-secondary);
}

/* ============================================
   2. TOP BAR (cinta fina arriba con datos contacto)
   ============================================ */

body.es-glass-active .es-topbar {
    background: var(--brand-900);
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 24px;
    font-size: var(--font-xs);
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 100;
}
body.es-glass-active .es-topbar a {
    color: rgba(255, 255, 255, 0.85);
}
body.es-glass-active .es-topbar a:hover { color: white; }
body.es-glass-active .es-topbar-info {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    body.es-glass-active .es-topbar { font-size: 0.7rem; padding: 6px 14px; }
    body.es-glass-active .es-topbar-info { gap: 12px; }
}

/* ============================================
   3. HEADER (Astra) — fondo blanco sólido fijo arriba
   ============================================ */

body.es-glass-active .ast-builder-grid-row-container,
body.es-glass-active .site-header,
body.es-glass-active .main-header-bar,
body.es-glass-active .ast-primary-header-bar {
    background: var(--bg-base) !important;
    box-shadow: var(--shadow-sm) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

body.es-glass-active .main-header-container,
body.es-glass-active .site-header > .ast-builder-grid-row-container-inner,
body.es-glass-active .ast-primary-header-bar > .site-primary-header-wrap {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: 12px 24px !important;
}

body.es-glass-active .site-content {
    padding-top: 0;
}

body.es-glass-active .site-title {
    font-family: var(--font-display);
    font-size: var(--font-md) !important;
    font-weight: 700;
    color: var(--brand-900) !important;
}
body.es-glass-active .site-title a {
    color: var(--brand-900) !important;
}

body.es-glass-active .main-header-menu .menu-item > a,
body.es-glass-active .ast-builder-menu-1 .menu-item > a {
    color: var(--text-primary) !important;
    font-weight: 500;
    font-size: var(--font-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 8px 16px !important;
    transition: color var(--dur-fast) var(--ease-base);
}
body.es-glass-active .main-header-menu .menu-item > a:hover,
body.es-glass-active .main-header-menu .current-menu-item > a {
    color: var(--brand-500) !important;
    background: transparent !important;
}

/* ============================================
   4. BOTONES
   ============================================ */

body.es-glass-active .wp-block-button__link,
body.es-glass-active button[type="submit"],
body.es-glass-active input[type="submit"],
body.es-glass-active .ast-button,
body.es-glass-active .es-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px !important;
    border-radius: var(--r-button) !important;
    background: var(--brand-500) !important;
    border: 1px solid var(--brand-500) !important;
    color: var(--text-inverse) !important;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--font-sm);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    min-height: 48px;
    box-shadow: var(--shadow-sm);
    transition:
        background var(--dur-fast) var(--ease-base),
        transform var(--dur-fast) var(--ease-base),
        box-shadow var(--dur-fast) var(--ease-base);
}

body.es-glass-active .wp-block-button__link:hover,
body.es-glass-active button[type="submit"]:hover,
body.es-glass-active .es-btn:hover {
    background: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

body.es-glass-active .wp-block-button__link:focus-visible,
body.es-glass-active .es-btn:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 3px;
}

/* Botón outline */
body.es-glass-active .is-style-outline .wp-block-button__link,
body.es-glass-active .es-btn-outline {
    background: transparent !important;
    color: var(--brand-500) !important;
    border: 1.5px solid var(--brand-500) !important;
}
body.es-glass-active .is-style-outline .wp-block-button__link:hover,
body.es-glass-active .es-btn-outline:hover {
    background: var(--brand-500) !important;
    color: white !important;
}

/* Botón outline blanco (sobre fondos oscuros como hero) */
body.es-glass-active .es-btn-outline-white,
body.es-glass-active .wp-block-cover .is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: white !important;
    border: 1.5px solid white !important;
}
body.es-glass-active .es-btn-outline-white:hover,
body.es-glass-active .wp-block-cover .is-style-outline .wp-block-button__link:hover {
    background: white !important;
    color: var(--brand-700) !important;
}

/* ============================================
   5. SECCIONES
   ============================================ */

body.es-glass-active .es-section {
    padding: 80px 24px;
    max-width: 100%;
}
body.es-glass-active .es-section-inner {
    max-width: var(--max-content);
    margin: 0 auto;
}
body.es-glass-active .es-section--alt { background: var(--bg-elevated); }
body.es-glass-active .es-section--deep { background: var(--bg-deep); }

@media (max-width: 768px) {
    body.es-glass-active .es-section { padding: 56px 16px; }
}

/* ============================================
   6. SECTION HEAD (eyebrow + título + lead)
   ============================================ */

body.es-glass-active .es-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

body.es-glass-active .es-eyebrow {
    display: inline-block;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--brand-500);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
}

body.es-glass-active .es-section-head h2 {
    margin: 0 0 16px;
    color: var(--brand-900);
}

body.es-glass-active .es-section-head p {
    color: var(--text-secondary);
    font-size: var(--font-md);
    line-height: var(--leading-base);
}

/* ============================================
   7. STRENGTHS — 3 col con icono
   ============================================ */

body.es-glass-active .es-strengths {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: var(--max-content);
    margin: 0 auto;
}
body.es-glass-active .es-strength {
    text-align: center;
    padding: 32px 24px;
}
body.es-glass-active .es-strength-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--brand-100);
    color: var(--brand-700);
    border-radius: 50%;
    margin-bottom: 20px;
    font-size: 32px;
}
body.es-glass-active .es-strength-title {
    font-family: var(--font-display);
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--brand-900);
    margin: 0 0 12px;
}
body.es-glass-active .es-strength-desc {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: var(--leading-base);
}
@media (max-width: 768px) {
    body.es-glass-active .es-strengths { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================
   8. EXPERIENCE — 2 col imagen + texto
   ============================================ */

body.es-glass-active .es-experience {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: var(--max-content);
    margin: 0 auto;
}
body.es-glass-active .es-experience-image {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: var(--shadow-md);
}
body.es-glass-active .es-experience-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 768px) {
    body.es-glass-active .es-experience { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   9. SERVICE CARD — 4-grid con imagen + número
   ============================================ */

body.es-glass-active .es-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: var(--max-content);
    margin: 0 auto;
}
@media (max-width: 1024px) { body.es-glass-active .es-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { body.es-glass-active .es-services-grid { grid-template-columns: 1fr; } }

body.es-glass-active .es-service-card {
    display: block;
    background: var(--bg-base);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    text-decoration: none !important;
    transition: transform var(--dur-base) var(--ease-base), box-shadow var(--dur-base) var(--ease-base);
    border: 1px solid var(--border-light);
}
body.es-glass-active .es-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}
body.es-glass-active .es-service-card-image {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}
body.es-glass-active .es-service-card-body {
    padding: 24px;
}
body.es-glass-active .es-service-card-num {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--brand-500);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
body.es-glass-active .es-service-card-title {
    font-family: var(--font-display);
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--brand-900) !important;
    margin: 0 0 8px;
    line-height: 1.3;
}
body.es-glass-active .es-service-card-desc {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    line-height: var(--leading-base);
    margin: 0;
}

/* ============================================
   10. NUMBERED block
   ============================================ */

body.es-glass-active .es-numbered .es-num {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brand-300);
    line-height: 1;
    margin-bottom: 12px;
}

/* ============================================
   11. BREADCRUMB
   ============================================ */

body.es-glass-active .es-breadcrumb {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-light);
    padding: 16px 24px;
    font-size: var(--font-sm);
    color: var(--text-muted);
}
body.es-glass-active .es-breadcrumb-inner {
    max-width: var(--max-content);
    margin: 0 auto;
}
body.es-glass-active .es-breadcrumb a { color: var(--text-secondary); }
body.es-glass-active .es-breadcrumb a:hover { color: var(--brand-500); }
body.es-glass-active .es-breadcrumb .sep {
    margin: 0 10px;
    opacity: 0.5;
}

/* ============================================
   12. CTA BAND
   ============================================ */

body.es-glass-active .es-cta-band {
    background: var(--brand-700);
    color: white;
    padding: 64px 24px;
    text-align: center;
}
body.es-glass-active .es-cta-band h2 {
    color: white !important;
    margin: 0 0 16px;
}
body.es-glass-active .es-cta-band p {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-md);
    max-width: 640px;
    margin: 0 auto 32px;
}
body.es-glass-active .es-cta-band .wp-block-button__link {
    background: white !important;
    color: var(--brand-700) !important;
    border-color: white !important;
}
body.es-glass-active .es-cta-band .wp-block-button__link:hover {
    background: var(--brand-100) !important;
    color: var(--brand-900) !important;
}

/* ============================================
   13. FORMULARIO Contact Form 7
   ============================================ */

body.es-glass-active .wpcf7 input[type="text"],
body.es-glass-active .wpcf7 input[type="email"],
body.es-glass-active .wpcf7 input[type="tel"],
body.es-glass-active .wpcf7 textarea,
body.es-glass-active .wpcf7 select {
    width: 100%;
    padding: 14px 16px;
    background: white;
    border: 1px solid var(--border-medium);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--font-base);
    color: var(--text-primary);
    transition: border-color var(--dur-fast) var(--ease-base),
                box-shadow var(--dur-fast) var(--ease-base);
}
body.es-glass-active .wpcf7 input:focus,
body.es-glass-active .wpcf7 textarea:focus,
body.es-glass-active .wpcf7 select:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}
body.es-glass-active .wpcf7 label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: var(--font-sm);
}

/* ============================================
   14. CONTENIDO EDITORIAL
   ============================================ */

body.es-glass-active .entry-content {
    max-width: var(--max-readable);
    margin: 0 auto;
    font-size: var(--font-md);
    line-height: var(--leading-base);
}
body.es-glass-active .entry-content > .alignwide,
body.es-glass-active .entry-content > .alignfull {
    max-width: 100%;
}
body.es-glass-active .entry-content p {
    color: var(--text-primary);
}
body.es-glass-active .entry-content blockquote {
    border-left: 3px solid var(--brand-500);
    padding-left: 24px;
    color: var(--text-primary);
    font-size: var(--font-md);
    font-style: italic;
}

/* ============================================
   15. FOOTER
   ============================================ */

body.es-glass-active .site-footer,
body.es-glass-active .footer-widget-area,
body.es-glass-active .ast-small-footer {
    background: var(--brand-900) !important;
    color: rgba(255, 255, 255, 0.7);
    border-top: 0;
    padding-top: 64px;
    padding-bottom: 24px;
}
body.es-glass-active .site-footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}
body.es-glass-active .site-footer a:hover {
    color: white;
}
body.es-glass-active .site-footer h2,
body.es-glass-active .site-footer h3,
body.es-glass-active .site-footer h4,
body.es-glass-active .site-footer .widget-title {
    color: white !important;
    font-size: var(--font-sm) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px !important;
}

/* ============================================
   16. UTILITIES
   ============================================ */

body.es-glass-active .text-center { text-align: center; }
body.es-glass-active .text-white  { color: white !important; }

body.es-glass-active ::selection {
    background: var(--brand-200);
    color: var(--brand-900);
}

/* Skip link a11y */
body.es-glass-active .skip-link:focus {
    background: white;
    color: var(--brand-700);
    border: 2px solid var(--brand-500);
    padding: 12px 18px;
    font-weight: 600;
}

/* ============================================
   17. Ocultar entry-title automático de Astra en home
   ============================================ */
body.es-home .entry-header,
body.es-home .ast-page-builder-template .entry-header,
body.es-home .entry-title,
body.es-home > main > .entry-header,
body.es-home article > header.entry-header {
    display: none !important;
}
/* Que el contenido empiece pegado al header */
body.es-home .site-content,
body.es-home .ast-container,
body.es-home #primary {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.es-home .entry-content {
    margin-top: 0 !important;
    max-width: 100% !important;
}

/* ============================================
   18. TOP BAR — versión cotxe-net (info izq + social der)
   ============================================ */

body.es-glass-active .es-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
}
body.es-glass-active .es-topbar-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}
body.es-glass-active a.es-topbar-item:hover {
    color: white;
}
body.es-glass-active a.es-topbar-item:hover svg {
    opacity: 1;
}

body.es-glass-active .es-topbar-social {
    display: flex;
    gap: 4px;
    align-items: center;
}
body.es-glass-active .es-topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: rgba(255, 255, 255, 0.65);
    border-radius: 4px;
    transition: color var(--dur-fast) var(--ease-base), background var(--dur-fast) var(--ease-base);
}
body.es-glass-active .es-topbar-icon:hover {
    color: white;
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
    body.es-glass-active .es-topbar-social { display: none; }
    body.es-glass-active .es-topbar-info { font-size: 0.7rem; }
}

/* ============================================
   19. HEADER CTAs — 2 botones derecha
   ============================================ */

body.es-glass-active .es-header-cta {
    display: inline-flex;
    margin-left: 8px;
    list-style: none;
}
body.es-glass-active .es-header-cta > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px !important;
    font-family: var(--font-display);
    font-weight: 600 !important;
    font-size: var(--font-xs) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em !important;
    text-decoration: none;
    border-radius: var(--r-button) !important;
    line-height: 1;
    min-height: 40px;
    transition: all var(--dur-fast) var(--ease-base);
    background: transparent !important;
}

/* Outline CTA (Contacto) */
body.es-glass-active .es-header-cta--outline > a {
    color: var(--brand-700) !important;
    border: 1.5px solid var(--brand-300) !important;
}
body.es-glass-active .es-header-cta--outline > a:hover {
    background: var(--brand-50) !important;
    border-color: var(--brand-500) !important;
    color: var(--brand-700) !important;
}

/* Solid CTA (Pedir cita) */
body.es-glass-active .es-header-cta--solid > a {
    color: white !important;
    background: var(--brand-500) !important;
    border: 1.5px solid var(--brand-500) !important;
}
body.es-glass-active .es-header-cta--solid > a:hover {
    background: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
    color: white !important;
}

/* En móvil, ocultar CTAs (ya están en el menú móvil) */
@media (max-width: 921px) {
    body.es-glass-active .es-header-cta { display: none !important; }
}

/* Separador visual entre items del menú (estilo cotxe-net) */
body.es-glass-active .main-header-menu > .menu-item:not(.es-header-cta):not(:last-child)::after,
body.es-glass-active .ast-builder-menu-1 .menu > .menu-item:not(.es-header-cta):not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 14px;
    background: var(--border-medium);
    vertical-align: middle;
    margin-left: 8px;
    opacity: 0.6;
}

/* Cuando llegue el primer es-header-cta, evitar que el separador anterior aparezca */
body.es-glass-active .main-header-menu > .es-header-cta + .menu-item::before,
body.es-glass-active .menu > .es-header-cta:first-of-type {
    margin-left: 16px;
}