/* ============================================================================
   linkvil.com.ar — Sistema de diseño (maqueta)
   ----------------------------------------------------------------------------
   Paleta y tipografía tomadas de yealink.com: su acento real es el TEAL
   (#10C29B / #08B286), no el azul. Eso diferencia el sitio de avicom y
   antelsoluciones, que son azules.

   Escala: 8 / 12 / 16 / 20 / 24 / 32 / 44 / 56 / 72
   Contenedor: 1200px. Cabecera sticky. Sin JS: los desplegables abren por
   :hover / :focus-within y el menú móvil usa <details>.
   ========================================================================== */

:root {
    /* Marca */
    --teal: #ec6516;
    --teal-700: #c24e0c;
    --teal-050: #fdf1e9;

    /* Neutros */
    --navy: #111417;
    --navy-800: #1c2126;
    --ink: #16202e;
    --body: #46536b;
    --muted: #7a879c;
    --line: #e2e8ef;
    --soft: #f4f7f9;
    --white: #ffffff;

    /* Estructura */
    --container: 1200px;
    --gutter: 24px;
    --radius: 4px;
    --radius-sm: 3px;
    --shadow-sm: 0 1px 2px rgba(10, 22, 38, .06), 0 4px 12px rgba(10, 22, 38, .04);
    --shadow-md: 0 8px 24px rgba(10, 22, 38, .08);
    --shadow-lg: 0 24px 60px rgba(10, 22, 38, .16);

    --font: "Manrope", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 140px; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}

h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal-700);
}

.lede { font-size: 1.125rem; color: var(--body); }
.muted { color: var(--muted); font-size: .925rem; }

/* ---------------------------------------------------------------- botones -- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--teal); color: #04291f; }
.btn--primary:hover { background: var(--teal-700); }

.btn--dark { background: var(--navy); color: var(--white); }
.btn--dark:hover { background: var(--navy-800); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
/* Botón sutil: tinte del color de marca con el texto en teal oscuro. Es para los CTA secundarios
   (el del header y el "Consultar" de las tarjetas del catálogo): se leen como botón pero sin el peso
   visual del botón lleno. */
.btn--soft {
    background: rgba(236, 101, 22, .10);
    color: var(--teal-700);
    border-color: rgba(236, 101, 22, .30);
}
.btn--soft:hover {
    background: rgba(236, 101, 22, .17);
    border-color: rgba(236, 101, 22, .48);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--onDark { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.btn--onDark:hover { border-color: var(--white); }

.btn--link {
    padding: 0;
    background: none;
    color: var(--teal-700);
    font-weight: 800;
}
.btn--link:hover { transform: none; color: var(--navy); }

/* --------------------------------------------------------------- topbar --- */
.topbar {
    background: var(--navy);
    color: rgba(255,255,255,.72);
    font-size: .82rem;
}

.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
}

.topbar strong { color: var(--white); font-weight: 700; }
.topbar a:hover { color: var(--white); }
.topbar .topbar-right { display: flex; gap: 20px; }

/* --------------------------------------------------------- cabecera ------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 29px; width: auto; }
.brand .brand-sub {
    padding-left: 12px;
    border-left: 1px solid var(--line);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.nav { display: flex; align-items: center; gap: 4px; }

.nav > li { position: relative; list-style: none; }

.nav > li > a {
    display: block;
    padding: 10px 14px;
    border-radius: 3px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
}
.nav > li > a:hover { background: var(--soft); }
.nav > li.is-active > a { color: var(--teal-700); }

.menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }

/* desplegable de soluciones */
.has-menu > .menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 480px;
    padding: 12px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.has-menu:hover > .menu-panel,
.has-menu:focus-within > .menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-panel a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 3px;
}
.menu-panel a:hover { background: var(--soft); }

/* Miniatura de la solución: recuadro FIJO de 56x56 con fondo claro.
   Es lo que hace que las cuatro alineen aunque las fotos tengan proporciones
   distintas (un teléfono es alto, una barra es ancha, una pantalla es 16:9).
   Sin el recuadro, cada producto flota a un tamaño diferente y el menú parece
   desprolijo. */
.menu-panel .mp-thumb {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.menu-panel .mp-thumb img {
    width: auto;
    height: auto;
    max-width: 66px;
    max-height: 66px;
    object-fit: contain;
    transition: transform .18s ease;
}

/* Al pasar el mouse la foto crece apenas: da vida sin mover el texto. */
.menu-panel a:hover .mp-thumb img,
.menu-panel a:focus-visible .mp-thumb img { transform: scale(1.07); }

.menu-panel .mp-title { display: block; font-weight: 700; color: var(--ink); font-size: .95rem; }
.menu-panel .mp-desc { display: block; font-size: .82rem; color: var(--muted); line-height: 1.45; }

/* menú móvil sin JS */
.mnav { display: none; }

/* ------------------------------------------------------------- secciones -- */
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--soft { background: var(--soft); }
.section--navy { background: var(--navy); color: rgba(255,255,255,.72); }
.section--navy h2, .section--navy h3 { color: var(--white); }

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head p { margin-top: 14px; font-size: 1.0625rem; }

/* ------------------------------------------------------------------ hero -- */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(236, 101, 22,.20), transparent 60%),
        radial-gradient(700px 400px at 5% 110%, rgba(236, 101, 22,.10), transparent 60%),
        var(--navy);
    color: rgba(255,255,255,.78);
}

.hero .container {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
    padding-top: 84px;
    padding-bottom: 84px;
}

.hero h1 { color: var(--white); }
.hero p { margin-top: 20px; font-size: 1.125rem; max-width: 30em; }
.hero .eyebrow { color: var(--teal); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-media {
    display: grid;
    place-items: center;
    padding: 28px;
    background: linear-gradient(160deg, #ffffff, #eef3f7);
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
}

.hero-media img { width: 100%; max-width: 420px; height: auto; }
.hero-media figcaption {
    margin-top: 14px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
}

/* --------------------------------------------------------- ficha de dato -- */
.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.14);
    margin-top: 56px;
    padding-top: 28px;
}
.facts div { padding-right: 24px; }
.facts strong { display: block; font-size: 1.5rem; color: var(--white); font-weight: 800; }
.facts span { font-size: .85rem; color: rgba(255,255,255,.6); }

/* ----------------------------------------------------------------- tarjetas */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Los links dentro del copete de una seccion ("consultá nuestro catálogo") tienen que leerse como
   links: heredaban el gris del párrafo y no se distinguían. */
.section-head p a { color: var(--teal-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.section-head p a:hover { color: var(--teal-800, var(--teal-700)); }

.card {


    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #d2dbe5; }

.card-media { position: relative;
    display: grid;
    place-items: center;
    padding: 26px 20px;
    background: linear-gradient(160deg, #ffffff, #f2f6f9);
    border-bottom: 1px solid var(--line);
    /* 240 px y sólo 12 px de aire: antes 210 px con 20 px de margen dejaban la foto chica dentro
       de una card grande. */
    height: 240px; overflow: hidden;
}
.card-media img { position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); max-width: none; max-height: none; object-fit: contain; mix-blend-mode: multiply; }

.card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-body p { font-size: .925rem; color: var(--body); }
.card-body .btn--link { margin-top: auto; }
/* Tres líneas como máximo: si el resumen es más largo, el navegador corta con "…" y todas las
   tarjetas de la fila mantienen el mismo alto. */
.card-body .card-desc {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* tarjeta de solución (con foto grande) */
.solution {
    position: relative;
    min-height: 300px;
    justify-content: flex-end;
    background: linear-gradient(160deg, #ffffff, #eef3f7);
}
.solution .card-media { min-height: 190px; }
.solution-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 5px 10px;
    border-radius: 4px;
    background: rgba(10,22,38,.06);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy);
}

/* ------------------------------------------------------------- valor/marca */
.value { display: flex; flex-direction: column; gap: 10px; }
.value .v-icon {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 3px;
    background: var(--teal-050);
    color: var(--teal-700);
    font-weight: 800;
}
.value h3 { font-size: 1rem; }
.value p { font-size: .9rem; }

/* -------------------------------------------------------- chips de filtro -- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }

.chip {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--white);
    font-size: .875rem;
    font-weight: 700;
    color: var(--body);
    cursor: pointer;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* --------------------------------------------------------- subnav anclas -- */
.subnav {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.subnav .container { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; }
.subnav a {
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--body);
}
.subnav a:hover { background: var(--soft); color: var(--ink); }

/* ------------------------------------------------------------- dos columnas */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.split-media {
    display: grid;
    place-items: center;
    padding: 34px;
    border-radius: 4px;
    background: linear-gradient(160deg, #ffffff, #eef3f7);
    border: 1px solid var(--line);
}
.split-media img { max-height: 440px; }

.checklist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; font-size: .975rem; }
.checklist strong { color: var(--ink); }
.checklist .tick {
    flex: 0 0 22px; height: 22px; margin-top: 2px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--teal-050);
    color: var(--teal-700);
    font-size: .7rem;
    font-weight: 800;
}

/* ------------------------------------------------------------------- pills */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--white);
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
}

