/*
Theme Name:   Astra Child — CC Consulting
Theme URI:    https://ccconsulting.cl
Description:  Tema hijo de Astra para Critical Care Consulting. Maquetado a mano (PHP + Bootstrap + CSS propio + ACF).
Author:       CC Consulting
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/* =========================================================
   VARIABLES (tokens del Figma)
   ========================================================= */
:root {
    --primario: #172d5f;            /* azul de marca: títulos, botones y fondos oscuros */
    --primarioOscuro: #010a1f;      /* fin del gradiente de la banda "enfoque" */
    --boton: #172d5f;               /* blanco sobre #172d5f = 13.5:1, AA de sobra */
    --blanco: #ffffff;
    --texto: #3b4a68;               /* cuerpo sobre fondos claros (8.6:1 sobre #fff) */
    --bg: #f2f7fc;                  /* fondo general claro y de cards */
    --background: #f2f7fc;
    --border: 1px solid rgba(59, 74, 104, .1);
    --border-light: 1px solid rgba(255, 255, 255, .12);
    --muted: rgba(23, 45, 95, .6);  /* segunda parte atenuada de los títulos */
    --muted-light: rgba(255, 255, 255, .6);
    --overlay: rgba(11, 19, 32, .82);
    --radius: 14px;
    --radius-lg: 16px;
    --pill: 999px;
    --padding: 28px;

    --font-titulo: 'Geist', 'Inter', system-ui, sans-serif;
    --font-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* =========================================================
   BASE
   ========================================================= */
/* Lenis maneja el scroll suave: "auto" evita que el smooth nativo pelee con él */
html {
    scroll-behavior: auto !important;
    background: var(--bg) !important;
    margin: 0 !important;
}

body {
    font-family: var(--font-texto);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.002em;
    background: transparent;
    color: var(--texto);
    text-wrap: balance;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p { text-wrap: pretty; }

img { max-width: 100%; height: auto; }

/* Admin bar fuera del front: el header es fijo y la barra lo empuja */
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }

::-moz-selection { background: var(--primario); color: var(--blanco); }
::selection      { background: var(--primario); color: var(--blanco); }

/* Scrollbar fina con el azul de marca */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); border-radius: 0; }
::-webkit-scrollbar-thumb {
    background: var(--primario);
    border-radius: 5px;
    -webkit-transition: .3s;
    transition: .3s;
}
::-webkit-scrollbar-thumb:hover { background: var(--primarioOscuro); }
/* Firefox no soporta ::-webkit-scrollbar: usa estas dos propiedades. Van dentro de
   @supports porque Chrome 121+ ignora ::-webkit-scrollbar si encuentra scrollbar-color */
@supports (-moz-appearance: none) {
    html { scrollbar-width: thin; scrollbar-color: var(--primario) var(--bg); }
}

/* Astra mete un contenedor con max-width y padding alrededor del contenido:
   en nuestras páginas lo liberamos para que cada sección use su propio .container */
.cc-app #content > .ast-container,
.cc-app .site-content > .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
    display: block !important;
}
.cc-app #primary { margin: 0 !important; padding: 0 !important; width: 100% !important; }
.cc-app .site-content { padding: 0 !important; }
/* Astra estira #content para empujar el footer abajo: si la página es más corta
   que la ventana, que el hueco tenga el fondo del sitio y no blanco */
.cc-app #page,
.cc-app .site-content { background: var(--bg) !important; }

/* Grilla del Figma: 1200px de contenido con 120px de margen a 1440 */
@media (min-width: 1400px) {
    .cc-app .container { max-width: 1224px; } /* 1200 + 2×12px de gutter de Bootstrap */
}

/* =========================================================
   TIPOGRAFÍA (con !important para pisar Astra)
   ========================================================= */
.cc-app h1, .cc-app h2, .cc-app h3, .cc-app h4 {
    font-family: var(--font-titulo) !important;
    color: var(--primario);
    margin: 0;
    text-wrap: balance;
}

.cc-app h1 {
    font-size: clamp(2.6rem, 6vw, 4.75rem) !important;   /* 76px en desktop */
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: -0.042em !important;
}
.cc-app h2 {
    font-size: clamp(2.1rem, 4vw, 3.25rem) !important;   /* 52px en desktop */
    font-weight: 400 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.038em !important;
}
.cc-app h3 {
    font-size: 1.25rem !important;                        /* 20px */
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
}
.cc-app h4 {
    font-size: 1.375rem !important;                       /* 22px */
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
}
.cc-app p { margin: 0; }

