/* ============================================================
   URICA ELÉCTRICA Y CONTROL — Hoja de estilos
   Paleta basada en el logotipo: azul marino + dorado metálico
   ============================================================ */

:root {
    /* Azules */
    --azul-900: #0A1A3A;
    --azul-800: #0d2149;
    --azul-700: #12264F;   /* primario */
    --azul-600: #1B3568;
    --azul-500: #243b6b;

    /* Dorados */
    --oro-700: #8a6508;
    --oro-600: #B8860B;
    --oro-500: #C9A227;
    --oro-400: #D4AF37;    /* primario */
    --oro-300: #E8C766;
    --oro-200: #F0D98A;

    /* Neutros */
    --blanco: #ffffff;
    --gris-50: #f6f8fb;
    --gris-100: #eef1f6;
    --gris-200: #e1e6ee;
    --gris-400: #9aa4b5;
    --gris-600: #5a6474;
    --gris-800: #2b3240;
    --texto: #1e2430;

    /* Tipografía */
    --fuente-titulo: 'Montserrat', 'Segoe UI', sans-serif;
    --fuente-texto: 'Inter', 'Segoe UI', system-ui, sans-serif;

    /* Otros */
    --radio: 14px;
    --radio-sm: 9px;
    --sombra: 0 10px 30px rgba(10, 26, 58, .08);
    --sombra-fuerte: 0 20px 45px rgba(10, 26, 58, .18);
    --transicion: .3s cubic-bezier(.4, 0, .2, 1);
    --contenedor: 1200px;
    --alto-cabecera: 88px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 20px); }

/* El menú móvil cerrado vive fuera de pantalla (translateX(100%)); sin recorte
   el navegador ensancha el viewport y descentra los elementos "fixed" (loader).
   "clip" recorta sin crear área desplazable; "hidden" es el respaldo. */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--fuente-texto);
    color: var(--texto);
    background: var(--blanco);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); line-height: 1.2; color: var(--azul-700); font-weight: 700; }

.contenedor { width: 100%; max-width: var(--contenedor); margin: 0 auto; padding: 0 24px; }

body.sin-scroll { overflow: hidden; }

/* ============================================================
   LOADER DE ENTRADA
   ============================================================ */
.loader {
    position: fixed;
    inset: 0;
    /* En móvil la barra de direcciones cambia de alto: 100dvh evita que
       asome el sitio por debajo del loader. */
    height: 100vh;
    height: 100dvh;
    z-index: 9999;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 1;
    overscroll-behavior: none;
    touch-action: none;
    transition: opacity .6s ease, visibility .6s ease;
}
/* pointer-events:none desde el primer instante: la transición de "visibility"
   tarda .6s en aplicarse y, mientras tanto, el loader interceptaba los clics. */
.loader--oculto { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 320px;
}
.loader__logo {
    width: min(64vw, 240px);
    height: auto;
    aspect-ratio: 2018 / 834;   /* proporción real del PNG: evita saltos al cargar */
    animation: loaderLatido 1.6s ease-in-out infinite;
}
.loader__barra {
    position: relative;
    width: min(190px, 70%);
    height: 4px;
    border-radius: 4px;
    background: var(--gris-100);
    overflow: hidden;
}
.loader__barra span {
    position: absolute;
    top: 0; left: -40%;
    height: 100%;
    width: 40%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--oro-300), var(--oro-500));
    animation: loaderBarra 1.15s ease-in-out infinite;
}
@keyframes loaderLatido {
    0%, 100% { opacity: .5; transform: scale(.97); }
    50%      { opacity: 1;  transform: scale(1); }
}
@keyframes loaderBarra {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: .98rem;
    padding: 14px 30px;
    border-radius: 50px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transicion);
    white-space: nowrap;
}
.boton--oro {
    background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
    color: var(--azul-900);
    box-shadow: 0 8px 20px rgba(201, 162, 39, .35);
}
.boton--oro:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(201, 162, 39, .5); }
.boton--azul {
    background: var(--azul-700);
    color: var(--blanco);
}
.boton--azul:hover { background: var(--azul-600); transform: translateY(-3px); box-shadow: var(--sombra-fuerte); }
.boton--fantasma {
    background: rgba(255, 255, 255, .08);
    color: var(--blanco);
    border-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(4px);
}
.boton--fantasma:hover { background: rgba(255, 255, 255, .18); border-color: #fff; transform: translateY(-3px); }
.boton--bloque { width: 100%; }

/* ============================================================
   CABECERA / NAVEGACIÓN
   ============================================================ */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 14px rgba(10, 26, 58, .07);
    transition: var(--transicion);
}
.cabecera__inner { display: flex; align-items: center; justify-content: space-between; height: var(--alto-cabecera); }
.cabecera__logo img { height: 66px; width: auto; transition: var(--transicion); }
.cabecera.reducida { box-shadow: 0 4px 20px rgba(10, 26, 58, .12); }
.cabecera.reducida .cabecera__logo img { height: 58px; }

.nav__lista { display: flex; align-items: center; gap: 6px; }
.nav__enlace {
    position: relative;
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: .95rem;
    color: var(--azul-700);
    padding: 10px 16px;
    border-radius: 8px;
    transition: var(--transicion);
}
.nav__enlace::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px; bottom: 4px;
    height: 2px;
    background: var(--oro-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicion);
}
.nav__enlace:hover { color: var(--azul-900); }
.nav__enlace:hover::after { transform: scaleX(1); }
/* Botón "Contáctanos": efecto de oro pulido animado */
.nav__enlace--cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;                 /* contiene el destello dentro del botón */
    color: var(--azul-900) !important;
    margin-left: 16px;
    background: linear-gradient(100deg,
        var(--oro-600) 0%,
        var(--oro-400) 18%,
        var(--oro-200) 38%,
        var(--oro-300) 55%,
        var(--oro-500) 80%,
        var(--oro-600) 100%);
    background-size: 200% 100%;
    /* Radio negativo: el resplandor cae hacia abajo y no se expande hacia "Blog" */
    box-shadow: 0 8px 18px -5px rgba(201, 162, 39, .5);
    animation: oroFluir 5s linear infinite;   /* la luz recorre el metal */
}
.nav__enlace--cta::after { display: none; }
/* Destello diagonal que cruza el botón (queda detrás del texto).
   pointer-events:none es imprescindible: el destello se desplaza fuera del
   botón y, sin esto, robaba los clics del enlace vecino ("Blog"). */