/* --------------------------------------------------------------- banda CTA */
.cta-band {
    background: linear-gradient(120deg, var(--teal-700), var(--teal));
    color: #04291f;
}
.cta-band .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 48px;
}
.cta-band h2 { color: #04291f; max-width: 22em; }
.cta-band p { margin-top: 8px; font-weight: 600; }

/* --------------------------------------------------------------- formulario */
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: grid; gap: 6px; }
.field label { font-size: .82rem; font-weight: 800; color: var(--ink); }
.field input, .field select, .field textarea {
    font-family: var(--font);
    font-size: .95rem;
    color: var(--ink);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
    border-color: var(--teal);
}
.field textarea { min-height: 130px; resize: vertical; }
.form .legal { font-size: .8rem; color: var(--muted); }

.contact-aside {
    padding: 32px;
    border-radius: var(--radius);
    background: var(--soft);
    border: 1px solid var(--line);
}
.contact-aside dl { margin: 0; display: grid; gap: 18px; }
.contact-aside dt { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-aside dd { margin: 4px 0 0; font-weight: 700; color: var(--ink); }

/* ------------------------------------------------------------------- pie -- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.62); padding: 64px 0 32px; }
.site-footer h4 { color: var(--white); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9rem; }
.footer-grid a:hover { color: var(--white); }
.footer-brand img { height: 24px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-brand p { font-size: .9rem; max-width: 26em; }
.footer-bottom {
    margin-top: 48px; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex; justify-content: space-between; gap: 16px;
    font-size: .82rem;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .hero .container { grid-template-columns: 1fr; gap: 40px; }
    .hero-media img { max-width: 340px; }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .split { grid-template-columns: 1fr; gap: 36px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .nav { display: none; }
    .mnav { display: block; }
    /* en móvil el CTA del header no entra junto al logo y el botón de menú */
    .site-header .btn--primary, .site-header .btn--soft { display: none; }
    .brand .brand-sub { display: none; }
    .mnav summary {
        list-style: none;
        padding: 10px 16px;
        border: 1px solid var(--line);
        border-radius: 3px;
        font-weight: 700;
        cursor: pointer;
    }
    .mnav summary::-webkit-details-marker { display: none; }
    .mnav ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
    .mnav li a { display: block; padding: 12px; border-radius: 3px; font-weight: 600; color: var(--ink); }
    .mnav li a:hover { background: var(--soft); }
    
    .subnav { top: var(--header-h); }
}

/* En el celular 24px de cada lado dejan el contenido angosto. Se baja a 18px en TODOS los
   contenedores (cabecera, contenido e imagen), así siguen alineados entre sí. */
@media (max-width: 760px) {
    :root { --gutter: 18px; }

}

@media (max-width: 760px) {
    .section { padding: 56px 0; }
    .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
    .facts { grid-template-columns: 1fr; gap: 20px; }
    .cta-band .container { flex-direction: column; align-items: flex-start; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .topbar .topbar-right { display: none; }
    .topbar .container { justify-content: center; text-align: center; }
    .topbar { font-size: .75rem; line-height: 1.35; }
}

/* ============================================================================
   Variantes de página (landing de solución, catálogo)
   ========================================================================== */

/* migas de pan */
/* padding-block y no el atajo `padding`: el atajo borraba el padding
   horizontal que .container ya da, así que el breadcrumb de las páginas sin
   hero (catálogo y contacto) quedaba pegado al borde izquierdo. */
.crumb { padding-block: 20px 0; font-size: .82rem; color: var(--muted); }
.crumb a:hover { color: var(--ink); }
.crumb span { margin: 0 8px; opacity: .5; }

/* El breadcrumb va pegado al título: la sección que viene después no necesita sus 56 px de aire
   arriba (quedaba un hueco grande entre "Inicio / Productos" y el título de la página). */
.crumb + .section { padding-top: 20px; }

/* hero claro: la landing de solución no repite el bloque oscuro de la home */
.hero--light {
    background:
        radial-gradient(800px 420px at 90% 0%, rgba(236, 101, 22,.10), transparent 60%),
        linear-gradient(180deg, var(--soft), var(--white));
    color: var(--body);
    border-bottom: 1px solid var(--line);
}
.hero--light h1 { color: var(--ink); }
.hero--light .container { padding-top: 64px; padding-bottom: 64px; }
.hero--light .hero-media { background: var(--white); }

/* tarjeta de "sala por tamaño" */
.room-card { text-align: left; }
.room-card .room-size {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal-700);
}
.room-card .room-kit {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    font-size: .85rem;
    color: var(--muted);
}
.room-card .room-kit strong { color: var(--ink); display: block; font-size: .95rem; }

/* bloque "cómo se compone" */
.comp {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--white);
}
.comp .c-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    margin-bottom: 14px;
    border-radius: 3px;
    background: var(--navy);
    color: var(--white);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.comp h3 { font-size: .975rem; margin-bottom: 8px; }
.comp p { font-size: .875rem; }

/* ficha de producto: dato técnico corto */
.spec-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
    font-size: .82rem;
    color: var(--body);
}
.spec-list li { display: flex; gap: 8px; }
.spec-list li::before { content: "·"; color: var(--teal-700); font-weight: 800; }

.badge-line {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 4px;
    background: var(--teal-050);
    color: var(--teal-700);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ============================================================================
   Efectos al hacer scroll
   ----------------------------------------------------------------------------
   El JS agrega .reveal a los bloques y .is-in cuando entran en pantalla. Todo
   el movimiento queda anulado con prefers-reduced-motion, que es lo que
   corresponde: hay gente que necesita que la página no se mueva.
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms),
        transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(10, 22, 38, .07); }

/* ============================================================================
   Precio y stock: configurables desde el admin
   ----------------------------------------------------------------------------
   El sistema ya decide, por sitio, si se publican precios (sitios.mostrar_precios)
   y cómo se muestra el stock (sitios.tipo_stock: 0 nada / 1 texto / -1 numérico).
   El diseño reserva el lugar: si está apagado no queda un hueco vacío, y si se
   prende entra sin romper la tarjeta.
   ========================================================================== */
.precio-bloque { display: none; }


