:root {
    --azul: #1d93d1;
    --azul-fuerte: #0069bd;
    --azul-oscuro: #222160;
    --gris: #606161;
    --borde: #dce8f0;
    --blanco: #ffffff;
}

.representadas,
.representadas * {
    box-sizing: border-box;
}

.representadas {
    overflow: hidden;
    color: var(--azul-oscuro);
    background: var(--blanco);
    font-family: "Montserrat", Arial, sans-serif;
}

/* Banner superior */
.representadas-hero__cabecera {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 12px;
}

.representadas-hero__cabecera .representadas-hero__superior {
    flex: 0 0 auto;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}

.representadas-hero__cabecera .representadas-hero__atajos {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.representadas-hero {
    position: relative;
    min-height: 440px;
    padding: 24px max(24px, calc((100vw - 1380px) / 2));
    overflow: visible;
    background:
        radial-gradient(circle at 38% 42%, rgba(29, 147, 209, 0.14), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7fcff 68%, #e7f6ff 100%);
}

.representadas-hero::after {
    position: absolute;
    right: -7%;
    bottom: -90px;
    left: -7%;
    height: 185px;
    background: repeating-radial-gradient(ellipse at 50% 100%, rgba(29, 147, 209, 0.11) 0 2px, transparent 2px 12px);
    content: "";
    transform: rotate(-2deg);
}

.representadas-hero__atajos {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 30px;
    overflow-x: auto;
    scrollbar-width: none;
}

.representadas-hero__atajos::-webkit-scrollbar {
    display: none;
}

.representadas-hero__atajos a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 7px;
    padding: 9px 16px;
    color: var(--azul-oscuro);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e5edf3;
    border-radius: 999px;
    box-shadow: 0 5px 15px rgba(34, 33, 96, 0.08);
    font-size: max(14px, 0.68rem);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.representadas-hero__atajos img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.representadas-hero__contenido {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr 1.45fr;
    align-items: start;
    gap: 28px;
}

.representadas-hero__superior {
    display: block;
    margin: 0;
    font-size: clamp(1.2rem, 2.2vw, 2rem);
    font-weight: 400;
}

.representadas-hero__texto h1 {
    margin: -2px 0 9px;
    color: var(--azul);
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
}

.representadas-hero__texto > p:not(.representadas-hero__superior) {
    max-width: 290px;
    margin: 0 0 24px;
    color: var(--gris);
    font-size: max(14px, 0.78rem);
    line-height: 1.55;
}

.representadas-hero__texto .representadas-hero__distribuidor {
    max-width: 320px;
    margin: -12px 0 18px;
    color: var(--azul-oscuro);
    font-size: max(14px, 0.68rem);
    line-height: 1.55;
}

.representadas-hero__distribuidor strong {
    color: var(--azul);
    font-weight: 700;
}

.representadas-hero__pais {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    color: var(--azul);
}

.representadas-hero__pais i {
    font-size: max(14px, 0.75rem);
    color: var(--azul);
}

.representadas-hero__pais strong {
    display: inline;
    margin: 0;
}

.representadas-hero__omnilab {
    display: block;
    width: min(280px, 90%);
    height: 90px;
    object-fit: contain;
    object-position: left center;
}

.representadas-hero__equipo {
    align-self: start;
    min-height: 305px;
}

.representadas-hero__equipo img {
    display: block;
    width: 100%;
    height: 330px;
    object-fit: contain;
    object-position: center bottom;
}

.representadas-hero__lista {
    display: grid;
    min-width: 0;
    gap: 11px;
}

.catalogo-acordeon {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #d7e7f1;
    border-radius: 10px;
    box-shadow: 0 7px 20px rgba(34, 33, 96, 0.08);
    transition: box-shadow 0.2s ease;
}

.catalogo-acordeon[open] {
    box-shadow: 0 10px 26px rgba(34, 33, 96, 0.14);
}

.catalogo-acordeon summary {
    display: grid;
    grid-template-columns: 46px 1fr 32px;
    align-items: center;
    gap: 13px;
    min-height: 68px;
    padding: 10px 12px;
    color: var(--azul-oscuro);
    cursor: pointer;
    list-style: none;
}

.catalogo-acordeon summary::-webkit-details-marker {
    display: none;
}

.representadas-hero__lista .catalogo-icono {
    display: block;
    width: 44px;
    height: 40px;
    object-fit: contain;
}

.catalogo-acordeon summary:hover {
    background: #f7fbfd;
}

.catalogo-acordeon summary strong {
    display: block;
    margin-bottom: 3px;
    color: var(--azul-oscuro);
    font-size: max(14px, 0.76rem);
    font-weight: 700;
}

.catalogo-acordeon summary b {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--blanco);
    background: var(--azul-fuerte);
    border-radius: 7px;
    font-size: 1.2rem;
    font-weight: 400;
    transition: transform 0.2s ease;
}

.catalogo-acordeon[open] summary b {
    transform: rotate(45deg);
}

.catalogo-acordeon__contenido {
    padding: 0 20px 16px 71px;
}

.catalogo-acordeon__contenido p {
    margin: 0 0 10px;
    color: var(--gris);
    font-size: max(14px, 0.68rem);
    line-height: 1.7;
    white-space: pre-line;
}

.catalogo-acordeon__contenido a {
    color: var(--azul);
    font-size: max(14px, 0.68rem);
    font-weight: 700;
    text-decoration: none;
}

.catalogo-acordeon__contenido a:hover {
    color: var(--azul-oscuro);
}

/* Título y filtros */
.representadas-catalogo {
    width: min(1380px, calc(100% - 32px));
    margin: 0 auto;
    padding: 42px 0 78px;
}

.representadas-catalogo__encabezado {
    text-align: center;
}

.representadas-catalogo__encabezado h2 {
    margin: 0 0 13px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.representadas-catalogo__encabezado p {
    margin: 0;
    color: #56718d;
    font-size: 0.95rem;
}

.representadas-filtros {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 26px 0 34px;
}

.representadas-filtros label {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 27px;
    color: #607085;
    border-right: 1px solid #dce5ec;
    font-size: max(14px, 0.78rem);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.representadas-filtros label:last-child {
    border-right: 0;
}

#filtro-todos:checked ~ .representadas-filtros label[for="filtro-todos"],
#filtro-chiralpak:checked ~ .representadas-filtros label[for="filtro-chiralpak"],
#filtro-chiralcel:checked ~ .representadas-filtros label[for="filtro-chiralcel"],
#filtro-fases:checked ~ .representadas-filtros label[for="filtro-fases"],
#filtro-aplicaciones:checked ~ .representadas-filtros label[for="filtro-aplicaciones"] {
    color: var(--blanco);
    background: var(--azul-oscuro);
    border: 0;
    border-radius: 999px;
}

#filtro-todos:checked ~ .representadas-filtros label[for="filtro-todos"]::after,
#filtro-chiralpak:checked ~ .representadas-filtros label[for="filtro-chiralpak"]::after,
#filtro-chiralcel:checked ~ .representadas-filtros label[for="filtro-chiralcel"]::after,
#filtro-fases:checked ~ .representadas-filtros label[for="filtro-fases"]::after,
#filtro-aplicaciones:checked ~ .representadas-filtros label[for="filtro-aplicaciones"]::after {
    position: absolute;
    right: 28%;
    bottom: -7px;
    left: 28%;
    height: 3px;
    background: var(--azul);
    border-radius: 3px;
    content: "";
}

.catalogo-filtro {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.catalogo-filtro:focus-visible ~ .representadas-filtros {
    outline: 2px solid var(--azul);
    outline-offset: 5px;
}

#filtro-chiralpak:checked ~ .representadas-grilla .representada:not([data-categoria="chiralpak"]),
#filtro-chiralcel:checked ~ .representadas-grilla .representada:not([data-categoria="chiralcel"]),
#filtro-fases:checked ~ .representadas-grilla .representada:not([data-categoria="fases-especiales"]),
#filtro-aplicaciones:checked ~ .representadas-grilla .representada:not([data-categoria="aplicaciones"]) {
    display: none;
}

.representadas-hero__lista .catalogo-icono {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--borde);
    border-radius: 50%;
    color: var(--azul);
    font-weight: 600;
}

