:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.22 0.017 244);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.22 0.017 244);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.22 0.017 244);
    --primary: #0B5FA5;
    --primary-foreground: #ffffff;
    --secondary: oklch(0.965 0.005 240);
    --secondary-foreground: oklch(0.22 0.017 244);
    --muted: oklch(0.974 0.003 240);
    --muted-foreground: oklch(0.49 0.015 244);
    --accent: oklch(0.94 0.019 237);
    --accent-foreground: #0B5FA5;
    --border: oklch(0.89 0.007 240);
    --input: oklch(0.89 0.007 240);
    --ring: #0B5FA5;
    --footer: #111827;
    --footer-foreground: #f3f4f6;
    --hero-foreground: #ffffff;
    --line: #38bdf8;
    --hero-overlay: linear-gradient(90deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.72) 55%, rgba(15, 23, 42, 0.4) 100%);
}

* { border-color: var(--border); }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: 'Manrope', sans-serif;
    overflow-x: hidden;
}

.section-wrap {
    width: min(100% - 40px, 1200px);
    margin-inline: auto;
}

.section-kicker {
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.section-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(30px, 3.5vw, 46px);
    line-height: 1.12;
    font-weight: 800;
}

.card-lift {
    transition: transform .25s ease, box-shadow .25s ease;
}
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
}

.text-line {
    color: var(--line) !important;
}

/* Vista rapida de producto (modal) */
.product-modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}
.product-modal[data-open='true'] {
    opacity: 1;
    visibility: visible;
}
.product-modal[data-open='true'] .product-modal__panel {
    transform: translateY(12px) scale(.985);
    opacity: 1;
}
.product-modal__panel {
    transform: translateY(12px) scale(.985);
    opacity: 0;
    transition: transform .28s cubic-bezier(.2,.7,.3,1), opacity .22s ease;
}
/* Bloquea el scroll del fondo mientras el modal esta abierto */
body.product-modal-open {
    overflow: hidden;
}
.product-modal__img {
    transition: transform .5s ease;
}
.product-modal[data-open='true'] .product-modal__img {
    transform: scale(1.02);
}

/* Trust bar: carrusel de logos con desplazamiento automatico */
.trust-bar__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.trust-bar__track {
    display: flex;
    width: max-content;
    animation: trust-bar-scroll 40s linear infinite;
    will-change: transform;
}
.trust-bar__track:hover {
    animation-play-state: paused;
}
.trust-bar__group {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding-right: 1.75rem;
}
.trust-bar__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 12rem;
    height: 5.25rem;
    padding: 0.5rem 0.65rem;
    border-radius: 4px;
    background: #fff;
    border: 1px solid rgba(203, 213, 225, .65);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: transform .3s ease, box-shadow .3s ease;
}
.trust-bar__logo img {
    /* width/height al 100% + object-fit: la caja queda definida por el
       contenedor (ancho y alto fijos), asi que el navegador no necesita
       la imagen para reservar el espacio. Con "width:auto; height:auto"
       se anulaban los atributos width/height del HTML y Chrome marcaba
       las 24 como lazy sin dimensiones. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: grayscale(1);
    opacity: .68;
    transition: filter .3s ease, opacity .3s ease;
}
.trust-bar__logo:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}
.trust-bar__logo:hover img {
    filter: grayscale(0);
    opacity: 1;
}
@keyframes trust-bar-scroll {
    /* El desplazamiento se calcula en JS con el ancho real del grupo, para
       que el bucle cierre exacto sin depender de que haya dos copias
       iguales en el marcado. */
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(-1 * var(--trust-bar-shift, 50%)), 0, 0); }
}
/* Sin movimiento: el carrusel se convierte en una grilla legible */
@media (prefers-reduced-motion: reduce) {
    .trust-bar__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .trust-bar__track {
        animation: none;
        width: auto;
        justify-content: flex-start;
    }
    /* el wrap va en el grupo: los items cuelgan de ahi, no del track */
    .trust-bar__group {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .trust-bar__track > .trust-bar__group[aria-hidden='true'] {
        display: none;
    }
}

/* Ancho maximo del encabezado (mas ancho que el de las secciones) */
.header-wrap {
    width: min(100% - 48px, 1440px);
    margin-inline: auto;
}

/* Cabecera.
 *
 * Tamano del logo y aparicion del menu de escritorio, del boton "Cotizar" y
 * del menu movil se resuelven aca y no con las utilidades responsive de
 * Tailwind (`lg:h-[70px]`, `sm:inline-flex`, `hidden`). Dentro de bloques esas
 * utilidades compiten por `display` / `max-width` contra el CSS de bloque de
 * WordPress y el orden en que se imprimen las hojas no es estable: se perdian
 * de forma intermitente al cambiar de plantilla. */
.header-logo {
    display: block;
    flex: 0 0 auto;
}
.header-logo img {
    display: block;
    width: auto;
    max-width: 210px;
    height: 48px;
    object-fit: contain;
}
@media (min-width: 640px) {
    .header-logo img {
        max-width: 250px;
        height: 58px;
    }
}
@media (min-width: 1024px) {
    .header-logo img {
        max-width: 300px;
        height: 70px;
    }
}

/* Enlaces de navegacion: en una sola linea, siempre. */
.site-nav-desktop {
    display: none;
    flex: 0 0 auto;
    gap: 1.75rem;
}
.site-nav-desktop .nav-link {
    white-space: nowrap;
}
@media (min-width: 1024px) {
    .site-nav-desktop {
        display: flex;
        align-items: center;
    }
}
@media (min-width: 1280px) {
    .site-nav-desktop {
        gap: 2.25rem;
    }
}

/* Boton "Cotizar": desde 640px.
 *
 * `.wp-block-buttons` ya trae `display: flex` desde el CSS de bloques de
 * WordPress y se imprime despues de esta hoja, asi que sin `!important` el
 * boton aparecia tambien en movil (y desbordaba a 360px). */
.site-header__cta {
    display: none !important;
}
@media (min-width: 640px) {
    .site-header__cta {
        display: flex !important;
    }
}

/* Boton hamburguesa y panel del menu movil. */
.site-mobile-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 4px;
    transition: background-color .2s ease, color .2s ease;
}
.site-mobile-btn:hover {
    background-color: var(--accent);
    color: var(--accent-foreground);
}
.mobile-nav {
    display: none !important;
}
.mobile-nav:not(.hidden) {
    display: block !important;
}