.precio { font-size: 1rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.precio small { display: block; font-size: .68rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }

.stock {
    padding: 3px 9px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}
.stock--in { background: var(--teal-050); color: #067a5c; }
.stock--low { background: #fff4e5; color: #9a6212; }
.stock--out { background: #eef1f5; color: var(--muted); }

/* barra de demo de la maqueta (el JS la inyecta) */
/* ============================================================
   CATALOGO — estructura tomada de yealink.com/product-list
   (columna de filtros con conteo + fichas grandes con el modelo
   como protagonista). Antes eran chips arriba y tarjetas chicas.
   ============================================================ */

.cat-head { max-width: 740px; margin-bottom: 36px; }
.cat-head h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 6px 0 10px; }
.cat-head p { color: var(--muted); font-size: 1rem; line-height: 1.6; }

.cat-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* ---------- filtros ---------- */
.filtros {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    font-size: .9rem;
}

.filtros-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.filtros-limpiar {
    border: 0;
    background: none;
    padding: 0;
    color: var(--teal-700);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

.filtro-grupo { margin-bottom: 26px; }
.filtro-grupo h4 {
    margin: 0 0 8px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.filtro-op {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    cursor: pointer;
    color: var(--ink);
}
.filtro-op input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--teal);
    cursor: pointer;
    flex: 0 0 auto;
}
.filtro-op .f-nombre { line-height: 1.3; }
.filtro-op .f-cant {
    margin-left: auto;
    color: var(--muted);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
}
.filtro-op:hover .f-nombre { color: var(--teal-700); }
/* Una opcion sin resultados se apaga pero NO se deshabilita:
   si se deshabilitara, destildarla seria imposible. */
.filtro-op.is-off { opacity: .35; }
.filtro-op.is-off:hover .f-nombre { color: inherit; }

.filtros-nota {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.5;
}
.filtros-nota a { color: var(--teal-700); font-weight: 700; }

/* ---------- resumen sobre la grilla ---------- */
.cat-resumen {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line);
    font-size: .85rem;
    font-weight: 700;
}
.cat-resumen-nota { color: var(--muted); font-weight: 500; font-size: .78rem; }

/* ---------- grilla ---------- */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.pcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -22px rgba(10, 22, 38, .38);
    border-color: #cdd8e2;
}

/* Alto fijo (no aspect-ratio) para que todas las tarjetas del catálogo alineen igual sin importar
   la foto, y `multiply` para que el fondo blanco de las imágenes se funda con el degradé de la
   tarjeta (no se puede exigir PNG transparente a 24 productos). */
.pc-media {
    position: relative;
    display: grid;
    place-items: center;
    height: 230px;
    padding: 13px;
    overflow: hidden;
    background: linear-gradient(170deg, #ffffff, #f4f7f9);
}
/* `max-height: 100%` no se resuelve dentro de un grid y `height: 100%` lo resuelve de forma circular
   (la caja se agranda y la imagen se corta). Se posiciona en absoluto con medidas calculadas: la
   imagen entra completa, centrada, y la celda mantiene su alto fijo. */
.pc-media img {
    position: absolute;
    top: 13px;
    left: 13px;
    width: calc(100% - 26px);
    height: calc(100% - 26px);
    max-width: none;
    max-height: none;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.pc-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 18px 20px;
    flex: 1;
}

.pc-serie {
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

.pc-nombre {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.pc-specs {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.5;
    min-height: 2.6em;
}

.pc-link {
    margin-top: auto;
    padding-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--teal-700);
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
}
.pc-link span { transition: transform .16s ease; }
.pc-link:hover span { transform: translateX(4px); }

.cat-vacio {
    padding: 56px 20px;
    text-align: center;
    border: 1px dashed var(--line);
    border-radius: 4px;
    color: var(--muted);
}
.cat-vacio p { margin: 0 0 18px; }

@media (max-width: 1080px) {
    .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .cat-layout { grid-template-columns: 1fr; gap: 26px; }
    .filtros { position: static; }
    .filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
    .filtros-cab, .filtros-nota { grid-column: 1 / -1; }
    .filtro-grupo { margin-bottom: 14px; }
}

@media (max-width: 620px) {
    .cat-grid { grid-template-columns: 1fr; }
    .filtros { grid-template-columns: 1fr; }
    .cat-resumen { flex-direction: column; gap: 4px; }
}
/* ============================================================
   FOTOS DE SOLUCIÓN
   1) .hero--foto  — banner con foto de fondo y texto superpuesto
   2) .sol-foto    — tarjetas de la home con foto de ambiente
   En las dos, el texto va SIEMPRE sobre un degradé oscuro: la foto
   no se elige por su luminosidad, así que el contraste no puede
   depender de ella.
   ============================================================ */

/* ---------- 1) hero con foto ---------- */
.hero--foto {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 540px;
    padding: 80px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
    color: #fff;
}
.hero--foto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--scrim-foto);
}
.hero--foto .hero-foto-txt { max-width: 540px; }
.hero--foto h1 { color: #fff; }
.hero--foto p { color: rgba(255, 255, 255, .88); }
.hero--foto .eyebrow { color: var(--teal); }
.hero--foto .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .06);
}
.hero--foto .btn--ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .14);
}

/* cada solución con su foto (rutas relativas a este archivo) */
.hero-foto-videoconferencia { background-image: url('img/foto-videoconferencia.webp'); }
.hero-foto-pantallas       { background-image: url('img/foto-pantallas.webp'); }
.hero-foto-telefonia       { background-image: url('img/foto-telefonia.webp'); }
.hero-foto-headsets        { background-image: url('img/foto-headsets.webp'); }

/* ---------- 2) tarjetas de solución con foto (home) ---------- */
.sol-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.sol-foto {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--navy);
    isolation: isolate;
    text-decoration: none;
}
.sol-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}
.sol-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 42%,
        rgba(6, 14, 24, .45) 66%,
        rgba(6, 14, 24, .80) 84%,
        rgba(6, 14, 24, .96) 100%);
}
.sol-foto:hover img { transform: scale(1.035); }

.sol-foto-txt {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 26px 26px 24px;
    color: #fff;
}
.sol-foto-eyebrow {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--teal);
}
.sol-foto-titulo {
    font-size: clamp(1.1rem, 1.6vw, 1.32rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.sol-foto-desc {
    font-size: .86rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
    max-width: 44ch;
}
.sol-foto-link {
    margin-top: 6px;
    font-size: .85rem;
    font-weight: 800;
    color: #fff;
    display: inline-flex;
    gap: 7px;
    align-items: center;
}
.sol-foto:hover .sol-foto-link { color: var(--teal); }

@media (max-width: 900px) {
    .hero--foto { min-height: 460px; padding: 64px 0; background-position: center 60%; }
}


@media (max-width: 760px) {
    .sol-grid { grid-template-columns: 1fr; }
    .sol-foto { aspect-ratio: 4 / 3; }
    .sol-foto-txt { padding: 20px; }
    .sol-foto-desc { display: none; }
}
/* ============================================================
   Ajustes 2026-11-07 (segunda vuelta)
   1) El scrim de las fotos estaba tapando la imagen
   2) Breadcrumb dentro del hero (antes quedaba sobre blanco,
      entre la cabecera y la foto)
   3) Hero de la home con slides que se disuelven
   ============================================================ */

/* El scrim es una sola definición, compartida por el hero de cada
   solución y por los slides de la home. Más liviano que la primera
   versión: la foto se lee, y el texto sigue teniendo contraste porque
   la parte izquierda va sobre navy casi opaco. */
:root {
    /* Elegido midiendo, no a ojo: con texto blanco, el 4.5:1 de WCAG se mantiene
       hasta el 48% del ancho (donde termina el bloque de texto) y de ahi en
       adelante el degradé se abre para que la foto se vea.
       Si se aclara la primera mitad, el texto deja de ser legible sobre las
       zonas claras de la foto (ventanas, paredes). */
    --scrim-foto:
        linear-gradient(90deg, rgba(6, 14, 24, .70) 0%, rgba(6, 14, 24, .46) 35%, rgba(6, 14, 24, .08) 65%, rgba(6, 14, 24, 0) 100%),
        linear-gradient(180deg, rgba(6, 14, 24, 0) 0%, rgba(6, 14, 24, 0) 55%, rgba(6, 14, 24, .12) 100%);
}

/* ---------- breadcrumb dentro del hero ---------- */
.crumb--hero {
    padding: 0 0 20px;
    color: rgba(255, 255, 255, .66);
    font-size: .78rem;
}
.crumb--hero a { color: rgba(255, 255, 255, .92); }
.crumb--hero a:hover { color: var(--teal); }
.crumb--hero span { color: rgba(255, 255, 255, .38); }

/* ---------- hero de la home con slides ---------- */
.hslider {
    position: relative;
    min-height: clamp(540px, 44vw, 620px);
    background: var(--navy);
    overflow: hidden;
    isolation: isolate;
}

.hs-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 64px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility 0s linear .7s;
}
.hs-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity .7s ease, visibility 0s linear 0s;
}