.nav__enlace--cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    z-index: -1;
    pointer-events: none;
    width: 45%;
    height: 100%;
    transform: translateX(-160%) skewX(-22deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: oroDestello 5s ease-in-out infinite;
}
.nav__enlace--cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -6px rgba(212, 175, 55, .6);
}
@keyframes oroFluir {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes oroDestello {
    0%, 55%  { transform: translateX(-160%) skewX(-22deg); }
    82%,100% { transform: translateX(360%)  skewX(-22deg); }
}

/* ---------- Menú desplegable de marcas ---------- */
.nav__item--desplegable { position: relative; }
.nav__enlace--desplegable { display: inline-flex; align-items: center; gap: 7px; }
.nav__flecha { transition: transform var(--transicion); }
.nav__item--desplegable:hover .nav__flecha,
.nav__item--desplegable.abierto .nav__flecha { transform: rotate(180deg); }

.submenu {
    position: absolute;
    top: calc(100% + 14px);
    /* Anclado a la derecha del enlace: el menú vive en la mitad derecha de la
       barra, y centrarlo lo sacaría de la pantalla. */
    right: 0;
    z-index: 120;
    width: min(520px, calc(100vw - 40px));
    padding: 14px;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-top: 3px solid var(--oro-400);
    border-radius: var(--radio);
    box-shadow: 0 24px 50px rgba(10, 26, 58, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
/* Puente invisible: evita que el menú se cierre al mover el cursor hacia él */
.submenu::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -17px;
    height: 17px;
}
.nav__item--desplegable:hover .submenu,
.nav__item--desplegable:focus-within .submenu,
.nav__item--desplegable.abierto .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.submenu__item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    border-radius: 9px;
    transition: var(--transicion);
}
.submenu__item:hover { background: var(--gris-50); }
.submenu__logo {
    flex-shrink: 0;
    width: 42px; height: 30px;
    display: grid; place-items: center;
    border: 1px solid var(--gris-200);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.submenu__logo img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .8;
    transition: var(--transicion);
}
.submenu__item:hover .submenu__logo img { filter: grayscale(0); opacity: 1; }
.submenu__inicial {
    font-family: var(--fuente-titulo);
    font-weight: 800; font-size: .95rem;
    color: var(--azul-600);
}
.submenu__nombre {
    font-family: var(--fuente-titulo);
    font-weight: 600; font-size: .88rem;
    color: var(--azul-700);
    line-height: 1.3;
}
.submenu__item:hover .submenu__nombre { color: var(--oro-600); }

.submenu__todas {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 10px;
    padding: 11px;
    border-top: 1px solid var(--gris-200);
    font-family: var(--fuente-titulo);
    font-weight: 700; font-size: .85rem;
    color: var(--oro-600);
    transition: var(--transicion);
}
.submenu__todas:hover { color: var(--azul-700); gap: 12px; }

/* Botón hamburguesa */
.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.nav__toggle span {
    width: 26px; height: 3px;
    background: var(--azul-700);
    border-radius: 2px;
    transition: var(--transicion);
}
.nav__toggle.activo span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle.activo span:nth-child(2) { opacity: 0; }
.nav__toggle.activo span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO / CARRUSEL
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero__carrusel { position: relative; height: clamp(620px, 82vh, 700px); }
.hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease;
    background: linear-gradient(120deg, var(--slide-a) 0%, var(--slide-b) 100%);
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

/* Patrón de circuito sutil */
.hero__circuito {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 85% 20%, rgba(212, 175, 55, .16), transparent 45%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 30h20M40 30h20M30 0v20M30 40v20'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Ccircle cx='0' cy='30' r='2'/%3E%3Ccircle cx='60' cy='30' r='2'/%3E%3Ccircle cx='30' cy='0' r='2'/%3E%3Ccircle cx='30' cy='60' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
.hero__slide::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10, 26, 58, .55), transparent 60%);
}
/* Slide con imagen de fondo */
.hero__fondo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero__slide--foto .hero__circuito { display: none; }   /* el patrón sobra sobre la foto */
.hero__slide--foto::after {
    background: linear-gradient(90deg, rgba(10, 26, 58, .92) 0%, rgba(10, 26, 58, .6) 42%, rgba(10, 26, 58, .25) 100%);
}
/* El contenido usa el ancho del contenedor (.contenedor = 1200px centrado)
   y su texto queda alineado a la izquierda, en línea con el resto del sitio. */
.hero__contenido { position: relative; z-index: 2; color: #fff; text-align: left; }
.hero__badge {
    display: inline-block;
    background: rgba(212, 175, 55, .18);
    border: 1px solid rgba(212, 175, 55, .5);
    color: var(--oro-200);
    font-family: var(--fuente-titulo);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
}
.hero__titulo {
    color: #fff;
    /* Titular largo: tipografía más contenida y columna más ancha para que
       el bloque completo (badge + título + texto + botones) quepa en el alto
       fijo del carrusel sin recortarse. */
    font-size: clamp(1.6rem, 2.9vw, 2.15rem);
    line-height: 1.24;
    font-weight: 800;
    margin-bottom: 18px;
    max-width: 700px;
    /* Sin justificar: con 4-5 palabras por línea a este tamaño, justify abre
       huecos enormes entre palabras. balance reparte las líneas parejas. */
    text-wrap: balance;
}
.hero__titulo span {
    background: linear-gradient(135deg, var(--oro-200), var(--oro-500));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero__texto { font-size: clamp(1rem, 2vw, 1.15rem); color: rgba(255, 255, 255, .9); margin-bottom: 26px; max-width: 620px; }
.hero__acciones { display: flex; gap: 16px; flex-wrap: wrap; }

/* Indicador de que el banner no es toda la página.
   Es un enlace real al primer bloque de contenido, no sólo un adorno, y se
   desvanece en cuanto el visitante empieza a bajar (lo marca assets/js/main.js). */
.hero__bajar {
    position: absolute;
    z-index: 3;
    left: 50%; bottom: 24px;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: rgba(255, 255, 255, .82);
    font-family: var(--fuente-titulo);
    font-size: .66rem; font-weight: 600;
    letter-spacing: 2.2px; text-transform: uppercase;
    transition: opacity .45s ease, visibility .45s ease, color var(--transicion);
}
.hero__bajar-icono {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
    animation: bajar 2.2s ease-in-out infinite;
}
.hero__bajar:hover { color: var(--oro-300); }
.hero__bajar:hover .hero__bajar-icono {
    background: var(--oro-400);
    border-color: var(--oro-400);
    color: var(--azul-900);
    animation-play-state: paused;
}
.hero__bajar:focus-visible { outline: 2px solid var(--oro-300); outline-offset: 6px; border-radius: 8px; }
.hero__bajar.is-oculto { opacity: 0; visibility: hidden; }

@keyframes bajar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
}

/* Animación de entrada del slide activo */
.hero__slide.is-active .hero__badge { animation: subir .7s .1s both; }
.hero__slide.is-active .hero__titulo { animation: subir .7s .25s both; }
.hero__slide.is-active .hero__texto { animation: subir .7s .4s both; }
.hero__slide.is-active .hero__acciones { animation: subir .7s .55s both; }
@keyframes subir { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

/* Flechas y puntos */
.hero__flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 48px; height: 48px;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff; font-size: 1.1rem; cursor: pointer;
    display: grid; place-items: center;
    backdrop-filter: blur(6px);
    transition: var(--transicion);
}
.hero__flecha:hover { background: var(--oro-400); color: var(--azul-900); }
/* Con un solo slide, el JS oculta flechas y puntos */
.hero__flecha[hidden], .hero__puntos[hidden] { display: none; }
.hero__flecha--prev { left: 22px; }
.hero__flecha--next { right: 22px; }
.hero__puntos {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--contenedor);
    padding: 0 24px;
    z-index: 3;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}
.hero__punto {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .7);
    background: transparent; cursor: pointer; padding: 0;
    transition: var(--transicion);
}
.hero__punto.is-active { background: var(--oro-400); border-color: var(--oro-400); width: 30px; border-radius: 6px; }

/* ============================================================
   FRANJA DE CONFIANZA
   ============================================================ */
.franja { background: var(--azul-700); }
.franja__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.franja__item {
    display: flex; align-items: center; gap: 16px;
    color: #fff; padding: 26px 14px;
}
.franja__item + .franja__item { border-left: 1px solid rgba(255, 255, 255, .1); }
.franja__item svg { color: var(--oro-400); flex-shrink: 0; }
.franja__item strong { display: block; font-family: var(--fuente-titulo); font-size: 1rem; }
.franja__item span { font-size: .85rem; color: rgba(255, 255, 255, .7); }

/* ============================================================
   SECCIONES (genérico)
   ============================================================ */
.seccion { padding: 96px 0; }
.seccion__cabecera { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.etiqueta {
    display: inline-block;
    font-family: var(--fuente-titulo);
    font-weight: 700; font-size: .82rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--oro-600);
    margin-bottom: 12px;
    position: relative;
    padding-left: 34px;
}
.etiqueta::before { content: ''; position: absolute; left: 0; top: 50%; width: 26px; height: 2px; background: var(--oro-500); }
.etiqueta--claro { color: var(--oro-300); }
.etiqueta--claro::before { background: var(--oro-300); }
.seccion__titulo { font-size: clamp(1.7rem, 3.5vw, 2.5rem); font-weight: 800; text-wrap: balance; }
/* Nombres de marca con guiones (Shat-R-Shield) no se parten a mitad; si no
   caben en la línea, bajan completos a la siguiente. */
