@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-SemiBold.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Bold.ttf"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-ExtraBold.ttf"); font-weight: 800; font-display: swap; }

:root {
  --azul: #17263e;
  --azul-2: #2b374d;
  --azul-3: #1f5a7a;
  --rojo: #ad0f49;
  --rojo-2: #8c0b3a;
  --gris: #8695a8;
  --gris-claro: #eef1f5;
  --linea: #dfe4ea;
  --texto: #1d2533;
  --suave: #5b6676;
  --blanco: #fff;
  --ancho: 1200px;
  --radio: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Montserrat", system-ui, sans-serif; color: var(--texto); background: var(--blanco); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rojo); }
.sec { padding: 88px 0; }
.sec-titulo { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; margin-top: 12px; }
.sec-bajada { color: var(--suave); max-width: 680px; margin-top: 16px; font-size: 17px; }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border: 2px solid transparent; cursor: pointer; transition: background .2s, color .2s, transform .2s, border-color .2s; font-family: inherit; }
.btn:hover { transform: translateY(-2px); }
.btn-rojo { background: var(--rojo); color: #fff; }
.btn-rojo:hover { background: var(--rojo-2); }
.btn-linea { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-linea:hover { background: #fff; color: var(--azul); }
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-2); }
.btn-borde { border-color: var(--azul); color: var(--azul); }
.btn-borde:hover { background: var(--azul); color: #fff; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Encabezado */
.top { position: sticky; top: 0; z-index: 50; background: var(--azul); box-shadow: 0 2px 18px rgba(10,18,32,.25); border-bottom: 4px solid var(--rojo); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 96px; }
.top .logo img { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { color: #fff; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; transition: background .2s, color .2s; }
.nav a:hover { background: rgba(255,255,255,.12); }
.nav a.activo { background: var(--rojo); }
.nav a.cta { background: var(--rojo); margin-left: 10px; }
.nav a.cta:hover { background: var(--rojo-2); }
.menu-btn { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.menu-btn svg { width: 30px; height: 30px; }

/* Portada */
.hero { position: relative; min-height: 640px; display: flex; align-items: center; color: #fff; background: var(--azul) center/cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(23,38,62,.92) 0%, rgba(23,38,62,.72) 48%, rgba(23,38,62,.3) 100%); }
.hero .wrap { position: relative; padding-top: 80px; padding-bottom: 80px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 64px); font-weight: 800; max-width: 860px; line-height: 1.28; }
.hero h1 span { background: var(--rojo); padding: 2px 14px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero p { max-width: 600px; margin-top: 26px; font-size: 18px; color: rgba(255,255,255,.9); }
.hero .acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero .lema { margin-bottom: 22px; font-size: 13px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 14px; }
.hero .lema::before { content: ""; width: 44px; height: 3px; background: var(--rojo); }

/* Franja de cifras */
.cifras { background: var(--rojo); color: #fff; }
.cifras .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.cifras div { padding: 30px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.2); }
.cifras div:last-child { border-right: 0; }
.cifras b { display: block; font-size: 34px; font-weight: 800; line-height: 1; }
.cifras span { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: .9; display: block; margin-top: 8px; }

/* Acerca */
.acerca { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.acerca .foto { position: relative; }
.acerca .foto img { border-radius: var(--radio); aspect-ratio: 4/3.4; object-fit: cover; width: 100%; }
.acerca .foto::after { content: ""; position: absolute; right: -16px; bottom: -16px; width: 46%; height: 46%; background: var(--rojo); border-radius: var(--radio); z-index: -1; }
.acerca p + p { margin-top: 16px; }
.acerca .texto p { color: var(--suave); font-size: 17px; margin-top: 18px; }
.equipo { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.equipo li { background: var(--gris-claro); border-left: 4px solid var(--rojo); padding: 10px 16px; border-radius: 6px; font-weight: 600; font-size: 14px; }

/* Servicios */
.fondo-azul { background: var(--azul); color: #fff; }
.fondo-azul .sec-bajada { color: rgba(255,255,255,.75); }
.fondo-gris { background: var(--gris-claro); }
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.servicio { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radio); padding: 34px 30px; border-top: 4px solid var(--rojo); transition: background .2s, transform .2s; }
.servicio:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }
.servicio .num { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; color: #f2a7c2; }
.servicio h3 { font-size: 24px; font-weight: 800; margin: 12px 0 14px; }
.servicio p { color: rgba(255,255,255,.8); font-size: 15px; }

/* Empresas */
.empresas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; }
.empresa { position: relative; border-radius: var(--radio); overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; color: #fff; background: var(--azul) center/cover no-repeat; }
.empresa::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,38,62,.15) 0%, rgba(23,38,62,.94) 72%); transition: background .3s; }
.empresa:hover::before { background: linear-gradient(180deg, rgba(173,15,73,.25) 0%, rgba(23,38,62,.96) 72%); }
.empresa .in { position: relative; padding: 34px; }
.empresa .marca { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; background: var(--rojo); display: inline-block; padding: 6px 12px; border-radius: 4px; }
.empresa h3 { font-size: 32px; font-weight: 800; margin: 14px 0 10px; }
.empresa p { color: rgba(255,255,255,.85); font-size: 15px; max-width: 480px; }
.empresa .ver { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid var(--rojo); padding-bottom: 4px; }

/* Tarjetas de producto */
.grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.prod { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s, border-color .25s; }
.prod:hover { box-shadow: 0 18px 40px rgba(23,38,62,.14); transform: translateY(-5px); border-color: transparent; }
.prod .img { aspect-ratio: 4/3; background: var(--gris-claro); overflow: hidden; position: relative; }
.prod .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.prod:hover .img img { transform: scale(1.05); }
.prod .cat { position: absolute; left: 14px; top: 14px; background: var(--azul); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 11px; border-radius: 4px; }
.prod .cuerpo { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.prod .emp { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rojo); }
.prod h3 { font-size: 19px; font-weight: 800; margin: 8px 0 8px; }
.prod p { color: var(--suave); font-size: 14px; flex: 1; }
.prod .mas { margin-top: 18px; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--azul); display: inline-flex; align-items: center; gap: 8px; }
.prod:hover .mas { color: var(--rojo); }
.centro { text-align: center; margin-top: 44px; }

/* Llamado final */
.llamado { position: relative; color: #fff; background: var(--azul) center/cover no-repeat; text-align: center; }
.llamado::before { content: ""; position: absolute; inset: 0; background: rgba(173,15,73,.9); }
.llamado .wrap { position: relative; padding: 96px 24px; }
.llamado h2 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; }
.llamado p { margin: 16px auto 32px; font-size: 18px; max-width: 560px; opacity: .95; }
.llamado .btn-linea:hover { color: var(--rojo); }

/* Pie */
.pie { background: #0f1a2c; color: rgba(255,255,255,.75); font-size: 14px; }
.pie .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding: 64px 24px 40px; }
.pie img { height: 48px; margin-bottom: 18px; }
.pie h4 { color: #fff; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; }
.pie li { margin-bottom: 9px; }
.pie a:hover { color: #fff; }
.pie .legal { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 24px; text-align: center; font-size: 12px; opacity: .7; }

/* Cabecera interior */
.cab { background: var(--azul); color: #fff; padding: 56px 0 60px; position: relative; overflow: hidden; }
.cab::after { content: ""; position: absolute; right: -80px; top: -80px; width: 340px; height: 340px; border-radius: 50%; border: 60px solid rgba(173,15,73,.5); }
.cab .wrap { position: relative; z-index: 1; }
.cab h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; margin-top: 10px; }
.cab p { margin-top: 14px; max-width: 640px; color: rgba(255,255,255,.8); font-size: 17px; }
.cab .kicker { color: #f2a7c2; }
.migas { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.migas a:hover { color: #fff; text-decoration: underline; }

/* Catálogo */
.filtros { position: sticky; top: 100px; z-index: 20; background: #fff; border-bottom: 1px solid var(--linea); padding: 16px 0; }
.filtros .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab { border: 2px solid var(--linea); background: #fff; color: var(--azul); font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: all .2s; }
.tab:hover { border-color: var(--azul); }
.tab.activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.buscar { margin-left: auto; position: relative; }
.buscar input { font-family: inherit; font-size: 14px; padding: 11px 16px 11px 42px; border: 2px solid var(--linea); border-radius: 999px; width: 260px; outline: none; }
.buscar input:focus { border-color: var(--azul); }
.buscar svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gris); }
.bloque { padding: 64px 0 24px; }
.bloque-cab { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; border-bottom: 3px solid var(--azul); padding-bottom: 22px; margin-bottom: 26px; }
.bloque-cab h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; }
.bloque-cab h2 small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rojo); margin-bottom: 8px; }
.bloque-cab p { color: var(--suave); max-width: 640px; margin-top: 10px; font-size: 15px; }
.bloque-cab .cuenta { font-weight: 800; font-size: 40px; color: var(--azul); line-height: 1; text-align: right; }
.bloque-cab .cuenta span { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--suave); font-weight: 600; margin-top: 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.chip { border: 0; background: var(--gris-claro); color: var(--azul-2); font-family: inherit; font-weight: 600; font-size: 13px; padding: 8px 15px; border-radius: 999px; cursor: pointer; transition: all .2s; }
.chip:hover { background: var(--linea); }
.chip.activo { background: var(--azul); color: #fff; }
.vacio { padding: 60px 0; text-align: center; color: var(--suave); }
.extra { margin-top: 44px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: start; }
.extra h3 { font-size: 20px; font-weight: 800; margin-bottom: 14px; }
.extra video { width: 100%; border-radius: var(--radio); background: #000; }
.mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mini img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; width: 100%; transition: opacity .2s; }
.mini img:hover { opacity: .85; }

/* Ficha de producto */
.ficha { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; padding: 56px 0 24px; align-items: start; }
.galeria .principal { aspect-ratio: 4/3; background: var(--gris-claro); border-radius: var(--radio); overflow: hidden; cursor: zoom-in; }
.galeria .principal img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.galeria .principal.cubrir img { object-fit: cover; }
.miniaturas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.miniaturas button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--gris-claro); aspect-ratio: 1; }
.miniaturas button.activo { border-color: var(--rojo); }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.info .emp { display: inline-flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rojo); }
.info .emp i { font-style: normal; background: var(--gris-claro); color: var(--azul-2); padding: 5px 10px; border-radius: 4px; letter-spacing: 0.1em; }
.info h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; margin: 14px 0 8px; }
.info .bajada { font-size: 18px; font-weight: 600; color: var(--azul-3); }
.info .resumen { color: var(--suave); margin-top: 18px; font-size: 16px; }
.lista { margin-top: 24px; }
.lista li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid var(--linea); font-size: 15px; }
.lista li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 14px; height: 8px; border-left: 3px solid var(--rojo); border-bottom: 3px solid var(--rojo); transform: rotate(-45deg); }
.variantes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.variantes span { border: 2px solid var(--azul); color: var(--azul); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 6px; }
.info .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.seccion { padding: 44px 0; border-top: 1px solid var(--linea); }
.seccion h2 { font-size: 26px; font-weight: 800; margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
.seccion h2::before { content: ""; width: 8px; height: 28px; background: var(--rojo); border-radius: 2px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.specs { width: 100%; border-collapse: collapse; font-size: 15px; }
.specs th, .specs td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.specs th { width: 42%; font-weight: 600; color: var(--azul-2); background: var(--gris-claro); }
.usos { display: flex; flex-wrap: wrap; gap: 10px; }
.usos span { background: var(--gris-claro); padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; border-left: 4px solid var(--rojo); }
.scroll { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
.matriz { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.matriz th, .matriz td { padding: 13px 14px; text-align: center; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.matriz thead th { background: var(--azul); color: #fff; font-weight: 700; }
.matriz th:first-child, .matriz td:first-child { text-align: left; font-weight: 600; white-space: normal; min-width: 220px; }
.matriz tbody tr:nth-child(even) { background: #f8f9fb; }
.matriz tbody tr:last-child td { border-bottom: 0; }
.matriz td.ei { font-weight: 800; color: var(--rojo); }
.nota { font-size: 13px; color: var(--suave); margin-top: 12px; }
.docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.doc { display: flex; align-items: center; gap: 14px; border: 1px solid var(--linea); border-radius: 10px; padding: 14px 16px; font-weight: 600; font-size: 14px; transition: all .2s; }
.doc:hover { border-color: var(--rojo); background: #fdf3f7; }
.doc .pdf { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; letter-spacing: 0.04em; }
.doc span { flex: 1; }
.doc svg { width: 18px; height: 18px; color: var(--gris); flex: none; }
.aviso { background: var(--gris-claro); border-left: 4px solid var(--azul); padding: 18px 22px; border-radius: 8px; font-size: 15px; color: var(--azul-2); }
.seccion video { width: 100%; max-width: 760px; border-radius: var(--radio); background: #000; }

/* Visor de imágenes */
.visor { position: fixed; inset: 0; background: rgba(10,16,28,.94); z-index: 100; display: none; align-items: center; justify-content: center; padding: 30px; }
.visor.abierto { display: flex; }
.visor img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.visor button { position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff; width: 50px; height: 50px; border-radius: 50%; font-size: 26px; cursor: pointer; line-height: 1; }
.visor button:hover { background: var(--rojo); }
.visor .cerrar { top: 22px; right: 22px; }
.visor .ant { left: 22px; }
.visor .sig { right: 22px; }

/* WhatsApp flotante */
.wa { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .2s; }
.wa:hover { transform: scale(1.08); }
.wa svg { width: 32px; height: 32px; }

@media (max-width: 980px) {
  .sec { padding: 64px 0; }
  .acerca, .ficha, .dos, .extra { grid-template-columns: 1fr; gap: 36px; }
  .servicios, .empresas { grid-template-columns: 1fr; }
  .grilla { grid-template-columns: repeat(2, 1fr); }
  .cifras .wrap { grid-template-columns: repeat(2, 1fr); }
  .cifras div:nth-child(2) { border-right: 0; }
  .cifras div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.2); }
  .pie .wrap { grid-template-columns: 1fr; gap: 32px; }
  .top .wrap { height: 78px; }
  .top .logo img { height: 42px; }
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 78px; background: var(--azul); flex-direction: column; align-items: stretch; padding: 12px 20px 22px; gap: 4px; border-bottom: 4px solid var(--rojo); }
  .nav.abierto { display: flex; }
  .nav a { padding: 14px 16px; }
  .nav a.cta { margin: 8px 0 0; text-align: center; }
  .filtros { top: 82px; }
  .buscar { margin-left: 0; width: 100%; }
  .buscar input { width: 100%; }
  .hero { min-height: 540px; }
  .acerca .foto::after { right: -8px; bottom: -8px; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .grilla, .docs { grid-template-columns: 1fr; }
  .bloque-cab { grid-template-columns: 1fr; }
  .bloque-cab .cuenta { display: none; }
  .miniaturas { grid-template-columns: repeat(5, 1fr); }
  .mini { grid-template-columns: repeat(3, 1fr); }
  .specs th { width: 46%; }
  .specs th, .specs td { padding: 11px 12px; font-size: 14px; }
  .empresa { min-height: 360px; }
  .empresa .in { padding: 24px; }
  .hero .btn, .info .acciones .btn { width: 100%; justify-content: center; }
  .visor { padding: 12px; }
  .visor .ant { left: 8px; } .visor .sig { right: 8px; }
}

/* Evita desbordes horizontales en pantallas chicas */
html, body { overflow-x: hidden; }
.ficha > *, .dos > *, .acerca > *, .extra > *, .grilla > *, .bloque-cab > * { min-width: 0; }
@media (max-width: 620px) {
  .hero .lema { letter-spacing: 0.16em; font-size: 12px; }
  .cab::after { width: 200px; height: 200px; border-width: 36px; right: -70px; top: -70px; opacity: .6; }
}