/* slide de marca: el de siempre, navy + producto en tarjeta blanca */
.hs-slide--marca { background: var(--navy); }

/* slides con foto */
.hs-slide--foto {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hs-slide--foto::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--scrim-foto);
}
.hs-slide--foto .container { position: relative; z-index: 1; }

.hs-txt { max-width: 540px; color: #fff; }
.hs-titulo {
    margin: 8px 0 22px;
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
}
.hs-desc {
    margin: 0 0 26px;
    color: rgba(255, 255, 255, .86);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 52ch;
}
.hs-slide--foto .eyebrow { color: var(--teal); }

/* indicadores */
.hs-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.hs-dot {
    width: 30px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .32);
    cursor: pointer;
    transition: background .2s ease, width .2s ease;
}
.hs-dot:hover { background: rgba(255, 255, 255, .55); }
.hs-dot.is-active { background: var(--teal); width: 44px; }
.hs-dot:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Con movimiento reducido no hay disuelto ni avance automático: se ve
   el primer slide y los indicadores siguen sirviendo para navegar. */
@media (prefers-reduced-motion: reduce) {
    .hs-slide { transition: none; }
}

@media (max-width: 900px) {
    .hslider { min-height: clamp(520px, 92vw, 640px); }
    .hs-slide { padding: 48px 0 72px; align-items: flex-end; }
    .hs-slide--marca { align-items: center; }
}
/* ---------- slide de marca del slider (home) ---------- */
.hs-marca {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}
/* .eyebrow usa el teal oscuro del sitio claro; sobre navy hace falta el brillante */
.hs-slide--marca .eyebrow { color: var(--teal); }
.hs-slide--marca .hs-txt p { color: rgba(255, 255, 255, .80); }

@media (max-width: 900px) {
    .hs-marca { grid-template-columns: 1fr; }
    .hs-slide--marca .hero-media { display: none; }
}


@media (max-width: 760px) {
    /* el slide de marca es el más alto y los slides son absolutos: si no
       entra, el overflow:hidden del slider lo recorta */
    .hs-slide--marca .facts { display: none; }
}
/* Sombra de texto en los heroes con foto: permite que el degradé sea más
   liviano sin perder legibilidad sobre las zonas claras de la imagen. */
.hero--foto h1,
.hero--foto .hero-foto-txt > p,
.hs-titulo,
.hs-desc {
    text-shadow: 0 2px 26px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .45);
}
/* ------------------------------------------------------------
   El hero con foto NO usa la retícula de dos columnas del hero
   de marca: el breadcrumb y el texto van apilados en la misma
   columna. Sin esto, el breadcrumb cae en la columna izquierda y
   el texto en la derecha (se veía exactamente así).
   También se anula el padding vertical del contenedor: el hero ya
   lo aporta en la sección, y sumado quedaban 164px.
   ------------------------------------------------------------ */
.hero--foto .container {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
}
/* ------------------------------------------------------------
   El slide de marca no está dentro de .hero, así que no le llegan
   sus reglas: los títulos vuelven al color global (--ink, gris
   oscuro) y quedaban casi ilegibles sobre el navy. Y la tarjeta del
   producto, sin la retícula que la limitaba, crecía hasta 640px de
   alto. Las dos cosas se resuelven acá.
   ------------------------------------------------------------ */
.hs-txt h1,
.hs-txt h2,
.hs-txt h3 { color: #fff; }

/* El h1 de los slides no lleva la clase .hs-titulo, asi que heredaba margen 0 y el copete quedaba
   pegado al titulo (medido: 0 px de aire). */
.hs-txt h1 {
    margin: 8px 0 22px;
    font-size: clamp(1.75rem, 3.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
}

.hs-marca .hero-media {
    max-width: 430px;
    margin-left: auto;
}
.hs-marca .hero-media img {
    max-height: 300px;
    width: auto;
}
/* ============================================================
   Rediseño del hero de la home (2026-11-07, tercera vuelta)
   El slide de marca en navy se sacó: era una plancha oscura con la
   tarjeta del producto flotando. Ahora los cuatro slides son fotos
   y la frase de marca va sobre la primera. Los tres datos pasaron a
   una barra debajo del hero, donde se leen mejor.
   ============================================================ */

/* sin el slide de navy todos son más bajos */
.hslider { min-height: clamp(500px, 42vw, 580px); }

.trustbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.trustbar .container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 28px;
    align-items: center;
    padding-top: 26px;
    padding-bottom: 26px;
}
.tb-item { display: flex; align-items: baseline; gap: 11px; }
.tb-item strong {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--teal-700);
    line-height: 1;
}
.tb-item span { font-size: .8rem; color: var(--muted); line-height: 1.35; }

.tb-link {
    justify-self: end;
    text-align: right;
    font-size: .8rem;
    color: var(--muted);
    text-decoration: none;
    line-height: 1.4;
}
.tb-link strong { color: var(--teal-700); font-size: .88rem; }
.tb-link:hover strong { text-decoration: underline; }

@media (max-width: 900px) {
    .trustbar .container { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .tb-link { grid-column: 1 / -1; justify-self: start; text-align: left; }
}
@media (max-width: 560px) {
    .tb-item { flex-direction: column; gap: 5px; }
    .tb-item strong { font-size: 1.35rem; }
}
/* ============================================================
   Menú mobile (2026-11-07)
   El <details> desplegado participaba del flex de la cabecera: la
   estiraba y, con align-items:center, el logo quedaba flotando en el
   medio de la lista. Ahora el panel es absoluto: se abre encima del
   contenido y la cabecera conserva su altura.
   ============================================================ */

.site-header .container { position: relative; }

.mnav summary {
    padding: 9px 15px;
    font-size: .9rem;
    background: #fff;
}
.mnav[open] summary {
    border-color: var(--teal);
    color: var(--teal-700);
    background: var(--teal-050);
}

.mnav ul {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: min(320px, calc(100vw - 2 * var(--gutter)));
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    margin: 0;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 24px 60px -18px rgba(10, 22, 38, .35);
    display: grid;
    gap: 2px;
}

.mnav li a {
    padding: 13px 14px;
    font-size: .95rem;
    border-radius: 3px;
}


/* separador antes de Productos, que no es una solución */
.mnav li:nth-last-child(-n+3) a { border-top: 1px solid transparent; }
.mnav li.mnav-sep { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
/* El 42% de arriba de la tarjeta queda sin velo (antes arrancaba en .04 y
   llegaba a .34 a la mitad): la foto se ve. El degradé se concentra en el
   último tercio, donde está el texto, y el pie queda más oscuro que antes
   (.96) para que el titular y el link no dependan de la foto. */
.sol-foto-eyebrow,
.sol-foto-titulo,
.sol-foto-desc,
.sol-foto-link {
    text-shadow: 0 1px 14px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .45);
}
/* Encuadre de cada foto de la home (2026-11-07). Con object-fit:cover,
   subir el % de X corre la imagen hacia la izquierda y subir el % de Y la
   corre hacia arriba: se mueve la ventana, no la foto. */
/* El ajuste vertical con object-position NO funciona en estas tarjetas: las
   fotos (1,78 y 2,05 de relación) son MÁS ANCHAS que la tarjeta (16:10 = 1,6),
   así que cover las escala por altura y no queda holgura vertical. Para
   "subir" la imagen hay que ampliarla y desplazarla: el zoom crea la holgura
   que el cover no tiene. */
.sol-foto img {
    transform: scale(var(--zoom, 1)) translateY(var(--dy, 0));
}
.sol-foto:hover img {
    /* el hover suma 3% al zoom sin perder el desplazamiento */
    transform: scale(calc(var(--zoom, 1) * 1.03)) translateY(var(--dy, 0));
}

.sol-foto--pantallas img { object-position: 50% 50%; --zoom: 1.20; --dy: -8%; }
.sol-foto--headsets img  { object-position: 85% 50%; --zoom: 1.14; --dy: -5%; }
.sol-foto--telefonia img { object-position: 68% 50%; }
/* La foto de videoconferencia es una sala en penumbras: el mismo degradé que
   en las otras tarjetas la dejaba demasiado oscura. Acá se aclara y el pie
   queda igual de firme (la foto ya es oscura, el texto sigue teniendo
   contraste de sobra). */
.sol-foto--videoconferencia::after {
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 50%,
        rgba(6, 14, 24, .30) 70%,
        rgba(6, 14, 24, .62) 86%,
        rgba(6, 14, 24, .84) 100%);
}
/* ============================================================
   Cabecera más compacta + efecto al scrollear
   Mismo criterio que avicom.com.ar: umbral 50px, la barra baja de
   altura, el logo se achica y aparece una sombra. La altura vive en
   una variable para que la subnavegación y los filtros la sigan.
   ============================================================ */
