/* ==========================================================
   HIMEL — TOKENS DE DISEÑO
   Paleta: rojo Perú + grafito industrial + acento seguridad
   Tipografía: Barlow Condensed (display) + Inter (cuerpo) + IBM Plex Mono (datos técnicos)
   ========================================================== */
:root{
  --rojo:        #C8102E;
  --rojo-oscuro: #8C0C20;
  --rojo-suave:  #FDEAEC;
  --grafito:     #1C1F24;
  --grafito-80:  #33383F;
  --acero:       #4B5563;
  --acero-claro: #8891A0;
  --gris-fondo:  #F5F6F8;
  --blanco:      #FFFFFF;
  --amarillo:    #FFC72C;
  --verde-ok:    #0F7A3D;

  --fuente-display: 'Barlow Condensed', sans-serif;
  --fuente-cuerpo:  'Inter', sans-serif;
  --fuente-mono:    'IBM Plex Mono', monospace;

  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;
  --sombra-sm: 0 2px 10px rgba(28,31,36,.06);
  --sombra-md: 0 10px 30px rgba(28,31,36,.10);
  --sombra-rojo: 0 14px 30px rgba(200,16,46,.25);
  --transicion: .25s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--fuente-cuerpo);
  color:var(--grafito);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--fuente-display); font-weight:700; margin:0 0 .5rem; line-height:1.05; letter-spacing:.2px; }
p{ margin:0 0 1rem; color:var(--acero); line-height:1.65; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--amarillo); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.contenedor{ max-width:1240px; margin:0 auto; padding:0 24px; }
.eyebrow{
  display:inline-block; font-family:var(--fuente-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rojo); font-weight:600; margin-bottom:.6rem;
}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:999px; font-weight:600; font-size:.95rem;
  border:2px solid transparent; transition:transform var(--transicion), box-shadow var(--transicion), background var(--transicion), color var(--transicion);
  white-space:nowrap;
}
.boton--primario{ background:var(--rojo); color:var(--blanco); box-shadow:var(--sombra-rojo); }
.boton--primario:hover{ background:var(--rojo-oscuro); transform:translateY(-2px); }
.boton--fantasma{ background:transparent; border-color:var(--grafito); color:var(--grafito); }
.boton--fantasma:hover{ background:var(--grafito); color:var(--blanco); transform:translateY(-2px); }
.boton--blanco{ background:var(--blanco); color:var(--rojo); }
.boton--blanco:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.boton--fantasma-blanco{ background:transparent; border-color:rgba(255,255,255,.6); color:var(--blanco); }
.boton--fantasma-blanco:hover{ background:rgba(255,255,255,.15); transform:translateY(-2px); }
.boton--whatsapp{ background:#1EAE55; color:var(--blanco); }
.boton--whatsapp:hover{ background:#16893F; transform:translateY(-2px); }
.boton--bloque{ width:100%; }
.enlace-limpio{ background:none; border:none; color:var(--rojo); font-weight:600; font-size:.85rem; }
.enlace-ver-todo{ color:var(--rojo); font-weight:600; white-space:nowrap; }
.enlace-ver-todo::after{ content:''; }

/* ---------- Barra superior ---------- */
.barra-superior{ background:var(--grafito); color:#c9cdd4; font-size:.8rem; }
.barra-superior__inner{ display:flex; justify-content:space-between; align-items:center; padding:.5rem 24px; gap:1rem; flex-wrap:wrap; }
.barra-superior__contacto{ display:flex; gap:1.4rem; }
.barra-superior__contacto a:hover{ color:var(--blanco); }
.barra-superior__redes{ display:flex; align-items:center; gap:1rem; }
.barra-superior__redes a{ font-size:.72rem; letter-spacing:.06em; opacity:.85; }
.barra-superior__redes a:hover{ opacity:1; color:var(--amarillo); }
.barra-superior__badge{ background:var(--rojo); color:var(--blanco); padding:.15rem .6rem; border-radius:999px; font-size:.7rem; font-weight:600; }

/* ---------- Cabecera ---------- */
.cabecera{ position:sticky; top:0; z-index:80; background:var(--blanco); box-shadow:var(--sombra-sm); }
.cabecera__inner{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 24px; gap:1.5rem; }
.cabecera__logo{ display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.cabecera__logo-marca{ font-family:var(--fuente-display); font-size:1.7rem; font-weight:800; color:var(--grafito); letter-spacing:.02em; }
.cabecera__logo-linea{ width:6px; height:26px; background:var(--rojo); border-radius:2px; }
.cabecera__logo-sub{ font-family:var(--fuente-mono); font-size:.68rem; letter-spacing:.18em; color:var(--rojo); font-weight:600; }

.nav-principal__lista{ display:flex; gap:1.9rem; align-items:center; }
.nav-principal__item > a{ font-weight:600; font-size:.95rem; padding:.5rem 0; position:relative; display:inline-flex; align-items:center; gap:.3rem; color:var(--grafito-80); }
.nav-principal__item > a.activo,
.nav-principal__item > a:hover{ color:var(--rojo); }
.nav-principal__item > a::after{ content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--rojo); transition:width var(--transicion); }
.nav-principal__item > a:hover::after,
.nav-principal__item > a.activo::after{ width:100%; }
.flecha{ font-size:.7rem; transition:transform var(--transicion); }

.nav-principal__item--mega{ position:relative; }
.mega-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,10px);
  width:640px; max-width:90vw; background:var(--blanco); border-radius:var(--radio-md);
  box-shadow:var(--sombra-md); padding:1.4rem; opacity:0; visibility:hidden;
  transition:opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
  border-top:3px solid var(--rojo);
}
.nav-principal__item--mega:hover .mega-menu,
.nav-principal__item--mega:focus-within .mega-menu{ opacity:1; visibility:visible; transform:translate(-50%,4px); }
.nav-principal__item--mega:hover .flecha{ transform:rotate(180deg); }
.mega-menu__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem; }
.mega-menu__familia{ display:flex; flex-direction:column; padding:.7rem .9rem; border-radius:var(--radio-sm); transition:background var(--transicion); }
.mega-menu__familia:hover{ background:var(--rojo-suave); }
.mega-menu__familia-nombre{ font-weight:600; color:var(--grafito); }
.mega-menu__familia-total{ font-size:.78rem; color:var(--acero-claro); }
.mega-menu__ver-todo{ display:block; text-align:right; margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--gris-fondo); font-weight:600; color:var(--rojo); }