.representada__informacion p {
    margin-bottom: 22px;
}

.representada h3 {
    overflow-wrap: anywhere;
}

.representadas a:focus-visible {
    outline: 3px solid var(--azul);
    outline-offset: 3px;
}

/* Grilla de productos */
.representadas-grilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 270px;
    gap: 20px;
}

.representada {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(34, 33, 96, 0.07);
}

.representada--principal {
    grid-row: auto;
}

.representada__informacion {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
    width: 58%;
    padding: 26px 10px 24px 24px;
}

.representada--principal .representada__informacion {
    width: 57%;
    padding: 38px 16px 34px 34px;
}

.representada__logo {
    display: block;
    width: auto;
    max-width: 132px;
    height: 43px;
    margin-bottom: 18px;
    object-fit: contain;
    object-position: left center;
}

.representada--principal .representada__logo {
    max-width: 180px;
    height: 62px;
    margin-bottom: 28px;
}

.representada h3 {
    margin: 0 0 9px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
}

.representada p {
    margin: 0;
    color: #52677f;
    font-size: max(14px, 0.69rem);
    line-height: 1.55;
}

.representada__boton {
    position: static;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    color: var(--blanco);
    background: var(--azul-oscuro);
    border-radius: 6px;
    font-size: max(14px, 0.68rem);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.representada--principal .representada__boton {
    bottom: 34px;
    left: 34px;
}

.representada__boton span {
    color: #64c8ff;
    font-size: 1rem;
}

.representada__producto {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48%;
    height: 86%;
    object-fit: contain;
    object-position: center center;
}

.representada--principal .representada__producto {
    width: 56%;
    height: 78%;
}

/* Adaptación responsive */
@media (max-width: 1050px) {
    .representadas-hero__contenido {
        grid-template-columns: 0.9fr 1fr;
    }

    .representadas-hero__lista {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, 1fr);
    }

    .representadas-grilla {
        grid-template-columns: repeat(2, 1fr);
    }

    .representada--principal {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 700px) {
    .representadas-hero {
        padding: 18px;
    }

    .representadas-hero__atajos,
    .representadas-filtros {
        justify-content: flex-start;
    }

    .representadas-hero__contenido,
    .representadas-grilla {
        grid-template-columns: 1fr;
    }

    .representadas-hero__equipo {
        min-height: 220px;
    }

    .representadas-hero__equipo img {
        height: 235px;
    }

    .representadas-hero__lista {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .representadas-grilla {
        grid-auto-rows: 290px;
    }

    .representada--principal {
        grid-column: auto;
    }
}

@media (max-width: 430px) {
    .representada__informacion,
    .representada--principal .representada__informacion {
        width: 67%;
        padding: 24px 10px 22px 20px;
    }

    .representada__producto,
    .representada--principal .representada__producto {
        width: 45%;
        height: 70%;
    }

    .representada__boton,
    .representada--principal .representada__boton {
        bottom: 20px;
        left: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .catalogo-acordeon,
    .catalogo-acordeon summary b {
        transition: none;
    }
}

/* Desplegable del nav */
.nav-dropdown-menu {
    width: 100%;
    display: none;
}

.nav-dropdown-menu a {
    display: block;
    width: 100%;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: grid;
}


/* Carrito de cotización integrado */
.representada__form { margin: 0; }
.representada__boton { font-family: inherit; cursor: pointer; border: 0; }
.carrito-flotante {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #1d93d1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
    z-index: 9999;
    transition: transform .2s ease, box-shadow .2s ease;
}
.carrito-flotante:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.carrito-flotante__cantidad {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    border-radius: 999px;
    background: #222160;
    color: #fff;
    border: 2px solid #fff;
    font-size: max(14px, 12px);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 700px) {
    .carrito-flotante { right: 18px; bottom: 18px; width: 58px; height: 58px; font-size: 22px; }
}

/* Ajustes responsivos finales de las tarjetas de marca */
.representadas-hero, .representadas-hero__contenido, .representadas-hero__cabecera,
.representadas-hero__texto, .representadas-hero__lista, .representadas-catalogo,
.representadas-grilla, .representada, .representada__informacion { min-width: 0; }
.representadas-hero__cabecera { gap: clamp(8px, 2vw, 24px); }
.representadas-hero__atajos { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
.representadas-hero__atajos a { flex: 0 0 auto; }
.catalogo-acordeon summary strong, .representada h3, .representada p { overflow-wrap: anywhere; }

@media (max-width: 700px) {
    .representadas-hero { min-height: 0; padding: 18px clamp(14px, 4vw, 24px); }
    .representadas-hero__cabecera { gap: 10px; }
    .representadas-hero__cabecera .representadas-hero__superior { font-size: clamp(0.9rem, 3.8vw, 1.3rem); }
    .representadas-hero__atajos { gap: 7px; margin-bottom: 20px; }
    .representadas-hero__atajos a { padding: 8px 11px; font-size: max(14px, 0.62rem); }
    .representadas-hero__contenido { gap: 18px; }
    .representadas-hero__equipo { min-height: 0; }
    .representadas-hero__equipo img { height: clamp(190px, 58vw, 260px); }
    .representadas-hero__lista { gap: 9px; }
    .catalogo-acordeon summary { grid-template-columns: 38px minmax(0, 1fr) 28px; gap: 9px; }
    .catalogo-acordeon__contenido { padding-right: 14px; padding-left: 56px; }
    .representadas-catalogo { width: calc(100% - 28px); padding: 30px 0 52px; }
    .representadas-grilla { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(260px, auto); gap: 14px; }
    .representada { min-height: 260px; }
}

@media (max-width: 430px) {
    .representadas-hero { padding-right: 12px; padding-left: 12px; }
    .representadas-hero__cabecera { gap: 8px; }
    .representadas-hero__cabecera .representadas-hero__superior { font-size: max(14px, clamp(0.78rem, 3.5vw, 0.95rem)); }
    .representadas-hero__atajos { gap: 6px; }
    .representadas-hero__atajos a { padding: 7px 9px; font-size: max(14px, 0.58rem); }
    .representada { min-height: 258px; }
    .representada__informacion, .representada--principal .representada__informacion { width: 61%; padding: 18px 8px 18px 15px; }
    .representada__producto, .representada--principal .representada__producto { width: 39%; height: 68%; }
    .representada h3 { font-size: 0.9rem; }
    .representada p { font-size: max(14px, 0.66rem); }
    .representada__boton, .representada--principal .representada__boton { max-width: 100%; padding: 8px 9px; font-size: max(14px, 0.62rem); white-space: normal; }
    .carrito-flotante { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 54px; height: 54px; }
}
@media (max-width: 430px) {
    .representada__logo, .representada--principal .representada__logo { max-width: 100%; height: auto; max-height: 45px; }
}

@media (min-width: 1800px) {
    .representadas-hero { min-height: 0; padding: 1.6vw 4vw; }
    .representadas-hero__cabecera { gap: 1.2vw; margin-bottom: 1vw; }
    .representadas-hero__cabecera .representadas-hero__superior { font-size: clamp(22px, 1.35vw, 60px); }
    .representadas-hero__atajos { gap: 0.5vw; margin-bottom: 1.3vw; }
    .representadas-hero__atajos a { gap: 0.35vw; padding: 0.45vw 0.7vw; font-size: max(14px, clamp(10px, 0.57vw, 25px)); }
    .representadas-hero__atajos img { width: clamp(24px, 1.25vw, 56px); height: clamp(24px, 1.25vw, 56px); }
    .representadas-hero__contenido { gap: 1.4vw; }
    .representadas-hero__texto h1 { font-size: clamp(42px, 2.8vw, 125px); }
    .representadas-hero__texto > p:not(.representadas-hero__superior), .representadas-hero__texto .representadas-hero__distribuidor { font-size: max(14px, clamp(12px, 0.68vw, 30px)); max-width: 42ch; }
    .representadas-hero__omnilab { width: min(15vw, 600px); height: 5vw; }
    .representadas-hero__equipo { min-height: 0; }
    .representadas-hero__equipo img { height: clamp(330px, 23vw, 1000px); }
    .representadas-hero__lista { gap: 0.55vw; }
    .catalogo-acordeon summary { grid-template-columns: 2.4vw minmax(0, 1fr) 1.6vw; gap: 0.55vw; min-height: 3.5vw; padding: 0.55vw; }
    .representadas-hero__lista .catalogo-icono { width: 2.2vw; height: 2.2vw; }
    .catalogo-acordeon summary strong { font-size: max(14px, clamp(12px, 0.66vw, 29px)); }
    .catalogo-acordeon__contenido { padding: 0 1vw 0.8vw 3.8vw; }
    .catalogo-acordeon__contenido p, .catalogo-acordeon__contenido a { font-size: max(14px, clamp(11px, 0.62vw, 28px)); }
    .representadas-catalogo { width: 92vw; max-width: none; padding: 2vw 0 3vw; }
    .representadas-catalogo__encabezado h2 { font-size: clamp(38px, 2.5vw, 112px); }
    .representadas-catalogo__encabezado p { font-size: clamp(15px, 0.8vw, 36px); }
    .representadas-filtros { gap: 0.5vw; margin: 1.3vw 0 1.7vw; }
    .representadas-filtros label { padding: 0.55vw 1.3vw; font-size: max(14px, clamp(11px, 0.65vw, 29px)); }
    .representadas-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(270px, 17vw, 760px); gap: 0.8vw; }
    .representada__informacion { padding: 1.3vw 0.5vw 1.2vw 1.2vw; }
    .representada--principal .representada__informacion { padding: 1.6vw 0.7vw 1.4vw 1.5vw; }
    .representada h3 { font-size: clamp(16px, 0.9vw, 40px); }
    .representada p { font-size: max(14px, clamp(11px, 0.65vw, 29px)); }
    .representada__boton { padding: 0.5vw 0.7vw; font-size: max(14px, clamp(10px, 0.58vw, 26px)); }
    .representada__producto { height: 84%; }
}

.representada__informacion,
.representada--principal .representada__informacion {
    width: 54%;
    padding-right: clamp(12px, 1.2vw, 20px);
}

.representada__producto,
.representada--principal .representada__producto {
    width: 42%;
    height: 100%;
    top: 0;
    bottom: auto;
}

@media (max-width: 430px) {
    .representada__informacion,
    .representada--principal .representada__informacion {
        width: 58%;
    }

    .representada__producto,
    .representada--principal .representada__producto {
        width: 36%;
    }
}

/* ZOOM-LEGIBLE-REPRESENTADAS-20261009-2 */
/* El título y el equipo usan columnas separadas para evitar superposiciones. */
.representadas-hero__contenido {
    align-items: start;
}

.representadas-hero__texto,
.representadas-hero__equipo,
.representadas-hero__lista {
    min-width: 0;
}

.representadas-hero__texto h1 {
    max-width: 100%;
    font-size: clamp(34px, 3vw, 56px);
    letter-spacing: -0.04em;
    line-height: 1.05;
    overflow-wrap: normal;
}

.representadas-hero__equipo img {
    width: 100%;
    max-width: 100%;
    object-fit: contain;
}

@media (min-width: 1201px) {
    .representadas-hero__contenido {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.45fr);
    }
}

@media (min-width: 701px) and (max-width: 1200px) {
    .representadas-hero__contenido {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: clamp(16px, 2.2vw, 28px);
    }

    .representadas-hero__texto {
        grid-column: 1;
        grid-row: 1;
    }

    .representadas-hero__equipo {
        grid-column: 2;
        grid-row: 1;
    }

    .representadas-hero__lista {
        grid-column: 1 / -1;
        grid-row: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .representadas-hero__texto h1 {
        font-size: clamp(32px, 3.5vw, 48px);
    }
}

@media (max-width: 700px) {
    .representadas-hero__contenido {
        grid-template-columns: minmax(0, 1fr);
    }

    .representadas-hero__texto,
    .representadas-hero__equipo,
    .representadas-hero__lista {
        grid-column: 1;
        grid-row: auto;
    }

    .representadas-hero__texto h1 {
        font-size: clamp(30px, 7vw, 44px);
    }
}

@media (max-width: 430px) {
    .representadas-hero__texto h1 {
        font-size: 30px;
        overflow-wrap: anywhere;
    }
}

@media (min-width: 1800px) {
    .representadas-hero__contenido {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.45fr);
    }

    .representadas-hero__texto h1 {
        font-size: clamp(42px, 2.8vw, 125px);
    }
}