:root {
    --header-h: 68px;
    --header-h-scrolled: 58px;
}

.site-header .container {
    min-height: var(--header-h);
    transition: min-height .22s ease;
}

.brand img {
    height: 26px;
    transition: height .22s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 4px 15px rgba(10, 22, 38, .10);
    background: rgba(255, 255, 255, .97);
}
.site-header.is-scrolled .container { min-height: var(--header-h-scrolled); }
.site-header.is-scrolled .brand img { height: 21px; }

/* La subnavegación y los filtros quedan pegados abajo de la cabecera en los
   dos estados (el JS también marca body.scrolled). */
body.scrolled .subnav { top: var(--header-h-scrolled); }
body.scrolled .filtros { top: calc(var(--header-h-scrolled) + 20px); }

@media (max-width: 900px) {
    :root { --header-h: 62px; --header-h-scrolled: 56px; }
    .site-header .container { min-height: var(--header-h); }
    .brand img { height: 24px; }
    .site-header.is-scrolled .brand img { height: 20px; }
}
/* ============================================================
   Página de producto real + catálogo conectado (2026-11-07)
   En la maqueta el bloque de precio estaba oculto y se mostraba con el
   interruptor de demostración; en el sitio real se muestra siempre.
   ============================================================ */
.precio-bloque--siempre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 14px;
}
.precio--consultar {
    font-size: .88rem;
    font-weight: 700;
    color: var(--teal-700);
}
.pc-sin-foto {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 150px;
    color: var(--muted);
    font-size: .8rem;
}
.cat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    font-size: .85rem;
    color: var(--muted);
}

/* Ficha de producto */
.prod-info { min-width: 0; }
.prod-info h1 { margin: 10px 0 14px; font-size: clamp(1.5rem, 2.6vw, 2.05rem); overflow-wrap: break-word; }
.prod-info > p { color: var(--body); }
.prod-datos { margin: 16px 0 22px; }
.prod-acciones { margin-top: 6px; }

.prod-extra {
    display: grid;
    gap: 28px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}
.prod-bloque h2,
.prod-relacionados h2 { font-size: 1.15rem; margin-bottom: 12px; }
.prod-specs { color: var(--body); font-size: .92rem; }
.prod-relacionados { margin-top: 48px; }
.prod-relacionados .cat-grid { margin-top: 18px; }

@media (max-width: 760px) {
    .prod-extra { margin-top: 36px; padding-top: 24px; }
}
/* ============================================================
   Formulario de contacto conectado (2026-11-07)
   ============================================================ */
.form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.form-nota {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: 14px;
}
.contact-exito {
    padding: 26px;
    border-radius: 4px;
    background: var(--teal-050);
    border: 1px solid rgba(236, 101, 22, .35);
}
.contact-exito h2 { font-size: 1.2rem; margin-bottom: 10px; }
.contact-error {
    padding: 18px 20px;
    border-radius: 3px;
    background: #fdecec;
    border: 1px solid #f3b7b7;
    color: #7a1c1c;
    font-size: .9rem;
    margin-bottom: 18px;
}
.contact-error ul { margin: 8px 0 0; padding-left: 20px; }
/* ============================================================
   Especificaciones técnicas de la ficha
   Formato del panel: "# Sección" y "Clave: valor" por línea.
   ============================================================ */
.prod-specs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.prod-specs-list li {
    display: flex;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: .92rem;
}
.prod-specs-list li:last-child { border-bottom: 0; }
.prod-specs-list li.spec-heading {
    display: block;
    margin-top: 12px;
    padding: 14px 0 6px;
    border-bottom: 0;
    border-top: 1px solid var(--line);
    font-weight: 800;
    color: var(--ink);
}
.prod-specs-list .spec-key {
    flex: 0 0 44%;
    color: var(--muted);
    font-weight: 600;
}
.prod-specs-list .spec-val { flex: 1; color: var(--body); }
@media (max-width: 560px) {
    .prod-specs-list li { flex-direction: column; gap: 2px; }
    .prod-specs-list .spec-key { flex: none; }
}

/* ==========================================================================
   FICHA DE PRODUCTO v2 (2026-11-07)
   Tres bloques con el contenido del panel —Detalle (párrafo), Características
   (enumeradas, con tilde) y Especificaciones (cuadros con tabla)— más la galería
   con miniaturas. La galería queda fija al scrollear en pantalla grande.
   ========================================================================== */