.cabecera__acciones{ display:flex; align-items:center; gap:1rem; }
.hamburguesa{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:.4rem; }
.hamburguesa span{ width:24px; height:2px; background:var(--grafito); border-radius:2px; transition:transform var(--transicion), opacity var(--transicion); }

.nav-movil{ position:fixed; top:0; right:0; width:min(340px,86vw); height:100vh; background:var(--blanco); z-index:120;
  transform:translateX(100%); transition:transform var(--transicion); overflow-y:auto; box-shadow:-10px 0 30px rgba(0,0,0,.15); }
.nav-movil.abierto{ transform:translateX(0); }
.nav-movil ul{ padding:5.5rem 1.5rem 2rem; display:flex; flex-direction:column; gap:.3rem; }
.nav-movil a, .nav-movil__toggle{ display:flex; justify-content:space-between; width:100%; text-align:left; background:none; border:none; padding:.85rem 0; font-size:1.05rem; font-weight:600; border-bottom:1px solid var(--gris-fondo); color:var(--grafito); }
.nav-movil__submenu{ max-height:0; overflow:hidden; transition:max-height var(--transicion); padding-left:.8rem; }
.nav-movil__submenu.abierto{ max-height:600px; }
.nav-movil__submenu a{ font-size:.92rem; font-weight:500; border-bottom:none; padding:.55rem 0; color:var(--acero); }
.nav-movil__fondo{ position:fixed; inset:0; background:rgba(28,31,36,.5); z-index:110; opacity:0; visibility:hidden; transition:opacity var(--transicion), visibility var(--transicion); }
.nav-movil__fondo.visible{ opacity:1; visibility:visible; }

/* ---------- HERO ---------- */
/* .hero{ position:relative; background:var(--grafito); color:var(--blanco); overflow:hidden; padding:5.5rem 0 6rem; } */
/* =====================================================
   HERO
===================================================== */

.hero {
    position: relative;
    color: var(--blanco);
    overflow: hidden;
    padding: 5.5rem 0 6rem;

    /*
     Ya no necesitamos que el grafito sea
     el fondo principal porque tendremos imágenes.
    */
    background: var(--grafito);
}


/* =====================================================
   CARRUSEL DE FONDO
===================================================== */

.hero__slider-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
}


.hero__slide-fondo {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;
    transform: scale(1.05);

    transition:
        opacity 1s ease,
        transform 6s ease;
}


.hero__slide-fondo.is-active {
    opacity: 1;
    transform: scale(1);
}


/* =====================================================
   OSCURECER IMAGEN PARA QUE EL TEXTO SE LEA
===================================================== */

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(18, 20, 24, .96) 0%,
            rgba(18, 20, 24, 0.1) 35%,
            rgba(18, 20, 24, 0) 65%,
            rgba(18, 20, 24, 0) 100%
        );
}


/* =====================================================
   FRANJAS
===================================================== */

.hero__franjas {
    position: absolute;
    inset: 0;

    z-index: 2;

    opacity: .5;

    background:
        linear-gradient(
            115deg,
            transparent 0 62%,
            var(--rojo) 62% 63%,
            transparent 63% 100%
        ),
        linear-gradient(
            115deg,
            transparent 0 68%,
            rgba(200,16,46,.35) 68% 69.4%,
            transparent 69.4% 100%
        );

    pointer-events: none;
}


/* =====================================================
   CONTENIDO
===================================================== */

.hero__inner {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 3rem;
    align-items: center;
}


.hero__texto h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    color: var(--blanco);
}


.hero__texto h1 span {
    color: var(--rojo);
}


.hero__parrafo {
    color: #c9cdd4;
    font-size: 1.08rem;
    max-width: 52ch;
}


.hero__acciones {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.6rem 0 2.4rem;
}


.hero__metricas {
    display: flex;
    gap: 2.4rem;
    flex-wrap: wrap;
}


.hero__metricas strong {
    display: block;
    font-family: var(--fuente-display);
    font-size: 2rem;
    color: var(--blanco);
}


.hero__metricas span {
    font-size: .8rem;
    color: #9aa1ab;
    letter-spacing: .03em;
}


