/* ========================================
   VARIABLES
======================================== */

:root {

    --azul: #1D93D1;

    --negro: #000000;

    --gris: #606161;

    --azul-oscuro: #222160;

    --blanco: #FFFFFF;

    --max-width: 1200px;

}


/* ========================================
   RESET
======================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

    font-size: 16px;
}


body {

    font-family: "Montserrat", sans-serif;

    color: var(--negro);

    background: var(--blanco);

    line-height: 1.5;

}


img {

    max-width: 100%;

    display: block;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input {

    font-family: "Montserrat", sans-serif;

}


/* ========================================
   CONTENEDOR
======================================== */

.container {

    width: min(90%, var(--max-width));

    margin: 0 auto;

}


/* ========================================
   HEADER
======================================== */

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    background: var(--blanco);

}

body {

    padding-top: 105px;

}


.nav-container {

    min-height: 105px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;

}


/* LOGO */

.logo {

    flex-shrink: 0;

}


.logo img {

    width: 230px;

}


/* ========================================
   NAV
======================================== */

.nav {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 27px;

}


.nav-dropdown {

    position: relative;

}


.nav-dropdown-toggle {

    cursor: pointer;

    list-style: none;

}


.nav-dropdown-toggle::-webkit-details-marker {

    display: none;

}


.nav-dropdown-toggle::marker {

    content: "";

}


.nav-dropdown-menu {

    position: absolute;

    top: 100%;

    right: -18px;

    z-index: 2;

    display: none;

    min-width: 220px;

    gap: 2px;

    padding: 10px;

    background: var(--blanco);

    border: 1px solid #e5edf3;

    box-shadow: 0 12px 24px rgba(34, 33, 96, .12);

}


.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {

    display: grid;

}


.nav-dropdown-menu a {

    display: block;

    width: 100%;

    padding: 9px 12px;

    color: var(--gris);

    font-size: max(14px, 11px);

    white-space: nowrap;

}


.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {

    color: var(--azul);

    background: #f2f9fd;

    outline: none;

}


.nav-link {

    position: relative;

    color: var(--gris);

    font-size: max(14px, 12px);

    font-weight: 500;

    letter-spacing: .3px;

    transition: .3s ease;

}


.nav-link:hover,
.nav-link.active {

    color: var(--azul);

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 1px;

    background: var(--azul);

    transition: .3s ease;

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


.nav-link.nav-dropdown-toggle::after {

    content: none !important;

    display: none;

    width: 0 !important;

}


/* MENÚ MOBILE */

.menu-button {

    display: none;

    border: none;

    background: transparent;

    color: var(--azul-oscuro);

    font-size: 28px;

    cursor: pointer;

}


/* ========================================
   HERO
======================================== */

.hero {

    background: var(--blanco);

    overflow: hidden;

}


.hero-container {

    min-height: 385px;
        padding: 25px 0 35px;
    display: grid;

    grid-template-columns: 45% 55%;

    align-items: stretch;

}


.hero-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 50px 40px 50px 0;

    transform: scale(.92);

    transform-origin: right center;

}


.hero h1 {

    margin-bottom: 22px;

    white-space: nowrap;

    color: var(--azul-oscuro);

    font-family: "Montserrat", serif;

    font-size: clamp(24px, 3.7vw, 50px);

    font-weight: 700;

    line-height: 1.05;

}


.hero h1 span {

    display: block;

    color: var(--azul);

}


.hero p {

    max-width: 450px;

    margin-bottom: 28px;

    color: var(--gris);

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 2;

}


/* ========================================
   BOTONES
======================================== */

.hero-buttons {

    display: flex;

    align-items: center;

}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 11px 25px;

    border-radius: 5px;

    font-size: max(14px, 13px);

    font-weight: 700;

    letter-spacing: .2px;

    transition: .3s ease;

}


.btn-primary {

    color: var(--blanco);

    background: var(--azul);

    border: 1px solid var(--azul);

}