.marca-nombre { white-space: nowrap; }
.seccion__titulo--claro { color: #fff; }
.seccion__intro { color: var(--gris-600); font-size: 1.08rem; margin-top: 14px; }
.seccion__intro--claro { color: rgba(255, 255, 255, .78); }

/* ============================================================
   ¿QUIÉNES SOMOS?
   ============================================================ */
.quienes { background: var(--gris-50); }
.quienes__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.quienes__media { position: relative; }
.quienes__imagen {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--sombra-fuerte);
    background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
    aspect-ratio: 1 / 1;
    display: grid; place-items: center;
}
.quienes__ilustracion { width: 100%; height: 100%; }

/* Slideshow de ¿Quiénes somos? */
.quienes-slider { position: relative; width: 100%; height: 100%; }
.quienes-slider__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s ease;
}
.quienes-slider__img.is-active { opacity: 1; }
.quienes-slider__puntos {
    position: absolute; z-index: 2;
    bottom: 14px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 8px;
}
.quienes-slider__punto {
    width: 9px; height: 9px; padding: 0;
    border-radius: 50%;
    border: 2px solid #fff; background: transparent;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    transition: var(--transicion);
}
.quienes-slider__punto.is-active { background: var(--oro-400); border-color: var(--oro-400); width: 22px; border-radius: 5px; }
.quienes__stat {
    position: absolute;
    background: #fff;
    border-radius: var(--radio);
    box-shadow: var(--sombra-fuerte);
    padding: 16px 22px;
    text-align: center;
}
.quienes__stat strong { display: block; font-family: var(--fuente-titulo); font-size: 1.7rem; color: var(--oro-600); line-height: 1; }
.quienes__stat span { font-size: .8rem; color: var(--gris-600); }
.quienes__stat--1 { top: 26px; right: -20px; }
.quienes__stat--2 { bottom: 26px; left: -24px; }

.quienes__texto p { color: var(--gris-600); margin-bottom: 16px; text-align: justify; hyphens: auto; }
.quienes__texto .seccion__titulo { margin: 8px 0 20px; }

/* Industrias que atendemos (tarjetas con icono) */
.quienes__industrias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 26px;
}
.quienes__industrias li {
    display: flex; align-items: center; gap: 12px;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-left: 3px solid var(--oro-400);
    border-radius: 10px;
    padding: 12px 15px;
    font-family: var(--fuente-titulo); font-weight: 600; font-size: .92rem;
    color: var(--azul-700);
    box-shadow: var(--sombra);
    transition: var(--transicion);
}
.quienes__industrias li:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-fuerte);
    border-left-color: var(--oro-500);
}
.ind-ico {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
    color: var(--oro-300);
}

/* Misión, Visión y Valores (tarjetas) */
.mvv {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 64px;
}
.mvv__card {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    border-top: 4px solid var(--oro-400);
    padding: 34px 30px;
    box-shadow: var(--sombra);
    transition: var(--transicion);
}
.mvv__card:hover { transform: translateY(-6px); box-shadow: var(--sombra-fuerte); }
.mvv__icono {
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
    color: var(--oro-300);
    margin-bottom: 20px;
}
.mvv__titulo { font-size: 1.35rem; color: var(--azul-700); margin-bottom: 12px; }
.mvv__texto { color: var(--gris-600); font-size: .97rem; line-height: 1.75; text-align: justify; hyphens: auto; }
/* Texto plegado a 6 líneas (lo aplica el JS; sin JS se lee completo) */
.mvv__texto--plegado {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mvv__ver {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 14px;
    padding: 0;
    background: none; border: none;
    color: var(--oro-600);
    font-family: var(--fuente-titulo); font-weight: 700; font-size: .88rem;
    cursor: pointer;
    transition: var(--transicion);
}
.mvv__ver:hover { color: var(--azul-700); }
.mvv__ver svg { transition: transform var(--transicion); }
.mvv__ver.is-abierto svg { transform: rotate(180deg); }

/* ============================================================
   NUESTRAS MARCAS
   ============================================================ */
.marcas__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}
.marca-card {
    position: relative;
    display: grid; place-items: center;
    min-height: 122px;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    padding: 24px 16px;
    text-align: center;
    overflow: hidden;
    transition: var(--transicion);
}
.marca-card:hover {
    transform: translateY(-6px);
    border-color: var(--oro-400);
    box-shadow: var(--sombra-fuerte);
}
.marca-card__nombre {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    color: var(--azul-600);
    font-size: 1rem;
    transition: var(--transicion);
}
.marca-card:hover .marca-card__nombre { color: var(--azul-900); transform: translateY(-6px); }
.marca-card__logo {
    max-height: 58px;
    max-width: 82%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .82;
    transition: var(--transicion);
}
.marca-card:hover .marca-card__logo { filter: grayscale(0); opacity: 1; transform: translateY(-6px); }
.marca-card__ver {
    position: absolute;
    left: 0; right: 0; bottom: 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-family: var(--fuente-titulo);
    font-size: .78rem; font-weight: 600;
    color: var(--oro-600);
    opacity: 0;
    transform: translateY(8px);
    transition: var(--transicion);
}
.marca-card:hover .marca-card__ver { opacity: 1; transform: translateY(0); }

/* ============================================================
   CATÁLOGOS
   ============================================================ */
.catalogos {
    background:
        linear-gradient(135deg, rgba(10, 26, 58, .97), rgba(18, 38, 79, .97)),
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.06'%3E%3Cpath d='M0 40h30M50 40h30M40 0v30M40 50v30'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---------- Buscador y filtros ---------- */
.buscador { max-width: 940px; margin: 0 auto 40px; }
.buscador__campo {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50px;
    padding: 4px 8px 4px 22px;
    transition: var(--transicion);
}
.buscador__campo:focus-within {
    border-color: var(--oro-400);
    background: rgba(255, 255, 255, .11);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .16);
}
.buscador__campo > svg { flex-shrink: 0; color: var(--oro-300); }
.buscador__campo input {
    flex: 1; min-width: 0;
    background: none; border: none; outline: none;
    color: #fff;
    font-family: var(--fuente-texto); font-size: 1rem;
    padding: 15px 0;
}
.buscador__campo input::placeholder { color: rgba(255, 255, 255, .45); }
/* Oculta la "x" nativa del input[type=search] para usar la nuestra */
.buscador__campo input::-webkit-search-cancel-button { display: none; }
.buscador__limpiar {
    flex-shrink: 0;
    width: 34px; height: 34px;
    margin-right: 6px;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff; font-size: 1.3rem; line-height: 1;
    cursor: pointer;
    transition: var(--transicion);
}
.buscador__limpiar:hover { background: var(--oro-400); color: var(--azul-900); }

.buscador__filtros { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 20px; }
.filtro-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50px;
    padding: 9px 16px;
    color: rgba(255, 255, 255, .82);
    font-family: var(--fuente-titulo); font-weight: 600; font-size: .86rem;
    cursor: pointer;
    transition: var(--transicion);
}
.filtro-chip span {
    background: rgba(255, 255, 255, .14);
    border-radius: 20px;
    padding: 1px 8px;
    font-size: .76rem;
    transition: var(--transicion);
}
.filtro-chip:hover { border-color: var(--oro-400); color: #fff; }
.filtro-chip.is-activo {
    background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
    border-color: transparent;
    color: var(--azul-900);
}
.filtro-chip.is-activo span { background: rgba(10, 26, 58, .18); }

/* ---------- Tarjetas de catálogo ---------- */
.catalogos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.cat-card {
    display: flex; flex-direction: column;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radio);
    padding: 24px 26px;
    transition: var(--transicion);
    backdrop-filter: blur(4px);
}
.cat-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .09);
    border-color: rgba(212, 175, 55, .5);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}
.cat-card[hidden] { display: none; }