/* Segunda parte del título más tenue (patrón del Figma) */
.cc-app .muted { color: var(--muted); }
.cc-app .oscuro .muted { color: var(--muted-light); }

/* =========================================================
   UTILIDADES
   ========================================================= */
.block-section { padding: 5rem 0; }
@media (min-width: 768px)  { .block-section { padding: 6rem 0; } }
/* El Figma usa 140px de padding vertical en todas las secciones */
@media (min-width: 1200px) { .block-section { padding: 140px 0; } }

.block-title { margin-bottom: 3.5rem; }

.oscuro { background: var(--primario); color: rgba(255, 255, 255, .65); }
.oscuro h1, .oscuro h2, .oscuro h3, .oscuro h4 { color: var(--blanco) !important; }
.blanco { background: var(--blanco); }
.claro  { background: var(--bg); }

.lead-text {
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: -0.002em;
    color: var(--texto);
}
@media (min-width: 992px) { .lead-text--lg { font-size: 1.0625rem; } }

/* Eyebrow: rombito (cuadrado de 7px rotado 45°) + texto */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-texto);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--primario);
    margin: 0;
}
.eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    margin: 0 1.45px;               /* el rombo rotado ocupa 9.9px como en el Figma */
    background: currentColor;
    transform: rotate(-45deg);
    flex: none;
}
.eyebrow--light { color: rgba(255, 255, 255, .8); }
.eyebrow--light::before { background: var(--blanco); }

/* =========================================================
   BOTONES
   ========================================================= */
/* Pill del Figma: texto + círculo de 38px con flecha */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 6px 6px 6px 22px;
    min-height: 50px;
    border-radius: var(--pill);
    font-family: var(--font-texto);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.005em;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.btn-pill__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--pill);
    font-size: 16px;
    line-height: 1;
    flex: none;
    transition: transform .3s ease;
}
.btn-pill:hover { transform: translateY(-2px); }
.btn-pill:hover .btn-pill__arrow { transform: rotate(45deg); }
.btn-pill:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.btn-pill--light { background: var(--blanco); color: var(--primario) !important; }
.btn-pill--light .btn-pill__arrow { background: var(--primario); color: var(--blanco); }
.btn-pill--light:hover { box-shadow: 0 10px 30px rgba(255, 255, 255, .25); }

.btn-pill--dark { background: var(--boton); color: var(--blanco) !important; }
.btn-pill--dark .btn-pill__arrow { background: var(--blanco); color: var(--primario); }
.btn-pill--dark:hover { box-shadow: 0 10px 30px rgba(23, 45, 95, .3); }

/* Compatibilidad con la convención a.btn de otros proyectos */
a.btn {
    height: 50px;
    border-radius: 35px;
    min-width: 250px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-primary { background: var(--boton) !important; border-color: var(--boton) !important; color: var(--blanco) !important; }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(23, 45, 95, .3); transform: translateY(-2px); }
.btn-outline { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: var(--blanco) !important; }

/* =========================================================
   TAGS Y CHIPS
   ========================================================= */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid rgba(23, 45, 95, .1);
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--primario);
    white-space: nowrap;
}
.chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--pill);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--blanco);
    white-space: nowrap;
}

/* =========================================================
   ACORDEÓN (Bootstrap collapse + estilo propio)
   ========================================================= */
.cc-acc__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 0;
    background: none !important;
    border: 0;
    color: var(--primario) !important;
    text-align: left;
    cursor: pointer;
    box-shadow: none !important;
}
.cc-acc__btn:focus-visible { outline: 2px solid var(--primario); outline-offset: 4px; border-radius: 4px; }
/* Signo +/– según estado: lo maneja aria-expanded que actualiza Bootstrap */
.cc-acc__sign {
    font-family: var(--font-texto);
    font-size: 22px;
    line-height: 1.25;
    flex: none;
    width: 15px;
    text-align: center;
}
.cc-acc__sign::before { content: '+'; }
.cc-acc__btn[aria-expanded="true"] .cc-acc__sign::before { content: '–'; }

/* =========================================================
   HEADER (Astra pisado)
   ========================================================= */
.cc-app #masthead {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 20px);
    max-width: 1320px;
    border:1px solid transparent;
    z-index: 999;
    background: transparent !important;
    border-radius: 20px;
    transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.cc-app #masthead .main-header-bar,