.btn-primary:hover {

    background: var(--azul-oscuro);

    border-color: var(--azul-oscuro);

    transform: translateY(-2px);

}


.btn-outline {

    color: var(--azul);

    background: var(--blanco);

    border: 1px solid var(--azul);

}


.btn-outline:hover {

    color: var(--blanco);

    background: var(--azul);

}


/* ========================================
   IMAGEN HERO
======================================== */

.hero-image {

    height: 390px;

    --page-gutter: max(5vw, (100vw - var(--max-width)) / 2);

    width: calc(90% + var(--page-gutter));

    margin-right: calc(-1 * var(--page-gutter));

    align-self: center;

    justify-self: end;

    overflow: hidden;

}


.hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);

    mask-image: linear-gradient(to right, transparent 0%, #000 28%, #000 100%);

}


/* ========================================
   BUSCADOR / CATEGORÍAS
======================================== */

.search-section {

    padding: 30px 0 70px;

    background: var(--blanco);

}


.search-title {

    margin-bottom: 20px;

    text-align: center;

}


.search-title h2 {

    color: var(--azul-oscuro);

    font-family: "Montserrat", serif;

    font-size: clamp(24px, 3.7vw, 50px);

    font-weight: 700;

}


/* ========================================
   CATEGORÍAS
======================================== */

.category-grid {

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 16px;

}


.category-card {

    min-width: 0;

    min-height: 130px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    padding: 20px 12px;

    background: var(--blanco);

    border: 1px solid transparent;

    border-radius: 5px;

    box-shadow:
        0 5px 20px
        rgba(29, 147, 209, .16);

    text-align: center;

    transition: .3s ease;

}


.category-card:hover {

    border-color: var(--azul);

    box-shadow:
        0 8px 20px
        rgba(29, 147, 209, .12);

    transform: translateY(-5px);

}


.category-icon {

    width: 108px;

    height: 108px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    color: var(--azul);

    font-size: 42px;

    flex-shrink: 0;

}


.category-icon img {

    width: 105px;

    height: 105px;

    object-fit: contain;

}


.category-card h3 {

    color: var(--azul-oscuro);

    font-size: max(14px, clamp(12px, 1.1vw, 16px));

    white-space: normal;

    overflow-wrap: anywhere;

    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .3px;

    min-height: 2.8em;

}


.category-link {

    margin-top: 14px;

    color: var(--celeste);

    font-size: max(14px, 12px);

    font-weight: 700;

}


.category-link:hover {

    color: var(--azul);

    text-decoration: underline;

}
/* =========================
   REPRESENTANTES
========================= */

.representantes {
    width: 100%;
    background: #FFFFFF;

    padding: 65px 0 60px;

    overflow: hidden;
}


/* =========================
   ENCABEZADO
========================= */

.representantes-header {
    width: min(90%, var(--max-width));

    margin: 0 auto 35px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}


.representantes-header h2 {
    margin: 0;

    font-family: "Montserrat", serif;
    font-weight: 700;

    font-size: clamp(24px, 3.7vw, 50px);
    line-height: 1.05;

    color: #222160;
}


/* =========================
   DECORACIÓN SUTIL
========================= */

.decoracion {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 8px;
}


.decoracion span:not(.punto) {
    width: 25px;
    height: 1px;

    background: #606161;

    opacity: .45;
}


.decoracion .punto {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #1D93D1;
}


/* =========================
   CARRUSEL
========================= */

.carrusel-logos {
    width: 100%;

    overflow: hidden;

    position: relative;
}


/* EFECTO DE DESVANECIMIENTO EN LOS EXTREMOS */

.carrusel-logos::before,
.carrusel-logos::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 100px;

    z-index: 3;

    pointer-events: none;
}


.carrusel-logos::before {
    left: 0;

    background: linear-gradient(
        to right,
        #FFFFFF,
        transparent
    );
}


.carrusel-logos::after {
    right: 0;

    background: linear-gradient(
        to left,
        #FFFFFF,
        transparent
    );
}


/* =========================
   GRUPO
========================= */