.cat-card__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cat-card__marca {
    display: inline-flex; align-items: center;
    height: 30px; max-width: 62%;
    background: #fff;
    border-radius: 6px;
    padding: 4px 9px;
    font-family: var(--fuente-titulo); font-weight: 700; font-size: .78rem;
    color: var(--azul-700);
}
.cat-card__marca img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.cat-card__pdf {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(212, 175, 55, .16);
    color: var(--oro-300);
    transition: var(--transicion);
}
.cat-card:hover .cat-card__pdf { background: rgba(212, 175, 55, .3); }
/* Con portada la casilla deja de ser un icono y pasa a ser la miniatura del
   PDF, en la misma proporción que las tarjetas de la página de marca. */
.cat-card__pdf--portada {
    width: 54px; height: 70px;
    border-radius: 6px; overflow: hidden;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.cat-card__pdf--portada img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
}
.cat-card:hover .cat-card__pdf--portada {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(212, 175, 55, .55);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .38);
}

.cat-card__titulo { color: #fff; font-size: 1.1rem; line-height: 1.35; margin-bottom: 8px; }
.cat-card__desc { color: rgba(255, 255, 255, .68); font-size: .89rem; line-height: 1.6; margin-bottom: 18px; }

.cat-card__pie {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.cat-card__meta { color: rgba(255, 255, 255, .55); font-size: .8rem; }
.cat-card__formato {
    display: inline-block;
    background: rgba(212, 175, 55, .18);
    border: 1px solid rgba(212, 175, 55, .4);
    color: var(--oro-300);
    font-family: var(--fuente-titulo); font-weight: 700;
    font-size: .66rem; letter-spacing: .8px;
    padding: 2px 7px; border-radius: 4px;
}
.cat-card__descargar {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--fuente-titulo); font-weight: 700; font-size: .85rem;
    color: var(--oro-300);
    transition: var(--transicion);
}
.cat-card:hover .cat-card__descargar { color: var(--oro-200); }
.cat-card__descargar svg { transition: transform var(--transicion); }
.cat-card:hover .cat-card__descargar svg { transform: translateY(3px); }

/* Botón "Ver más" */
.catalogos__mas { display: flex; justify-content: center; margin-top: 34px; }
.catalogos__mas button[hidden] { display: none; }
.catalogos__mas svg { transition: transform var(--transicion); }
.catalogos__mas button.is-expandido svg { transform: rotate(180deg); }

/* Sin resultados */
.catalogos__vacio {
    text-align: center;
    color: rgba(255, 255, 255, .7);
    padding: 44px 20px;
    font-size: 1.02rem;
}
.catalogos__vacio[hidden] { display: none; }
.catalogos__vacio button {
    display: inline-block;
    margin-left: 8px;
    background: none; border: none;
    color: var(--oro-300);
    font-family: var(--fuente-titulo); font-weight: 700; font-size: 1rem;
    text-decoration: underline;
    cursor: pointer;
}
.catalogos__vacio button:hover { color: var(--oro-200); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto { background: var(--gris-50); }
.contacto__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: start; }

.contacto__info { display: grid; gap: 22px; }
.contacto__item { display: flex; gap: 16px; align-items: flex-start; }
.contacto__icono {
    flex-shrink: 0;
    width: 52px; height: 52px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
    color: var(--oro-300);
    border-radius: 14px;
    box-shadow: var(--sombra);
}
.contacto__item span { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gris-400); font-weight: 600; }
.contacto__item a, .contacto__item p { color: var(--texto); font-weight: 500; font-size: 1.02rem; transition: color var(--transicion); }
.contacto__item a:hover { color: var(--oro-600); }
/* Personas de contacto */
.asesores {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-top: 3px solid var(--oro-400);
    border-radius: var(--radio);
    padding: 22px 24px 6px;
    box-shadow: var(--sombra);
}
.asesores__titulo {
    font-size: .8rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--oro-600);
    margin-bottom: 16px;
}
.asesor { display: flex; gap: 14px; padding: 14px 0; }
.asesor + .asesor { border-top: 1px dashed var(--gris-200); }
.asesor__inicial {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
    color: var(--oro-300);
    font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.05rem;
}
.asesor__datos { min-width: 0; }
.asesor__nombre {
    display: block;
    font-family: var(--fuente-titulo); font-size: 1rem;
    color: var(--azul-700);
}
.asesor__correo {
    display: block;
    font-size: .88rem; color: var(--gris-600);
    word-break: break-all;
    transition: color var(--transicion);
}
.asesor__correo:hover { color: var(--oro-600); }
.asesor__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.asesor__accion {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--gris-50);
    border: 1px solid var(--gris-200);
    border-radius: 50px;
    padding: 6px 13px;
    font-family: var(--fuente-titulo); font-weight: 600; font-size: .82rem;
    color: var(--azul-700);
    transition: var(--transicion);
}
.asesor__accion:hover { border-color: var(--oro-400); transform: translateY(-2px); }
.asesor__accion--whats { background: rgba(37, 211, 102, .1); border-color: rgba(37, 211, 102, .35); color: #128C4B; }
.asesor__accion--whats:hover { background: rgba(37, 211, 102, .18); border-color: #25D366; }

.contacto__horario {
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    padding: 22px 24px;
    box-shadow: var(--sombra);
    margin-top: 6px;
}
.contacto__horario h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; color: var(--azul-700); margin-bottom: 14px; }
.contacto__horario h3 svg { color: var(--oro-500); }
.contacto__horario li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--gris-200); font-size: .95rem; }
.contacto__horario li:last-child { border-bottom: none; }
.contacto__horario li span { color: var(--gris-600); }
.contacto__horario li strong { color: var(--azul-700); }