.prod-top {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
/* `min-width: 0` en las celdas: un hijo con ancho "max-content" (la tira de miniaturas) estira la
   columna del grid y desborda la página, cortando el título y los botones. Es el mismo recurso que
   usa avicom en su ficha. */
.prod-top > * { min-width: 0; }
.prod-galeria { position: sticky; top: 96px; min-width: 0; max-width: 100%; overflow: hidden; }

/* ---------- galería (mismo criterio que avicom: 1:1, flechas, swipe y slide) ---------- */
/* Sin margen interno ni borde: la foto ocupa el ancho y el alto completos de la celda. Las
   imágenes del catálogo son cuadradas (800x800), así que con el contenedor 1:1 y `contain`
   llenan el cuadro sin recortarse. */
.prod-media {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
}
.prod-media > img {
    /* Posicionada en absoluto dentro de la caja 1:1. En el flujo normal, `height: 100%` con una
       imagen muy vertical agranda la fila del grid y la caja se estira (pasó con una foto de
       285x800: la ficha quedó de 557x1565). Absoluta + contain: manda la caja, la foto entra
       completa y el mix-blend-mode la deja sobre el fondo blanco. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.prod-media .pc-sin-foto { color: var(--muted); font-size: .9rem; }

.prod-nav-btn {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 2px 10px rgba(10, 22, 38, .16);
    color: var(--navy);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.prod-media:hover .prod-nav-btn,
.prod-nav-btn:focus-visible { opacity: 1; }
.prod-nav-btn:hover { background: #fff; color: var(--teal-700); }
.prod-nav-prev { left: 10px; }
.prod-nav-next { right: 10px; }

.prod-thumbs-wrap {
    margin-top: 12px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--teal) var(--line);
}
.prod-thumbs-wrap::-webkit-scrollbar { height: 4px; }
.prod-thumbs-wrap::-webkit-scrollbar-track { background: var(--line); border-radius: 4px; }
.prod-thumbs-wrap::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 4px; }

.prod-thumbs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding-bottom: 6px;
}
.prod-thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 3px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.prod-thumb:hover { border-color: var(--muted); }
.prod-thumb.is-activa { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-050); }
.prod-info { min-width: 0; }
.prod-info h1 { margin: 10px 0 14px; font-size: clamp(1.5rem, 2.6vw, 2.05rem); overflow-wrap: break-word; }
.prod-datos { margin: 16px 0 22px; }
.prod-acciones { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 10px; }

/* Atajos a los bloques: quedan a la vista sin ocupar media pantalla. */
.prod-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.prod-nav a {
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--teal-050);
    color: var(--navy);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}
.prod-nav a:hover { border-color: var(--teal); }

/* ---------- bloques de contenido ---------- */
.prod-secciones {
    display: grid;
    gap: 40px;
    margin-top: 56px;
}
.prod-bloque { scroll-margin-top: 104px; }

/* La miga ya deja su propio aire; el padding estándar de la sección abría un hueco grande entre
   las migas y el producto. Sólo aplica a la ficha (clase prod-ficha en el <section>). */
.prod-ficha { padding-top: 20px; }
.prod-bloque h2 {
    position: relative;
    margin: 0 0 16px;
    padding-left: 14px;
    font-size: 1.3rem;
    color: var(--ink);
}
.prod-bloque h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 4px;
    border-radius: 4px;
    background: var(--teal);
}
.prod-texto { color: var(--body); font-size: 1rem; line-height: 1.8; max-width: 78ch; }
.prod-texto p { margin: 0 0 14px; }
.prod-texto p:last-child { margin-bottom: 0; }

/* ---------- características ---------- */
.caract-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.caract-titulo {
    grid-column: 1 / -1;
    margin-top: 8px;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 800;
}
.caract-titulo:first-child { margin-top: 0; }
.caract-item {
    display: flex;
    gap: 10px;
    color: var(--body);
    line-height: 1.55;
}
.caract-tick {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--teal-050);
    color: var(--teal-700);
    font-size: .72rem;
    font-weight: 900;
}

/* ---------- especificaciones ---------- */
/* Columnas de verdad (no grid): cada cuadro mide lo que mide su tabla y el siguiente sube a
   ocupar el hueco, así no quedan franjas vacías para alinear con el de al lado. */
.spec-cuadros {
    columns: 2;
    column-gap: 22px;
}
.spec-cuadro {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 22px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
}
.spec-cuadro h3 {
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--teal-050);
    color: var(--teal-700);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.spec-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.spec-tabla tr + tr { border-top: 1px solid var(--line); }
.spec-tabla th {
    width: 42%;
    padding: 10px 18px;
    color: var(--muted);
    font-weight: 600;
    text-align: left;
    vertical-align: top;
}
.spec-tabla td { padding: 10px 18px; color: var(--ink); }
.spec-tabla .spec-sin-clave { width: 0; padding: 0; }

@media (max-width: 900px) {
    .prod-top { grid-template-columns: 1fr; gap: 28px; }
    .prod-galeria { position: static; }
    /* Con el desborde corregido la foto mide exactamente el ancho util, asi que se mantiene 1:1
       (es cuadrada, llena el cuadro sin bandas); el tope de alto es solo por telefonos muy altos. */
    .prod-media { border-radius: 0; padding: 0; max-height: 62vh; }
    .prod-nav-btn { opacity: .85; width: 34px; height: 34px; font-size: 1.2rem; }
    .prod-thumb { width: 60px; height: 60px; scroll-snap-align: center; }
    .prod-thumbs { scroll-snap-type: x proximity; }
    .caract-lista { grid-template-columns: 1fr; gap: 10px; }
    .spec-cuadros { columns: 1; }
    .prod-secciones { margin-top: 40px; gap: 32px; }
    .prod-bloque { scroll-margin-top: 84px; }
}

/* ==========================================================================
   FOTO DE LA FICHA A SANGRE EN EL CELULAR
   Va al final del archivo a propósito: tiene que ganarle por orden a la regla
   base de `.prod-media` (que fija `width`) y a la media query de 900px. Antes
   estaba en el medio y la base la pisaba: la foto quedaba angosta y corrida.
   Misma técnica que avicom.com.ar en su ficha (márgenes negativos del ancho del
   gutter + ancho compensado).
   ========================================================================== */
@media (max-width: 760px) {
    .prod-galeria { overflow: visible; }
    .prod-media {
        margin-left: calc(-1 * var(--gutter));
        margin-right: calc(-1 * var(--gutter));
        width: calc(100% + (2 * var(--gutter)));
        max-width: none;
        border-radius: 0;
    }
    /* Guarda: si el cálculo dejara 1px de más en algún navegador, no aparece scroll horizontal. */
    body:has(.prod-ficha) { overflow-x: hidden; }
}

/* En el celular la barra oscura de arriba se come dos renglones y empuja el logo y el menú:
   el teléfono y el mail siguen a un toque en el pie y en /contacto. */
@media (max-width: 760px) {
    .topbar { display: none; }
}

/* ==========================================================================
   AJUSTE FINO DEL HEADER (sólo escritorio)
   Logo 10% más grande (26px → 28.6px, y 21px → 23.1px al scrollear) y el
   botón "Solicitar cotización" 10% más chico (fuente .95rem → .855rem y
   padding 13/24px → 11.7/21.6px). En el celular no cambia nada: ahí el header
   usa el botón "Menú".
   ========================================================================== */
@media (min-width: 761px) {
    .brand img { height: 28.6px; }
    .site-header.is-scrolled .brand img { height: 23.1px; }
    .site-header .btn--primary,
    .site-header .btn--soft {
        font-size: .8rem;
        padding: .5rem 1rem;
    }
}

/* En el celular la tarjeta es más angosta: menos alto para que no se coma la pantalla. */
@media (max-width: 900px) {
    .pc-media { height: 190px; }
    .card-media { height: 180px; }
}

/* El detalle va debajo del nombre del producto, sin título propio. */
.prod-detalle {
    margin: 4px 0 12px;
    max-width: 62ch;
    color: var(--body);
    font-size: .95rem;
    line-height: 1.62;
}
.prod-detalle p { margin: 0 0 9px; }
.prod-detalle p:last-child { margin-bottom: 0; }

/* Pie de la foto en "Qué resuelve": nombre del equipo y una línea de contexto. */
.split-foto { text-align: center; }
.split-pie {
    margin: 20px auto 0;
    max-width: 34ch;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--muted);
}
.split-pie strong {
    display: block;
    margin-bottom: 3px;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink);
}

/* Tarjetas de sala con FOTO: la imagen llena la celda y la celda mantiene una proporción apaisada
   (16:10), que es la de las fotos de sala; sin el padding ni el multiply de las fotos de producto. */
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card-media--foto { padding: 0; height: auto; aspect-ratio: 16 / 10; }
.card-media--foto img {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
}
@media (max-width: 1100px) {
    .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .grid--5 { grid-template-columns: 1fr; }
    .card-media--foto { aspect-ratio: 16 / 9; }
}

/* Fotos de bloque que van a sangre: el padding de 34px de .split-media les dejaba un marco con el
   degradé alrededor. Acá la imagen manda: ocupa el ancho completo y la caja toma su altura, así cada
   sección usa la proporción que le conviene (10:9 la de integración, 16:9 la de compatibilidad) sin
   que el CSS recorte nada. */