.group-logos {
    display: flex;

    align-items: center;

    gap: 55px;

    width: max-content;

    animation: logosScroll 28s linear infinite;
}


.carrusel-logos:hover .group-logos {
    animation-play-state: paused;
}


/* =========================
   LOGOS
========================= */

.logo-card {
    width: 300px;
    height: 130px;

    flex: 0 0 300px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #FFFFFF;
}


.logo-card img {
    max-width: 280px;
    max-height: 105px;

    width: auto;
    height: auto;

    object-fit: contain;

    display: block;

    transition: transform .3s ease,
                opacity .3s ease;

    opacity: .9;
}


.logo-name {

    color: var(--azul-oscuro);

    font-size: 22px;

    font-weight: 700;

    text-align: center;

}


.logo-name--wide {

    max-width: 250px;

    font-size: 18px;

    line-height: 1.2;

}


.logo-card:hover img {
    transform: scale(1.04);

    opacity: 1;
}


/* =========================
   ANIMACIÓN
========================= */

@keyframes logosScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* ========================================
   SERVICIOS
======================================== */

.services {
    margin: 0;
    padding: 0;
    background: var(--blanco);
}

.services-background {
    margin: 0;
}


/* CABECERA */

.services-header {

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid var(--gris);

}


.services-header h2 {

    color: var(--azul-oscuro);

    font-family: "Montserrat", serif;

    font-size: clamp(24px, 3.7vw, 50px);

    font-weight: 700;

}


.services-header span {

    color: var(--azul-oscuro);

    font-size: 16px;

    font-weight: 500;

    letter-spacing: .3px;

}


/* FONDO */

/* ========================================
   FONDO DE SERVICIOS
======================================== */

.services-background {

    width: 100%;

    padding: 55px 0 70px;

    position: relative;

    isolation: isolate;

}

.services-background::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    transform: scale(1.02);

    filter: blur(6px);

    background-image:
        linear-gradient(
            to right,
            #fff 0%,
            rgba(255, 255, 255, .85) 10%,
            transparent 35%,
            transparent 65%,
            rgba(255, 255, 255, .85) 90%,
            #fff 100%
        ),
        linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
        url("img/fondo.jpg");

    background-position: center;

    background-size: cover, cover, 82% auto;

    background-repeat: no-repeat;

}


/* TARJETAS */

.services-grid {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 180px;

}


.service-card {

    width: 290px;

    min-height: 330px;

    padding: 15px 18px 18px;

    background: var(--blanco);

    border-radius: 18px;

    text-align: center;

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, .18);

    transition: .3s ease;

}


.service-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 12px 25px
        rgba(0, 0, 0, .22);

}


/* IMAGEN */

.service-image {

    height: 140px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 8px;

}


.service-image img {

    max-width: 135px;

    max-height: 135px;

    object-fit: contain;

}


/* TÍTULO */

.service-card h3 {

    margin-bottom: 7px;

    color: var(--azul-oscuro);

    font-size: 18px;

    font-weight: 700;

}


/* TEXTO */

.service-card p {

    color: var(--gris);

    font-size: 14px;

    font-weight: 400;

    line-height: 1.7;

}


/* ========================================
   CTA
======================================== */

.cta {

    padding: 55px 0;

    background: var(--azul-oscuro);

    color: var(--blanco);

}


.cta-container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}


.cta span {

    color: var(--azul);

    font-size: max(14px, 10px);

    font-weight: 700;

    letter-spacing: 1px;

}


.cta h2 {

    max-width: 600px;

    margin: 8px 0;

    color: var(--blanco);

    font-family: "Montserrat", serif;

    font-size: clamp(24px, 3.7vw, 50px);

    font-weight: 700;

    line-height: 1.2;

}


.cta p {

    color: var(--blanco);

    font-size: max(14px, 12px);

}


.btn-light {

    flex-shrink: 0;

    color: var(--azul-oscuro);

    background: var(--blanco);

    border: 1px solid var(--blanco);

}