/* Formulario */
.contacto__form-wrap {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--sombra-fuerte);
    padding: 40px;
    border-top: 4px solid var(--oro-400);
}
.contacto__form { display: grid; gap: 18px; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label { font-family: var(--fuente-titulo); font-weight: 600; font-size: .88rem; color: var(--azul-700); }
.campo input, .campo textarea {
    font-family: var(--fuente-texto);
    font-size: .98rem;
    padding: 13px 16px;
    border: 1.5px solid var(--gris-200);
    border-radius: var(--radio-sm);
    background: var(--gris-50);
    transition: var(--transicion);
    resize: vertical;
    color: var(--texto);
}
.campo input:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--oro-400);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .14);
}
.campo input.invalido, .campo textarea.invalido { border-color: #e05252; background: #fdf3f3; }
.campo-oculto { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* Casilla de aceptación de términos */
.campo--terminos { margin-top: 2px; }
.casilla { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
/* El input real se oculta a la vista pero sigue recibiendo foco de teclado */
.casilla input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.casilla__caja {
    flex-shrink: 0;
    width: 20px; height: 20px;
    margin-top: 1px;
    display: grid; place-items: center;
    border: 1.5px solid var(--gris-200);
    border-radius: 6px;
    background: var(--gris-50);
    color: transparent;
    transition: var(--transicion);
}
.casilla input:checked + .casilla__caja {
    background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
    border-color: var(--oro-500);
    color: var(--azul-900);
}
.casilla input:focus-visible + .casilla__caja {
    border-color: var(--oro-400);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .18);
}
/* Se sobreescribe .campo label, que es de titulares y en negrita */
.casilla__texto {
    font-family: var(--fuente-texto); font-weight: 400;
    font-size: .9rem; line-height: 1.6;
    color: var(--gris-600);
}
.casilla__texto a { color: var(--oro-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.casilla__texto a:hover { color: var(--azul-700); }
.casilla.invalido .casilla__caja { border-color: #e05252; background: #fdf3f3; }
.casilla.invalido .casilla__texto { color: #d13b3b; }
.contacto__respuesta { font-size: .95rem; font-weight: 500; margin-top: 2px; min-height: 22px; }
.contacto__respuesta.ok { color: #1f8a52; }
.contacto__respuesta.error { color: #d13b3b; }
#btnEnviar.cargando { opacity: .7; pointer-events: none; }

/* ============================================================
   PIE DE PÁGINA
   ============================================================ */
.pie { background: var(--azul-900); color: rgba(255, 255, 255, .72); padding-top: 64px; }
.pie__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1.1fr; gap: 40px; padding-bottom: 48px; }
.pie__logo { filter: brightness(0) invert(1); opacity: .95; height: 58px; width: auto; margin-bottom: 18px; }
.pie__desc { font-size: .92rem; line-height: 1.7; }
.pie__redes { display: flex; gap: 12px; margin-top: 20px; }
.pie__redes a {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .8);
    transition: var(--transicion);
}
.pie__redes a:hover { background: var(--oro-400); color: var(--azul-900); transform: translateY(-3px); }
.pie__titulo { color: #fff; font-size: 1.05rem; margin-bottom: 18px; position: relative; padding-bottom: 10px; }
.pie__titulo::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--oro-400); }
.pie__lista { display: grid; gap: 11px; }
.pie__lista a { font-size: .92rem; transition: var(--transicion); }
.pie__lista a:hover { color: var(--oro-300); padding-left: 5px; }
.pie__lista--contacto li { display: flex; gap: 10px; font-size: .92rem; align-items: flex-start; }
.pie__lista--contacto svg { color: var(--oro-400); flex-shrink: 0; margin-top: 3px; }
.pie__lista--horario li { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; padding: 3px 0; }
/* Asesores en el pie */
.pie__titulo--horario { margin-top: 26px; }
.pie__asesores { gap: 16px; }
.pie__asesores li { display: grid; gap: 3px; }
.pie__asesor-nombre { color: #fff; font-family: var(--fuente-titulo); font-size: .95rem; font-weight: 600; }
.pie__asesores a { font-size: .86rem; word-break: break-all; }
.pie__asesor-tel {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--oro-300) !important;
    word-break: normal;
}
.pie__asesor-tel:hover { color: var(--oro-200) !important; padding-left: 0 !important; }
.pie__lista--horario strong { color: #fff; font-weight: 500; }
.pie__legal { border-top: 1px solid rgba(255, 255, 255, .1); }
.pie__legal-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 22px 0; font-size: .85rem; color: rgba(255, 255, 255, .55); }
.pie__legal-enlaces { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pie__legal-enlaces a { color: rgba(255, 255, 255, .72); transition: var(--transicion); }
.pie__legal-enlaces a:hover { color: var(--oro-300); text-decoration: underline; }

/* Botón flotante WhatsApp — estilo oro, a juego con el branding */
.whatsapp-flotante {
    position: fixed;
    bottom: 26px; right: 26px;
    z-index: 90;
    width: 58px; height: 58px;
    border-radius: 50%;
    /* Verde oficial de WhatsApp, igual que en la portada (index.php) */
    background: #25D366;
    color: #FFFFFF;
    display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
    animation: pulso 2.4s infinite;
    transition: transform var(--transicion);
}
.whatsapp-flotante:hover { transform: scale(1.08); }
@keyframes pulso {
    0%   { box-shadow: 0 8px 24px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, .5); }
    70%  { box-shadow: 0 8px 24px rgba(37, 211, 102, .45), 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 8px 24px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ============================================================
   PÁGINA DE DETALLE DE MARCA (marca.php)
   Usa la variable --acento (color de la marca) definida en .marca
   ============================================================ */
.marca { --acento: var(--oro-400); }

/* --- Hero --- */
.marca-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 38px 0 62px;
    background: linear-gradient(120deg, var(--azul-900), var(--azul-600));
}
.marca-hero__circuito {
    position: absolute; inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--acento) 32%, transparent), transparent 45%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 30h20M40 30h20M30 0v20M30 40v20'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
.marca-hero > .contenedor { position: relative; z-index: 1; }
.miga { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 34px; }
.miga a { color: rgba(255,255,255,.75); transition: color .2s; }
.miga a:hover { color: var(--oro-300); }
.miga strong { color: #fff; font-weight: 600; }
.marca-hero__cuerpo { display: flex; align-items: center; gap: 42px; flex-wrap: wrap; }
.marca-hero__logo {
    flex-shrink: 0;
    /* La caja se ensancha según la forma del logotipo: los símbolos cuadrados
       (Littelfuse) ocupan 180px y los logotipos horizontales (Adalet) crecen
       hasta 300px en vez de quedar diminutos en el centro. */
    width: auto; height: auto;
    min-width: 180px; max-width: 300px;
    min-height: 130px;
    background: #fff; border-radius: 18px;
    /* flex (no grid): con grid la fila auto no limita el alto y la imagen se desborda */
    display: flex; align-items: center; justify-content: center;
    padding: 22px 26px;
    overflow: hidden;
    box-shadow: 0 20px 42px rgba(0,0,0,.28);
}
.marca-hero__logo img { max-width: 100%; max-height: 86px; width: auto; height: auto; object-fit: contain; }
.marca-hero__inicial { font-family: var(--fuente-titulo); font-weight: 800; font-size: 4rem; color: var(--azul-700); }
.marca-hero__info { flex: 1; min-width: 260px; }
.marca-hero__nombre { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; }
.marca-hero__eslogan { color: rgba(255,255,255,.82); font-size: 1.1rem; margin-top: 10px; max-width: 540px; }
.marca-hero__acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* --- Acerca de + ventajas --- */
.marca-intro__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: center; }
.marca-intro__texto .etiqueta { margin-bottom: 16px; }
/* Si la marca no tiene ventajas, el texto ocupa todo el ancho */
.marca-intro__texto:only-child { grid-column: 1 / -1; max-width: 900px; margin: 0 auto; }
.marca-intro__texto p { color: var(--gris-600); margin-bottom: 14px; line-height: 1.8; text-align: justify; hyphens: auto; }
.ventajas { display: grid; gap: 16px; }
.ventaja-card {
    display: flex; gap: 16px; align-items: flex-start;
    background: #fff; border: 1px solid var(--gris-200);
    border-radius: var(--radio); padding: 22px 24px;
    box-shadow: var(--sombra); transition: var(--transicion);
}
.ventaja-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-fuerte); border-color: color-mix(in srgb, var(--acento) 45%, var(--gris-200)); }
.ventaja-card__icono {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--acento) 16%, transparent);
    color: color-mix(in srgb, var(--acento) 72%, #333);
}
.ventaja-card h3 { font-size: 1.05rem; color: var(--azul-700); margin-bottom: 3px; }
.ventaja-card p { font-size: .92rem; color: var(--gris-600); }

/* --- Familias (filas alternadas) --- */
/* Con los 96px de .seccion arriba y abajo quedaban ~190px de aire entre
   "Acerca de la marca" y este bloque: al leer el intro nada delataba que
   seguía otra sección. Se acortan los cortes y el fondo gris hace que el
   borde de la sección asome antes que su título. */
.marca-intro { padding-bottom: 60px; }
.marca-familias { background: var(--gris-50); padding-top: 60px; padding-bottom: 76px; }
.marca-familias .seccion__cabecera { margin-bottom: 44px; }
.catalogos-marca { padding-top: 76px; }

.familias { display: grid; gap: 44px; }
.familia { display: grid; grid-template-columns: .85fr 1.15fr; gap: 46px; align-items: center; }
.familia__media {
    position: relative;
    /* marca.php ajusta --proporcion cuando la foto es una tira muy apaisada */
    aspect-ratio: var(--proporcion, 4 / 3);
    border-radius: 18px; overflow: hidden;
    background: #fff; border: 1px solid var(--gris-200);
    box-shadow: var(--sombra);
    display: grid; place-items: center;
}
/* La foto se ancla a los cuatro lados del marco. Sin esto, al ser un ítem de
   grid centrado, el alto se resolvía como 'auto' (según la proporción de la
   foto), object-fit no llegaba a actuar y las fotos más altas que 4:3 se
   recortaban arriba y abajo contra el overflow del marco. */
.familia__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* Fotos de catálogo (producto recortado sobre blanco): se muestran completas */
/* Fondo plano: casi todas estas fotos vienen recortadas sobre blanco puro, y
   sobre un degradado se marcaba el rectángulo de la foto dentro de la tarjeta. */
.familia__media--contener {
    background: #fff;
}
.familia__media--contener img { object-fit: contain; padding: 26px; }
/* En marcos apaisados el relleno de 26px se come la foto.
   Sólo aplica a fotos de catálogo: una de entorno debe llenar el marco. */
.familia__media--contener.familia__media--ancha img { padding: 16px 22px; }
.familia__media--vacia {
    background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 16%, #fff), var(--gris-50));
    color: color-mix(in srgb, var(--acento) 65%, #555);
}
.familia__nombre { font-size: 1.6rem; color: var(--azul-700); margin-bottom: 12px; position: relative; padding-bottom: 12px; }
.familia__nombre::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; background: var(--acento); border-radius: 2px; }
.familia__desc { color: var(--gris-600); line-height: 1.75; margin-bottom: 18px; text-align: justify; hyphens: auto; }
.familia__items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.familia__items li { display: flex; align-items: center; gap: 9px; font-size: .94rem; color: var(--gris-800); }
.familia__items svg { flex-shrink: 0; color: color-mix(in srgb, var(--acento) 72%, #333); }
/* Filas alternadas: la foto cambia de lado, pero las columnas se invierten
   con ella para que la foto mida siempre lo mismo en toda la página. */
.familia:nth-child(even) { grid-template-columns: 1.15fr .85fr; }
.familia:nth-child(even) .familia__media { grid-column: 2; grid-row: 1; }
.familia:nth-child(even) .familia__texto { grid-column: 1; grid-row: 1; }

/* --- Catálogos descargables --- */
.catalogos-marca { background: linear-gradient(135deg, var(--azul-900), var(--azul-700)); }
.descargas__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.descarga-card {
    display: flex; align-items: flex-start; gap: 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radio); padding: 20px 22px;
    transition: var(--transicion);
}
.descarga-card:hover { background: rgba(255,255,255,.09); border-color: rgba(212,175,55,.5); transform: translateY(-4px); }
.descarga-card__pdf {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(212,175,55,.16); color: var(--oro-300);
}
/* Miniatura de la portada del PDF en vez del icono genérico */
.descarga-card__pdf--portada {
    width: 64px; height: 84px;
    border-radius: 6px; overflow: hidden;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
    transition: var(--transicion);
}
.descarga-card__pdf--portada img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
}
.descarga-card:hover .descarga-card__pdf--portada {
    border-color: rgba(212,175,55,.55);
    box-shadow: 0 8px 20px rgba(0,0,0,.38);
}
.descarga-card__info { flex: 1; min-width: 0; }
.descarga-card__info h3 { color: #fff; font-size: 1.02rem; margin-bottom: 4px; }
.descarga-card__desc { color: rgba(255,255,255,.68); font-size: .86rem; line-height: 1.5; margin-bottom: 8px; }
.descarga-card__meta {
    display: inline-flex; align-items: center; gap: 7px;
    color: rgba(255,255,255,.55); font-size: .8rem;
}
.descarga-card__formato {
    display: inline-block;
    background: rgba(212,175,55,.18);
    border: 1px solid rgba(212,175,55,.4);
    color: var(--oro-300);
    font-family: var(--fuente-titulo); font-weight: 700;
    font-size: .68rem; letter-spacing: .8px;
    padding: 2px 8px; border-radius: 4px;
}
/* La tarjeta completa es el enlace de descarga */
a.descarga-card { cursor: pointer; }
a.descarga-card:hover .descarga-card__btn { transform: translateY(2px); box-shadow: 0 8px 18px rgba(201,162,39,.5); }
.descarga-card--pronto { opacity: .72; }
.descarga-card__btn {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--oro-300), var(--oro-500));
    color: var(--azul-900); transition: var(--transicion);
}
.descarga-card__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(201,162,39,.5); }
.descarga-card__btn--pronto { background: rgba(255,255,255,.1); color: rgba(255,255,255,.55); cursor: default; }
.descarga-card__btn--pronto:hover { transform: none; box-shadow: none; }