.hero__panel {
    display: flex;
    justify-content: center;
}
.hero__franjas{
  position:absolute; inset:0; opacity:.5;
  background:
    linear-gradient(115deg, transparent 0 62%, var(--rojo) 62% 63%, transparent 63% 100%),
    linear-gradient(115deg, transparent 0 68%, rgba(200,16,46,.35) 68% 69.4%, transparent 69.4% 100%);
}
.hero__inner{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }
.hero__texto h1{ font-size:clamp(2.4rem,5vw,3.6rem); color:var(--blanco); }
.hero__texto h1 span{ color:var(--rojo); }
.hero__parrafo{ color:#c9cdd4; font-size:1.08rem; max-width:52ch; }
.hero__acciones{ display:flex; gap:1rem; flex-wrap:wrap; margin:1.6rem 0 2.4rem; }
.hero__metricas{ display:flex; gap:2.4rem; flex-wrap:wrap; }
.hero__metricas strong{ display:block; font-family:var(--fuente-display); font-size:2rem; color:var(--blanco); }
.hero__metricas span{ font-size:.8rem; color:#9aa1ab; letter-spacing:.03em; }
.hero__panel{ display:flex; justify-content:center; }

/* Placa técnica (elemento firma: nameplate industrial con QR) */
.placa-tecnica{
  position:relative; background:linear-gradient(155deg,#232830,#181B20);
  border:1px solid #3a4048; border-radius:var(--radio-md); padding:1.6rem 1.7rem 1.8rem;
  width:290px; box-shadow:0 20px 45px rgba(0,0,0,.45);
}
.placa-tecnica--hero{ width:300px; }
.placa-tecnica__remaches{ position:absolute; inset:10px; pointer-events:none; }
.placa-tecnica__remaches span{ position:absolute; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#7b828d,#3a3f47); }
.placa-tecnica__remaches span:nth-child(1){ top:0; left:0; }
.placa-tecnica__remaches span:nth-child(2){ top:0; right:0; }
.placa-tecnica__remaches span:nth-child(3){ bottom:0; left:0; }
.placa-tecnica__remaches span:nth-child(4){ bottom:0; right:0; }
.placa-tecnica__cabecera{ display:flex; flex-direction:column; gap:.15rem; padding-bottom:.9rem; margin-bottom:1rem; border-bottom:1px dashed #454b54; }
.placa-tecnica__marca{ font-family:var(--fuente-mono); color:var(--rojo); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.placa-tecnica__modelo{ font-family:var(--fuente-display); color:var(--blanco); font-size:1.35rem; font-weight:700; }
.placa-tecnica__specs{ display:flex; flex-direction:column; gap:.55rem; margin-bottom:1rem; }
.placa-tecnica__specs li{ display:flex; justify-content:space-between; font-size:.82rem; }
.placa-tecnica__specs li span{ color:#8b929d; }
.placa-tecnica__specs li strong{ color:#e7e9ec; font-family:var(--fuente-mono); font-weight:600; }
.placa-tecnica__qr-nota{ font-size:.78rem; color:var(--amarillo); font-family:var(--fuente-mono); }
.placa-tecnica__qr{ background:var(--blanco); border-radius:var(--radio-sm); padding:.7rem; width:150px; height:150px; margin:0 auto .9rem; display:flex; align-items:center; justify-content:center; }
.placa-tecnica__qr img,.placa-tecnica__qr canvas{ width:100%; height:100%; }
.placa-tecnica__qr-texto{ text-align:center; color:#c9cdd4; font-size:.85rem; margin-bottom:.6rem; }
.placa-tecnica__enlace{ display:block; text-align:center; color:var(--amarillo); font-size:.82rem; font-weight:600; }

/* ---------- Secciones genéricas ---------- */
.seccion{ padding:5rem 0; }
.seccion--catalogo, .seccion--vendedores, .seccion--contacto{ padding-top:3rem; }
.seccion__cabecera{ max-width:640px; margin-bottom:2.6rem; }
.seccion__cabecera--fila{ display:flex; justify-content:space-between; align-items:flex-end; max-width:none; gap:1rem; flex-wrap:wrap; }
.seccion__cabecera h2{ font-size:clamp(1.8rem,3vw,2.5rem); }

.franja-titulo{ background:var(--gris-fondo); padding:3.4rem 0 2.6rem; border-bottom:1px solid #e7e9ec; }
.franja-titulo h1{ font-size:clamp(2rem,4vw,2.8rem); }
.franja-titulo p{ max-width:60ch; }

/* Reveal on scroll */
[data-animar]{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
[data-animar].visible{ opacity:1; transform:none; }

/* ---------- Familias (home) ---------- */
.grid-familias{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.tarjeta-familia{
  position:relative; background:var(--blanco); border:1px solid #e9ebee; border-radius:var(--radio-md);
  padding:1.6rem 1.4rem; transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  display:flex; flex-direction:column; gap:.4rem; overflow:hidden;
  opacity:0; transform:translateY(18px); animation:aparecer .6s ease forwards; animation-delay:var(--retraso,0ms);
}
@keyframes aparecer{ to{ opacity:1; transform:none; } }
.tarjeta-familia:hover{ transform:translateY(-6px); box-shadow:var(--sombra-md); border-color:var(--rojo); }
.tarjeta-familia__numero{ font-family:var(--fuente-mono); color:var(--rojo); font-size:.75rem; font-weight:600; }
.tarjeta-familia h3{ font-size:1.25rem; margin-bottom:0; }
.tarjeta-familia__total{ color:var(--acero-claro); font-size:.82rem; }
.tarjeta-familia__flecha{ position:absolute; right:1.2rem; bottom:1.2rem; font-size:1.2rem; color:var(--rojo); opacity:0; transform:translateX(-6px); transition:opacity var(--transicion), transform var(--transicion); }
.tarjeta-familia:hover .tarjeta-familia__flecha{ opacity:1; transform:none; }

/* ---------- Productos (grid + tarjeta) ---------- */
.grid-productos{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.tarjeta-producto{ background:var(--blanco); border:1px solid #e9ebee; border-radius:var(--radio-md); overflow:hidden; transition:transform var(--transicion), box-shadow var(--transicion); }
.tarjeta-producto:hover{ transform:translateY(-6px); box-shadow:var(--sombra-md); }
.tarjeta-producto__imagen{ position:relative; background:var(--gris-fondo); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.tarjeta-producto__imagen img{ width:100%; height:100%; object-fit:contain; transition:transform var(--transicion); }
.tarjeta-producto:hover .tarjeta-producto__imagen img{ transform:scale(1.06); }
.tarjeta-producto__badge{ position:absolute; top:.7rem; left:.7rem; color:var(--blanco); font-size:.68rem; font-weight:700; padding:.28rem .6rem; border-radius:999px; letter-spacing:.03em; z-index:2; }
.tarjeta-producto__cuerpo{ padding:1.2rem 1.3rem 1.4rem; }
.tarjeta-producto__familia{ font-family:var(--fuente-mono); font-size:.7rem; color:var(--rojo); letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.tarjeta-producto__cuerpo h3{ font-size:1.15rem; margin:.35rem 0 .4rem; line-height:1.2; }
.tarjeta-producto__cuerpo p{ font-size:.86rem; margin-bottom:.8rem; }
.tarjeta-producto__ver{ font-weight:600; font-size:.85rem; color:var(--grafito); }
.tarjeta-producto:hover .tarjeta-producto__ver{ color:var(--rojo); }

/* ---------- Por qué nosotros ---------- */
.seccion--porque{ background:var(--gris-fondo); }
.porque__grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.porque__lista{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.porque__item{ display:flex; gap:.9rem; background:var(--blanco); padding:1.2rem; border-radius:var(--radio-md); box-shadow:var(--sombra-sm); }
.porque__icono{ flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--rojo-suave); color:var(--rojo); display:flex; align-items:center; justify-content:center; font-weight:700; }
.porque__item h4{ font-size:1.02rem; margin-bottom:.2rem; }
.porque__item p{ font-size:.85rem; margin-bottom:0; }

/* ---------- CTA final ---------- */
.cta-final{ background:linear-gradient(120deg,var(--rojo),var(--rojo-oscuro)); color:var(--blanco); padding:3.6rem 0; }
.cta-final__inner{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.cta-final h2{ color:var(--blanco); font-size:1.9rem; margin-bottom:.3rem; }
.cta-final p{ color:rgba(255,255,255,.85); margin-bottom:0; }
.cta-final__acciones{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- Catálogo (filtros) ---------- */
.catalogo__layout{ display:grid; grid-template-columns:260px 1fr; gap:2.4rem; align-items:start; }
.catalogo__filtros{ position:sticky; top:96px; background:var(--blanco); border:1px solid #e9ebee; border-radius:var(--radio-md); padding:1.4rem; }
.catalogo__filtros-cabecera{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.catalogo__filtros-cabecera h2{ font-size:1.2rem; margin:0; }
.campo-busqueda input{ width:100%; padding:.7rem .9rem; border-radius:999px; border:1px solid #dfe2e6; font-family:inherit; font-size:.9rem; }
.campo-busqueda input:focus{ border-color:var(--rojo); }
.filtro-grupo{ margin-top:1.3rem; }
.filtro-grupo h3{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--acero-claro); margin-bottom:.6rem; }
.filtro-lista li label{ display:flex; align-items:center; gap:.6rem; padding:.45rem 0; font-size:.92rem; cursor:pointer; color:var(--grafito-80); }
.filtro-lista li label em{ margin-left:auto; font-style:normal; color:var(--acero-claro); font-size:.78rem; }
.filtro-lista input[type=radio]{ accent-color:var(--rojo); width:16px; height:16px; }
.filtro-nota{ margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--gris-fondo); }
.filtro-nota p{ font-size:.85rem; margin-bottom:.7rem; }

.catalogo__resultados-barra{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.3rem; }
#contador-resultados{ color:var(--acero-claro); font-size:.88rem; }
.boton--movil-filtros{ display:none; }
.catalogo__vacio{ text-align:center; padding:3.5rem 1rem; background:var(--gris-fondo); border-radius:var(--radio-md); }

/* ---------- Ficha de producto ---------- */
.ruta-migas{ background:var(--gris-fondo); padding:.9rem 0; font-size:.82rem; color:var(--acero-claro); }
.ruta-migas a:hover{ color:var(--rojo); }
.ficha-producto{ padding:3rem 0; }
.ficha-producto__layout{ display:grid; grid-template-columns:.9fr 1.1fr .8fr; gap:2.4rem; align-items:start; }
.ficha-producto__galeria{ position:relative; background:var(--gris-fondo); border-radius:var(--radio-lg); padding:2.2rem; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; }
.ficha-producto__familia{ font-family:var(--fuente-mono); font-size:.75rem; color:var(--rojo); letter-spacing:.08em; text-transform:uppercase; font-weight:600; }
.ficha-producto__info h1{ font-size:clamp(1.6rem,3vw,2.1rem); margin:.4rem 0 .8rem; }
.ficha-producto__descripcion{ font-size:1rem; }
.ficha-producto__chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.3rem; }
.ficha-producto__chips li{ background:var(--rojo-suave); color:var(--rojo-oscuro); font-size:.78rem; font-weight:600; padding:.35rem .8rem; border-radius:999px; }
.ficha-producto__specs{ display:flex; flex-direction:column; gap:.7rem; margin:0 0 1.6rem; }
.ficha-producto__specs > div{ display:flex; justify-content:space-between; gap:1rem; border-bottom:1px dashed #e2e5e9; padding-bottom:.6rem; }
.ficha-producto__specs dt{ color:var(--acero-claro); font-size:.86rem; }
.ficha-producto__specs dd{ margin:0; font-weight:600; text-align:right; font-family:var(--fuente-mono); font-size:.88rem; }
.ficha-producto__acciones{ display:flex; gap:1rem; flex-wrap:wrap; }
.ficha-producto__placa{ display:flex; justify-content:center; }

/* ---------- Tabla técnica ---------- */
.tabla-tecnica-scroll{ overflow-x:auto; border:1px solid #e9ebee; border-radius:var(--radio-md); }
.tabla-tecnica{ width:100%; border-collapse:collapse; min-width:640px; font-size:.9rem; }
.tabla-tecnica thead th{ background:var(--grafito); color:var(--blanco); text-align:left; padding:.85rem 1.1rem; font-family:var(--fuente-mono); font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600; }
.tabla-tecnica tbody td{ padding:.75rem 1.1rem; border-bottom:1px solid #eef0f2; color:var(--grafito-80); }
.tabla-tecnica tbody tr:hover{ background:var(--rojo-suave); }
.tabla-tecnica__codigo{ font-family:var(--fuente-mono); font-weight:600; color:var(--rojo); }

/* ---------- Certificados ---------- */
.grid-certificados{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.tarjeta-certificado{ background:var(--blanco); border:1px solid #e9ebee; border-radius:var(--radio-md); padding:1.6rem; opacity:0; transform:translateY(18px); animation:aparecer .6s ease forwards; animation-delay:var(--retraso,0ms); }
.tarjeta-certificado__codigo{ display:inline-block; font-family:var(--fuente-mono); font-size:.75rem; font-weight:700; color:var(--rojo); background:var(--rojo-suave); padding:.3rem .7rem; border-radius:999px; margin-bottom:.8rem; }
.tarjeta-certificado h3{ font-size:1.1rem; }
.tarjeta-certificado p{ font-size:.86rem; margin-bottom:0; }
.seccion--descarga{ background:var(--grafito); color:var(--blanco); }
.descarga__inner{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.descarga__inner h2{ color:var(--blanco); font-size:1.7rem; }
.descarga__inner p{ color:#c9cdd4; margin-bottom:0; max-width:52ch; }

/* ---------- Vendedores ---------- */
.filtro-zonas{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.filtro-zonas__chip{ background:var(--gris-fondo); border:1px solid #e2e5e9; padding:.55rem 1.1rem; border-radius:999px; font-weight:600; font-size:.85rem; color:var(--grafito-80); transition:all var(--transicion); }
.filtro-zonas__chip.activo,.filtro-zonas__chip:hover{ background:var(--rojo); color:var(--blanco); border-color:var(--rojo); }
.grid-vendedores{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; }
.tarjeta-vendedor{ background:var(--blanco); border:1px solid #e9ebee; border-radius:var(--radio-md); padding:1.6rem; text-align:center; transition:transform var(--transicion), box-shadow var(--transicion);
  opacity:0; transform:translateY(18px); animation:aparecer .6s ease forwards; animation-delay:var(--retraso,0ms); }
.tarjeta-vendedor:hover{ transform:translateY(-6px); box-shadow:var(--sombra-md); }
.tarjeta-vendedor__avatar{ width:76px; height:76px; border-radius:50%; overflow:hidden; margin:0 auto .9rem; border:3px solid var(--rojo-suave); }
.tarjeta-vendedor__avatar img{ width:100%; height:100%; object-fit:cover; }
.tarjeta-vendedor h3{ font-size:1.1rem; margin-bottom:.15rem; }
.tarjeta-vendedor__cargo{ font-size:.82rem; margin-bottom:.4rem; }
.tarjeta-vendedor__zona{ display:inline-block; font-family:var(--fuente-mono); font-size:.7rem; color:var(--rojo); background:var(--rojo-suave); padding:.2rem .6rem; border-radius:999px; margin-bottom:1rem; }
.tarjeta-vendedor__contacto{ display:flex; flex-direction:column; gap:.5rem; }
.tarjeta-vendedor__enlace{ font-size:.82rem; color:var(--acero); }
.tarjeta-vendedor__enlace:hover{ color:var(--rojo); }

/* ---------- Contacto ---------- */
.contacto__layout{ display:grid; grid-template-columns:1.3fr .8fr; gap:2.4rem; align-items:start; }
.formulario-contacto{ background:var(--blanco); border:1px solid #e9ebee; border-radius:var(--radio-lg); padding:2rem; }
.campo-grupo{ margin-bottom:1.1rem; }
.campo-grupo--2col{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.campo-grupo label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem; color:var(--grafito-80); }
.campo-grupo input, .campo-grupo textarea{ width:100%; padding:.75rem .9rem; border:1px solid #dfe2e6; border-radius:var(--radio-sm); font-family:inherit; font-size:.92rem; transition:border-color var(--transicion); }
.campo-grupo input:focus, .campo-grupo textarea:focus{ border-color:var(--rojo); }
.campo-grupo textarea{ resize:vertical; }
.alerta{ padding:.9rem 1.1rem; border-radius:var(--radio-sm); font-size:.88rem; margin-bottom:1.2rem; }
.alerta--exito{ background:#e8f7ee; color:var(--verde-ok); border:1px solid #bfe6cc; }
.alerta--error{ background:#fdecee; color:var(--rojo-oscuro); border:1px solid #f6c3cb; }
.alerta--error ul{ margin:.4rem 0 0 1.1rem; list-style:disc; }
.contacto__lateral{ display:flex; flex-direction:column; gap:1.2rem; }
.contacto__tarjeta{ background:var(--gris-fondo); border-radius:var(--radio-md); padding:1.6rem; }
.contacto__tarjeta--oscura{ background:var(--grafito); color:var(--blanco); }
.contacto__tarjeta--oscura p{ color:#c9cdd4; }
.contacto__tarjeta h3{ font-size:1.1rem; margin-bottom:.9rem; }
.contacto__tarjeta ul{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.2rem; }
.contacto__tarjeta ul li{ display:flex; flex-direction:column; font-size:.88rem; gap:.1rem; }
.contacto__tarjeta ul li span:first-child{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--acero-claro); }

/* ---------- Pie ---------- */
.pie{ background:var(--grafito); color:#c9cdd4; margin-top:3rem; }
.pie__cinta{ height:6px; background:repeating-linear-gradient(-45deg,var(--rojo) 0 14px,var(--grafito) 14px 28px); }
.pie__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem; padding:3.4rem 24px 2rem; }
.pie__logo{ font-family:var(--fuente-display); font-size:1.5rem; font-weight:800; color:var(--blanco); }
.pie__col p{ color:#9aa1ab; font-size:.86rem; }
.pie__direccion{ font-size:.82rem !important; }
.pie__redes{ display:flex; gap:1rem; margin-top:.8rem; }
.pie__redes a{ font-size:.8rem; color:#c9cdd4; }
.pie__redes a:hover{ color:var(--rojo); }
.pie__col h4{ color:var(--blanco); font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; }
.pie__col ul{ display:flex; flex-direction:column; gap:.6rem; }
.pie__col ul a{ font-size:.86rem; color:#9aa1ab; }
.pie__col ul a:hover{ color:var(--rojo); }
.pie__legal{ display:flex; justify-content:space-between; padding:1.2rem 24px; border-top:1px solid #33383f; font-size:.78rem; color:#767d87; flex-wrap:wrap; gap:.5rem; }

.btn-arriba{ position:fixed; right:1.4rem; bottom:1.4rem; width:44px; height:44px; border-radius:50%; background:var(--rojo); color:var(--blanco);
  border:none; font-size:1.2rem; box-shadow:var(--sombra-rojo); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--transicion), transform var(--transicion), visibility var(--transicion); z-index:60; }
.btn-arriba.visible{ opacity:1; visibility:visible; transform:none; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1080px){
  .grid-familias{ grid-template-columns:repeat(2,1fr); }
  .grid-productos{ grid-template-columns:repeat(3,1fr); }
  .grid-vendedores{ grid-template-columns:repeat(2,1fr); }
  .grid-certificados{ grid-template-columns:repeat(2,1fr); }
  .catalogo__layout{ grid-template-columns:1fr; }
  .catalogo__filtros{ position:static; }
  .ficha-producto__layout{ grid-template-columns:1fr 1fr; }
  .ficha-producto__placa{ grid-column:1/-1; }
}

@media (max-width:900px){
  .nav-principal, .cabecera__acciones .boton--whatsapp{ display:none; }
  .hamburguesa{ display:flex; }
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__texto{ display:flex; flex-direction:column; align-items:center; }
  .hero__metricas{ justify-content:center; }
  .hero__panel{ margin-top:1rem; }
  .porque__grid{ grid-template-columns:1fr; }
  .porque__lista{ grid-template-columns:1fr; }
  .ficha-producto__layout{ grid-template-columns:1fr; }
  .contacto__layout{ grid-template-columns:1fr; }
  .campo-grupo--2col{ grid-template-columns:1fr; }
  .pie__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  .grid-productos{ grid-template-columns:repeat(2,1fr); }
  .grid-vendedores{ grid-template-columns:1fr; }
  .grid-certificados{ grid-template-columns:1fr; }
  .barra-superior__contacto a:nth-child(2){ display:none; }
  .cta-final__inner{ text-align:center; justify-content:center; }
  .pie__inner{ grid-template-columns:1fr; }
  .boton--movil-filtros{ display:inline-flex; }
  .catalogo__filtros{ display:none; }
  .catalogo__filtros.abierto{ display:block; }
}

@media (max-width:420px){
  .grid-productos{ grid-template-columns:1fr; }
}
.cabecera__logo-img {
    height: 50px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* =========================================================
   CAPACIDADES / LO QUE TENEMOS
========================================================= */

.seccion--capacidades {
    position: relative;
    overflow: hidden;
    padding: clamp(72px, 8vw, 120px) 0;
    background:
        radial-gradient(
            circle at 95% 0%,
            rgba(196, 18, 27, 0.08),
            transparent 35%
        ),
        #f5f6f8;
}

.seccion--capacidades::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #c4121b;
}


/* ENCABEZADO */

.capacidades__encabezado {
    width: min(720px, 100%);
    margin-bottom: clamp(36px, 5vw, 60px);
}

.capacidades__encabezado .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;

    color: #c4121b;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.capacidades__encabezado .eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

.capacidades__encabezado h2 {
    max-width: 680px;
    margin: 0 0 18px;

    color: #17191d;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.capacidades__encabezado p {
    max-width: 650px;
    margin: 0;

    color: #666b73;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.75;
}


/* GRID */

.capacidades__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}


/* CARD */

.capacidad-card {
    position: relative;
    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(20, 23, 28, 0.08);
    border-radius: 18px;

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 18px 50px rgba(22, 25, 30, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.capacidad-card:hover {
    transform: translateY(-7px);

    border-color: rgba(196, 18, 27, 0.22);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.06),
        0 26px 60px rgba(22, 25, 30, 0.11);
}


/* IMAGEN */

.capacidad-card__imagen {
    position: relative;
    overflow: hidden;

    aspect-ratio: 16 / 9;
    background: #e9ebef;
}

.capacidad-card__imagen::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(8, 10, 13, 0.22) 100%
        );

    pointer-events: none;
}

.capacidad-card__imagen img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;

    transition: transform 0.55s cubic-bezier(.2, .7, .2, 1);
}

.capacidad-card:hover .capacidad-card__imagen img {
    transform: scale(1.045);
}


/* NÚMERO */

.capacidad-card__numero {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;

    min-width: 46px;
    height: 32px;

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

    padding: 0 11px;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;

    color: #fff;
    background: rgba(17, 19, 22, 0.62);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* CONTENIDO */

.capacidad-card__contenido {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 18px;

    padding: 25px 26px 28px;
}

.capacidad-card__icono {
    width: 46px;
    height: 46px;
    flex-shrink: 0;

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

    border-radius: 12px;

    color: #c4121b;
    background: rgba(196, 18, 27, 0.08);
}

.capacidad-card__icono svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.capacidad-card__contenido h3 {
    margin: 1px 0 8px;

    color: #17191d;
    font-size: clamp(1.1rem, 1.7vw, 1.32rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.capacidad-card__contenido p {
    margin: 0;

    color: #6a6f76;
    font-size: 0.95rem;
    line-height: 1.65;
}


/* FOOTER / CTA */

.capacidades__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-top: 36px;
    padding: 28px 30px;

    border: 1px solid rgba(196, 18, 27, 0.13);
    border-radius: 16px;

    background: #fff;
}

.capacidades__footer > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.capacidades__footer strong {
    color: #17191d;
    font-size: 1rem;
}

.capacidades__footer span {
    color: #73777e;
    font-size: 0.91rem;
}

.btn--capacidades {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;
    padding: 0 22px;

    border-radius: 9px;

    color: #fff;
    background: #c4121b;

    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;

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

.btn--capacidades:hover {
    background: #a80e16;
    transform: translateY(-2px);
}

.btn--capacidades svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* TABLET */

@media (max-width: 850px) {

    .capacidades__grid {
        grid-template-columns: 1fr;
    }

    .capacidades__footer {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* MOBILE */

@media (max-width: 560px) {

    .seccion--capacidades {
        padding: 64px 0;
    }

    .capacidades__grid {
        gap: 18px;
    }

    .capacidad-card {
        border-radius: 14px;
    }

    .capacidad-card__contenido {
        grid-template-columns: 1fr;
        gap: 14px;

        padding: 21px 20px 24px;
    }

    .capacidad-card__icono {
        width: 42px;
        height: 42px;
    }

    .capacidades__footer {
        margin-top: 24px;
        padding: 22px 20px;
    }

    .btn--capacidades {
        width: 100%;
    }
}

/* =========================================================
   MARCAS RELACIONADAS
========================================================= */

.seccion--marcas {
    position: relative;
    overflow: hidden;

    padding: clamp(75px, 8vw, 120px) 0;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(196, 18, 27, 0.06),
            transparent 30%
        ),
        #f4f5f7;
}


/* LAYOUT */

.marcas__layout {
    display: grid;
    grid-template-columns:
        minmax(280px, 0.78fr)
        minmax(0, 1.65fr);

    align-items: start;
    gap: clamp(45px, 6vw, 90px);
}


/* =========================================
   INTRO
========================================= */

.marcas__intro {
    position: sticky;
    top: 100px;
}

.marcas__intro .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 15px;

    color: #c4121b;

    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.marcas__intro .eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    background: currentColor;
}


.marcas__intro h2 {
    max-width: 430px;

    margin: 0 0 18px;

    color: #17191d;

    font-size: clamp(2rem, 3.7vw, 3.25rem);
    line-height: 1.05;

    letter-spacing: -0.04em;
}


.marcas__intro > p {
    max-width: 430px;

    margin: 0;

    color: #6a6f76;

    font-size: 1rem;
    line-height: 1.75;
}



/* =========================================
   ASESOR
========================================= */

.marcas__asesor {
    position: relative;
    overflow: hidden;

    margin-top: 34px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #1b1d21,
            #101114
        );

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.15);
}


.marcas__asesor-imagen {
    height: 260px;

    overflow: hidden;
}

.marcas__asesor-imagen img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center bottom;

    transition: transform 0.45s ease;
}


.marcas__asesor:hover
.marcas__asesor-imagen img {
    transform: scale(1.03);
}


.marcas__asesor-contenido {
    position: relative;

    padding: 23px 24px 25px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.03),
            transparent
        );
}


.marcas__asesor-contenido span {
    display: block;

    margin-bottom: 5px;

    color: rgba(255,255,255,0.6);

    font-size: 0.78rem;
}


.marcas__asesor-contenido strong {
    display: block;

    margin-bottom: 18px;

    color: #fff;

    font-size: 1.05rem;
    line-height: 1.35;
}



/* BOTÓN */

.boton-marcas {
    width: 100%;
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 0 18px;

    border-radius: 10px;

    color: #fff;

    background: #c4121b;

    text-decoration: none;

    font-size: 0.86rem;
    font-weight: 750;

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


.boton-marcas:hover {
    background: #a90e16;
    transform: translateY(-2px);
}


.boton-marcas svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}



/* =========================================
   GRID
========================================= */

.marcas__grid {
    display: grid;

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

    gap: 15px;
}



/* =========================================
   TARJETAS
========================================= */

.marca-card {
    position: relative;

    min-height: 145px;

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

    padding: 24px;

    border:
        1px solid rgba(20, 23, 28, 0.07);

    border-radius: 14px;

    background: #fff;

    box-shadow:
        0 3px 8px rgba(0,0,0,0.015),
        0 12px 35px rgba(17,20,25,0.045);

    text-decoration: none;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.marca-card::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -1px;

    width: 0;
    height: 3px;

    transform: translateX(-50%);

    border-radius: 10px 10px 0 0;

    background: #c4121b;

    transition: width 0.3s ease;
}


.marca-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(196, 18, 27, 0.18);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.07),
        0 28px 50px rgba(17,20,25,0.08);
}


.marca-card:hover::before {
    width: 55%;
}



/* LOGOS */

.marca-card img {
    width: 100%;
    max-width: 130px;

    max-height: 72px;

    object-fit: contain;

    filter: saturate(0.9);

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


.marca-card:hover img {
    transform: scale(1.055);

    filter: saturate(1);
}



/* HIMEL DESTACADO */

.marca-card--destacada {
    border-color:
        rgba(196, 18, 27, 0.22);

    background:
        linear-gradient(
            145deg,
            rgba(196,18,27,0.035),
            #ffffff 70%
        );
}


.marca-card--destacada::after {
    content: "Marca principal";

    position: absolute;

    top: 10px;
    right: 10px;

    padding: 5px 8px;

    border-radius: 999px;

    color: #c4121b;

    background:
        rgba(196,18,27,0.08);

    font-size: 0.61rem;
    font-weight: 800;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}



/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .marcas__layout {
        grid-template-columns: 1fr;
    }

    .marcas__intro {
        position: static;
    }


    .marcas__intro > p,
    .marcas__intro h2 {
        max-width: 700px;
    }


    .marcas__asesor {
        display: grid;

        grid-template-columns:
            minmax(220px, 0.7fr)
            1fr;

        align-items: center;
    }


    .marcas__asesor-imagen {
        height: 250px;
    }

}



/* =========================================
   TABLET PEQUEÑO
========================================= */

@media (max-width: 780px) {

    .marcas__grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .seccion--marcas {
        padding: 65px 0;
    }


    .marcas__asesor {
        display: block;
    }


    .marcas__asesor-imagen {
        height: 225px;
    }


    .marcas__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .marca-card {
        min-height: 112px;

        padding: 17px;

        border-radius: 11px;
    }


    .marca-card img {
        max-width: 105px;
        max-height: 58px;
    }


    .marca-card--destacada::after {
        display: none;
    }

}



/* =========================================
   MOBILE PEQUEÑO
========================================= */

@media (max-width: 390px) {

    .marca-card {
        min-height: 100px;
    }

}

/* =========================================================
   NOSOTROS / MISIÓN / VISIÓN
========================================================= */

.seccion--mvv {
    position: relative;
    overflow: hidden;

    padding: clamp(78px, 8vw, 120px) 0;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(196, 18, 27, 0.06),
            transparent 30%
        ),
        #ffffff;
}


/* LÍNEA SUPERIOR */

.seccion--mvv::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(1200px, calc(100% - 40px));
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(20, 23, 28, 0.1),
            transparent
        );
}


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

.mvv__encabezado {
    width: min(720px, 100%);

    margin: 0 auto clamp(45px, 6vw, 70px);

    text-align: center;
}


.mvv__encabezado .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;

    color: #c4121b;

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.mvv__encabezado .eyebrow::before,
.mvv__encabezado .eyebrow::after {
    content: "";

    width: 25px;
    height: 2px;

    background: currentColor;
}


.mvv__encabezado h2 {
    margin: 0 0 18px;

    color: #17191d;

    font-size: clamp(2rem, 4vw, 3.45rem);

    line-height: 1.04;

    letter-spacing: -0.045em;
}


.mvv__encabezado p {
    max-width: 650px;

    margin: 0 auto;

    color: #6a6f76;

    font-size: 1rem;

    line-height: 1.75;
}


/* =========================================================
   GRID
========================================================= */

.mvv__grid {
    display: grid;

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

    gap: 22px;
}


/* =========================================================
   CARD
========================================================= */

.mvv-card {
    position: relative;
    overflow: hidden;

    min-height: 100%;

    padding: 34px 30px 32px;

    border:
        1px solid rgba(20, 23, 28, 0.08);

    border-radius: 20px;

    background: #fff;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.02),
        0 22px 50px rgba(20, 23, 28, 0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.mvv-card::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 4px;

    background: #c4121b;

    transform: scaleX(0);

    transform-origin: left;

    transition: transform 0.35s ease;
}


.mvv-card:hover {
    transform: translateY(-8px);

    border-color:
        rgba(196, 18, 27, 0.18);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.06),
        0 30px 65px rgba(20, 23, 28, 0.11);
}


.mvv-card:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   NÚMERO
========================================================= */

.mvv-card__numero {
    position: absolute;

    top: 25px;
    right: 27px;

    color:
        rgba(20, 23, 28, 0.08);

    font-size: 2.5rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.06em;
}


/* =========================================================
   ICONO
========================================================= */

.mvv-card__icono {
    width: 70px;
    height: 70px;

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

    margin-bottom: 26px;

    border-radius: 18px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #d01a24,
            #a90d15
        );

    box-shadow:
        0 12px 30px
        rgba(196, 18, 27, 0.22);
}


.mvv-card__icono svg {
    width: 33px;
    height: 33px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   CONTENIDO
========================================================= */

.mvv-card__eyebrow {
    display: block;

    margin-bottom: 7px;

    color: #9a9fa6;

    font-size: 0.7rem;

    font-weight: 750;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.mvv-card__contenido h3 {
    margin: 0 0 17px;

    color: #17191d;

    font-size: 1.5rem;

    line-height: 1.15;

    letter-spacing: -0.025em;
}


.mvv-card__contenido p {
    margin: 0 0 13px;

    color: #646970;

    font-size: 0.95rem;

    line-height: 1.7;
}


.mvv-card__contenido p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   EFECTO DE FONDO
========================================================= */

.mvv-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -65px;
    right: -65px;

    border-radius: 50%;

    background:
        rgba(196, 18, 27, 0.035);

    transition:
        transform 0.4s ease;
}


.mvv-card:hover::before {
    transform: scale(1.2);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .mvv__grid {
        grid-template-columns: 1fr;
    }


    .mvv-card {
        display: grid;

        grid-template-columns:
            auto 1fr;

        gap: 24px;

        align-items: start;
    }


    .mvv-card__icono {
        margin-bottom: 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .seccion--mvv {
        padding: 65px 0;
    }


    .mvv__encabezado {
        text-align: left;
    }


    .mvv__encabezado .eyebrow::after {
        display: none;
    }


    .mvv-card {
        display: block;

        padding: 28px 23px 27px;

        border-radius: 16px;
    }


    .mvv-card__icono {
        width: 60px;
        height: 60px;

        margin-bottom: 22px;

        border-radius: 15px;
    }


    .mvv-card__icono svg {
        width: 28px;
        height: 28px;
    }


    .mvv-card__numero {
        top: 22px;
        right: 22px;

        font-size: 2.15rem;
    }

}