.split-media--sangre { padding: 0; overflow: hidden; }
.split-media--sangre img {
    width: 100%; height: auto;
    max-height: none; display: block;
}

/* Pie de foto dentro de una caja a sangre: usa todo el ancho (si hereda el max-width de 34ch se
   parte en cuatro líneas y hace alta la caja), y va entre la imagen y el borde. */
.split-media--sangre > .split-pie {
    margin: 12px 18px 14px;
    max-width: none;
}

/* Acciones de la tarjeta del catálogo: dos botones lado a lado ("Ver ficha" y "Consultar"). Se
   empujan al pie de la tarjeta con margin-top:auto, así quedan alineados aunque una descripción sea
   más larga que otra. */
.pc-acciones {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    gap: 8px;
}
.pc-acciones .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    font-size: .82rem;
    padding: 10px 10px;
    white-space: nowrap;
}


/* ==========================================================================
   HEADER DNAKE
   Fondo blanco con el logo negro (como el sitio de la marca) y acentos naranjas.
   Mantiene el efecto de la plantilla: translucido con blur y el logo achicandose
   al scrollear. Reemplaza al bloque cyan de linkvil, que no aplica aca.
   ========================================================================== */
.site-header {
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 0;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, .94);
}
.site-header.is-scrolled {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, .97), 0 4px 15px rgba(10, 22, 38, .10);
}
.site-header .brand img { height: 26px; }
.site-header.is-scrolled .brand img { height: 21px; }
.site-header .brand-sub { color: var(--muted); border-left: 1px solid var(--line); }
.site-header .menu a,
.site-header .menu a:visited { color: var(--ink); }
.site-header .menu > li > a {
    padding: 8px 12px;
    border-radius: 3px;
    transition: background .16s ease, color .16s ease;
}
.site-header .menu > li > a:hover,
.site-header .has-menu:hover > a,
.site-header .has-menu:focus-within > a {
    background: var(--teal-050);
    color: var(--teal-700);
    opacity: 1;
}
.site-header .menu > li.is-active > a {
    background: var(--teal-050);
    color: var(--teal-700);
    opacity: 1;
}
.site-header .menu-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 22px 48px rgba(10, 22, 38, .18);
    padding: 8px;
    margin-top: 0;
}
.site-header .menu-panel a,
.site-header .menu-panel a:visited {
    color: var(--ink);
    border-radius: 3px;
    box-shadow: inset 3px 0 0 transparent;
    transition: background .15s ease, box-shadow .15s ease;
}
.site-header .menu-panel a:hover,
.site-header .menu-panel a:focus-visible {
    background: var(--teal-050);
    box-shadow: inset 3px 0 0 var(--teal);
}
.site-header .menu-panel .mp-title { color: var(--ink); }
.site-header .menu-panel .mp-desc  { color: var(--muted); }
.site-header .menu-panel > a + a { border-top: 0; }
.site-header .btn--soft {
    background: var(--teal);
    color: #fff;
    border-color: var(--teal);
}
.site-header .btn--soft:hover {
    background: var(--teal-700);
    border-color: var(--teal-700);
    color: #fff;
}
.site-header .mnav summary {
    background: var(--teal);
    color: #fff;
    border: 1px solid var(--teal);
    border-radius: 3px;
}
.site-header .mnav summary:hover { background: var(--teal-700); }
.site-header .mnav[open] > summary {
    background: #fff;
    color: var(--teal-700);
    border-color: var(--teal);
}

/* ==========================================================================
   HERO DE DNAKE
   Sin fotos de ambiente (los banners de la marca tienen texto incrustado): el
   fondo es un degradado con el naranja de la marca y el producto va en una
   tarjeta clara a la derecha. Nitido a cualquier tamaño y sin recortes raros.
   ========================================================================== */
.hs-slide--grad {
    background:
        radial-gradient(880px 520px at 77% 44%, rgba(236, 101, 22, .20), transparent 62%),
        linear-gradient(155deg, #1e242a 0%, #0b0e11 100%);
}
.hs-slide--grad .hs-prod {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    width: min(32vw, 380px);
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .10);
    z-index: 1;
}
.hs-slide--grad .hs-prod img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* el texto no se mete debajo de la tarjeta */
.hs-slide--grad .hs-txt { max-width: 560px; }
@media (max-width: 1080px) {
    .hs-slide--grad .hs-prod { width: min(34vw, 300px); right: 4%; }
}
@media (max-width: 900px) {
    .hs-slide--grad .hs-prod { display: none; }
}

/* ==========================================================================
   HERO DE LAS LANDINGS (Dnake)
   .hero ya es una grilla de dos columnas: el texto a la izquierda y el
   producto en una tarjeta clara a la derecha, como en la home.
   ========================================================================== */
.hero--grad {
    background:
        radial-gradient(880px 500px at 82% -10%, rgba(236, 101, 22, .22), transparent 60%),
        radial-gradient(700px 400px at 5% 110%, rgba(236, 101, 22, .10), transparent 60%),
        var(--navy);
}
.hero-prod { display: flex; justify-content: center; align-items: center; }
.hero-prod img {
    width: min(100%, 400px);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .10);
}
@media (max-width: 900px) {
    .hero-prod { display: none; }
}

/* ==========================================================================
   HERO DE LAS LANDINGS (Dnake)
   .hero--grad no puede apoyarse en la grilla de .hero: el breadcrumb y el texto
   quedarian uno al lado del otro. Se define el layout aca: breadcrumb arriba a
   todo el ancho, texto a la izquierda y el producto en una tarjeta a la derecha.
   ========================================================================== */
.hero--grad {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 520px;
    padding: 72px 0;
    background:
        radial-gradient(880px 500px at 82% -10%, rgba(236, 101, 22, .22), transparent 60%),
        radial-gradient(700px 400px at 5% 110%, rgba(236, 101, 22, .10), transparent 60%),
        var(--navy);
    color: rgba(255, 255, 255, .80);
    isolation: isolate;
}
.hero--grad .container {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}
.hero--grad .crumb--hero { grid-column: 1 / -1; }
.hero--grad .hero-foto-txt { max-width: 560px; }
@media (max-width: 900px) {
    .hero--grad .container { grid-template-columns: 1fr; }
    .hero--grad .hero-prod { display: none; }
}

/* ==========================================================================
   HEADER NEGRO (pedido del 2026-11-10: como el sitio de la marca)
   Logo en blanco, navegacion clara y acentos naranjas. Mantiene el efecto:
   translucido con blur y el logo achicandose al scrollear.
   ========================================================================== */