/* --- Marca sin contenido / CTA final --- */
.marca-pronto { text-align: center; }
.marca-pronto__icono {
    width: 70px; height: 70px; border-radius: 50%;
    display: grid; place-items: center; margin: 0 auto 20px;
    background: color-mix(in srgb, var(--acento) 16%, transparent);
    color: color-mix(in srgb, var(--acento) 68%, #444);
}
.marca-cta { background: var(--azul-700); }
.marca-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 46px 0; flex-wrap: wrap; }
.marca-cta h2 { color: #fff; font-size: 1.6rem; }
.marca-cta p { color: rgba(255,255,255,.75); margin-top: 6px; }

/* --- Responsivo de la página de marca --- */
@media (max-width: 900px) {
    .marca-intro__grid { grid-template-columns: 1fr; gap: 34px; }
    .familia { grid-template-columns: 1fr; gap: 22px; }
    .familia:nth-child(even) .familia__media,
    .familia:nth-child(even) .familia__texto { grid-column: 1; grid-row: auto; }
    .descargas__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .marca-hero__cuerpo { gap: 24px; }
    .marca-hero__logo { min-width: 140px; max-width: 230px; min-height: 104px; padding: 18px 20px; }
    .marca-hero__logo img { max-height: 68px; }
    .familia__items { grid-template-columns: 1fr; }
    .marca-cta__inner { flex-direction: column; text-align: center; }
    /* En pantalla angosta la portada cede ancho al texto de la tarjeta */
    .descarga-card { gap: 12px; padding: 18px 16px; }
    .descarga-card__pdf--portada { width: 54px; height: 71px; }
}

/* ============================================================
   PÁGINA ¿QUIÉNES SOMOS? (quienes-somos.php)
   ============================================================ */
.qs-hero__cuerpo { max-width: 780px; }
.qs-hero__cuerpo .marca-hero__nombre { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.18; }
.qs-hero__oro {
    background: linear-gradient(135deg, var(--oro-200), var(--oro-500));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Justificado sólo aquí: es un párrafo largo en columna ancha (~12 palabras
   por línea), que es donde justify reparte bien el sobrante. No se toca
   .marca-hero__eslogan a secas porque lo comparten las 13 páginas de marca. */
.qs-hero__cuerpo .marca-hero__eslogan { max-width: 720px; line-height: 1.75; text-align: justify; }

/* --- Lo que hacemos (pilares en filas alternadas) --- */
.pilares { display: grid; gap: 72px; }
.pilar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.pilar__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
    box-shadow: var(--sombra-fuerte);
}
.pilar__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.pilar:hover .pilar__media img { transform: scale(1.04); }
/* Velo azul sutil para integrar la foto al branding */
.pilar__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(200deg, rgba(10, 26, 58, .35), transparent 55%);
}
.pilar__tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--fuente-titulo);
    font-weight: 700; font-size: .78rem;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--oro-600);
    margin-bottom: 14px;
}
.pilar__tag::before {
    content: '';
    width: 26px; height: 2px;
    background: var(--oro-500);
}
.pilar__titulo {
    font-size: clamp(1.45rem, 2.6vw, 1.95rem);
    color: var(--azul-700);
    margin-bottom: 16px;
    line-height: 1.25;
}
.pilar__desc { color: var(--gris-600); line-height: 1.8; margin-bottom: 22px; text-align: justify; hyphens: auto; }
.pilar__puntos { display: grid; gap: 12px; }
.pilar__puntos li {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--fuente-titulo);
    font-weight: 600; font-size: .95rem;
    color: var(--azul-700);
}
.pilar__puntos svg {
    flex-shrink: 0;
    width: 28px; height: 28px;
    padding: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--oro-400) 18%, transparent);
    color: var(--oro-600);
}
/* Filas pares: la foto pasa a la derecha */
.pilar:nth-child(even) .pilar__media { grid-column: 2; grid-row: 1; }
.pilar:nth-child(even) .pilar__texto { grid-column: 1; grid-row: 1; }

/* --- Misión y Visión (reutiliza .mvv) --- */
.qs-mvv { background: var(--gris-50); }