@media (min-width: 1024px) {
    /* En escritorio no se muestran ni el boton ni el panel, este ultimo se
       haya abierto o no desde el movil. */
    .site-mobile-btn,
    .mobile-nav,
    .mobile-nav:not(.hidden) {
        display: none !important;
    }
}
@media (max-width: 1023px) {
    header .site-nav-desktop,
    :root header .site-nav-desktop,
    body header .site-nav-desktop {
        display: none !important;
    }
    header .site-mobile-btn,
    :root header .site-mobile-btn,
    body header .site-mobile-btn {
        display: inline-flex !important;
    }
}

/* Hero full-bleed and styling immunity */
.hero-section {
    position: relative !important;
    width: 100% !important;
    background-color: #0f172a !important;
}
.hero-section .hero-bg-img,
.hero-section .hero-section__bg {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 1 !important;
}
/* La figura es el contenedor posicionado; la imagen solo se estira. */
.hero-section .hero-section__bg img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
.hero-section .hero-surface {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.72) 55%, rgba(15, 23, 42, 0.38) 100%) !important;
    z-index: 2 !important;
}
.hero-section .hero-content-wrap {
    position: relative !important;
    z-index: 10 !important;
}
.hero-bottom-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 20 !important;
}

/* Priority Heading Overrides: Prevent WordPress Core styles from overriding dark sections */
.hero-section h1,
.hero-section h1 *,
.hero-section p,
.hero-section span,
#ingenieria h2,
#ingenieria h2 *,
#ingenieria p {
    color: #ffffff !important;
}

.hero-section .text-sky-400,
#ingenieria .text-sky-400 {
    color: #38bdf8 !important;
}

/* ---------------------------------------------------------------------- */
/* Botones                                                                 */
/*                                                                       */
/* WordPress genera el <a> de un boton con sus propias clases              */
/* (`wp-block-button__link wp-element-button`), asi que el diseno se      */
/* aplica sobre el contenedor y se propaga al enlace. Poner utilidades    */
/* en el <a> guardado en el contenido hacia que el editor lo marque como  */
/* "contenido inesperado".                                                */
/* ---------------------------------------------------------------------- */
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Boton del encabezado: mas chico que los de la portada. */
.header-cta .wp-block-button__link {
    height: auto;
    padding: .625rem 1.25rem;
    background: #0B5FA5;
    color: #fff;
    box-shadow: 0 1px 2px rgba(30, 36, 43, .06);
}
.header-cta .wp-block-button__link:hover {
    background: #094e88;
}

.hero-cta__primary .wp-block-button__link,
.hero-cta__secondary .wp-block-button__link,
.cta-productos .wp-block-button__link,
.cta-banner__boton .wp-block-button__link {
    height: 3rem;
    padding: 0 1.75rem;
}

.hero-cta__primary .wp-block-button__link {
    background: #0B5FA5;
    color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1);
}
.hero-cta__primary .wp-block-button__link:hover {
    background: #094e88;
}