.cc-app #masthead .ast-primary-header-bar,
.cc-app #masthead .ast-mobile-header-wrap .ast-primary-header-bar {
    background: transparent !important;
    border: 0 !important;
}
.cc-app #masthead.active {
    background: rgba(23, 45, 95, .95) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 40px rgba(1, 10, 31, .25);
    border:1px solid rgba(34, 58, 116, 0.95) !important;
}
.cc-app #masthead .site-logo-img img,
/* Logo compacto al scrollear: se achica con transform (no recalcula layout) y la
   barra baja su alto con la MISMA duración/curva, así se mueven juntos y no hay salto */
.cc-app #masthead { --hdr-ease: cubic-bezier(.22, .61, .36, 1); --hdr-dur: .45s; }
.cc-app #masthead .custom-logo {
    max-height: 80px;
    width: auto;
    transform-origin: left center;
    transition: transform var(--hdr-dur) var(--hdr-ease), margin var(--hdr-dur) var(--hdr-ease);
    will-change: transform;
}
/* scale(.65) de 80px = 52px; el margen negativo (-14px arriba y abajo) le quita al
   layout el espacio que el transform no libera, así la barra puede bajar de verdad */
.cc-app #masthead.active .custom-logo { transform: scale(.65); margin-block: -14px; }

.cc-app #masthead .main-header-menu .menu-link {
    font-family: var(--font-texto);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.003em;
    color: rgba(255, 255, 255, .85) !important;
    padding: 0 16px;
    transition: color .25s ease;
}
.cc-app #masthead .main-header-menu .menu-link:hover,
.cc-app #masthead .main-header-menu .current-menu-item > .menu-link { color: var(--blanco) !important; }

/* Ítem de menú con clase CSS "contacto" → pill blanco del Figma */
.cc-app #masthead .main-header-menu .menu-item.contacto { margin-left: 16px; }
.cc-app #masthead .main-header-menu .menu-item.contacto > .menu-link {
    background: var(--blanco);
    color: var(--primario) !important;
    border-radius: var(--pill);
    padding: 12px 20px;
    line-height: 1.6;
    height: auto;
    transition: transform .3s ease, box-shadow .3s ease;
}
.cc-app #masthead .main-header-menu .menu-item.contacto > .menu-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, .25);
}

/* Mobile (breakpoint del header de Astra) */
@media (max-width: 921px) {
    .cc-app #masthead { top: 8px; border-radius: 16px; }

    /* Logo en mobile: más grande y SIN achicarse al scrollear
       (con el scale de desktop quedaba en ~36px, ilegible) */
    .cc-app #masthead .custom-logo { max-height: 64px; }
    .cc-app #masthead.active .custom-logo { transform: none; margin-block: 0; }
    .cc-app #masthead .site-logo-img img { width: auto !important; max-width: 90px; }

    .cc-app #masthead .menu-toggle,
    .cc-app #masthead .menu-toggle .ast-mobile-svg { color: var(--blanco) !important; fill: var(--blanco) !important; background: transparent !important; }

    /* Menú abierto: todo el header (barra + desplegable) pasa a azul sólido.
       Astra pinta el ul y cada li con fondo claro desde su CSS dinámico: hay que
       ponerlos transparentes, si no los links blancos quedan sobre fondo claro */
    body.ast-main-header-nav-open.cc-app #masthead,
    .cc-app #masthead:has(.menu-toggle.toggled) {
        background: var(--primario) !important;
        box-shadow: 0 12px 40px rgba(1, 10, 31, .3);
    }
    .cc-app #masthead .ast-mobile-header-content,
    .cc-app #masthead .ast-mobile-header-content .main-header-bar-navigation,
    .cc-app #masthead .ast-mobile-header-content .main-navigation,
    .cc-app #masthead .ast-mobile-header-content .main-header-menu,
    .cc-app #masthead .ast-mobile-header-content .menu-item,
    .cc-app #masthead .ast-mobile-header-content .menu-item:not(.contacto) > .menu-link {
        background: transparent !important;
        border: 0 !important;
    }
    /* Astra posiciona el desplegable en absoluto, fuera de la caja del header:
       lo pasamos a flujo normal para que el header (azul, redondeado) lo contenga */
    .cc-app #masthead .ast-mobile-header-content {
        position: static !important;
        width: auto !important;
        padding: 4px 0 16px;
        box-shadow: none !important;
    }
    .cc-app #masthead .ast-mobile-header-content .menu-link {
        padding: 12px 20px !important;
        border: 0 !important;
        font-size: 16px;
        color: rgba(255, 255, 255, .85) !important;
    }
    .cc-app #masthead .ast-mobile-header-content .menu-link:hover,
    .cc-app #masthead .ast-mobile-header-content .menu-link:focus { color: var(--blanco) !important; background: rgba(255, 255, 255, .06) !important; }
    .cc-app #masthead .main-header-menu .menu-item.contacto { margin: 8px 20px 0; }
    .cc-app #masthead .main-header-menu .menu-item.contacto > .menu-link { display: inline-flex; color: var(--primario) !important; background: var(--blanco) !important; }
}
@media (min-width: 922px) {
    .cc-app #masthead .ast-builder-grid-row {
        min-height: 136px;
        transition: min-height var(--hdr-dur) var(--hdr-ease);
    }
    .cc-app #masthead.active .ast-builder-grid-row { min-height: 84px; }
}