/* --- Clientes (fondo oscuro con stats e industrias) --- */
.qs-clientes {
    background:
        linear-gradient(135deg, rgba(10, 26, 58, .97), rgba(18, 38, 79, .97)),
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='0.06'%3E%3Cpath d='M0 40h30M50 40h30M40 0v30M40 50v30'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3C/g%3E%3C/svg%3E");
}
.qs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
.qs-stat {
    text-align: center;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radio);
    padding: 26px 14px;
    transition: var(--transicion);
}
.qs-stat:hover { background: rgba(255, 255, 255, .09); border-color: rgba(212, 175, 55, .5); transform: translateY(-4px); }
.qs-stat strong {
    display: block;
    font-family: var(--fuente-titulo);
    font-weight: 800; font-size: 2.2rem;
    background: linear-gradient(135deg, var(--oro-200), var(--oro-500));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.qs-stat span { color: rgba(255, 255, 255, .75); font-size: .9rem; }
.qs-industrias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qs-industrias li {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-left: 3px solid var(--oro-400);
    border-radius: 10px;
    padding: 12px 15px;
    font-family: var(--fuente-titulo); font-weight: 600; font-size: .92rem;
    color: #fff;
    transition: var(--transicion);
}
.qs-industrias li:hover { background: rgba(255, 255, 255, .1); transform: translateY(-3px); }

/* --- Galería --- */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.galeria__item {
    position: relative;
    display: block;
    padding: 0; border: none;
    border-radius: var(--radio);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    background: var(--gris-100);
    box-shadow: var(--sombra);
    transition: var(--transicion);
}
.galeria__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.galeria__item::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10, 26, 58, .45), transparent 45%);
    opacity: 0;
    transition: opacity var(--transicion);
}
.galeria__item:hover { transform: translateY(-5px); box-shadow: var(--sombra-fuerte); }
.galeria__item:hover img { transform: scale(1.06); }
.galeria__item:hover::after { opacity: 1; }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0;
    z-index: 999;
    background: rgba(6, 14, 32, .93);
    display: flex; align-items: center; justify-content: center;
    padding: 30px;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
    max-width: min(1100px, 92vw);
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lightbox__btn {
    position: absolute;
    z-index: 2;
    width: 48px; height: 48px;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff; font-size: 1.25rem;
    display: grid; place-items: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: var(--transicion);
}
.lightbox__btn:hover { background: var(--oro-400); color: var(--azul-900); }
.lightbox__cerrar { top: 22px; right: 22px; font-size: 1.7rem; }
.lightbox__flecha--prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__flecha--next { right: 22px; top: 50%; transform: translateY(-50%); }

/* --- Contáctanos (canales) --- */
.qs-contacto { background: var(--gris-50); }
.qs-canales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.qs-canal {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: 6px;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    padding: 34px 26px;
    box-shadow: var(--sombra);
    transition: var(--transicion);
}
.qs-canal:hover { transform: translateY(-6px); box-shadow: var(--sombra-fuerte); border-color: var(--oro-400); }
.qs-canal__icono {
    width: 60px; height: 60px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
    color: var(--oro-300);
    margin-bottom: 10px;
    transition: var(--transicion);
}
.qs-canal:hover .qs-canal__icono { background: linear-gradient(135deg, var(--oro-300), var(--oro-500)); color: var(--azul-900); }
.qs-canal strong { font-family: var(--fuente-titulo); font-size: 1.12rem; color: var(--azul-700); }
.qs-canal span { color: var(--texto); font-weight: 500; }
.qs-canal em { font-style: normal; font-size: .84rem; color: var(--gris-400); }
.qs-contacto__cta { text-align: center; margin-top: 38px; }

/* --- Responsivo ¿Quiénes somos? --- */
@media (max-width: 1024px) {
    .pilares { gap: 48px; }
    .pilar { grid-template-columns: 1fr; gap: 24px; }
    .pilar:nth-child(even) .pilar__media,
    .pilar:nth-child(even) .pilar__texto { grid-column: 1; grid-row: auto; }
    .qs-stats { grid-template-columns: repeat(2, 1fr); }
    .qs-industrias { grid-template-columns: repeat(2, 1fr); }
    .qs-canales { grid-template-columns: 1fr; }
    .galeria { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .qs-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .qs-stat strong { font-size: 1.7rem; }
    .qs-industrias { grid-template-columns: 1fr; }
    .galeria { grid-template-columns: 1fr; }
    .lightbox__flecha--prev { left: 10px; }
    .lightbox__flecha--next { right: 10px; }
}

/* ============================================================
   BLOG (blog.php y articulo.php)
   ============================================================ */
.blog-hero__cuerpo, .articulo-hero__cuerpo { max-width: 780px; }
.blog-hero__cuerpo .hero__badge, .articulo-hero__cuerpo .hero__badge { margin-bottom: 18px; }

/* --- Listado de notas --- */
.blog__grid {
    display: grid;
    /* Tope de 420px: con una o dos notas publicadas, auto-fit estiraba la
       tarjeta a todo el ancho del contenedor y la portada se veía ampliada. */
    grid-template-columns: repeat(auto-fit, minmax(310px, 420px));
    justify-content: center;
    gap: 30px;
}
.nota {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
    transition: var(--transicion);
}
.nota:hover { transform: translateY(-6px); box-shadow: var(--sombra-fuerte); border-color: var(--oro-400); }

.nota__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--azul-700), var(--azul-500));
}
.nota__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.nota:hover .nota__media img { transform: scale(1.05); }
.nota__categoria {
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(10, 26, 58, .85);
    border: 1px solid rgba(212, 175, 55, .5);
    color: var(--oro-300);
    font-family: var(--fuente-titulo);
    font-weight: 700; font-size: .72rem;
    letter-spacing: 1px; text-transform: uppercase;
    padding: 5px 12px; border-radius: 50px;
    backdrop-filter: blur(4px);
}

.nota__cuerpo { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.nota__datos {
    display: flex; align-items: center; gap: 8px;
    color: var(--gris-400); font-size: .82rem;
    margin-bottom: 12px;
}
.nota__titulo { font-size: 1.22rem; line-height: 1.35; margin-bottom: 10px; }
.nota__titulo a { color: var(--azul-700); transition: color var(--transicion); }
.nota:hover .nota__titulo a { color: var(--oro-600); }
.nota__resumen { color: var(--gris-600); font-size: .94rem; line-height: 1.7; margin-bottom: 18px; text-align: justify; hyphens: auto; }
.nota__enlace {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: auto;
    font-family: var(--fuente-titulo); font-weight: 700; font-size: .88rem;
    color: var(--oro-600);
    transition: var(--transicion);
}
.nota__enlace svg { transition: transform var(--transicion); }
.nota__enlace:hover { color: var(--azul-700); }
.nota:hover .nota__enlace svg { transform: translateX(5px); }

/* --- Detalle del artículo --- */
.articulo__titulo { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.2; }
.articulo__datos {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    color: rgba(255, 255, 255, .7); font-size: .9rem;
    margin-top: 16px;
}
.articulo__contenido > .contenedor { max-width: 820px; }
.articulo__privacidad { background: var(--gris-50); border-top: 1px solid var(--gris-200); }
.articulo__privacidad .seccion__cabecera { max-width: 820px; }
.articulo__portada {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--sombra-fuerte);
    margin: -80px 0 42px;   /* monta la foto sobre el encabezado azul */
    position: relative; z-index: 2;
}
.articulo__portada img { width: 100%; height: auto; display: block; }