.topbar { background: #0a0d10; }
.site-header {
    background: rgba(18, 21, 25, .92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.site-header.is-scrolled {
    background: rgba(18, 21, 25, .97);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 18px rgba(0, 0, 0, .35);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header { background: #121519; }
    .site-header.is-scrolled { background: #121519; }
}
.site-header .brand img { height: 26px; }
.site-header.is-scrolled .brand img { height: 21px; }
.site-header .brand-sub {
    color: rgba(255, 255, 255, .62);
    border-left: 1px solid rgba(255, 255, 255, .22);
}
.site-header .menu a,
.site-header .menu a:visited { color: rgba(255, 255, 255, .88); }
.site-header .menu > li > a {
    padding: 8px 12px;
    border-radius: 3px;
    transition: background .16s ease, color .16s ease;
}
.site-header .menu > li > a:hover,
.site-header .has-menu:hover > a,
.site-header .has-menu:focus-within > a {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    opacity: 1;
}
.site-header .menu > li.is-active > a {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    opacity: 1;
}
/* El desplegable sigue siendo una tarjeta blanca: sobre negro se lee mejor y
   ya es el patron del grupo de sitios. */
.site-header .menu-panel {
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .10);
    border-top: 0;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
    padding: 8px;
    margin-top: 0;
}
.site-header .menu-panel a { color: var(--ink); border-radius: 3px; box-shadow: inset 3px 0 0 transparent; }
.site-header .menu-panel a:hover,
.site-header .menu-panel a:focus-visible { background: var(--teal-050); box-shadow: inset 3px 0 0 var(--teal); }
.site-header .menu-panel .mp-title { color: var(--ink); }
.site-header .menu-panel .mp-desc { color: var(--muted); }
.site-header .btn--soft { background: var(--teal); color: #fff; border-color: var(--teal); }
.site-header .btn--soft:hover { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.site-header .mnav summary {
    background: var(--teal);
    color: #fff;
    border: 1px solid var(--teal);
    border-radius: 3px;
}
.site-header .mnav summary:hover { background: var(--teal-700); }
.site-header .mnav[open] > summary { background: #fff; color: var(--teal-700); border-color: var(--teal); }

/* --------------------------------------------------------------------------
   BANNERS DE LA MARCA (corregido 2026-11-10)
   Los banners de dnake-global traen su propio texto en ingles a la izquierda.
   Taparlo con un degradé dejaba el texto fantasma detras del titular, asi que
   el texto del sitio va en una TARJETA oscura de pie de foto: se lee siempre y
   no compite con el arte del banner. Cuando se traduzcan las imagenes, siguen
   conviviendo sin cambios.
   -------------------------------------------------------------------------- */
.hs-slide--foto { display: flex; align-items: flex-end; }
.hs-slide--foto::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(0deg, rgba(10, 13, 17, .62) 0%, rgba(10, 13, 17, .18) 42%, rgba(10, 13, 17, 0) 62%);
}
.hs-slide--foto > .container,
.hero--banner > .container { position: relative; z-index: 1; }

.hs-slide--foto .hs-txt {
    max-width: 560px;
    margin-bottom: 6px;
    padding: 20px 24px 22px;
    border-left: 3px solid var(--teal);
    border-radius: 6px;
    background: rgba(10, 13, 17, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.hs-slide--foto .hs-txt h1,
.hs-slide--foto .hs-titulo {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
    margin: 6px 0 12px;
    line-height: 1.12;
}
.hs-slide--foto .hs-desc { font-size: .95rem; margin-bottom: 18px; }
.hs-slide--foto .eyebrow { color: #ff9b52; }

/* fondos por slide de la home */
.hero-dnake-1 { background-image: url(img/hero-ip.webp); }
.hero-dnake-2 { background-image: url(img/hero-portero.webp); background-position: 62% center; }
.hero-dnake-3 { background-image: url(img/hero-2hilos.webp); background-position: 58% center; }
.hero-dnake-4 { background-image: url(img/hero-acceso.webp); background-position: 55% center; }

/* fondos de las landings */
.hero-banner-portero { background-image: url(img/hero-portero.webp); background-position: 62% center; }
.hero-banner-monitor { background-image: url(img/hero-kits.webp);   background-position: 50% center; }
.hero-banner-kits    { background-image: url(img/hero-2hilos.webp); background-position: 55% center; }
.hero-banner-acceso  { background-image: url(img/hero-acceso.webp); background-position: 50% center; }

.hero--banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 540px;
    padding: 72px 0;
    background-color: var(--navy);
    background-size: cover;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, .86);
    isolation: isolate;
    overflow: hidden;
}
/* En las landings el titular es mas largo: tarjeta ancha, centrada verticalmente. */
.hero--banner .container { display: grid; grid-template-columns: minmax(0, 660px); padding-top: 0; padding-bottom: 0; }
.hero--banner .crumb--hero { color: rgba(255, 255, 255, .72); grid-column: 1 / -1; }
.hero--banner .hero-foto-txt {
    max-width: 620px;
    padding: 24px 26px 26px;
    border-left: 3px solid var(--teal);
    border-radius: 6px;
    background: rgba(10, 13, 17, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.hero--banner .hero-foto-txt h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.hero--banner .eyebrow { color: #ff9b52; }
@media (max-width: 900px) {
    .hero--banner { min-height: 440px; padding: 48px 0; }
    .hs-slide--foto .hs-txt,
    .hero--banner .hero-foto-txt { padding: 16px 18px 18px; }
    .hs-slide--foto::before,
    .hero--banner::before { background: rgba(10, 13, 17, .55); }
}

/* --------------------------------------------------------------------------
   Barra inferior del header: sin linea clara.
   Entre el header (68 px) y el contenido asomaba una franja de 1 px del fondo
   blanco de la pagina, y se veia como una linea blanca. Se tapa pintando ese
   borde con una sombra de 1 px del mismo color del header.
   -------------------------------------------------------------------------- */
.site-header { box-shadow: 0 1px 0 0 rgba(18, 21, 25, .92) !important; }
.site-header.is-scrolled {
    box-shadow: 0 1px 0 0 rgba(18, 21, 25, .97), 0 4px 18px rgba(0, 0, 0, .35) !important;
}

/* --------------------------------------------------------------------------
   Tarjeta del hero: centrada verticalmente y mas transparente (pedido 2026-11-10).
   -------------------------------------------------------------------------- */
.hs-slide--foto { align-items: center; }
.hs-slide--foto .hs-txt {
    margin-bottom: 0;
    background: rgba(10, 13, 17, .62);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.hero--banner .hero-foto-txt {
    background: rgba(10, 13, 17, .62);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Logo 10% mas grande (26 -> 28.6 px; 21 -> 23.1 px al scrollear), pedido 2026-11-10. */
.site-header .brand img { height: 28.6px; }
.site-header.is-scrolled .brand img { height: 23.1px; }
/* El atributo hidden no alcanza en las tarjetas del catalogo: .pcard define su propio display
   y le gana. Sin esto el filtro por familia contaba bien pero dejaba todas las tarjetas a la
   vista (bug visto el 2026-11-10). */
#grilla .pcard[hidden] { display: none !important; }
/* --------------------------------------------------------------------------
   Alineacion de "ARGENTINA" con el wordmark.
   El PNG del logo tiene el arco naranja arriba, asi que las letras de DNAKE
   quedan 7.5 px por debajo del centro de la caja (medido sobre el archivo de
   48 px de alto): alineada a la caja, la etiqueta se veia alta. Se baja la
   etiqueta esa misma distancia, escalada al alto con que se muestra el logo
   (28.6 px -> 4.5 px; 23.1 px al scrollear -> 3.6 px).
   -------------------------------------------------------------------------- */
.site-header .brand-sub { transform: translateY(4.5px); }
.site-header.is-scrolled .brand-sub { transform: translateY(3.6px); }
/* --------------------------------------------------------------------------
   Breadcrumb del hero fuera del flujo (pedido 2026-11-10).
   Estaba en la grilla del hero, asi que empujaba la tarjeta de texto hacia
   abajo. Como absolute no participa del centrado, la tarjeta queda centrada
   respecto de la imagen, y el breadcrumb se sigue viendo arriba a la izquierda
   alineado con el contenedor.
   -------------------------------------------------------------------------- */
.hero--banner .container {
    display: grid;
    grid-template-columns: minmax(0, 660px);
    align-items: center;
}
.hero--banner .crumb--hero {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--container);
    padding: 0 var(--gutter);
    margin: 0;
    z-index: 2;
    pointer-events: none;
}
.hero--banner .crumb--hero a { pointer-events: auto; }
@media (max-width: 900px) {
    .hero--banner .crumb--hero { top: 12px; }
}
/* El contenedor del hero tenia position:relative, asi que el breadcrumb absoluto se ubicaba
   respecto de la tarjeta y caia al medio. Vuelve a static: el absoluto se resuelve contra el
   hero (position: relative) y el z-index sigue valiendo por ser hijo de un flex. */
.hero--banner > .container { position: static; }