.btn-light:hover {

    color: var(--blanco);

    background: var(--azul);

    border-color: var(--azul);

}


/* ========================================
   FOOTER
======================================== */
.footer {
    margin: 0;
    padding-top: 0;

    color: var(--blanco);
    background: var(--azul-oscuro);
}


/* CONTENIDO */

.footer-container {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 40px;

    padding: 40px 0 30px;

}


/* LOGO */

.footer-brand {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.footer-brand img {

    width: 250px;

}


.footer-brand-social {

    margin-top: 24px;

}


.footer-brand-social h3 {

    margin-bottom: 16px;

    color: var(--azul);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .5px;

}


/* COLUMNAS */

.footer-column {

    min-width: 0;

}


.footer-column h3 {

    margin-bottom: 16px;

    color: var(--azul);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .5px;

}


.footer-column p {

    margin-bottom: 10px;

    color: var(--blanco);

    font-size: max(14px, 13px);

    line-height: 1.5;

}


/* ENLACES */

.footer-links {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 9px;

    white-space: nowrap;

}


.footer-links div {

    display: contents;

}


.footer-links a {

    color: var(--blanco);

    font-size: max(14px, 13px);

    transition: .2s ease;

}


.footer-links a:hover {

    color: var(--azul);

}


/* ========================================
   REDES
======================================== */

.social-links {

    display: flex;

    gap: 12px;

}


.social-links a {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blanco);

    border: 1px solid rgba(255, 255, 255, .45);

    border-radius: 50%;

    font-size: 17px;

    font-weight: 700;

    transition: .3s ease;

}


.social-links a:hover {

    color: var(--azul-oscuro);

    background: var(--azul);

    border-color: var(--azul);

    transform: translateY(-3px);

}

/* ========================================
   ASESORAMIENTO
======================================== */

.footer-advisory {

    margin-top: 0;

    padding-top: 0;

    border-top: 0;

}




.advisory-title span {

    width: 18px;

    height: 2px;

    background: var(--azul);

}


.advisory-title h3 {

    margin: 0;

    color: var(--azul);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .6px;

}


.footer-advisory p {

    max-width: 235px;

    margin-bottom: 15px;

    color: var(--blanco);

    font-size: max(14px, 13px);

    line-height: 1.5;

    opacity: .9;

}


/* BOTÓN */

.advisory-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 12px 10px;

    color: var(--azul);

    background: var(--blanco);

    border-radius: 10px;

    margin-top: 30px;

    font-size: max(14px, 13px);

    font-weight: bold;

    transition: .3s ease;

}


.advisory-button span {

    color: var(--azul);

    font-size: 19px;

    line-height: 1;

    transition: .3s ease;

}


.advisory-button:hover {

    color: var(--blanco);

    background: transparent;

    border-color: var(--azul);

}


.advisory-button:hover span {

    color: var(--blanco);

    transform: translateX(4px);

}
/* ========================================
   COPYRIGHT
======================================== */

.footer-bottom {

    border-top: 1px solid var(--gris);

    padding: 10px 0;

}


.footer-bottom p {

    color: var(--blanco);

    font-size: max(14px, 11px);

}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1050px) {


    .nav {

        gap: 17px;

    }


    .nav-link {

        font-size: max(14px, 10px);

    }


    .logo img {

        width: 200px;

    }


    .hero-container {

        grid-template-columns: 48% 52%;

    }


    .services-grid {

        gap: 100px;

    }


}


