/* Allku Tech · cromo del sitio
 *
 * Estado visual de cabecera y pie. Vive en CSS y en clases del <html> porque
 * la página es un componente React que reescribe los estilos en línea en cada
 * render: lo que se ponga ahí desde JS se pierde.
 */

/* ── Bilingüe ───────────────────────────────────────────── */
[data-en] {
    display: none;
}

html.allku-en [data-es] {
    display: none;
}

html.allku-en [data-en] {
    display: inline;
}

/* conmutador ES/EN */
html:not(.allku-en) [data-lang="es"],
html.allku-en [data-lang="en"] {
    color: #3B3243 !important;
    font-weight: 600 !important;
}

[data-lang] {
    color: #6C5B7B;
    font-weight: 400;
}

/* recuadro del conmutador en el panel móvil */
html:not(.allku-en) [data-menu-panel] [data-lang="es"],
html.allku-en [data-menu-panel] [data-lang="en"] {
    background: #3B3243 !important;
    color: #FEF7F2 !important;
    border-color: #3B3243 !important;
}

/* ── Portadas principales ───────────────────────────────── */
/*
 * Servicios, Casos, Industrias, Insights y Nosotros comparten una altura
 * visual estable. La presencia de contenido más corto o más largo no modifica
 * la dimensión de la portada dentro de una misma resolución.
 */
html:has([data-screen-label="Pilares"]) [data-screen-label="Portada"],
html:has([data-screen-label="Filtros"]) [data-screen-label="Portada"],
html:has([data-screen-label="Matriz"]) [data-screen-label="Portada"],
html:has([data-screen-label="Categorías"]) [data-screen-label="Portada"],
html:has([data-screen-label="Valores"]) [data-screen-label="Portada"] {
    box-sizing: border-box;
    height: clamp(540px, 40vw, 580px);
    min-height: clamp(540px, 40vw, 580px);
}

html:has([data-screen-label="Pilares"]) [data-screen-label="Portada"] > div,
html:has([data-screen-label="Filtros"]) [data-screen-label="Portada"] > div,
html:has([data-screen-label="Matriz"]) [data-screen-label="Portada"] > div,
html:has([data-screen-label="Categorías"]) [data-screen-label="Portada"] > div,
html:has([data-screen-label="Valores"]) [data-screen-label="Portada"] > div {
    box-sizing: border-box;
    height: 100%;
}

@media (max-width: 700px) {
    html:has([data-screen-label="Pilares"]) [data-screen-label="Portada"],
    html:has([data-screen-label="Filtros"]) [data-screen-label="Portada"],
    html:has([data-screen-label="Matriz"]) [data-screen-label="Portada"],
    html:has([data-screen-label="Categorías"]) [data-screen-label="Portada"],
    html:has([data-screen-label="Valores"]) [data-screen-label="Portada"] {
        height: 600px;
        min-height: 600px;
    }
}

/* ── Equipo · fotografías ───────────────────────────────── */
/*
 * El runtime puede conservar <sc-for> o convertirlo en un fragmento React.
 * Se cubren ambas estructuras para que las fotografías siempre se rendericen.
 */
#equipo sc-for {
    display: contents;
}

#equipo > div:nth-of-type(1) > div > div:first-child,
#equipo > div:nth-of-type(1) > sc-for > div > div:first-child {
    aspect-ratio: 4 / 5 !important;
    display: block !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    background-color: #FFFFFF !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border: 1px solid rgba(59, 50, 67, .16) !important;
}

#equipo > div:nth-of-type(1) > div > div:first-child > *,
#equipo > div:nth-of-type(1) > sc-for > div > div:first-child > * {
    display: none !important;
}

#equipo > div:nth-of-type(1) > div:nth-child(1) > div:first-child,
#equipo > div:nth-of-type(1) > sc-for > div:nth-child(1) > div:first-child {
    background-image: url("../img/team/ana_quispe.png") !important;
}

#equipo > div:nth-of-type(1) > div:nth-child(2) > div:first-child,
#equipo > div:nth-of-type(1) > sc-for > div:nth-child(2) > div:first-child {
    background-image: url("../img/team/diego_ramirez.png") !important;
}

#equipo > div:nth-of-type(1) > div:nth-child(3) > div:first-child,
#equipo > div:nth-of-type(1) > sc-for > div:nth-child(3) > div:first-child {
    background-image: url("../img/team/lucia_ferrer.png") !important;
}

#equipo > div:nth-of-type(1) > div:nth-child(4) > div:first-child,
#equipo > div:nth-of-type(1) > sc-for > div:nth-child(4) > div:first-child {
    background-image: url("../img/team/camila_soto.png") !important;
}

#equipo > div:nth-of-type(1) > div:nth-child(5) > div:first-child,
#equipo > div:nth-of-type(1) > sc-for > div:nth-child(5) > div:first-child {
    background-image: url("../img/team/martin_vega.png") !important;
}

#equipo > div:nth-of-type(1) > div:nth-child(6) > div:first-child,
#equipo > div:nth-of-type(1) > sc-for > div:nth-child(6) > div:first-child {
    background-image: url("../img/team/rosa_huaman.png") !important;
}

/* la segunda caja <div> directa de la sección es la antigua nota de fotos */
#equipo > div:nth-of-type(2) {
    display: none !important;
}

/* ── Contacto · números no expuestos ───────────────────── */
/*
 * Los destinos tel: y wa.me se conservan para que las acciones sigan
 * funcionando, pero el número deja de exponerse visualmente en toda la web.
 * Los CTA con texto propio y los botones sociales solo-icono no se alteran.
 */
a[href^="tel:"],
a[href*="wa.me/"]:not([href*="?"]):not([aria-label]) {
    font-size: 0 !important;
}

a[href^="tel:"] > i,
a[href*="wa.me/"]:not([href*="?"]):not([aria-label]) > i {
    font-size: 13px !important;
}

a[href^="tel:"]::after {
    content: "Llamar ahora";
    font-size: 12.8px;
}

html.allku-en a[href^="tel:"]::after {
    content: "Call now";
}

a[href*="wa.me/"]:not([href*="?"]):not([aria-label])::after {
    content: "WhatsApp";
    font-size: 12.8px;
}

/* ── CTA principal · columna de acciones ────────────────── */
#contacto > div > div:nth-child(2) {
    justify-items: end !important;
}

#contacto > div > div:nth-child(2) > a[href*="wa.me/"] {
    box-sizing: border-box !important;
    width: min(100%, 264px) !important;
    justify-content: center !important;
}

/* ── Menú móvil ─────────────────────────────────────────── */
[data-menu-panel] {
    visibility: hidden;
}

[data-menu-velo] {
    opacity: 0;
    transition: opacity .28s ease;
}

[data-menu-sheet] {
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.32, .72, .28, 1);
}

html.allku-menu [data-menu-panel] {
    visibility: visible !important;
}

/* Las plantillas conservan hidden; al abrir el menú la clase global manda. */
html.allku-menu [data-menu-panel][hidden] {
    display: block !important;
}

html.allku-menu [data-menu-velo] {
    opacity: 1 !important;
}

html.allku-menu [data-menu-sheet] {
    transform: translateX(0%) !important;
}

/* el botón de menú solo existe en pantallas estrechas */
[data-menu-btn] {
    display: none;
}

@media (max-width: 860px) {
    [data-nav-desktop] {
        display: none !important;
    }

    [data-menu-btn] {
        display: inline-flex !important;
    }
}

/* ── Trazado del logotipo ───────────────────────────────── */
[data-draw-path] {
    fill: transparent;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    [data-menu-velo], [data-menu-sheet] {
        transition: none !important;
    }
}