/* =========================================================
   FOOTER CUSTOM
   ========================================================= */
.site-footer-cc {
    background: var(--primario);
    color: rgba(255, 255, 255, .55);
    padding: 72px 0 32px;
    overflow: hidden;
}
@media (min-width: 1200px) { .site-footer-cc { padding: 96px 0 40px; } }

.site-footer-cc__top {
    display: grid;
    /* mobile/tablet: marca a todo el ancho y Navegación + Contacto en dos columnas */
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
}
.site-footer-cc__brand { grid-column: 1 / -1; }
@media (min-width: 992px) {
    /* marca a la izquierda, dos columnas a la derecha (en el Figma separadas 96px) */
    .site-footer-cc__top { grid-template-columns: 340px 1fr auto auto; column-gap: 96px; }
    .site-footer-cc__col--nav { grid-column: 3; } /* la 2da columna queda como espacio flexible */
    .site-footer-cc__brand { grid-column: auto; }
}
.site-footer-cc__brand img { width: 107px; height: auto; display: block; }
.site-footer-cc__desc {
    max-width: 340px;
    margin-top: 16px !important;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -0.002em;
}
.site-footer-cc__col h2 {
    font-family: var(--font-texto) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.6 !important;
    color: var(--blanco) !important;
    margin-bottom: 14px !important;
}
.site-footer-cc__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.site-footer-cc__col a,
.site-footer-cc__col span {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    transition: color .25s ease;
}
.site-footer-cc__col a:hover { color: var(--blanco); }

/* Wordmark gigante "Critical Care": decorativo */
.site-footer-cc__wordmark {
    margin: 48px 0 !important;
    font-family: var(--font-titulo);
    font-weight: 500;
    font-size: clamp(1.7rem, 5.4vw, 6rem);
    line-height: .9;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, .07);
    text-align: center;
    white-space: nowrap;
    user-select: none;
}
@media (min-width: 1200px) { .site-footer-cc__wordmark { margin: 64px 0 !important; } }

.site-footer-cc__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 24px;
    border-top: var(--border-light);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .6);  /* .45 del Figma no llega a AA sobre #172d5f: subimos a .6 */
}
/* Mobile: copyright y crédito centrados, uno debajo del otro.
   padding-bottom deja lugar al botón "volver arriba" (fijo abajo a la derecha) */
@media (max-width: 767px) {
    .site-footer-cc__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-bottom: 56px;
    }
}
.site-footer-cc__credito a {
    color: var(--blanco);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .3);
    text-underline-offset: 3px;
    transition: text-decoration-color .25s ease;
}
.site-footer-cc__credito a:hover { text-decoration-color: currentColor; }

/* =========================================================
   SCROLL TO TOP (Astra)
   Astra le pone fondo y radio desde su CSS dinámico: !important para pisarlo
   ========================================================= */
#ast-scroll-top {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 24px !important;
    bottom: 24px !important;
    background: var(--primario) !important;
    color: var(--blanco) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;  /* se distingue sobre las secciones azules */
    border-radius: 50% !important;
    box-shadow: 0 10px 30px rgba(1, 10, 31, .25);
    transition: transform .3s ease, box-shadow .3s ease;
    z-index: 998;
}
#ast-scroll-top[style*="display: none"] { display: none !important; }
#ast-scroll-top:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(23, 45, 95, .35); }
#ast-scroll-top:focus-visible { outline: 2px solid var(--primario); outline-offset: 3px; }
/* Astra desplaza el ícono con transform/márgenes: lo centramos de forma absoluta */
#ast-scroll-top .ast-icon {
    position: absolute;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
#ast-scroll-top .ast-arrow-svg {
    display: block;
    width: 16px !important;
    height: 10px;
    margin: 0 !important;
    fill: var(--blanco) !important;
    transform: rotate(180deg) !important;   /* el SVG de Astra es una flecha hacia abajo */
}

/* Astra deja su footer vacío si no se configura: lo ocultamos por las dudas */
.cc-app .site-footer:not(.site-footer-cc) { display: none; }