@media (max-width: 900px) {


    /* HEADER */

    body {

        padding-top: 80px;

    }

    .nav {

        display: none;

    }


    .header.menu-open .nav {

        position: absolute;

        top: 80px;

        right: 5%;

        left: 5%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 0;

        padding: 12px 20px;

        background: var(--blanco);

        box-shadow: 0 12px 24px rgba(34, 33, 96, .12);

    }


    .header.menu-open .nav-link {

        padding: 12px 0;

        font-size: max(14px, 12px);

    }


    .header.menu-open .nav-dropdown {

        position: static;

    }


    .header.menu-open .nav-dropdown-menu {

        position: static;

        min-width: 0;

        padding: 4px 0 8px 14px;

        background: transparent;

        border: 0;

        box-shadow: none;

    }


    .header.menu-open .nav-dropdown[open] .nav-dropdown-menu {

        display: grid;

    }


    .header.menu-open .nav-dropdown-menu a {

        padding: 9px 0;

        font-size: max(14px, 11px);

    }


    .menu-button {

        display: block;

    }


    .nav-container {

        min-height: 80px;

    }


    .logo img {

        width: 180px;

    }


    /* HERO */

    .hero-container {

        grid-template-columns: 1fr;

    }


    .hero-content {

        padding: 55px 0;

        text-align: center;

        align-items: center;

        transform: none;

    }


    .hero p {

        margin-right: auto;

        margin-left: auto;

    }


    .hero-image {

        height: 320px;

        --page-gutter: 5vw;

        width: calc(90% + var(--page-gutter));

        margin-right: calc(-1 * var(--page-gutter));

    }


    /* CATEGORÍAS */

    .category-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    /* MARCAS */

    .brands {

        grid-template-columns:
            repeat(3, 1fr);

    }


    /* SERVICIOS */

    .services-header {

        flex-direction: column;

        justify-content: center;

        align-items: flex-start;

        gap: 5px;

        padding: 18px 0;

    }


    .services-grid {

        flex-direction: column;

        align-items: center;

        gap: 30px;

    }


    /* CTA */

    .cta-container {

        flex-direction: column;

        text-align: center;

    }
/* ========================================
   ASESORAMIENTO FOOTER
======================================== */

.footer-advisory {

    margin-top: 28px;

}


.footer-advisory h3 {

    margin-bottom: 10px;

}


.footer-advisory p {

    max-width: 220px;

    margin-bottom: 12px;

    color: var(--blanco);

    font-size: max(14px, 13px);

    line-height: 1.5;

}


.advisory-link {

    display: inline-block;

    color: var(--azul);

    font-size: max(14px, 9px);

    font-weight: 700;

    letter-spacing: .3px;

    transition: .3s ease;

}


.advisory-link:hover {

    color: var(--blanco);

}

    /* FOOTER */

  
    .footer-container {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .footer-brand,
    .footer-column,
    .footer-brand-social,
    .footer-advisory {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-brand img {
        margin-left: auto;
        margin-right: auto;
    }

    .social-links {
        justify-content: center;
    }

    .footer-links {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    .footer-links > div {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-links a {
        width: 100%;
        display: block;
        text-align: center;
    }

    .advisory-title {
        justify-content: center;
    }

    .footer-bottom,
    .footer-bottom .container,
    .footer-bottom p {
        text-align: center;
    }
}

@media (max-width: 500px) {


    .container {

        width: 90%;

    }


    /* LOGO */

    .logo img {

        width: 155px;

    }


    /* HERO */

    .hero h1 {

        font-size: 30px;

    }


    .search-title h2 {

        font-size: 30px;

    }


    .hero p {

        font-size: 15px;

    }


    .hero-image {

        min-height: 230px;

    }


    /* CATEGORÍAS */

    .category-grid {

        grid-template-columns: 1fr;

    }


    /* MARCAS */

    .brands {

        grid-template-columns:
            repeat(2, 1fr);

    }


    /* SERVICIOS */

    .representantes-header h2,
    .services-header h2 {

        font-size: 30px;

    }


    .services-header span {

        font-size: max(14px, 13px);

    }


    /* CTA */

    .cta h2 {

        font-size: 30px;

    }


    /* FOOTER */

    .footer-container {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .footer-brand {

        justify-content: center;

    }


    .footer-links {

        text-align: left;

    }


    .social-links {

        justify-content: center;

    }

}


.category-text {

    font-size: 14px;

    line-height: 1.5;
} 
/* =========================================
   CARRITO FLOTANTE
========================================= */

.carrito-flotante {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 65px;
    height: 65px;

    border-radius: 50%;

    background: #0b98d5;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-size: 25px;

    box-shadow:
        0 5px 18px
        rgba(0, 0, 0, 0.25);

    z-index: 9999;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.carrito-flotante:hover {
    background: #067bb4;

    transform: scale(1.07);

    text-decoration: none;
}


.carrito-flotante i {
    color: #ffffff;
}


/* número de productos */

.carrito-flotante__cantidad {
    position: absolute;

    top: -4px;
    right: -3px;

    min-width: 23px;
    height: 23px;

    padding: 0 6px;

    border-radius: 20px;

    background: #071b43;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: max(14px, 11px);
    font-weight: 700;

    border: 2px solid #ffffff;
}


@media (max-width: 600px) {

    .carrito-flotante {
        width: 56px;
        height: 56px;

        right: 17px;
        bottom: 17px;

        font-size: 21px;
    }

}
/* Icono de Disolución, con el mismo tamaño que los demás. */
.category-icon svg {
    width: 105px;
    height: 105px;
    fill: none;
    stroke: #006ac6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.category-card .category-text {
    flex: 1;
    min-width: 0;
}

/* Ajustes de adaptación para tabletas y móviles */
img, video, svg { max-width: 100%; }
.hero-content { min-width: 0; transform: none; }
.hero h1 { white-space: normal; overflow-wrap: anywhere; }
.hero-image { min-width: 0; }
.category-card, .service-card, .footer-column { min-width: 0; }
.footer-links { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
    .nav-container { gap: clamp(12px, 2vw, 24px); }
    .services-grid { gap: clamp(18px, 5vw, 72px); flex-wrap: wrap; }
    .service-card { flex: 1 1 260px; width: auto; max-width: 360px; }
    .footer-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); }
}

@media (max-width: 900px) {
    .nav-container { width: min(94%, var(--max-width)); }
    .hero-image { width: 100%; height: clamp(240px, 48vw, 360px); margin: 0; justify-self: stretch; }
    .hero-container { padding-top: 12px; }
    .footer-container { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .hero-content { padding: 36px 0 28px; }
    .hero h1 { font-size: clamp(27px, 8vw, 38px); line-height: 1.12; }
    .hero p { max-width: 42ch; line-height: 1.7; }
    .hero-buttons { width: 100%; justify-content: center; flex-wrap: wrap; gap: 10px; }
    .hero-buttons .btn { max-width: 100%; }
    .hero-image { height: clamp(210px, 68vw, 310px); min-height: 0; }
    .category-icon, .category-icon img, .category-icon svg { width: clamp(72px, 22vw, 105px); height: clamp(72px, 22vw, 105px); }
    .category-card { padding: 18px 14px; }
    .footer-container { grid-template-columns: minmax(0, 1fr); }
    .footer-brand img { max-width: min(100%, 250px); height: auto; }
    .footer-advisory p { max-width: 38ch; }
}

/* El ancho de la ventana cambia al usar el zoom del navegador. En ventanas CSS muy amplias hacemos crecer el contenido junto con ella. */
@media (min-width: 1800px) {
    html { font-size: clamp(20px, 0.9vw, 48px); }
    body { padding-top: clamp(105px, 5.5vw, 360px); }
    .container, .representantes-header, .footer-bottom .container { width: 92vw; max-width: none; }
    .nav-container { width: 92vw; min-height: clamp(105px, 5.5vw, 360px); gap: 2vw; }
    .logo img { width: clamp(230px, 12vw, 620px); max-width: 100%; }
    .nav { gap: clamp(20px, 1.4vw, 58px); }
    .nav-link { font-size: max(14px, clamp(11px, 0.6vw, 26px)); }
    .nav-dropdown-menu { min-width: clamp(220px, 16vw, 600px); }
    .hero-container { min-height: 0; padding: 1.5vw 0; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    .hero-content { padding: 2vw 1.2vw 2vw 0; }
    .hero h1 { font-size: clamp(50px, 2.6vw, 120px); line-height: 1.08; }
    .hero p { max-width: 42ch; font-size: clamp(16px, 0.85vw, 36px); line-height: 1.65; }
    .hero-image { width: 100%; height: clamp(390px, 20vw, 900px); margin: 0; }
    .category-grid { gap: clamp(16px, 1vw, 40px); }
    .category-card { min-height: clamp(150px, 10vw, 420px); padding: 1.2vw; }
    .category-icon, .category-icon img, .category-icon svg { width: clamp(105px, 5.5vw, 260px); height: clamp(105px, 5.5vw, 260px); }
    .category-card h3 { font-size: max(14px, clamp(13px, 0.7vw, 30px)); }
    .category-link { font-size: max(14px, clamp(11px, 0.58vw, 24px)); }
    .footer-container { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vw; padding: 2vw 0 1.5vw; }
    .footer-brand img { width: clamp(250px, 14vw, 700px); max-width: 100%; height: auto; }
    .footer-column h3, .footer-brand-social h3, .advisory-title h3 { font-size: clamp(14px, 0.7vw, 30px); }
    .footer-column p, .footer-links a, .footer-advisory p { font-size: max(14px, clamp(13px, 0.68vw, 30px)); max-width: 42ch; }
    .advisory-button { font-size: max(14px, clamp(13px, 0.68vw, 28px)); padding: 0.75vw 1vw; }
}


/* El título de Inicio conserva su composición original en dos renglones.
   El tamaño se ajusta al ancho del bloque para evitar que el texto se parta. */
.hero-content { container-type: inline-size; }
.hero h1 {
    white-space: normal;
    overflow-wrap: normal;
    font-size: clamp(20px, 2.55vw, 35px); /* alternativa para navegadores sin unidades cqi */
    font-size: clamp(20px, 7.1cqi, 50px);
    line-height: 1.05;
}
.hero h1 .hero-title-line {
    display: block;
    white-space: nowrap;
}
.hero h1 .hero-title-line--primary { color: var(--azul-oscuro); }
.hero h1 .hero-title-line--secondary { color: var(--azul); }

@media (max-width: 600px) {
    .hero h1 {
        font-size: clamp(20px, 6.1vw, 32px); /* alternativa para navegadores sin unidades cqi */
        font-size: clamp(20px, 7.1cqi, 36px);
    }
}

@media (min-width: 1800px) {
    .hero h1 { font-size: clamp(50px, 2.6vw, 120px); }
}

/* Navegación común: mantiene el logo a la izquierda y los enlaces alineados a la derecha en escritorio. */
@media (min-width: 1101px) {
    .header .nav-container {
        width: min(94vw, 3200px);
        max-width: none;
        min-height: clamp(105px, 5.5vw, 360px);
        gap: clamp(18px, 2vw, 52px);
    }

    .header .logo { flex: 0 0 auto; }
    .header .logo img {
        width: clamp(200px, 14.5vw, 540px);
        height: auto;
        max-width: 100%;
    }

    .header .nav {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: clamp(16px, 1.6vw, 36px);
    }

    .header .nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: clamp(14px, 0.9vw, 22px);
        line-height: 1.2;
    }

    .header .nav-dropdown-menu {
        width: max-content;
        min-width: clamp(190px, 15vw, 420px);
    }

    .header .nav-dropdown-menu a {
        font-size: max(14px, clamp(13px, 0.72vw, 16px));
    }
}

/* En tabletas el menú aún cabe en una sola línea; conserva un tamaño legible. */
@media (min-width: 901px) and (max-width: 1100px) {
    .header .nav-container { gap: clamp(12px, 1.5vw, 18px); }
    .header .logo img { width: clamp(180px, 20vw, 200px); }
    .header .nav { gap: clamp(10px, 1.1vw, 14px); }
    .header .nav-link { font-size: 14px; line-height: 1.2; white-space: nowrap; }
    .header .nav-dropdown-menu a { font-size: max(14px, 13px); }
}

/* Menú desplegable móvil: mantiene los enlaces cómodos de leer al cambiar el zoom. */
@media (max-width: 900px) {
    .header.menu-open .nav-link { font-size: 15px; }
    .header.menu-open .nav-dropdown-menu a { font-size: 14px; }
}

/* En el diseño de referencia el enlace activo se marca con color, sin una línea debajo. */
.header .nav-link.active::after { display: none; }

@media (min-width: 1800px) {
    .footer .footer-container {
        width: 92vw;
        max-width: none;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2vw;
    }

    .footer .footer-brand,
    .footer .footer-column { min-width: 0; }
    .footer .footer-brand img { width: clamp(250px, 14vw, 700px); max-width: 100%; height: auto; }
    .footer .footer-links { white-space: normal; overflow-wrap: anywhere; }
}

/* Los títulos de sección de Inicio comparten el mismo tamaño visual. */
.search-title h2,
.representantes-header h2,
.services-header h2 {
    font-size: clamp(20px, calc(2.875vw - 2.84px), 35.5px);
    line-height: 1.05;
}

/* El título principal pasa a una sola columna en tabletas y crece con ese ancho. */
@media (min-width: 601px) and (max-width: 900px) {
    .search-title h2,
    .representantes-header h2,
    .services-header h2 {
        font-size: clamp(20px, 6.39vw, 50px);
    }
}

/* Ajuste del título principal de Inicio cuando el hero usa columnas 48/52. */
@media (min-width: 901px) and (max-width: 1050px) {
    .search-title h2,
    .representantes-header h2,
    .services-header h2 {
        font-size: clamp(20px, calc(3.067vw - 2.84px), 35.5px);
    }
}

@media (max-width: 600px) {
    .search-title h2,
    .representantes-header h2,
    .services-header h2 {
        font-size: clamp(20px, 6.39vw, 36px);
    }
}

@media (min-width: 1800px) {
    .search-title h2,
    .representantes-header h2,
    .services-header h2 {
        font-size: clamp(50px, 2.6vw, 120px);
    }
}


/* ZOOM-LEGIBLE-20261009: responsive reflow and readable navigation */
html {
    min-width: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

main, section, article, .container, .nav-container,
.hero-container, .hero-content, .hero-image,
.category-grid, .category-card, .services-grid, .service-card,
.footer-container, .representadas-hero, .representadas-hero__contenido,
.representadas-hero__texto, .representadas-hero__equipo, .representadas-hero__lista,
.representadas-grilla, .representada, .representada__informacion,
.representadas-catalogo, .seccion-productos, .categorias, .categoria,
.productos-grilla, .producto, .producto-info, .producto-informacion,
.promociones, .seleccion, .contenido-contacto, .formulario-box, .datos-box,
.nosotros-grid, .nosotros-cards, .mision-contenedor, .mision-card,
.contenedor, .productos, .cotizacion-layout, .tarjeta, .fila-producto {
    min-width: 0;
}

img, svg, video, canvas, iframe {
    max-width: 100%;
}

@media (max-width: 900px) {
    .header.menu-open .nav {
        max-height: min(78dvh, calc(100vh - 96px));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .header.menu-open .nav-link {
        min-height: 44px;
        font-size: 15px;
        line-height: 1.4;
    }

    .header.menu-open .nav-dropdown-menu a {
        min-height: 40px;
        font-size: 14px;
        line-height: 1.45;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .header .menu-button {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
}

@media (max-width: 600px) {
    .header .nav-container {
        width: calc(100% - 32px);
        gap: 12px;
    }

    .header .logo {
        min-width: 0;
        flex: 0 1 auto;
    }

    .header .logo img {
        width: min(180px, 48vw);
        height: auto;
    }
}

@media (max-width: 360px) {
    .header .nav-container {
        width: calc(100% - 20px);
        gap: 8px;
    }

    .header .logo img {
        width: clamp(120px, 48vw, 170px);
    }

    .header.menu-open .nav {
        left: 10px;
        right: 10px;
    }
}