.hero-cta__secondary .wp-block-button__link {
    background: rgba(0, 0, 0, .25);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}
.hero-cta__secondary .wp-block-button__link:hover {
    background: rgba(255, 255, 255, .15);
}

.cta-productos .wp-block-button__link {
    background: var(--background);
    border-color: var(--input);
    color: #0B5FA5;
    box-shadow: 0 1px 2px rgba(30, 36, 43, .06);
    padding: 0 2rem;
}
.cta-productos .wp-block-button__link:hover {
    background: var(--accent);
}

.cta-banner__boton .wp-block-button__link {
    background: #0B5FA5;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
}
.cta-banner__boton .wp-block-button__link:hover {
    background: #094e88;
}

/* Boton del pie: contorno claro, sobre fondo oscuro. */
/* Enlace a LinkedIn del pie.
 *
 * Va como bloque HTML y no como boton porque el boton de WordPress descarta
 * el `aria-label` al guardar, y el aviso de "contenido inesperado" le
 * apareceria al cliente en el Editor del sitio. */
.footer__social-link {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 1.75rem;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    color: #fff;
    font-size: .875rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color .2s ease;
}
.footer__social-link:hover {
    background: rgba(255, 255, 255, .1);
}

.footer__cta-btn .wp-block-button__link {
    height: auto;
    padding: .625rem 1rem;
    background: transparent;
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}
.footer__cta-btn .wp-block-button__link:hover {
    border-color: #38bdf8;
    color: #38bdf8;
}

/* ---------------------------------------------------------------------- */
/* Colores de las secciones sobre fondo oscuro                            */
/*                                                                       */
/* Antes iban como atributo `style` en el bloque; seSacaron de ahi para  */
/* que el editor no marque el contenido como invalido. El color del punto */
/* final del titulo del hero se conserva con una clase propia.            */
/* ---------------------------------------------------------------------- */
.hero-title__dot {
    color: #38bdf8;
}

/* Fix admin bar if logged into WordPress */
.admin-bar header.sticky {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar header.sticky {
        top: 46px;
    }
}

/* ====================================================================== */
/* Compatibilidad con el marcado de bloques                              */
/*                                                                         */
/* WordPress anade estilos propios a .wp-block-group, .wp-block-image y a  */
/* los elementos tipograficos. El diseno se armo con utilidades de       */
/* Tailwind, que da por hecho que los margenes vienen a cero (preflight). */
/* Estas reglas restaurar esa base para que el resultado sea identico al   */
/* que se Tenthia con la plantilla PHP original.                          */
/* ====================================================================== */

/* Los grupos son contenedores neutros: no deben impose un `display`. */
.site-main .wp-block-group,
.site-header-wrap .wp-block-group,
.site-footer-wrap .wp-block-group {
    color: inherit;
}

/* Preflight de Tailwind: sin margenes por defecto en el contenido. */
.site-main .wp-block-group :where(h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl, dd, blockquote, pre),
.site-header-wrap .wp-block-group :where(h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl, dd, blockquote, pre),
.site-footer-wrap .wp-block-group :where(h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl, dd, blockquote, pre) {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Las utilidades de espaciado del diseno mandan sobre el gap por defecto. */
.site-main .wp-block-group > * {
    margin-block-start: 0;
}

/* ---------------------------------------------------------------------- */
/* Imagen de fondo del heroe                                             */
/* ---------------------------------------------------------------------- */
.site-main .hero-section > .hero-section__bg {
    margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Tarjetas de producto                                                   */
/* ---------------------------------------------------------------------- */
.product-card__media {
    display: block;
    aspect-ratio: 1.28;
    overflow: hidden;
    background: var(--muted);
    margin: 0 !important;
}
.product-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.product-card:hover .product-card__media img,
.product-card:focus-visible .product-card__media img {
    transform: scale(1.05);
}
/* La descripcion alimenta la vista rapida: no se muestra en la tarjeta. */
.product-card__desc {
    display: none;
}
/* La tarjeta completa es el boton: necesita foco visible. */
.product-card:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------- */
/* Carrusel de logos                                                      */
/*                                                                      */
/* Se sube la especificidad para ganarle a .wp-block-group, que WordPress */
/* declara con `display`.                                                */
/* ---------------------------------------------------------------------- */
.trust-bar .trust-bar__track {
    display: flex;
    width: max-content;
}
.trust-bar .trust-bar__group {
    display: flex;
    align-items: center;
}
.trust-bar .trust-bar__logo {
    display: flex;
}
.trust-bar .trust-bar__logo figure {
    margin: 0;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------- */
/* Bloques de contenido con fondo oscuro                                  */
/* ---------------------------------------------------------------------- */
#ingenieria .wp-block-heading,
#ingenieria h2 {
    margin-block-start: 0;
}