.articulo__texto { color: var(--gris-600); font-size: 1.05rem; line-height: 1.85; }
.articulo__texto p { margin-bottom: 20px; text-align: justify; hyphens: auto; }
.articulo__texto a:not(.articulo__volver a) {
    color: var(--oro-600);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    /* correos y URLs largas no deben desbordar la columna en movil */
    overflow-wrap: anywhere;
}
.articulo__texto a:not(.articulo__volver a):hover { color: var(--azul-700); }
.articulo__texto p.articulo__formula { text-align: center; hyphens: none; }
.articulo__texto h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.6rem);
    color: var(--azul-700);
    margin: 38px 0 16px;
    padding-left: 16px;
    border-left: 4px solid var(--oro-400);
}
.articulo__lista { display: grid; gap: 12px; margin: 0 0 24px; }
.articulo__lista li { display: flex; gap: 12px; align-items: flex-start; }
.articulo__lista svg {
    flex-shrink: 0;
    width: 26px; height: 26px;
    padding: 4px;
    margin-top: 2px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--oro-400) 18%, transparent);
    color: var(--oro-600);
}
/* Ecuación destacada dentro del artículo */
.articulo__formula {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    margin: 28px 0;
    padding: 24px 26px;
    background: var(--gris-50);
    border: 1px solid var(--gris-200);
    border-radius: var(--radio);
    text-align: center;
}
.articulo__formula-eq {
    font-family: var(--fuente-titulo);
    font-weight: 800;
    font-size: clamp(1.35rem, 3.4vw, 1.75rem);
    letter-spacing: 1px;
    color: var(--azul-700);
    /* la fórmula es una sola unidad: nunca debe partirse en dos renglones */
    white-space: nowrap;
}
.articulo__formula-nota {
    font-size: .88rem; line-height: 1.5;
    color: var(--gris-600);
    max-width: 44ch;
}

.articulo__cita {
    margin: 32px 0;
    padding: 26px 30px;
    background: var(--gris-50);
    border-left: 4px solid var(--oro-400);
    border-radius: 0 var(--radio) var(--radio) 0;
    font-family: var(--fuente-titulo);
    font-size: 1.12rem; font-weight: 600; font-style: italic;
    color: var(--azul-700);
    line-height: 1.6;
}

.articulo__marcas {
    margin-top: 46px;
    padding-top: 30px;
    border-top: 1px solid var(--gris-200);
}
.articulo__marcas h3 {
    font-size: .82rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--oro-600); margin-bottom: 16px;
}
.articulo__marcas-lista { display: flex; flex-wrap: wrap; gap: 14px; }
.articulo__marca {
    display: grid; place-items: center;
    /* min-width/min-height valen "auto" por defecto en items de flex y de grid,
       y eso les impide encogerse por debajo del tamaño natural de su contenido.
       Con logos grandes (Micron 675x453, Littelfuse 2412x560) la caja se estiraba
       y el logo se salía por debajo. Se anulan aquí y en la imagen. */
    min-width: 190px; max-width: 265px; height: 112px;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid var(--gris-200);
    border-radius: var(--radio-sm);
    transition: var(--transicion);
}
.articulo__marca img { min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: var(--transicion); }
.articulo__marca:hover { border-color: var(--oro-400); transform: translateY(-3px); box-shadow: var(--sombra); }
.articulo__marca:hover img { filter: grayscale(0); opacity: 1; }
.articulo__marca span { font-family: var(--fuente-titulo); font-weight: 700; color: var(--azul-700); font-size: .9rem; }

.articulo__volver { margin-top: 40px; }
.articulo__volver a {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--fuente-titulo); font-weight: 700;
    color: var(--azul-700);
    transition: var(--transicion);
}
.articulo__volver a:hover { color: var(--oro-600); gap: 13px; }

.articulo__otras { background: var(--gris-50); }

@media (max-width: 700px) {
    .articulo__portada { margin: -50px 0 32px; border-radius: 14px; }
    .articulo__cita { padding: 20px 22px; font-size: 1.02rem; }
}

/* ============================================================
   ANIMACIONES AL HACER SCROLL
   ============================================================ */
.animar { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s ease; }
.animar[data-animar="izquierda"] { transform: translateX(-40px); }
.animar[data-animar="derecha"] { transform: translateX(40px); }
.animar.visible { opacity: 1; transform: translate(0, 0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .quienes__grid { grid-template-columns: 1fr; gap: 48px; }
    .quienes__media { max-width: 420px; margin: 0 auto; }
    .marcas__grid { grid-template-columns: repeat(4, 1fr); }
    .franja__grid { grid-template-columns: repeat(2, 1fr); }
    .franja__item:nth-child(2) { border-left: none; }
    .franja__item:nth-child(3) { border-left: none; }
    .pie__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 860px) {
    .mvv { grid-template-columns: 1fr; gap: 20px; margin-top: 44px; }

    /* Menú móvil */
    .nav {
        position: fixed;
        top: var(--alto-cabecera); right: 0;
        width: min(320px, 82%);
        height: calc(100vh - var(--alto-cabecera));
        background: #fff;
        box-shadow: -8px 0 30px rgba(10, 26, 58, .16);
        transform: translateX(100%);
        transition: transform var(--transicion);
        padding: 24px;
        overflow-y: auto;
    }
    .nav.abierto { transform: translateX(0); }
    .nav__lista { flex-direction: column; align-items: stretch; gap: 4px; }
    .nav__enlace { display: block; padding: 14px 16px; border-radius: 10px; }
    .nav__enlace::after { display: none; }
    .nav__enlace:hover { background: var(--gris-50); }
    .nav__enlace--cta { text-align: center; margin: 12px 0 0; }
    .nav__toggle { display: flex; }

    /* Marcas: en móvil el desplegable se comporta como acordeón */
    .nav__enlace--desplegable { justify-content: space-between; }
    .submenu {
        position: static;
        width: auto;
        transform: none;
        opacity: 1;
        visibility: visible;
        border: none;
        border-left: 2px solid var(--gris-200);
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 0 10px;
        margin: 2px 0 2px 16px;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease, padding .35s ease;
    }
    .submenu::before { display: none; }
    /* En táctil sólo abre con clic, no al pasar el dedo */
    .nav__item--desplegable:hover .submenu,
    .nav__item--desplegable:focus-within .submenu { max-height: 0; }
    .nav__item--desplegable.abierto .submenu {
        /* Holgado a propósito: debe superar el alto real de la lista para que no
           se corten las últimas marcas al crecer el catálogo. */
        max-height: 1600px;
        padding: 6px 0 6px 10px;
        transform: none;
    }
    .submenu__grid { grid-template-columns: 1fr; }
    .submenu__item { padding: 9px 10px; }
    .submenu__todas { justify-content: flex-start; margin-top: 4px; padding: 10px; }
    .contacto__grid { grid-template-columns: 1fr; }
    .quienes__grid { gap: 40px; }
}

@media (max-width: 560px) {
    .seccion { padding: 64px 0; }
    .marcas__grid { grid-template-columns: repeat(2, 1fr); }
    .franja__grid { grid-template-columns: 1fr; }
    .buscador__campo { padding-left: 16px; }
    .buscador__campo input { font-size: .95rem; }
    .franja__item { border-left: none !important; }
    .pie__grid { grid-template-columns: 1fr; }
    .pie__legal-inner { justify-content: center; text-align: center; }
    .contacto__form-wrap { padding: 28px 22px; }
    .campo-fila { grid-template-columns: 1fr; }
    .hero__flecha { display: none; }
    /* El titular ya ocupa casi todo el alto: el indicador se queda sin rótulo,
       y el bloque del banner sube para no quedar debajo de los botones. */
    .hero__slide { padding-bottom: 76px; }
    .hero__bajar { bottom: 12px; gap: 0; }
    .hero__bajar-texto { display: none; }
    .hero__bajar-icono { width: 34px; height: 34px; }
    .hero__titulo { font-size: 1.55rem; }
    /* En columnas angostas el justificado abre huecos: se desactiva */
    .mvv__texto, .marca-intro__texto p, .quienes__texto p,
    .familia__desc, .pilar__desc, .nota__resumen,
    .articulo__texto p { text-align: left; }
    .hero__texto { font-size: .95rem; margin-bottom: 22px; }
    .quienes__stat--1 { right: 8px; }
    .quienes__stat--2 { left: 8px; }
    .quienes__industrias { grid-template-columns: 1fr; }
    .loader__contenido { gap: 20px; }
}

/* Accesibilidad: respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .animar { opacity: 1; transform: none; }
}