/* ==========================================================================
   THERMO CLIMA CONTROL — Hoja de estilos principal
   --------------------------------------------------------------------------
   Enfoque mobile-first. Bootstrap 5.3 se usa como base técnica (rejilla,
   colapsables, modal, acordeón) y aquí se define toda la apariencia.

   ÍNDICE
   00. Variables y tokens
   01. Reset y utilidades base
   02. Contenedores
   03. Tipografía compartida (labels, títulos, eyebrows)
   04. Botones
   05. A. Header + navegación
   06. B. Hero
   07. C. Empresa
   08. D. Industrias (carrusel)
   09. E. Servicios (4 bloques)
   10. F+G. Soluciones HVAC (pestañas)
   11. H. Clientes (carrusel de logos)
   12. I. Contacto
   13. J. Footer
   14. Volver arriba + modal + formulario
   15. Media queries (992 / 768 / 576 / 400)
   16. Páginas interiores (banner, bloques de producto, marcas, productos)
   ========================================================================== */
.tc-totop{

    bottom: 95px;

}


.lista-personalizada {
    list-style: none; /* Elimina los puntos por defecto */
    padding: 0;
    margin: 0;
}

.lista-personalizada li {
    background-image: url(../images/download.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 25px 24px;
    padding-left: 25px;
    padding-right: 15px;
    margin-bottom: 8px;                   /* Separación entre cada fila */
}


.titulo_esr{
    margin: 0 0 .42em;
    font-size: clamp(20px, 1.85vw, 19px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.01em;
    color: var(--color-text);
}

.subtitle_esr {
    margin: 0;
    font-size: clamp(16px, 1.36vw, 14px);
    font-weight: 400;
    line-height: 1.45;
    color: #4A4F5C;
    /*text-align: justify;*/
}


.esr {
    background-image: url(../images/esr.svg);
    background-position: center top;
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;

}

/* Estilos base del botón WhatsApp */
.btn-whatsapp {
    height: 70px;
    width: 70px;
    color: #fff;
    position: fixed;
    right: 20px;
    top: 150px;
    /* Cambié top por bottom para mejor UX */
    border-radius: 50%;
    line-height: 80px;
    text-align: center;
    z-index: 999;
    cursor: pointer;
}

.btn-whatsapp a {
    display: block;
    width: 100%;
    height: 100%;
}

.btn-whatsapp img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: block;
    transition: transform 0.3s ease;
}

/* uriel */
.btn-whatsapp {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Hover efecto */
.btn-whatsapp:hover {
    animation: none;
}

.btn-whatsapp:hover img {
    transform: scale(1.1);
}

/* ==========================================================================
   00. VARIABLES Y TOKENS
   Colores detectados en la referencia visual.
   ========================================================================== */
:root {
    /* Paleta */
    --color-primary-dark: #0B1B72;
    /* azul oscuro de secciones                */
    --color-primary: #0337CB;
    /* azul brillante de acciones              */
    --color-primary-700: #012C9E;
    /* hover del azul brillante                */
    --color-primary-soft: #5B84F8;
    /* etiquetas sobre fondo azul oscuro       */
    --color-white: #FFFFFF;
    --color-light: #F9F9F9;
    /* fondo gris muy claro (Industrias)       */
    --color-tile: #F3F3F3;
    /* fondo de pestañas inactivas             */
    --color-black: #000000;
    /* footer                                  */
    --color-text: #282A37;
    /* títulos oscuros                         */
    --color-muted: #8E9199;
    /* texto de pestañas inactivas             */
    --color-accent: #D50100;
    /* etiqueta de industria activa            */
    --color-bullet: #4FA3F0;
    /* viñetas de las listas de servicios      */

    /* Medidas estructurales (calibradas sobre la referencia de 1619 px) */
    --tc-max: 1300px;
    /* contenedor principal                    */
    --tc-max-wide: 1470px;
    /* contenedor del hero                     */
    --tc-max-strip: 1520px;
    /* franja del carrusel de industrias       */
    --tc-header-h: clamp(62px, 10.2vw, 165px);

    /* Escala tipográfica fluida */
    --fs-nav: clamp(12px, 0.93vw, 15px);
    --fs-label: clamp(12px, 0.93vw, 15px);
    --fs-eyebrow: clamp(14px, 1.36vw, 22px);
    --fs-body: clamp(15px, 1.05vw, 17px);
    --fs-lead: clamp(15px, 1.11vw, 18px);
    --fs-list: clamp(15px, 1.17vw, 19px);
    --fs-h1: clamp(38px, 4.70vw, 76px);
    --fs-h2: clamp(30px, 3.71vw, 60px);
    --fs-h2-lg: clamp(31px, 3.58vw, 58px);
    --fs-h2-xl: clamp(34px, 3.77vw, 61px);
    --fs-h3: clamp(22px, 2.10vw, 34px);

    --tc-ease: cubic-bezier(.25, .6, .3, 1);
}


.slogan{
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 15px;
    font-size: 1.8rem;
    text-align: center !important;

    line-height: 1.2;
    color: #1f47a1;
}
/* ==========================================================================
   01. RESET Y UTILIDADES BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--tc-header-h);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-white);
    overflow-x: hidden;
    /* evita scroll horizontal accidental */
    -webkit-font-smoothing: antialiased;
}

.esquema{
    background-image: url(../images/esquema_new.png);
    background-position: center top;
    height: 1200px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.slogan2 {
    margin-top: -50px;
    margin-bottom: 20px;
    padding: 15px;
    font-size: .8rem;
    text-align: center !important;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #1f47a1;
}

.esquema2{
    background-image: url(../images/esquema2.webp);
    background-position: center top;
    height: auto;
    min-height: 650px;
    overflow: hidden;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.tc-serviciosnew {
    background: var(--color-white);
    padding-block: 7vw 4vw;
}

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

figure {
    margin: 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

address {
    font-style: normal;
}

/* Foco visible y accesible en toda la página */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 2px;
}

.tc-servicios a:focus-visible,
.tc-servicios button:focus-visible,
.tc-empresa a:focus-visible,
.tc-contacto a:focus-visible,
.tc-contacto button:focus-visible,
.tc-footer a:focus-visible,
.tc-footer button:focus-visible {
    outline-color: #9FC0FF;
}

.tc-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.tc-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 2000;
    background: var(--color-primary);
    color: #fff;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    transition: top .2s var(--tc-ease);
}

.tc-skip:focus {
    top: 12px;
}

.tc-text-center {
    text-align: center;
}


/* ==========================================================================
   02. CONTENEDORES
   Tres anchos distintos, tal como se observa en la referencia.
   ========================================================================== */
.tc-container {
    width: min(100% - 2 * clamp(20px, 4vw, 64px), var(--tc-max));
    margin-inline: auto;
}

.tc-container-solutions {
    /* mismo ancho que el principal */
    width: min(100% - 2 * clamp(20px, 4vw, 64px), var(--tc-max));
    margin-inline: auto;
}

.tc-container-wide {
    /* header y hero: márgenes menores */
    width: min(100% - 2 * clamp(20px, 5.3vw, 86px), var(--tc-max-wide));
    margin-inline: auto;
}

.tc-container-strip {
    /* franja del carrusel de industrias */
    width: min(100% - 2 * clamp(16px, 3.21vw, 52px), var(--tc-max-strip));
    margin-inline: auto;
}


.tc-empresa2 {
    background: var(--color-white);
    color: var(--color-primary-dark);
    padding-block: 3.4vw 5.13vw;
}



/*productos*/

.tc-product__fig img {
    /*background-image: */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.f_border {
    border-style: solid;
    border-color: #F2F2F2;
    border-width: 1px;
    margin-left: 0px;
    margin-right: 0px;
}

.f_ref1 {
    background-image: url(../images/f_refrigeracion_01.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_ref2 {
    background-image: url(../images/f_refrigeracion_02.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_ref3 {
    background-image: url(../images/f_refrigeracion_03.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}


.descripcionfoto {
    margin-top: .5rem;
    margin-bottom: .5rem;
    font-size: 17px;
    font-family: arial;
    text-align: center;
    font-weight: 600;
    color: #054098;
    width: 100%;
    position: relative;
    float: left;
}


.spacer40px {
    height: 1px;
    margin-top: 20px;
    margin-bottom: 60px;
    background-color: #cccccc;
    width: 100%;
    position: relative;
    float: left;

}

/*clientes*/

.cliente_01 {
    background-image: url(../images/c1.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_02 {
    background-image: url(../images/c2.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_03 {
    background-image: url(../images/c3.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_04 {
    background-image: url(../images/c4.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_05 {
    background-image: url(../images/c5.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_06 {
    background-image: url(../images/c6.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_07 {
    background-image: url(../images/c7.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_08 {
    background-image: url(../images/c8.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_09 {
    background-image: url(../images/c9.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_10 {
    background-image: url(../images/c10.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_11 {
    background-image: url(../images/c11.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_12 {
    background-image: url(../images/c12.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_13 {
    background-image: url(../images/c13.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_14 {
    background-image: url(../images/c14.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_15 {
    background-image: url(../images/c15.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_16 {
    background-image: url(../images/c16.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_17 {
    background-image: url(../images/c17.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_18 {
    background-image: url(../images/c18.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_19 {
    background-image: url(../images/c19.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}


.cliente_20 {
    background-image: url(../images/c20.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_21 {
    background-image: url(../images/l_santaclara.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_22{
    background-image: url(../images/l_delvalle.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_23{
    background-image: url(../images/l_compusoluciones.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_24{
    background-image: url(../images/l_lavartex.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_25{
    background-image: url(../images/l_grupak.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_26{
    background-image: url(../images/l_andre.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_27{
    background-image: url(../images/l_wartzilla.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_28{
    background-image: url(../images/l_temperados.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_29{
    background-image: url(../images/l_axalta.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_30{
    background-image: url(../images/l_mondelez.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_31{
    background-image: url(../images/l_telcel.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.cliente_32{
    background-image: url(../images/l_telmex.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}


/*marcas*/

.marca_bonh {
    background-image: url(../images/l_bonn.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;

}

.marca_danfoss {
    background-image: url(../images/l_danfoss.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_flakt {
    background-image: url(../images/l_flackt.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}
.l_gunther {
    background-image: url(../images/l_gunther.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}
.l_gatorade {
    background-image: url(../images/l_gatorade.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}
.l_grupomexico {
    background-image: url(../images/l_grupomexico.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_vitro {
    background-image: url(../images/l_vitro.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_suprema {
    background-image: url(../images/l_suprema.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_champion {
    background-image: url(../images/l_champion.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_mantenimiento2 {
    background-image: url(../images/l_vesmorgde.jpg);
    background-position: center top;
    height: 150px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_munters {
    background-image: url(../images/l_munters.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_arctic {
    background-image: url(../images/l_arctic.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_syp {
    background-image: url(../images/l_sp.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}


.marca_aaf {
    background-image: url(../images/l_aaf.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_dwyer {
    background-image: url(../images/l_dwayer.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_aircare {
    background-image: url(../images/l_aircare.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_flanders {
    background-image: url(../images/l_flanders.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_donaldson {
    background-image: url(../images/l_donaldson.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_honeywell {
    background-image: url(../images/l_honeywell.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_belimo {
    background-image: url(../images/l_belimo.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_jonhson {
    background-image: url(../images/l_jonhson.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_carel {
    background-image: url(../images/l_carel.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_namm {
    background-image: url(../images/l_namm.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_innes {
    background-image: url(../images/l_nnes.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_titus {
    background-image: url(../images/l_titus.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_atc {
    background-image: url(../images/l_atc.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_nortec {
    background-image: url(../images/l_nortec.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_walton {
    background-image: url(../images/l_walton.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_armstrong {
    background-image: url(../images/l_armstrong.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_spraying {
    background-image: url(../images/l_spray.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_daikin {
    background-image: url(../images/l_daykin.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_intensity {
    background-image: url(../images/l_intensity.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_rheem {
    background-image: url(../images/l_rheem.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_carrier {
    background-image: url(../images/l_carrier.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_trane {
    background-image: url(../images/l_trane.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_york {
    background-image: url(../images/l_york.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_midea {
    background-image: url(../images/l_midea.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_mirage {
    background-image: url(../images/l_mirage.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_dataaire {
    background-image: url(../images/l_dataaire.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.marca_liebert {
    background-image: url(../images/l_liebert.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_attom {
    background-image: url(../images/l_attom.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_attom {
    background-image: url(../images/l_attom.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_hireff {
    background-image: url(../images/l_hiref.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_stulz{
    background-image: url(../images/l_stulz.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_apc{
    background-image: url(../images/l_apc.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_samsung{
    background-image: url(../images/l_samsung.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}




.l_bacnet{
    background-image: url(../images/l_bacnet.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_fieldserver{
    background-image: url(../images/l_fieldserver.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_loytec{
    background-image: url(../images/l_loytec.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_distech{
    background-image: url(../images/l_distech.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_delta{
    background-image: url(../images/l_delta.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_flowcon{
    background-image: url(../images/l_flowcon.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_schneider{
    background-image: url(../images/l_schneider.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}





.l_lg{
    background-image: url(../images/l_lg.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_mitsubishi{
    background-image: url(../images/l_mitsubishi.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_hisense{
    background-image: url(../images/l_hisense.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}
.l_ciac{
    background-image: url(../images/l_ciac.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_fisair{
    background-image: url(../images/l_fisair.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_bryair{
    background-image: url(../images/l_bryair.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_trotec{
    background-image: url(../images/l_trotec.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_oyon{
    background-image: url(../images/l_oyon.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_elgin{
    background-image: url(../images/l_elgin.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_jaff{
    background-image: url(../images/l_jaff.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_atfil{
    background-image: url(../images/l_atfil.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_bluewind{
    background-image: url(../images/l_bluewind.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_macroair{
    background-image: url(../images/l_macroair.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_mastercool{
    background-image: url(../images/l_mastercool.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_neptronic{
    background-image: url(../images/l_neptronic.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_siemens{
    background-image: url(../images/l_siemens.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_reliable{
    background-image: url(../images/l_reliable2.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}







.l_fabric{
    background-image: url(../images/l_fabric.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.l_gofog{
    background-image: url(../images/l_gofog.jpg);
    background-position: center top;
    height: 140px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}


.f_control_1 {
    background-image: url(../images/f_distribucion_1.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_control_2 {
    background-image: url(../images/f_distribucion_2.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}





.margen_20px {
    margin-bottom: 20px;
    margin-top: 20px;
}

.margen_40px {
    margin-bottom: 40px;
    margin-top: 40px;
}

.margen_abajo40px {
    margin-bottom: 40px;
}

.margen_60px {
    margin-bottom: 60px;
    margin-top: 60px;
}


.m_solucion_01 {
    background-image: url(../images/solucion_01.jpg);
    background-position: center center;
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.m_solucion_02 {
    background-image: url(../images/solucion_02.jpg);
    background-position: center center;
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.m_solucion_03 {
    background-image: url(../images/solucion_03.jpg);
    background-position: center center;
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.m_solucion_04 {
    background-image: url(../images/solucion_04.jpg);
    background-position: center center;
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.m_solucion_05 {
    background-image: url(../images/solucion_05.jpg);
    background-position: center center;
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.m_solucion_06 {
    background-image: url(../images/solucion_06.jpg);
    background-position: center center;
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.m_solucion_07 {
    background-image: url(../images/solucion_07.jpg);
    background-position: center center;
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.m_solucion_08 {
    background-image: url(../images/solucion_08.jpg);
    background-position: center center;
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.m_solucion_09 {
    background-image: url(../images/solucion_09.jpg);
    background-position: center center;
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}


.f_vent_01 {
    background-image: url(../images/ven_01.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_vent_02 {
    background-image: url(../images/ven_02.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_vent_03 {
    background-image: url(../images/ven_03.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_vent_04 {
    background-image: url(../images/ven_04.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_vent_05 {
    background-image: url(../images/ven_05.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_vent_06 {
    background-image: url(../images/ven_06.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_vent_6 {
    background-image: url(../images/ven_6.jpg);
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
    background-position: center top;
}

.f_vent_7 {
    background-image: url(../images/ven_7.jpg);
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
    background-position: center top;
}

.f_vent_8 {
    background-image: url(../images/ven_8.jpg);
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
    background-position: center top;
}

.f_airelavado_01{
    background-image: url(../images/airelavado_01.jpg);
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
    background-position: center top;
}

.f_airelavado_02{
    background-image: url(../images/airelavado_02.jpg);
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
    background-position: center top;
}


.f_aire_a {
    background-image: url(../images/f_aire_a.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_aire_b {
    background-image: url(../images/f_aire_b.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_aire_c {
    background-image: url(../images/f_aire_c.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_aire_d {
    background-image: url(../images/f_aire_d.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_aire_e {
    background-image: url(../images/f_aire_e.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_aire_f {
    background-image: url(../images/f_aire_f.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_aire_01 {
    background-image: url(../images/f_aire_01.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_aire_02 {
    background-image: url(../images/f_aire_02.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_aire_03 {
    background-image: url(../images/f_aire_03.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_aire_04 {
    background-image: url(../images/f_aire_04.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}



.f_descripcion {
    height: 370px;
    text-align: left;
    padding-top: 110px;
    font-family: arial;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
}

.f_deshumidificador_02 {
    background-image: url(../images/f_deshumidificadores_02.jpg);
    background-position: center top;
    height: 290px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
    background-size: contain;
}

.f_deshumidificador_03 {
    background-image: url(../images/f_deshumidificadores_03.jpg);
    background-position: center top;
    height: 290px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
    background-size: contain;
}

.des_03 {
    background-image: url(../images/f_deshumidificadores_03.jpg);
    background-position: center top;
    height: 290px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
    background-size: contain;
}


.distribucion_02 {
    background-image: url(../images/distribucion_aire_02.jpg);
    background-position: center top;
    height: 290px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
    background-size: contain;
}

.distribucion_03 {
    background-image: url(../images/distribucion_aire_03.jpg);
    background-position: center top;
    height: 290px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
    background-size: contain;
}

.distribucion_04 {
    background-image: url(../images/distribucion_aire_04.jpg);
    background-position: center top;
    height: 370px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
    background-size: contain;
}

.distribucion_05 {
    background-image: url(../images/distribucion_aire_05.jpg);
    background-position: center top;
    height: 370px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
    background-size: contain;
}

.distribucion_06 {
    background-image: url(../images/distribucion_aire_06.jpg);
    background-position: center top;
    height: 370px;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-bottom: 30px;
    background-size: contain;
}

.f_control_01 {
    background-image: url(../images/siscontrol_1.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_control_02 {
    background-image: url(../images/siscontrol_2.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}


.f_control_03 {
    background-image: url(../images/siscontrol_4.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_areas_01 {
    background-image: url(../images/arealimpia_3_baro.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_areas_02 {
    background-image: url(../images/arealimpia_4_ame.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_areas_03 {
    background-image: url(../images/arealimpia_5_taco.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_areas_04 {
    background-image: url(../images/arealimpia_6_termo.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

.f_areas_05 {
    background-image: url(../images/arealimpia_7_mano.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}


.f_areas_06 {
    background-image: url(../images/arealimpia_8_contador.jpg);
    background-position: center top;
    height: 370px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    background-size: contain;
}

/* ==========================================================================
   03. TIPOGRAFÍA COMPARTIDA
   ========================================================================== */
.tc-label {
    margin: 0 0 .95em;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.tc-label--light {
    color: var(--color-primary-soft);
}

.tc-label--blue {
    color: var(--color-primary);
    letter-spacing: .2em;
}

.tc-eyebrow {
    margin: 0 0 1.55em;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--color-primary);
}

.tc-title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--color-text);
}

.tc-title strong {
    font-weight: 700;
}

.tc-title--white {
    color: var(--color-white);
}

.tc-title--lg {
    font-size: var(--fs-h2-lg);
    letter-spacing: -.025em;
}


/* ==========================================================================
   04. BOTONES
   Dos anchos fijos en la referencia: ~218 px y ~305 px (a 1619 px).
   ========================================================================== */
.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(160px, 13.47vw, 218px);
    padding: clamp(13px, 1.48vw, 24px) clamp(18px, 1.6vw, 26px);
    border: 0;
    border-radius: 3px;
    font-family: inherit;
    font-size: var(--fs-nav);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    transition: background-color .22s var(--tc-ease), transform .22s var(--tc-ease);
}

.tc-btn--blue {
    background: var(--color-primary);
    color: var(--color-white);
}

.tc-btn--blue:hover {
    background: var(--color-primary-700);
}

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

.tc-btn--wide {
    min-width: clamp(200px, 18.84vw, 305px);
}

/* ==========================================================================
   05. A. HEADER + NAVEGACIÓN
   ========================================================================== */
.tc-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1040;
    background: transparent;
    transition: background-color .3s var(--tc-ease), box-shadow .3s var(--tc-ease);
}

.tc-header.is-scrolled {
    background: var(--color-white);
    box-shadow: 0 2px 18px rgba(0, 0, 0, .10);
}

.tc-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 4vw, 66px);
    height: var(--tc-header-h);
    transition: height .3s var(--tc-ease);
    position: relative;
    z-index: 1;
}

.tc-header.is-scrolled .tc-header__inner {
    height: clamp(58px, 6.2vw, 100px);
}

.tc-logo img {
    width: auto;
    height: clamp(40px, 6.8vw, 110px);
    transition: height .3s var(--tc-ease);
}

.tc-header.is-scrolled .tc-logo img {
    height: clamp(36px, 4.2vw, 68px);
}

/* --- Navegación Desktop --- */
.tc-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.55vw, 25px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-nav__link {
    display: inline-block;
    padding: 6px 0;
    font-size: var(--fs-nav);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    position: relative;
    white-space: nowrap;
    text-decoration: none;
}

.tc-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--tc-ease);
}

.tc-nav__link:hover::after,
.tc-nav__link.is-active::after {
    transform: scaleX(1);
}

.tc-nav__link.is-active {
    color: var(--color-primary);
}

/* ==========================================================================
   05. B. SUBMENÚ DESKTOP
   ========================================================================== */
.tc-nav__item--has-submenu {
    position: relative;
}

.tc-nav__link--with-submenu {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tc-nav__link--with-submenu .tc-nav__link-icon {
    font-size: 0.7rem;
    transition: transform 0.3s var(--tc-ease);
    display: inline-block;
    line-height: 1;
}

.tc-submenu-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px 4px;
    cursor: pointer;
    color: var(--color-primary-dark);
    transition: transform 0.3s var(--tc-ease);
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
}

.tc-submenu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 260px;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s var(--tc-ease), transform 0.3s var(--tc-ease), visibility 0.3s;
    z-index: 1050;
}

.tc-submenu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--color-white);
    border-radius: 3px 0 0 0;
    box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.06);
}

.tc-submenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tc-submenu ul li a {
    display: block;
    padding: 10px 24px;
    font-size: 0.9rem;
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    font-weight: 500;
}

.tc-submenu ul li a:hover,
.tc-submenu ul li a:focus {
    background: rgba(11, 27, 114, 0.06);
    color: var(--color-primary);
}

/* ==========================================================================
   05. C. DESKTOP - Hover con delay
   ========================================================================== */
@media (min-width: 992px) {
    .tc-nav {
        display: block !important;
        position: static;
        background: transparent;
        padding: 0;
        height: auto;
        overflow: visible;
        box-shadow: none;
        width: auto;
    }

    .tc-burger {
        display: none !important;
    }

    .tc-nav-backdrop {
        display: none !important;
    }

    /* --- Submenú en desktop --- */
    .tc-nav__item--has-submenu {
        position: relative;
    }

    .tc-nav__item--has-submenu .tc-submenu {
        /* Añadir un pequeño delay para que no desaparezca inmediatamente */
        transition: opacity 0.25s ease 0.05s,
            transform 0.25s ease 0.05s,
            visibility 0.25s ease 0.05s;
    }

    /* El submenú se abre con hover en el item padre */
    .tc-nav__item--has-submenu:hover .tc-submenu,
    .tc-nav__item--has-submenu:focus-within .tc-submenu,
    .tc-nav__item--has-submenu.is-open .tc-submenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    /* Rotar el icono al hacer hover */
    .tc-nav__item--has-submenu:hover .tc-nav__link-icon,
    .tc-nav__item--has-submenu.is-open .tc-nav__link-icon {
        transform: rotate(180deg);
    }

    /* Mantener el submenú abierto mientras el mouse está sobre él */
    .tc-submenu:hover {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ==========================================================================
   05. D. MENÚ MÓVIL
   ========================================================================== */
@media (max-width: 991px) {
    .tc-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 380px;
        height: 100vh;
        height: 100dvh;
        background: var(--color-white);
        z-index: 1045;
        padding: 80px 24px 30px;
        overflow-y: auto;
        overflow-x: hidden;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -4px 0 30px rgba(0, 0, 0, 0.12);
        display: block !important;
        will-change: right;
    }

    .tc-nav.is-open {
        right: 0 !important;
    }

    .tc-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 0;
    }

    .tc-nav__list>li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .tc-nav__list>li:last-child {
        border-bottom: 0;
    }

    .tc-nav__link {
        display: block;
        padding: 14px 0;
        font-size: 1.05rem;
        font-weight: 600;
        white-space: normal;
    }

    /* Ocultar icono en móvil */
    .tc-nav__link--with-submenu .tc-nav__link-icon {
        display: none !important;
    }

    /* --- Burger --- */
    .tc-burger {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: auto;
        width: 46px;
        height: 40px;
        padding: 8px;
        background: transparent;
        border: 0;
        cursor: pointer;
        position: relative;
        z-index: 1046;
        pointer-events: auto;
    }

    .tc-burger span {
        display: block;
        width: 28px;
        height: 2.5px;
        border-radius: 2px;
        background: var(--color-primary-dark);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
        transform-origin: center;
        pointer-events: none;
    }

    .tc-burger span+span {
        margin-top: 6px;
    }

    .tc-burger.is-open span:nth-child(1) {
        transform: translateY(8.5px) rotate(45deg);
    }

    .tc-burger.is-open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .tc-burger.is-open span:nth-child(3) {
        transform: translateY(-8.5px) rotate(-45deg);
    }

    /* --- Backdrop --- */
    .tc-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1039;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .tc-nav-backdrop:not([hidden]) {
        opacity: 1;
        pointer-events: auto;
    }

    /* --- Submenú en móvil --- */
    .tc-nav__item--has-submenu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: relative;
        width: 100%;
    }

    .tc-nav__item--has-submenu>a {
        flex: 1;
        padding-right: 8px;
        cursor: pointer;
    }

    .tc-submenu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: 0;
        padding: 8px 12px;
        cursor: pointer;
        color: var(--color-primary-dark);
        transition: transform 0.3s var(--tc-ease);
        flex-shrink: 0;
        line-height: 1;
        font-size: 20px;
        min-width: 44px;
        min-height: 44px;
    }

    .tc-submenu-toggle.is-open {
        transform: rotate(180deg);
    }

    .tc-submenu-toggle svg {
        display: block;
        width: 20px;
        height: 20px;
        pointer-events: none;
    }

    /* --- ESTILOS DEL SUBMENÚ EN MÓVIL --- */
    .tc-submenu {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease !important;
        margin-top: 0 !important;
        border: none !important;
        min-width: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .tc-submenu::before {
        display: none !important;
    }

    .tc-submenu ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tc-submenu ul li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }

    .tc-submenu ul li:last-child {
        border-bottom: 0;
    }

    .tc-submenu ul li a {
        padding: 10px 0 10px 20px;
        font-size: 0.95rem;
        border-left: 3px solid transparent;
        font-weight: 400;
        display: block;
        color: var(--color-primary-dark);
        text-decoration: none;
        transition: background 0.2s, border-color 0.2s;
    }

    .tc-submenu ul li a:hover,
    .tc-submenu ul li a:focus {
        background: rgba(11, 27, 114, 0.04);
        border-left-color: var(--color-primary);
    }

    /* ============================================
       SUBMENÚ ABIERTO - Selector corregido
       ============================================ */
    /* Usamos el ID específico para mayor precisión */
    #tc-submenu-item.is-open .tc-submenu {
        max-height: 600px !important;
        padding: 8px 0 16px !important;
    }

    /* También mantenemos el selector por clase como respaldo */
    .tc-nav__item--has-submenu.is-open>.tc-submenu {
        max-height: 600px !important;
        padding: 8px 0 16px !important;
    }

    /* Evitar scroll cuando el menú está abierto */
    body.tc-no-scroll {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}


/* ==========================================================================
   06. B. HERO
   Composición de dos paneles verticales; el panel derecho llega al borde
   superior de la página y ambos comparten la línea inferior.
   ========================================================================== */
.tc-hero {
    background: var(--color-white);
}

.tc-hero__row {
    min-height: 57.2vw;
    align-items: flex-start;
}

.tc-hero__col-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* evita que el botón se estire a lo ancho */
    min-height: 57.2vw;
    padding-top: 2.35vw;
    /* compensa el header superpuesto */
    padding-right: clamp(0px, 2vw, 32px);
}

.tc-hero__eyebrow {
    margin: 0 0 .85em;
    font-size: clamp(14px, 1.17vw, 19px);
    font-weight: 500;
    letter-spacing: .13em;
    color: #4667E3;
}

.tc-hero__title {
    margin: 0 0 .34em;
    font-size: var(--fs-h1);
    line-height: 1.075;
    letter-spacing: -.01em;
    color: var(--color-primary-dark);
    font-weight: 300;
}

.tc-hero__title strong {
    display: block;
    font-weight: 700;
}

.tc-hero__title span {
    display: block;
    font-weight: 300;
    letter-spacing: -.045em;
}

.tc-hero__lead {
    margin: 0 0 2.1em;
    max-width: 30ch;
    font-size: var(--fs-body);
    color: #5A6072;
}

@media (min-width: 992px) {

    /* Proporción medida en la referencia: texto 34,1 % / imágenes 65,9 % */
    .tc-hero__col-text {
        flex: 0 0 34.1%;
        max-width: 34.1%;
    }

    .tc-hero__col-media {
        flex: 0 0 65.9%;
        max-width: 65.9%;
    }
}

.tc-hero__col-media {
    position: relative;
    min-height: 55.5vw;
}

.tc-hero__media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 2.04%;
}

.tc-hero__panel {
    overflow: hidden;
}

.tc-hero__panel--1 {
    flex: 0 0 30.9%;
    height: 81.5%;
}

.tc-hero__panel--2 {
    flex: 0 0 65.7%;
    height: 100%;
}

.tc-hero__panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* ==========================================================================
   07. C. EMPRESA
   ========================================================================== */
.tc-empresa {
    background: var(--color-primary-dark);
    color: var(--color-white);
    padding-block: 3.4vw 5.13vw;
}

.tc-empresa__media {
    position: relative;
    width: 100%;
    aspect-ratio: 702 / 672;
    /* proporción del bloque de imágenes */
}

.tc-empresa__img {
    position: absolute;
    overflow: hidden;
}

.tc-empresa__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tc-empresa__img--back {
    top: 0;
    width: 90%;
    height: 100%;
    z-index: 1;
}

.tc-empresa__img--front {
    left: 0;
    top: 37.2%;
    width: 36.3%;
    height: 62.8%;
    z-index: 2;
}

.tc-empresa__col-text {
    padding-left: 0;
}

@media (min-width: 992px) {

    /* Proporcion medida en la referencia: imagenes 55 % / texto 45 % */
    .tc-empresa__col-media {
        flex: 0 0 54%;
        max-width: 54%;
    }

    .tc-empresa__col-text {
        flex: 0 0 46%;
        max-width: 46%;
    }
}

.tc-empresa__subtitle {
    margin: .55em 0 1.6em;
    font-size: var(--fs-lead);
    font-weight: 400;
    color: var(--color-white);
}

.tc-empresa__text {
    margin: 0 0 2.35em;
    max-width: none;
    line-height: 1.78;
    color: rgba(255, 255, 255, .90);
    text-align: justify;
}


/* ==========================================================================
   08. D. INDUSTRIAS (carrusel horizontal)
   ========================================================================== */
.tc-industrias {
    background: var(--color-light);
    padding-block: 7.6vw 8.9vw;
}

.tc-industrias .tc-title {
    margin-bottom: 6.2vw;
}

.tc-carousel {
    position: relative;
}

.tc-carousel__track {
    display: flex;
    gap: .5%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.tc-carousel__track::-webkit-scrollbar {
    display: none;
}

.tc-carousel__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.tc-carousel__item {
    flex: 0 0 calc((100% - 3%) / 7);
    scroll-snap-align: start;
}

/* Tarjeta de industria: proporción y recorte fijos */
.tc-ind-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 209 / 277;
    overflow: hidden;
    background: var(--color-white);
}

.tc-ind-card__figure {
    position: absolute;
    inset: 0;
}

.tc-ind-card__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s var(--tc-ease);
}

.tc-ind-card:hover .tc-ind-card__figure img {
    transform: scale(1.05);
}

.tc-ind-card__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 19.1%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: rgba(0, 0, 0, .55);
    color: var(--color-white);
    font-size: clamp(11px, .93vw, 15px);
    line-height: 1.2;
    text-align: center;
}

/* Estado activo: barra blanca con texto rojo, la foto se recorta encima */
.tc-ind-card.is-active .tc-ind-card__figure {
    inset: 0 0 19.1% 0;
}

.tc-ind-card.is-active .tc-ind-card__caption {
    background: var(--color-white);
    color: var(--color-accent);
}

/* Flechas */
.tc-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(34px, 2.6vw, 42px);
    height: clamp(34px, 2.6vw, 42px);
    padding: 0;
    background: transparent;
    border: 0;
    color: #9A9A9A;
    font-size: clamp(20px, 1.7vw, 28px);
    cursor: pointer;
    transition: color .2s var(--tc-ease);
}

.tc-carousel__arrow:hover {
    color: var(--color-primary);
}

.tc-carousel__arrow[disabled] {
    opacity: .28;
    cursor: default;
}

.tc-carousel__arrow--prev {
    right: 100%;
}

.tc-carousel__arrow--next {
    left: 100%;
}

/* Por debajo de 1400 px no hay espacio fuera de la franja: se superponen */
@media (max-width: 1519.98px) {
    .tc-carousel__arrow {
        background: rgba(255, 255, 255, .92);
        border-radius: 50%;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
    }

    .tc-carousel__arrow--prev {
        right: auto;
        left: -6px;
    }

    .tc-carousel__arrow--next {
        left: auto;
        right: -6px;
    }
}


/* ==========================================================================
   09. E. SERVICIOS
   Retícula editorial de tres franjas: banda azul / fotografía / contenido.
   ========================================================================== */
.tc-servicios {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.tc-servicios__head {
    padding-block: 3.9vw 3.77vw;
}

.tc-servicios__head .tc-title {
    margin-bottom: .55em;
}

.tc-servicios__intro {
    margin: 0;
    max-width: none;
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
}

.tc-servicios__intro2 {
    margin: 0;
    max-width: none;
    line-height: 1.7;
    color: var(--color-text);
}

.tc-serv {
    display: flex;
    align-items: stretch;
}

.tc-serv__band {
    flex: 0 0 16.06%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
}

.tc-serv__icon {
    width: clamp(30px, 3.83vw, 62px);
    aspect-ratio: 1;
    color: var(--color-white);
}

.tc-serv__media {
    overflow: hidden;
}

.tc-serv__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tc-serv--imgleft .tc-serv__media {
    flex: 0 0 35.4%;
}

.tc-serv--imgright .tc-serv__media {
    flex: 0 0 32.7%;
}

.tc-serv__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding-block: 5.8vw 2.9vw;
}

/* Los bloques con imagen a la izquierda separan poco; los de imagen a la
   derecha alinean su texto con el contenedor principal de la página. */
.tc-serv--imgleft .tc-serv__body {
    padding-inline: clamp(20px, 2.04vw, 33px);
}

.tc-serv--imgright .tc-serv__body {
    padding-left: calc((100vw - min(100vw - 2 * clamp(20px, 4vw, 64px), var(--tc-max))) / 2 + 13px);
    padding-right: clamp(16px, 1.6vw, 26px);
}

.tc-serv__title {
    margin: 0 0 1.15em;
    font-size: var(--fs-h3);
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--color-white);
}

.tc-serv__title strong {
    font-weight: 700;
}

.tc-serv__list {
    font-size: var(--fs-list);
}

.tc-serv__list li {
    position: relative;
    padding-left: 1.35em;
    margin-bottom: .58em;
    line-height: 1.5;
    color: rgba(255, 255, 255, .94);
}

.tc-serv__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .48em;
    width: .5em;
    height: .5em;
    border-radius: 50%;
    background: var(--color-bullet);
}

.tc-serv__cta {
    margin-top: auto;
    padding-top: 1.6em;
    display: flex;
}

.tc-serv__cta--end,
.tc-serv__cta--mid {
    justify-content: flex-end;
}

.tc-serv__cta .tc-btn {
    min-width: clamp(200px, 18.84vw, 305px);
}

/* Alturas relativas observadas en la referencia (solo en escritorio) */
@media (min-width: 992px) {
    .tc-serv--h1 {
        min-height: 40.6vw;
    }

    .tc-serv--h2 {
        min-height: 34.7vw;
    }

    .tc-serv--h3 {
        min-height: 34.8vw;
    }

    .tc-serv--h4 {
        min-height: 39.5vw;
    }
}


/* ==========================================================================
   10. F+G. SOLUCIONES HVAC (pestañas)
   ========================================================================== */
.tc-soluciones {
    background: var(--color-white);
    padding-top: 2.78vw;
}

.tc-soluciones__topcta {
    display: flex;
    justify-content: flex-end;
}

.tc-soluciones__topcta .tc-btn {
    min-width: clamp(200px, 18.84vw, 305px);
}

.tc-soluciones .tc-title {
    margin: 8.3vw 0 4.3vw;
}

.tc-tabs__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(10px, 1.92vw, 31px) clamp(10px, 2.1vw, 34px);
}

.tc-tab {
    display: flex;
    align-items: center;
    gap: clamp(9px, 1vw, 16px);
    min-height: clamp(72px, 6.86vw, 111px);
    padding: 10px clamp(12px, 1.11vw, 18px) 10px clamp(12px, 1.55vw, 25px);
    background: var(--color-tile);
    border: 0;
    color: var(--color-muted);
    font-family: inherit;
    font-size: clamp(13px, 1.05vw, 17px);
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background-color .22s var(--tc-ease), color .22s var(--tc-ease);
}

.tc-tab svg {
    flex: 0 0 auto;
    width: clamp(26px, 2.6vw, 42px);
    aspect-ratio: 1;
}

.tc-tab:hover {
    background: #EAEAEA;
    color: #6A6D75;
}

.tc-tab.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Pie de la sección: panel demostrativo de la pestaña activa (alineado bajo la
   segunda columna, donde la referencia deja espacio libre) + botón "Ver más". */
.tc-soluciones__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 32px);
    padding-top: clamp(14px, 1.2vw, 20px);
}

@media (min-width: 992px) {

    /* El botón "Ver más" se alinea con la última fila de pestañas, como en la
       referencia: el hueco de las columnas 2-4 queda libre para el panel. */
    .tc-soluciones__foot {
        margin-top: 1.1vw;
        padding-top: 0;
    }
}

.tc-tabs__panel {
    flex: 1 1 auto;
    margin-left: 25%;
    font-size: clamp(13px, .99vw, 16px);
    line-height: 1.45;
    color: #6A6D75;
}

.tc-tabs__panel p {
    margin: 0 0 .4em;
}

.tc-tabs__panel strong {
    color: var(--color-text);
    font-weight: 600;
}

.tc-tabs__panel ul {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 7px;
}

.tc-tabs__panel li {
    padding: 2px 9px;
    background: var(--color-tile);
    border-radius: 2px;
    font-size: .84em;
}

.tc-soluciones__foot .tc-btn {
    flex: 0 0 auto;
}


/* ==========================================================================
   11. H. CLIENTES
   ========================================================================== */
.tc-clientes {
    background: var(--color-white);
    padding-block: 8.7vw 6.2vw;
}

.tc-clientes .tc-title {
    margin-bottom: 4.6vw;
}

.tc-carousel--logos .tc-carousel__track {
    gap: 0;
    align-items: center;
    padding-inline: 13%;
}

.tc-carousel--logos .tc-carousel__item {
    flex: 0 0 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px clamp(8px, 1.2vw, 20px);
}

.tc-carousel--logos img {
    width: min(100%, clamp(120px, 12.4vw, 201px));
    height: auto;
    object-fit: contain;
    opacity: .92;
    transition: opacity .25s var(--tc-ease);
}

.tc-carousel--logos li:hover img {
    opacity: 1;
}

.tc-carousel--logos .tc-carousel__arrow {
    color: #D6D6D6;
    font-size: clamp(22px, 2.1vw, 34px);
}

.tc-carousel--logos .tc-carousel__arrow:hover {
    color: var(--color-primary);
}

/* Las flechas viven dentro de la franja, sin fondo (como en la referencia) */
.tc-carousel--logos .tc-carousel__arrow--prev,
.tc-carousel--logos .tc-carousel__arrow--next {
    background: none;
    box-shadow: none;
}

.tc-carousel--logos .tc-carousel__arrow--prev {
    right: auto;
    left: 0;
}

.tc-carousel--logos .tc-carousel__arrow--next {
    left: auto;
    right: 0;
}


/* ==========================================================================
   12. I. CONTACTO
   ========================================================================== */
.tc-contacto {
    position: relative;
    overflow: hidden;
    background: var(--color-primary-dark);
    color: var(--color-white);
    padding-block: 8.03vw 7.4vw;
}

.tc-contacto__icon {
    display: block;
    width: clamp(46px, 4.63vw, 75px);
    margin-bottom: 1.9vw;
}

.tc-contacto__icon svg {
    width: 100%;
    aspect-ratio: 48/40;
    color: var(--color-white);
}

.tc-contacto__title {
    margin: 0 0 .16em;
    font-size: var(--fs-h2-xl);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: .005em;
    text-transform: uppercase;
}

.tc-contacto__subtitle {
    margin: 0 0 2.1em;
    font-size: clamp(18px, 1.67vw, 27px);
    font-weight: 400;
    line-height: 1.25;
}

.tc-contacto__text {
    margin: 0 0 1.9em;
    max-width: 46ch;
    font-size: var(--fs-lead);
    line-height: 1.65;
    color: rgba(255, 255, 255, .92);
}

.tc-contacto__data {
    margin: 0 0 2.3em;
    display: flex;
    flex-direction: column;
    font-size: clamp(15px, 1.24vw, 20px);
    line-height: 1.5;
}

.tc-contacto__data a {
    text-decoration: none;
}

.tc-contacto__data a:hover {
    text-decoration: underline;
}

/* Composición de imágenes: la trasera sangra al borde derecho */
.tc-contacto__media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
}

.tc-contacto__img {
    position: absolute;
    overflow: hidden;
}

.tc-contacto__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tc-contacto__img--back {
    left: 36.4%;
    top: 22.1%;
    width: 63.6%;
    height: 45.8%;
    z-index: 1;
}

.tc-contacto__img--front {
    left: 1.9%;
    top: 25.4%;
    width: 65.2%;
    height: 60.9%;
    z-index: 2;
}


/* ==========================================================================
   13. J. FOOTER
   ========================================================================== */
.tc-footer {
    background: var(--color-black);
    color: var(--color-white);
    padding-block: 7.1vw 2.6vw;
}

.tc-footer__logo {
    width: clamp(80px, 7.66vw, 124px);
    height: auto;
    margin-bottom: 1.1vw;
}

.tc-footer__q {
    margin: 0 0 .35em;
    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 700;
    line-height: 1.3;
}

.tc-footer__help {
    margin: 0 0 .3em;
    font-size: clamp(13px, .93vw, 15px);
    line-height: 1.35;
    color: rgba(255, 255, 255, .75);
}

.tc-footer__data {
    display: flex;
    flex-direction: column;
    font-size: clamp(13px, .93vw, 15px);
    line-height: 1.25;
}

.tc-footer__data strong {
    font-weight: 700;
}

.tc-footer__data a:hover {
    text-decoration: underline;
}

.tc-footer__cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0 clamp(8px, 1vw, 16px);
}

.tc-footer__col {
    background: none;
    border: 0;
}

.tc-footer__colhead {
    padding: 0 0 1.55em;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--color-white);
    font-family: inherit;
    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 700;
    text-align: left;
}

.tc-footer__links {
    font-size: clamp(13px, .93vw, 15px);
    line-height: 1.15;
}

.tc-footer__links li {
    margin-bottom: 0;
}

.tc-footer__links a {
    color: rgba(255, 255, 255, .88);
    transition: color .2s var(--tc-ease);
}

.tc-footer__links a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.tc-footer__rule {
    margin: 1.1vw 0 .7vw;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.tc-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.tc-footer__legal {
    margin: 0;
    font-size: clamp(12px, .87vw, 14px);
    line-height: 1.4;
    color: rgba(255, 255, 255, .55);
}

.tc-footer__legal a:hover {
    color: #fff;
    text-decoration: underline;
}

.tc-footer__social {
    display: flex;
    gap: 18px;
    font-size: 15px;
}

.tc-footer__social a {
    color: rgba(255, 255, 255, .85);
}

.tc-footer__social a:hover {
    color: var(--color-primary-soft);
}

/* En escritorio el acordeón se comporta como cinco columnas abiertas */
@media (min-width: 992px) {
    .tc-footer__cols .accordion-collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }

    .tc-footer__colhead {
        pointer-events: none;
    }

    .tc-footer__colhead::after {
        display: none;
    }
}


/* ==========================================================================
   14. VOLVER ARRIBA · MODAL · FORMULARIO
   ========================================================================== */
.tc-totop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1030;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: 3px;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s var(--tc-ease), transform .25s var(--tc-ease), visibility .25s;
}

.tc-totop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tc-totop:hover {
    background: var(--color-primary-700);
}

.tc-modal .modal-content {
    border: 0;
    border-radius: 4px;
}

.tc-modal .modal-header {
    border-bottom: 1px solid #E8E8EC;
    padding: 20px 24px;
}

.tc-modal .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin: 0;
}

.tc-modal .modal-body {
    padding: 24px;
}

.tc-form .form-label {
    font-size: 13px;
    font-weight: 600;
    color: #4A4F5C;
    margin-bottom: 4px;
}

.tc-form .form-control,
.tc-form .form-select {
    border-radius: 3px;
    border-color: #D8DAE1;
    font-size: 15px;
    padding: 10px 12px;
}

.tc-form .form-control:focus,
.tc-form .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(3, 55, 203, .15);
}

.tc-form__status {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #148A3C;
    min-height: 1em;
}


/* ==========================================================================
   15. MEDIA QUERIES
   ========================================================================== */

/* --- Tablet grande y menor: 1200 px ------------------------------------- */
@media (max-width: 1199.98px) {
    .tc-carousel__item {
        flex: 0 0 calc((100% - 2%) / 5);
    }

    /* Cinco columnas de enlaces quedan demasiado estrechas: pasan a tres */
    .tc-footer__cols {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 26px;
    }

    .tc-serv--imgright .tc-serv__body {
        padding-inline: 8% 4%;
    }

    .tc-serv--imgleft .tc-serv__body {
        padding-inline: 5%;
    }
}

/* --- Tablet / móvil: por debajo de 992 px -------------------------------- */
@media (max-width: 991.98px) {

    /* Header sólido y menú lateral */
    .tc-header {
        background: var(--color-white);
        box-shadow: 0 2px 14px rgba(0, 0, 0, .10);
    }

    .tc-burger {
        display: block;
    }

    .tc-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1039;
        width: min(82vw, 340px);
        padding: calc(var(--tc-header-h) + 16px) 26px 32px;
        background: var(--color-white);
        box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
        transform: translateX(102%);
        transition: transform .32s var(--tc-ease);
        overflow-y: auto;
    }

    .tc-nav.is-open {
        transform: none;
    }

    .tc-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .tc-nav__link {
        display: block;
        padding: 15px 0;
        font-size: 15px;
        border-bottom: 1px solid #ECEDF1;
    }

    .tc-nav__link::after {
        display: none;
    }

    body.tc-no-scroll {
        overflow: hidden;
    }

    /* Hero: primero el texto, después las imágenes */
    .tc-hero__row {
        min-height: 0;
    }

    .tc-hero__col-text {
        min-height: 0;
        padding-top: calc(var(--tc-header-h) + 30px);
        padding-bottom: 34px;
        padding-right: 0;
    }

    .tc-hero__lead {
        max-width: 46ch;
    }

    .tc-hero__col-media {
        min-height: 0;
    }

    .tc-hero__media {
        position: static;
        height: auto;
        gap: 2%;
    }

    .tc-hero__panel--1 {
        height: auto;
        aspect-ratio: 298 / 733;
    }

    .tc-hero__panel--2 {
        height: auto;
        aspect-ratio: 633 / 899;
    }

    /* Empresa: texto arriba, imágenes debajo */
    .tc-empresa {
        padding-block: 52px 58px;
    }

    .tc-empresa__col-media {
        order: 2;
        margin-top: 34px;
    }

    .tc-empresa__col-text {
        order: 1;
        padding-left: 0;
    }

    .tc-empresa__media {
        aspect-ratio: 1 / .92;
        max-width: 560px;
    }

    .tc-empresa__text {
        max-width: 60ch;
    }

    /* Industrias */
    .tc-industrias {
        padding-block: 54px 56px;
    }

    .tc-industrias .tc-title {
        margin-bottom: 34px;
    }

    .tc-carousel__item {
        flex: 0 0 calc((100% - 1.5%) / 4);
    }

    /* Servicios: cada bloque se vuelve tarjeta vertical
       Orden: imagen · título · lista · botón */
    .tc-servicios__head {
        padding-block: 54px 30px;
    }

    .tc-serv {
        flex-direction: column;
        min-height: 0 !important;
    }

    .tc-serv__band {
        order: 0;
        /* la banda encabeza la tarjeta vertical */
        flex: 0 0 auto;
        height: 68px;
    }

    .tc-serv__media {
        order: 1;
        flex: 0 0 auto !important;
        width: 100%;
        aspect-ratio: 16 / 10;
    }

    .tc-serv__body {
        order: 2;
        padding: 34px clamp(20px, 5vw, 40px) 38px !important;
    }

    .tc-serv__cta,
    .tc-serv__cta--end,
    .tc-serv__cta--mid {
        justify-content: flex-start;
    }

    .tc-serv__cta .tc-btn {
        min-width: 0;
        width: 100%;
        max-width: 340px;
    }

    .tc-serv__icon {
        width: 40px;
    }

    /* Soluciones */
    .tc-soluciones {
        padding-top: 40px;
    }

    .tc-soluciones__topcta {
        justify-content: center;
    }

    .tc-soluciones .tc-title {
        margin: 46px 0 30px;
    }

    .tc-tabs__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .tc-soluciones__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding-top: 22px;
    }

    .tc-tabs__panel {
        margin-left: 0;
    }

    .tc-soluciones__foot .tc-btn {
        align-self: center;
    }

    /* Clientes */
    .tc-clientes {
        padding-block: 56px 46px;
    }

    .tc-clientes .tc-title {
        margin-bottom: 34px;
    }

    .tc-carousel--logos .tc-carousel__track {
        padding-inline: 0;
    }

    .tc-carousel--logos .tc-carousel__item {
        flex: 0 0 33.333%;
        padding-inline: 26px;
    }

    .tc-carousel--logos img {
        width: 100%;
    }

    /* Contacto: una sola columna, contenido y después imagen */
    .tc-contacto {
        padding-block: 56px 56px;
    }

    .tc-contacto__icon {
        margin-bottom: 20px;
    }

    .tc-contacto__text,
    .tc-contacto__data {
        max-width: 100%;
    }

    .tc-contacto .tc-btn {
        min-width: 0;
        width: 100%;
        max-width: 320px;
    }

    .tc-contacto__media {
        position: static;
        display: flex;
        gap: 10px;
        margin-top: 38px;
        padding-inline: clamp(20px, 4vw, 64px);
    }

    .tc-contacto__img {
        position: static;
        flex: 1 1 0;
    }

    .tc-contacto__img--front {
        aspect-ratio: 1 / 1;
    }

    .tc-contacto__img--back {
        aspect-ratio: 1 / 1;
    }

    /* Footer en acordeón */
    .tc-footer {
        padding-block: 48px 26px;
    }

    .tc-footer__brand {
        margin-bottom: 30px;
    }

    .tc-footer__cols {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .tc-footer__col {
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .tc-footer__colhead {
        width: 100%;
        padding: 15px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tc-footer__colhead::after {
        content: "";
        width: 10px;
        height: 10px;
        border-right: 2px solid rgba(255, 255, 255, .7);
        border-bottom: 2px solid rgba(255, 255, 255, .7);
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .25s var(--tc-ease);
        background: none;
    }

    .tc-footer__colhead:not(.collapsed)::after {
        transform: rotate(225deg) translate(-2px, -2px);
    }

    .tc-footer__links {
        padding-bottom: 16px;
        line-height: 1.6;
    }

    .tc-footer__links li {
        margin-bottom: 2px;
    }

    .tc-footer__rule {
        margin: 26px 0 16px;
    }
}

/* --- Móvil: por debajo de 768 px ----------------------------------------- */
@media (max-width: 767.98px) {
    .tc-carousel__item {
        flex: 0 0 calc((100% - 1%) / 3);
    }

    .tc-carousel--logos .tc-carousel__item {
        flex: 0 0 50%;
        padding-inline: 22px;
    }

    .tc-hero__title {
        line-height: 1.06;
    }

    .tc-serv__media {
        aspect-ratio: 16 / 11;
    }

    .tc-contacto__media {
        flex-direction: column;
    }

    .tc-contacto__img--back {
        aspect-ratio: 16 / 10;
    }
}

/* --- Móvil pequeño: por debajo de 576 px --------------------------------- */
@media (max-width: 575.98px) {
    :root {
        --tc-header-h: 64px;
    }

    .tc-carousel__item {
        flex: 0 0 calc((100% - .5%) / 2);
    }

    .tc-carousel--logos .tc-carousel__item {
        flex: 0 0 50%;
    }

    .tc-tabs__grid {
        grid-template-columns: 1fr;
    }

    .tc-hero__col-text {
        padding-top: calc(var(--tc-header-h) + 26px);
    }

    .tc-hero__eyebrow {
        letter-spacing: .1em;
    }

    .tc-empresa__media {
        aspect-ratio: 1 / 1;
    }

    .tc-serv__cta .tc-btn,
    .tc-contacto .tc-btn {
        max-width: 100%;
    }

    .tc-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .tc-totop {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
    }
}

/* --- Móvil muy estrecho: 360-400 px -------------------------------------- */
@media (max-width: 400px) {
    .tc-carousel__item {
        flex: 0 0 calc((100% - .5%) / 2);
    }

    .tc-hero__title {
        font-size: 36px;
    }

    .tc-logo img {
        height: 38px;
    }
}


/* ==========================================================================
   16. PÁGINAS INTERIORES
   Componentes añadidos para las fichas de solución
   (ver soluciones-aire-acondicionado.html). Reutilizan las mismas variables,
   contenedores, botones, listas y tipografía de la home.
   --------------------------------------------------------------------------
   16.1 Cabecera de sección (banner)
   16.2 Bloques de producto
   16.3 Barra de sección (Marcas / Productos)
   16.4 Retícula de marcas
   16.5 Retícula de productos
   16.6 Media queries de las páginas interiores
   ========================================================================== */

/* En las páginas interiores el header es siempre sólido y el contenido
   arranca por debajo de él. */
.tc-header--solid {
    background: var(--color-white);
    box-shadow: 0 2px 18px rgba(0, 0, 0, .10);
}

.tc-main--offset {
    padding-top: var(--tc-header-h);
}


/* --- 16.1 Cabecera de sección -------------------------------------------- */
.tc-pagehead {
    position: relative;
    overflow: hidden;
    background: var(--color-primary-dark);
    color: var(--color-white);
    min-height: 19.5vw;
    padding-block: 4.2vw 5.1vw;
}

.tc-pagehead__eyebrow {
    margin: 0 0 1.25em;
    font-size: clamp(13px, 1.05vw, 17px);
    font-weight: 500;
    letter-spacing: .21em;
    color: var(--color-primary-soft);
}

.icon_aire {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_aireacondicionado.png);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_refrigeracion {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_refrigeracion.png);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}


.icon_ventilacion {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_ventilacion.png);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_areaslimpias {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_areaslimpias.png);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_sitemascontrol {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_siscontrol.png);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_sitemasdistaire {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_sisdistaire.png);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
}

.icon_humidificacion {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_humidificacion.png);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_colectorespolvo {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_colectorpolvo.png);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}


.icon_filtrosaire {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_filtroaire.png);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_servicios {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_mantenimiento.svg);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_general {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_thermoclima.svg);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_beneficios {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_beneficios.svg);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_automatizacion {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_auto.svg);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_refind {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_industrial.svg);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_deshumidificador {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/deshumidificador.svg);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    background-repeat: no-repeat;
    margin-top: 15px;
    margin-bottom: 15px;
}

.icon_areas {
    display: block;
    width: 68px;
    height: 68px;
    background-image: url(../images/icon_areas.svg);
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
    background-repeat: no-repeat;
    margin-top: 15px;
    margin-bottom: 15px;
}

.tc-pagehead__icon {
    display: block;
    width: 68px;
    height: 68px;
    /* width: clamp(38px, 3.7vw, 60px);*/
    aspect-ratio: 48 / 28;
    margin-bottom: clamp(8px, 1.05vw, 17px);
    color: var(--color-white);
}

.tc-pagehead__title {
    margin: 0;
    max-width: 52%;
    font-size: clamp(28px, 2.84vw, 46px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -.01em;
}

/* La fotografía ocupa la mitad derecha y sangra hasta el borde */
.tc-pagehead__media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 56.3%;
    right: 1.24%;
}

.tc-pagehead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* --- 16.2 Bloques de producto -------------------------------------------- */
.tc-prods {
    background: var(--color-white);
    padding-block: 6.2vw 4.7vw;
}

.tc-prod+.tc-prod {
    margin-top: 7.3vw;
}

.tc-prod__title {
    margin: 0 0 .42em;
    max-width: 86%;
    /* ancho de línea observado en la referencia */
    font-size: clamp(20px, 1.85vw, 30px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.01em;
    color: var(--color-text);
}

.tc-prod__subtitle {
    margin: 0;
    font-size: clamp(16px, 1.36vw, 22px);
    font-weight: 400;
    line-height: 1.45;
    color: #4A4F5C;
    text-align: justify;
}

.tc-prod__row {
    display: flex;
    align-items: stretch;
    min-height: 40.7vw;
    margin-top: 4.45vw;
}


.tc-prods_sinmargen {
    background: var(--color-white);
    padding-block: 0vw 4.7vw;
}

.tc-prod__band {
    flex: 0 0 15.8%;
    background: var(--color-primary);
}

.tc-prod__media {
    flex: 0 0 38.7%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 1.05vw, 17px) clamp(16px, 2.2vw, 36px);
}

.tc-prod__media img {
    width: auto;
    height: auto;
    max-width: 100%;
    /* El tope en vw impide que la altura natural de la foto estire la fila */
    max-height: 38.2vw;
    object-fit: contain;
}

.tc-prod__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 6.24vw 3.7vw 1.85vw 0;
}

.tc-prod__label {
    margin: 0 0 1.05em;
    font-size: clamp(16px, 1.36vw, 22px);
    font-weight: 700;
    color: var(--color-text);
}

.tc-prod__list {
    font-size: clamp(16px, 1.30vw, 21px);
}

.tc-prod__list li {
    position: relative;
    padding-left: 1.35em;
    margin-bottom: .35em;
    line-height: 1.5;
    color: var(--color-text);
}

.tc-prod__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .48em;
    width: .48em;
    height: .48em;
    border-radius: 50%;
    background: var(--color-primary);
}

.tc-prod__cta {
    margin-top: auto;
    padding-top: 1.6em;
    display: flex;
    justify-content: flex-end;
}

/* Variante ancha: el bloque se ocupa por completo con una ilustración */
.tc-prod--wide .tc-prod__media {
    flex: 1 1 auto;
    padding: clamp(20px, 2.7vw, 44px) clamp(16px, 3vw, 48px);
}

.tc-prod--wide .tc-prod__media img {
    max-width: 75%;
    max-height: none;
}


/* --- 16.3 Barra de sección ----------------------------------------------- */
.tc-secbar {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.tc-secbar__title {
    margin: 0;
    padding-block: clamp(12px, 1.45vw, 24px);
    font-size: clamp(19px, 1.79vw, 29px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
}


/* --- 16.4 Retícula de marcas --------------------------------------------- */
.tc-brands {
    background: var(--color-white);
    padding-block: 2.6vw 4.88vw;
}

.tc-brands__grid {
    width: 87.8%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: clamp(18px, 3.15vw, 51px);
}

.tc-brands__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(52px, 7.41vw, 120px);
    padding: 0 8px;
}

/* Sin forzar tamaños: cada logotipo conserva su proporción original */
.tc-brands__item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    transition: opacity .25s var(--tc-ease);
}

.tc-brands__item a:hover img {
    opacity: .7;
}


/* --- 16.5 Retícula de productos ------------------------------------------ */
.tc-products {
    background: var(--color-white);
    padding-block: 1.85vw 3.95vw;
}

.tc-products__grid {
    width: 87.9%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: clamp(26px, 3.15vw, 51px);
}

.tc-product {
    display: flex;
    flex-direction: column;
}

.tc-product__fig {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 381 / 371;
    padding: 6%;
    border: 1px solid #E6E6E6;
    margin-right: -1px;
    /* los bordes contiguos se funden en uno */
}

.tc-product__fig img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tc-product__name {
    margin: clamp(12px, 1.67vw, 27px) 0 0;
    text-align: center;
    font-size: clamp(14px, 1.11vw, 18px);
    font-weight: 700;
    color: var(--color-primary-dark);
}


/* --- 16.6 Media queries de las páginas interiores ------------------------ */
@media (max-width: 1199.98px) {
    .tc-prod__body {
        padding: 5vw 4vw 2.4vw 2.5vw;
    }

    .tc-prod__media {
        padding-inline: clamp(12px, 1.6vw, 24px);
    }
}

@media (max-width: 1050px) {
    .esquema {
        height: 1100px;
    }

}

@media (max-width: 991.98px) {

    /* Banner: primero el texto, después la imagen */
    .tc-pagehead {
        min-height: 0;
        padding-block: 40px 0;
    }

    .tc-pagehead__title {
        max-width: 100%;
    }

    .tc-pagehead__media {
        position: static;
        margin-top: 34px;
        aspect-ratio: 16 / 7;
    }

    /* Bloques de producto en tarjeta vertical: banda, imagen, texto, botón */
    .tc-prods {
        padding-block: 46px 40px;
    }

    .tc-prod__title {
        max-width: 100%;
    }

    .tc-prod+.tc-prod {
        margin-top: 52px;
    }

    .tc-prod__row {
        flex-direction: column;
        min-height: 0;
        margin-top: 26px;
    }

    .tc-prod__band {
        order: 0;
        flex: 0 0 auto;
        height: 14px;
    }

    .tc-prod__media {
        order: 1;
        flex: 0 0 auto;
        padding: 26px clamp(20px, 5vw, 40px);
        min-height: 240px;
    }

    .tc-prod__media img {
        max-height: 320px;
    }

    .tc-prod--wide .tc-prod__media img {
        max-width: 100%;
    }

    .tc-prod__body {
        order: 2;
        padding: 26px 0 0;
    }

    .tc-prod__cta {
        justify-content: flex-start;
        padding-top: 1.4em;
    }

    .tc-prod__cta .tc-btn {
        min-width: 0;
        width: 100%;
        max-width: 340px;
    }

    .tc-brands {
        padding-block: 30px 40px;
    }

    .tc-brands__grid {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
    }

    .tc-products {
        padding-block: 26px 40px;
    }

    .tc-products__grid {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 985px) {
    .tc-serv__band {

        flex: 10;
    }
}


@media (max-width: 850px) {
    .esquema {
        height: 800px;
    }

    .esquema2 {
        min-height: 480px;

    }

}

@media (max-width: 768px) {
    
    
    .esr {
    margin-bottom: 40px;
}

    .esquema2 {
        min-height: 1570px;
        background-image: url(../images/esquema2_mobile.webp);
    }

    .esquema {
        background-image: url(../images/esquema_mobile.webp);
        height: 2108px;
    }

    .ocultar-en-movil {
        display: none !important;
    }
}

@media (max-width: 575.98px) {


    .esquema2 {
        min-height: 1000px;

    }


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

    .tc-products__grid {
        grid-template-columns: 1fr;
        row-gap: 26px;
    }

    .tc-product__fig {
        margin-right: 0;
    }

    .tc-prod__cta .tc-btn {
        max-width: 100%;
    }

    .tc-pagehead__media {
        aspect-ratio: 16 / 9;
    }

    .esquema {

        height: 1500px;
    }
}