/* ============================================================
LUCHO & CÍA — Sistema de diseño 2026
Estilo: flat industrial moderno
Tokens generados con ui-ux-pro-max + azul extraído del logo
============================================================ */
:root {
/* Color */
--azul: #2456A6; /* azul de marca (logo) */
--azul-osc: #1B4485;
--navy: #0F1D38; /* fondo hero / footer */
--navy-2: #16294D;
--naranja: #C2410C; /* CTA — naranja seguridad, AA con blanco */
--naranja-osc: #9A3412;
--fondo: #F4F7FB;
--blanco: #FFFFFF;
--tinta: #0B1526;
--tinta-2: #43536B; /* texto secundario AA sobre claro */
--linea: #DCE4EF;
--ok: #15803D;
/* Verde WhatsApp oscurecido: el verde de marca (1FAF5A) solo da 2.86:1 con texto
blanco y AA pide 4.5:1. Este da 4.58:1 y sigue leyéndose como WhatsApp. */
--wa: #128749;
--wa-osc: #0E6E3B;
/* Tipografía */
--f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
--f-cuerpo: "Barlow", system-ui, sans-serif;
/* Ritmo — radios generosos y sombras con color de marca */
--r: 18px;
--r-sm: 12px;
--r-xs: 10px;
--sombra: 0 1px 3px rgba(15,29,56,.06), 0 8px 24px -12px rgba(15,29,56,.12);
--sombra-hover: 0 12px 32px -8px rgba(36,86,166,.28), 0 4px 12px -4px rgba(15,29,56,.12);
--sombra-alta: 0 30px 60px -20px rgba(11,21,38,.45);
--trans: 220ms cubic-bezier(.22,.8,.36,1);
--ancho: 1240px;
/* Firma visual: cinta de señalización industrial */
--cinta: repeating-linear-gradient(-45deg,
var(--naranja) 0 14px, var(--navy) 14px 28px);
/* Acentos modernos */
--grad-cta: linear-gradient(135deg, #E2570F 0%, #C2410C 100%);
--grad-azul: linear-gradient(135deg, #2F6BC4 0%, #1B4485 100%);
--vidrio: rgba(255,255,255,.06);
--vidrio-borde: rgba(255,255,255,.12);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
font-family: var(--f-cuerpo);
font-size: 16px;
line-height: 1.55;
color: var(--tinta);
background: var(--fondo);
}
/* height:auto es imprescindible: con los atributos width/height del HTML puestos,
max-width sin él encoge el ancho pero deja el alto fijo y deforma la imagen. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; border: none; background: none; }
/* El [hidden] del navegador lo pisa cualquier `display` puesto en una clase.
Esta regla hace que ocultar con el atributo funcione siempre. */
[hidden] { display: none !important; }
:focus-visible {
outline: 3px solid var(--naranja);
outline-offset: 2px;
border-radius: 4px;
}
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.salto {
position: absolute; left: -9999px; top: 0;
background: var(--navy); color: #fff; padding: 10px 18px; z-index: 200;
}
.salto:focus { left: 12px; top: 12px; outline: 3px solid var(--naranja); outline-offset: 2px; }
/* ---------- Titulares ---------- */
h1, h2, h3 { font-family: var(--f-display); text-transform: uppercase; letter-spacing: -.005em; line-height: 1.02; }
h1 { font-size: clamp(2.8rem, 6.5vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: 0; }
.kicker {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--f-display); text-transform: uppercase; font-weight: 600;
letter-spacing: .16em; font-size: .9rem; color: var(--naranja);
}
.kicker::before {
content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px;
}
section { padding: 92px 0; }
.cabeza-seccion { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 44px; flex-wrap: wrap; }
.cabeza-seccion p { color: var(--tinta-2); max-width: 56ch; margin-top: 12px; font-size: 1.05rem; }
.cabeza-seccion h2 { margin-top: 10px; }
/* ---------- Barra superior ---------- */
.topbar { background: var(--navy); color: #C9D6EC; font-size: .86rem; }
.topbar .contenedor { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 12px; }
.topbar a { color: #E8EEF9; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 4px; }
.topbar .grupo { display: flex; gap: 18px; align-items: center; }
@media (max-width: 700px) {
.topbar .oculta-movil { display: none; }
/* área táctil completa también en los iconos sociales, que solo miden 16px */
.topbar a { min-height: 44px; min-width: 44px; justify-content: center; }
}
/* ---------- Header ---------- */
.header {
background: var(--blanco); border-bottom: 1px solid var(--linea);
position: sticky; top: 0; z-index: 90;
transition: background var(--trans), box-shadow var(--trans);
}
/* al hacer scroll: translúcido con desenfoque (adaptado de hero-section-5) */
.header.con-scroll {
background: rgba(255, 255, 255, .8);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 4px 18px rgba(15, 29, 56, .08);
}
.header .contenedor {
display: grid; grid-template-columns: auto 1fr auto; gap: 20px;
align-items: center; min-height: 76px;
}
.logo img { height: 44px; width: auto; }
/* Buscador */
.buscador { position: relative; max-width: 560px; width: 100%; justify-self: center; }
.buscador input {
/* 52px de alto para que la lupa interior llegue a los 44px táctiles */
width: 100%; min-height: 52px; padding: 0 52px 0 18px;
border: 2px solid var(--linea); border-radius: var(--r);
font: 500 1rem var(--f-cuerpo); color: var(--tinta); background: var(--fondo);
transition: border-color var(--trans);
}
.buscador input::placeholder { color: #5D7089; }
.buscador input:focus {
border-color: var(--azul); outline: none; background: #fff;
box-shadow: 0 0 0 3px rgba(36, 86, 166, .28);
}
.buscador .lupa {
position: absolute; right: 4px; top: 4px; bottom: 4px; width: 44px;
display: grid; place-items: center; background: var(--azul);
border-radius: calc(var(--r) - 4px); color: #fff; transition: background var(--trans);
}
.buscador .lupa:hover { background: var(--azul-osc); }
.sugerencias {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
box-shadow: var(--sombra-hover); max-height: 380px; overflow: auto; z-index: 95;
}
.sugerencias:empty { display: none; }
.sugerencias .item {
display: flex; justify-content: space-between; gap: 10px; width: 100%;
padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--fondo);
color: var(--tinta); transition: background var(--trans); min-height: 44px; align-items: center;
}
.sugerencias .item:hover, .sugerencias .item:focus { background: var(--fondo); }
.sugerencias .item .cat { font-size: .78rem; color: var(--tinta-2); white-space: nowrap; }
.sugerencias .ver-todo { display: block; width: 100%; padding: 12px 16px; text-align: center; font-weight: 600; color: var(--azul); min-height: 44px; }
.sugerencias .ver-todo:hover { background: var(--fondo); text-decoration: none; }
.sugerencias mark { background: #FFE9D6; color: inherit; }
/* Botón cotización header */
.btn-cotiza {
position: relative; display: inline-flex; align-items: center; gap: 10px;
min-height: 48px; padding: 0 18px; border-radius: var(--r);
background: var(--naranja); color: #fff; font-weight: 600;
transition: background var(--trans);
}
.btn-cotiza:hover { background: var(--naranja-osc); }
.btn-cotiza .conteo {
position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px;
border-radius: 999px; background: var(--navy); color: #fff;
font-size: .78rem; font-weight: 700; display: grid; place-items: center; padding: 0 5px;
}
@media (max-width: 900px) {
.header .contenedor { grid-template-columns: auto auto; grid-template-rows: auto auto; padding-bottom: 12px; }
.buscador { grid-column: 1 / -1; grid-row: 2; max-width: none; }
.btn-cotiza .texto { display: none; }
.btn-cotiza { padding: 0 14px; }
}
/* En el teléfono la cabecera se comía media pantalla antes del contenido.
La topbar entera se va: su teléfono, su correo y sus redes ya están en la
hoja "Explorar" y en el pie, y el idioma se movió al header. */
@media (max-width: 700px) {
.topbar { display: none; }
.header .contenedor { min-height: 60px; gap: 10px 12px; padding-bottom: 10px; }
/* La imagen encoge pero el enlace mantiene los 44px táctiles. */
.logo { display: flex; align-items: center; min-height: 44px; }
.logo img { height: 34px; }
/* El alto se queda en 52px: la lupa va con 4px de margen dentro, así que
bajarlo la dejaba en 40px y perdía el área táctil. */
.buscador input { font-size: .95rem; }
/* La cotización es la acción del sitio, pero ya vive en la barra de abajo:
repetirla aquí solo gastaba ancho. */
.header .btn-cotiza { display: none; }
}
/* ---------- Nav ---------- */
.nav { background: var(--azul); }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; }
.nav a {
display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px;
color: #EAF1FC; font-weight: 500; font-size: .95rem; transition: background var(--trans);
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--azul-osc); text-decoration: none; }
/* --- submenús individuales por ítem --- */
.nav li { position: relative; display: flex; align-items: center; color: #EAF1FC; }
.nav .abre-sub {
color: #EAF1FC; width: 44px; min-height: 46px; display: grid; place-items: center;
transition: background var(--trans);
}
.nav .abre-sub:hover { background: var(--azul-osc); }
.nav .abre-sub svg { transition: transform var(--trans); }
.nav .abre-sub[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav .sub {
display: none; position: absolute; top: 100%; left: 0; z-index: 95;
min-width: 240px; background: #fff; border: 1px solid var(--linea);
border-radius: 0 0 var(--r) var(--r); box-shadow: var(--sombra-hover);
padding: 6px; flex-direction: column;
}
.nav .sub li { display: block; }
.nav .sub a {
display: flex; color: var(--tinta); font-weight: 500; min-height: 44px;
padding: 0 14px; border-radius: var(--r-sm); align-items: center;
}
.nav .sub a:hover, .nav .sub a:focus { background: var(--fondo); color: var(--azul); text-decoration: none; }
/* foco explícito: los enlaces de submenú deben marcarse siempre, no solo con :focus-visible */
.nav .sub a:focus { outline: 3px solid var(--naranja); outline-offset: -3px; }
@media (min-width: 701px) {
.nav .tiene-sub:hover .sub, .nav .tiene-sub:focus-within .sub, .nav .tiene-sub.abierto .sub { display: flex; }
}
@media (max-width: 700px) {
/* Dos barras de navegación en un teléfono es una de más. Abajo está la barra
fija, al alcance del pulgar, y su hoja "Explorar" ya lleva los 16
departamentos y todas las páginas: el nav azul no aporta nada y encima
obligaba a arrastrarlo de lado para ver el resto de secciones. */
.nav { display: none; }
}
/* ---------- Hero ----------
Fondo plano corporativo: sin halos de color tipo SaaS. La profundidad la
dan la retícula técnica y la jerarquía tipográfica, no los degradados. */
.hero {
color: #fff; padding: 84px 0 92px; position: relative; overflow: hidden;
background-color: var(--navy);
}
/* retícula técnica: lenguaje de plano/ficha industrial */
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--cinta); }
.hero .contenedor { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
/* Insignia de distribuidor autorizado — credencial, no decoración */
.sello-dist {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px 8px 12px; border-radius: 4px;
border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
font-weight: 600; color: #C0CDE2; margin-bottom: 22px;
}
.sello-dist svg { color: #FF9A5C; flex-shrink: 0; }
.hero .kicker, .split .kicker, .cabecera-catalogo .kicker { color: #FF9A5C; }
.hero h1 { margin-top: 18px; }
.hero h1 .resalta {
background: linear-gradient(120deg, #7FB1F5 0%, #A8CBFF 50%, #FF9A5C 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.baja { color: #C0CDE2; font-size: 1.16rem; max-width: 52ch; margin: 22px 0 34px; }
.hero .acciones { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 54px; padding: 0 30px; border-radius: 999px;
font-weight: 600; font-size: 1.02rem;
transition: background var(--trans), color var(--trans), border-color var(--trans),
transform var(--trans), box-shadow var(--trans);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primario { background-color: var(--naranja); background-image: var(--grad-cta); color: #fff; box-shadow: 0 10px 26px -10px rgba(226,87,15,.75); }
.btn-primario:hover { box-shadow: 0 16px 34px -10px rgba(226,87,15,.9); }
.btn-borde { border: 1.5px solid var(--vidrio-borde); color: #fff; background: var(--vidrio); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-borde:hover { border-color: #7FB1F5; background: rgba(127,177,245,.14); }
.btn-azul { background-color: var(--azul); background-image: var(--grad-azul); color: #fff; box-shadow: 0 10px 26px -12px rgba(36,86,166,.8); }
.btn-azul:hover { box-shadow: 0 16px 34px -12px rgba(36,86,166,.95); }
.hero .stats { display: flex; gap: 14px; margin-top: 46px; flex-wrap: wrap; }
.hero .stat {
background: var(--vidrio); border: 1px solid var(--vidrio-borde);
border-radius: var(--r-sm); padding: 14px 20px; min-width: 116px;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .stat b { font-family: var(--f-display); font-size: 2.2rem; font-weight: 700; display: block; color: #fff; line-height: 1; }
.hero .stat span { color: #9DB0CE; font-size: .84rem; }
/* ============================================================
FRANJA DE CREDENCIALES — datos duros, formato reporte
============================================================ */
.credenciales { background: #fff; border-bottom: 1px solid var(--linea); }
.credenciales .contenedor {
display: grid; grid-template-columns: repeat(4, 1fr);
/* separadores verticales tipo tabla de reporte, no tarjetas flotantes */
gap: 0;
}
.cred {
padding: 34px 28px; border-left: 1px solid var(--linea);
}
.cred:first-child { border-left: none; padding-left: 0; }
.cred b {
font-family: var(--f-display); font-size: 2.6rem; font-weight: 700;
line-height: 1; display: block; color: var(--navy); letter-spacing: -.01em;
}
.cred span { display: block; margin-top: 8px; color: var(--tinta-2); font-size: .92rem; }
.cred .nota { display: block; margin-top: 4px; color: #8194AF; font-size: .8rem; }
@media (max-width: 860px) {
.credenciales .contenedor { grid-template-columns: repeat(2, 1fr); }
.cred { padding: 26px 20px; }
.cred:nth-child(odd) { border-left: none; padding-left: 0; }
.cred:nth-child(n+3) { border-top: 1px solid var(--linea); }
}
@media (max-width: 460px) { .cred b { font-size: 2.1rem; } }
/* ============================================================
SOBRE LUCHO — el pilar "empresa" que faltaba en el home
============================================================ */
.sobre { background: var(--fondo); }
.sobre .contenedor { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.sobre .texto p { color: var(--tinta-2); font-size: 1.06rem; margin-top: 18px; max-width: 54ch; }
.sobre .texto .btn { margin-top: 30px; }
.sobre .pilares { display: grid; gap: 14px; }
.pilar {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r-sm);
padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start;
border-left: 3px solid var(--azul); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.pilar .ic { color: var(--azul); flex-shrink: 0; margin-top: 2px; }
.pilar b { display: block; font-size: 1.02rem; }
.pilar span { color: var(--tinta-2); font-size: .92rem; }
@media (max-width: 900px) { .sobre .contenedor { grid-template-columns: 1fr; gap: 40px; } }
/* ============================================================
DÚO BANDERA — las dos líneas de negocio, misma jerarquía
============================================================ */
.grid-bandera { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .grid-bandera { grid-template-columns: 1fr; } }
.bandera {
position: relative; overflow: hidden; border-radius: var(--r);
background-color: var(--navy); color: #fff;
border: 1px solid #24406F;
display: flex; flex-direction: column; min-height: 340px;
transition: border-color var(--trans), transform var(--trans);
}
.bandera:hover { border-color: #7FB1F5; transform: translateY(-4px); text-decoration: none; }
.bandera::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 48px 48px;
}
.bandera .cinta-sup { height: 6px; background: var(--cinta); position: relative; z-index: 1; }
.bandera .contenido { padding: 32px; position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.bandera .etiqueta {
align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: #FF9A5C; margin-bottom: 14px;
}
.bandera h3 { font-size: 2rem; color: #fff; margin-bottom: 12px; }
.bandera .desc { color: #B9C7DE; font-size: .98rem; max-width: 40ch; }
.bandera .lista-b { list-style: none; display: grid; gap: 9px; margin: 20px 0 0; }
.bandera .lista-b li { display: flex; gap: 9px; align-items: flex-start; color: #D7E1F2; font-size: .92rem; }
.bandera .lista-b svg { color: #7FB1F5; flex-shrink: 0; margin-top: 3px; }
.bandera .pie-b {
margin-top: auto; padding-top: 26px; display: flex; align-items: center;
justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.bandera .marcas-b { display: flex; gap: 10px; align-items: center; }
.bandera .marcas-b img { height: 26px; width: auto; background: #fff; border-radius: 4px; padding: 4px 8px; }
.bandera .ir {
display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px;
border-radius: 999px; background: #fff; color: var(--navy); font-weight: 600; font-size: .95rem;
transition: background var(--trans);
}
.bandera:hover .ir { background: #FF9A5C; }
/* ============================================================
PÁGINA DE LÍNEA (aceites) — marcas + subsecciones por uso
============================================================ */
.marcas-linea { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .marcas-linea { grid-template-columns: 1fr; } }
.marca-ficha {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
padding: 28px; box-shadow: var(--sombra);
border-top: 3px solid var(--azul); border-radius: 0 0 var(--r) var(--r);
}
.marca-ficha .cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.marca-ficha .nombre-m { font-family: var(--f-display); text-transform: uppercase; font-size: 1.6rem; font-weight: 700; }
.marca-ficha .conteo-m {
margin-left: auto; font-size: .82rem; color: var(--tinta-2);
background: var(--fondo); border: 1px solid var(--linea);
padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.marca-ficha p { color: var(--tinta-2); font-size: .96rem; }
.marca-ficha .btn { margin-top: 18px; }
.sub-linea { margin-top: 48px; }
.sub-linea .cabeza-sub {
display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px;
padding-bottom: 12px; border-bottom: 1px solid var(--linea);
}
.sub-linea .cabeza-sub h3 { font-size: 1.35rem; }
.sub-linea .cabeza-sub .desc-sub { color: var(--tinta-2); font-size: .92rem; }
.sub-linea .cabeza-sub .n-sub { margin-left: auto; color: var(--tinta-2); font-size: .88rem; white-space: nowrap; }
/* lista compacta de referencias (para no repetir 120 tarjetas grandes) */
.lista-refs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 800px) { .lista-refs { grid-template-columns: 1fr; } }
.ref {
display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center;
background: #fff; border: 1px solid var(--linea); border-radius: var(--r-sm);
padding: 10px 14px 10px 10px;
transition: border-color var(--trans), box-shadow var(--trans);
}
.ref:hover { border-color: #C3D2E8; box-shadow: var(--sombra); }
.ref .mini-foto {
width: 54px; height: 54px; border-radius: 8px; background: var(--fondo);
display: grid; place-items: center; overflow: hidden;
}
.ref .mini-foto img { max-width: 100%; max-height: 46px; width: auto; object-fit: contain; }
.ref .mini-foto .sin { color: #9FB0C9; }
.ref .txt { min-width: 0; }
.ref .txt b { display: block; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.ref .txt span { font-size: .78rem; color: var(--azul); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ref .cotiza {
width: 44px; height: 44px; border-radius: 999px; background: var(--wa); color: #fff;
display: grid; place-items: center; flex-shrink: 0;
transition: background var(--trans);
}
.ref .cotiza:hover { background: var(--wa-osc); text-decoration: none; }
/* ============================================================
HUB DE CATEGORÍAS — bloques por grupo
============================================================ */
.bloque-depto { margin-bottom: 52px; }
.bloque-depto:last-child { margin-bottom: 0; }
.bloque-titulo {
display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
}
.bloque-titulo h2 { font-size: 1.5rem; white-space: nowrap; }
.bloque-titulo .linea { flex: 1; height: 1px; background: var(--linea); }
.bloque-titulo .cuenta { color: var(--tinta-2); font-size: .9rem; white-space: nowrap; }
/* tarjeta de departamento destacada (la especialidad) */
.cat-card.destacada {
border-color: var(--naranja); border-width: 2px;
background: linear-gradient(180deg, #FFF9F5, #fff);
}
.cat-card.destacada .icono { background: linear-gradient(140deg, #FDEBDD, #FBDCC4); color: var(--naranja); }
.cat-card .marca-dest {
font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--naranja);
}
/* tarjeta de servicio dentro del hub */
.card-servicio {
background-color: var(--navy); color: #fff; border-radius: var(--r);
border: 1px solid #24406F; padding: 34px; position: relative; overflow: hidden;
display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
transition: border-color var(--trans), transform var(--trans);
}
.card-servicio:hover { border-color: #7FB1F5; transform: translateY(-3px); text-decoration: none; }
.card-servicio::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 48px 48px;
}
.card-servicio > * { position: relative; z-index: 1; }
.card-servicio h3 { font-size: 1.7rem; color: #fff; margin-bottom: 10px; }
.card-servicio p { color: #B9C7DE; max-width: 52ch; }
.card-servicio .equipos-mini { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.card-servicio .equipos-mini span {
font-size: .82rem; color: #D7E1F2; border: 1px solid var(--vidrio-borde);
background: var(--vidrio); padding: 5px 12px; border-radius: 999px;
}
@media (max-width: 700px) {
.card-servicio { grid-template-columns: 1fr; padding: 26px; }
}
/* ============================================================
PLANTA DESTACADA — foto real + video vertical de la unidad
============================================================ */
.planta-destacada {
background-color: var(--navy); color: #fff; position: relative; overflow: hidden;
padding: 76px 0;
}
.planta-destacada::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 60px 60px;
}
.planta-destacada::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--cinta);
}
.planta-destacada .contenedor { position: relative; z-index: 1; }
.pd-cabeza { max-width: 62ch; margin-bottom: 40px; }
.pd-cabeza h2 { color: #fff; margin-top: 10px; }
.pd-cabeza p { color: #B9C7DE; margin-top: 14px; font-size: 1.05rem; }
/* foto grande + video vertical al lado */
.pd-grid { display: grid; grid-template-columns: 1.55fr .45fr; gap: 26px; align-items: stretch; }
@media (max-width: 900px) { .pd-grid { grid-template-columns: 1fr; } }
.pd-foto {
position: relative; border-radius: var(--r); overflow: hidden;
border: 1px solid var(--vidrio-borde); background: #0B1526;
min-height: 340px;
}
.pd-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La foto de estudio va recortada: con `cover` se le comía la máquina. Se
encaja entera y se deja aire abajo para que el rótulo no le monte encima. */
.pd-foto img.recorte {
object-fit: contain;
padding: 30px 30px 92px;
filter: drop-shadow(0 22px 26px rgba(0,0,0,.45));
}
/* En móvil el rótulo se apila (título + subtítulo + botón) y ocupa el doble,
así que hace falta más hueco abajo y una caja más alta para compensarlo. */
@media (max-width: 640px) {
.pd-foto { min-height: 440px; }
.pd-foto img.recorte { padding: 22px 18px 180px; }
}
/* velo inferior para que la insignia se lea sobre cualquier foto */
.pd-foto::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
background: linear-gradient(transparent, rgba(11,21,38,.82));
pointer-events: none;
}
.pd-info {
position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 2;
display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.pd-info h3 { font-size: 1.8rem; color: #fff; }
.pd-info .pd-sub { color: #C0CDE2; font-size: .95rem; margin-top: 4px; }
.pd-sello {
position: absolute; top: 20px; left: 20px; z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
background: rgba(18,135,73,.92); color: #fff; font-weight: 600; font-size: .82rem;
padding: 7px 14px; border-radius: 999px;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* marco vertical del video, tipo teléfono */
.pd-video {
position: relative; border-radius: var(--r); overflow: hidden;
border: 1px solid var(--vidrio-borde); background: #0B1526;
aspect-ratio: 9 / 16; min-height: 340px;
}
.pd-video video {
width: 100%; height: 100%; object-fit: cover; display: block;
background: #0B1526;
}
.pd-video .pd-etiqueta-video {
position: absolute; top: 16px; left: 16px; z-index: 2;
background: rgba(11,21,38,.72); color: #E8EEF9; font-size: .78rem; font-weight: 600;
padding: 6px 12px; border-radius: 999px;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pd-controles {
position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; gap: 8px;
}
.pd-ctrl {
width: 44px; height: 44px; border-radius: 999px;
background: rgba(11,21,38,.7); border: 1px solid var(--vidrio-borde); color: #fff;
display: grid; place-items: center;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
transition: background var(--trans), border-color var(--trans);
}
.pd-ctrl:hover { background: rgba(11,21,38,.92); border-color: #7FB1F5; }
/* fila de datos bajo la foto */
.pd-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
@media (max-width: 860px) { .pd-datos { grid-template-columns: repeat(2, 1fr); } }
.pd-dato {
border: 1px solid var(--vidrio-borde); border-radius: var(--r-sm);
padding: 18px 20px; background: var(--vidrio);
display: flex; gap: 13px; align-items: flex-start;
}
.pd-dato .ic { color: #FF9A5C; flex-shrink: 0; margin-top: 2px; }
.pd-dato b { display: block; font-size: .96rem; color: #fff; }
.pd-dato span { color: #9DB0CE; font-size: .84rem; }
/* ============================================================
RITMO DE SECCIONES — bandas alternas (adaptado de estrella.com.do)
Un fondo plano que cambia cada dos secciones da sensación de
documento corporativo. Se combina con nuestra cinta industrial.
============================================================ */
.banda-clara { background: var(--fondo); }
.banda-blanca { background: #fff; }
.banda-gris {
background: #E7ECF3; position: relative;
}
.banda-gris::before, .banda-clara::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(15,29,56,.045) 1px, transparent 1px);
background-size: 30px 30px;
}
.banda-gris > *, .banda-clara > * { position: relative; z-index: 1; }
.banda-clara, .banda-gris { position: relative; }
/* ============================================================
BLOQUES CON MARCO — datos duros en cajas de línea fina
============================================================ */
.grid-marcos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid-marcos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid-marcos { grid-template-columns: 1fr; } }
.marco-dato {
border: 1px solid var(--linea); border-radius: var(--r-sm);
padding: 26px 24px; background: #fff;
display: flex; flex-direction: column; gap: 8px; min-height: 158px;
transition: border-color var(--trans), transform var(--trans);
}
.marco-dato:hover { border-color: var(--azul); transform: translateY(-3px); }
.marco-dato .ic-marco { color: var(--azul); }
.marco-dato b {
font-family: var(--f-display); font-size: 2rem; font-weight: 700;
line-height: 1; color: var(--navy); letter-spacing: -.01em;
}
.marco-dato .et { font-size: .95rem; font-weight: 600; color: var(--tinta); }
.marco-dato span { color: var(--tinta-2); font-size: .88rem; }
/* variante sobre fondo oscuro */
.marco-dato.oscuro {
background: transparent; border-color: rgba(255,255,255,.24); color: #fff;
}
.marco-dato.oscuro b, .marco-dato.oscuro .et { color: #fff; }
.marco-dato.oscuro span { color: #B9C7DE; }
.marco-dato.oscuro .ic-marco { color: #FF9A5C; }
.marco-dato.oscuro:hover { border-color: #7FB1F5; }
/* ============================================================
FLIPBOOK 3D — visor de catálogos tipo libro
============================================================ */
.fb-escena {
position: relative; background-color: var(--navy); border-radius: var(--r);
padding: 34px 20px 26px; overflow: hidden;
}
.fb-escena::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 56px 56px;
}
.fb-marco {
position: relative; z-index: 1;
/* la perspectiva es lo que da la sensación de página levantándose */
perspective: 2600px;
/* display:block a propósito: con grid + place-items:center el contenedor se
encoge a su contenido, y como las hojas van en position:absolute el ancho
resolvía a 0 — el libro desaparecía. */
display: block;
}
.fb-libro {
position: relative;
width: min(100%, 1040px);
margin: 0 auto;
/* 2 páginas de 1102×1426 → relación 1.546 : 1 */
aspect-ratio: 1.546 / 1;
transform-style: preserve-3d;
cursor: pointer;
transition: transform .5s cubic-bezier(.22,.8,.36,1);
}
/* Las hojas viven en la mitad DERECHA del libro (left:50%). Cerrado en la
portada solo se ve esa mitad, así que hay que correr el libro media página
hacia la izquierda para centrarla. Cerrado al final se ve la mitad izquierda
y el desplazamiento va al revés. Abierto, el lomo ya cae en el centro. */
.fb-libro.fb-cerrado-inicio { transform: translateX(-25%); }
.fb-libro.fb-cerrado-final { transform: translateX(25%); }
.fb-libro:not(.fb-cerrado-inicio):not(.fb-cerrado-final) { transform: translateX(0); }
.fb-hoja {
position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
transform-style: preserve-3d;
transform-origin: left center;
transition: transform .62s cubic-bezier(.42,0,.28,1);
will-change: transform;
}
.fb-hoja.fb-pasada { transform: rotateY(-180deg); }
.fb-cara {
position: absolute; inset: 0; overflow: hidden;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
background: #fff;
box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.fb-cara img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.fb-recto { border-radius: 0 6px 6px 0; }
.fb-verso { border-radius: 6px 0 0 6px; transform: rotateY(180deg); }
.fb-vacia { background: #EDF1F7; }
/* número de página impreso en la esquina */
/* #5D7089 da 5.07:1 sobre el fondo blanco de la pastilla; #93A3B9 daba 2.57 */
.fb-num {
position: absolute; bottom: 8px; font-size: .7rem; color: #5D7089;
background: rgba(255,255,255,.92); padding: 2px 8px; border-radius: 999px;
}
.fb-recto .fb-num { right: 12px; }
.fb-verso .fb-num { left: 12px; }
/* degradado del lomo: vende la idea de papel doblándose */
.fb-sombra-lomo {
position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none;
}
.fb-recto .fb-sombra-lomo { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.22), transparent); }
.fb-verso .fb-sombra-lomo { right: 0; background: linear-gradient(-90deg, rgba(0,0,0,.22), transparent); }
/* una sola página en móvil */
.fb-libro.fb-una-pagina { aspect-ratio: .773 / 1; transform: none !important; }
.fb-libro.fb-una-pagina .fb-hoja { left: 0; width: 100%; }
.fb-libro.fb-una-pagina .fb-recto { border-radius: 6px; }
.fb-libro.fb-una-pagina .fb-verso { display: none; }
@media (prefers-reduced-motion: reduce) {
.fb-hoja, .fb-libro { transition: none; }
}
/* ---- controles ---- */
.fb-controles {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: center; gap: 14px;
margin-top: 22px; flex-wrap: wrap;
}
.fb-btn {
width: 48px; height: 48px; border-radius: 999px;
background: rgba(255,255,255,.10); border: 1px solid var(--vidrio-borde);
color: #fff; display: grid; place-items: center;
transition: background var(--trans), border-color var(--trans), opacity var(--trans);
}
.fb-btn:hover:not(:disabled) { background: rgba(255,255,255,.22); border-color: #7FB1F5; }
.fb-btn:disabled { opacity: .32; cursor: not-allowed; }
.fb-indicador {
color: #C0CDE2; font-size: .92rem; min-width: 122px; text-align: center;
font-variant-numeric: tabular-nums;
}
.fb-indicador b { color: #fff; }
.fb-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.fb-accion {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
border-radius: 999px; border: 1px solid var(--vidrio-borde);
background: rgba(255,255,255,.06); color: #E8EEF9; font-size: .9rem; font-weight: 600;
transition: background var(--trans), border-color var(--trans);
}
.fb-accion:hover { background: rgba(255,255,255,.16); border-color: #7FB1F5; text-decoration: none; }
.fb-accion.destacada { background: var(--naranja); border-color: transparent; color: #fff; }
.fb-accion.destacada:hover { background: var(--naranja-osc); }
/* barra de progreso */
.fb-progreso {
position: relative; z-index: 2; height: 4px; border-radius: 999px;
background: rgba(255,255,255,.14); margin: 20px auto 0; max-width: 420px; overflow: hidden;
}
.fb-progreso span { display: block; height: 100%; background: var(--naranja); border-radius: 999px; transition: width .4s ease; }
/* selector de catálogo */
.fb-selector { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.fb-tab {
display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 18px;
border-radius: 999px; border: 1px solid var(--linea); background: #fff;
color: var(--tinta-2); font-weight: 600; font-size: .92rem;
transition: border-color var(--trans), color var(--trans), background var(--trans);
}
.fb-tab:hover { border-color: var(--azul); color: var(--azul); }
.fb-tab[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.fb-tab .n-pag { font-size: .78rem; opacity: .72; font-weight: 400; }
/* pantalla completa */
.fb-escena:fullscreen { border-radius: 0; padding: 30px 24px; display: grid; align-content: center; }
.fb-escena:fullscreen .fb-libro { width: min(100%, 1400px); }
/* rejilla de portadas */
.grid-portadas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid-portadas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-portadas { grid-template-columns: 1fr; } }
.portada-cat {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
overflow: hidden; display: flex; flex-direction: column;
transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.portada-cat:hover { border-color: var(--azul); box-shadow: var(--sombra-hover); transform: translateY(-4px); text-decoration: none; }
.portada-cat .mini {
aspect-ratio: 1.1 / 1; background: var(--fondo); display: grid; place-items: center;
padding: 20px; border-bottom: 1px solid var(--fondo); overflow: hidden;
}
.portada-cat .mini img {
max-height: 100%; width: auto; object-fit: contain;
box-shadow: 0 8px 22px -8px rgba(15,29,56,.4); border-radius: 3px;
transition: transform .45s cubic-bezier(.22,.8,.36,1);
}
.portada-cat:hover .mini img { transform: translateY(-4px) scale(1.03); }
.portada-cat .datos-cat { padding: 20px 22px 24px; display: grid; gap: 6px; flex: 1; }
.portada-cat h3 { font-size: 1.2rem; }
.portada-cat .sub-cat { color: var(--tinta-2); font-size: .9rem; }
.portada-cat .pie-cat {
margin-top: auto; padding-top: 14px; display: flex; align-items: center;
justify-content: space-between; gap: 10px;
}
.portada-cat .meta-cat { font-size: .8rem; color: #5D7089; }
.portada-cat .leer { color: var(--azul); font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }
/* ============================================================
TABLA DE MODELOS — especificaciones reales del catálogo
============================================================ */
.tabla-modelos { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--r); background: #fff; }
.tabla-modelos table { width: 100%; border-collapse: collapse; min-width: 620px; }
.tabla-modelos thead th {
background: var(--navy); color: #fff; text-align: left; padding: 14px 18px;
font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em;
font-size: .88rem; font-weight: 600; white-space: nowrap;
}
.tabla-modelos tbody td { padding: 13px 18px; border-top: 1px solid var(--linea); font-size: .92rem; vertical-align: middle; }
.tabla-modelos tbody tr:nth-child(even) { background: #FAFCFE; }
.tabla-modelos tbody tr:hover { background: #F2F6FC; }
.tabla-modelos .modelo { font-weight: 700; color: var(--navy); white-space: nowrap; }
.tabla-modelos .cap { font-weight: 600; color: var(--azul); white-space: nowrap; }
.tabla-modelos .motor { color: var(--tinta-2); font-size: .86rem; }
.tabla-modelos .acc { text-align: right; }
.tabla-modelos .acc a {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
border-radius: 999px; background: var(--wa); color: #fff; font-size: .84rem; font-weight: 600;
white-space: nowrap; transition: background var(--trans);
}
.tabla-modelos .acc a:hover { background: var(--wa-osc); text-decoration: none; }
.grupo-tabla { margin-bottom: 34px; }
.grupo-tabla h3 {
font-size: 1.2rem; margin-bottom: 12px; display: flex; align-items: center; gap: 12px;
}
.grupo-tabla h3 .n-mod { font-family: var(--f-cuerpo); font-size: .84rem; font-weight: 400; color: var(--tinta-2); text-transform: none; letter-spacing: 0; }
.nota-tabla { color: var(--tinta-2); font-size: .88rem; margin-top: 14px; }
/* ============================================================
FICHAS DE MARCA — logo + descripción (estilo distribuidora)
============================================================ */
.grid-marcas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .grid-marcas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-marcas { grid-template-columns: 1fr; } }
.ficha-marca {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
display: flex; flex-direction: column; overflow: hidden;
transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.ficha-marca:hover { border-color: #C3D2E8; box-shadow: var(--sombra-hover); transform: translateY(-3px); text-decoration: none; }
.ficha-marca .logo-caja {
height: 96px; display: grid; place-items: center; padding: 18px 24px;
border-bottom: 1px solid var(--fondo); background: #fff;
}
/* height fija + width auto evita el salto de layout al cargar el logo,
sin necesidad de poner width/height en cada ![]()
del HTML generado */
.ficha-marca .logo-caja img { height: 46px; max-width: 100%; width: auto; object-fit: contain; }
.ficha-marca .logo-caja .nombre-txt {
font-family: var(--f-display); text-transform: uppercase; font-size: 1.45rem;
font-weight: 700; letter-spacing: .02em; color: var(--navy); text-align: center; line-height: 1.05;
}
.ficha-marca .cuerpo-m { padding: 18px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.ficha-marca .cuerpo-m p { color: var(--tinta-2); font-size: .9rem; line-height: 1.5; }
/* Foto de producto en la ficha: para las marcas que aún no tienen nada cargado
en el catálogo, es lo único que las hace tangibles. */
.ficha-marca .foto-marca {
display: block; margin-top: 14px; padding: 12px;
background: linear-gradient(170deg, #FBFCFE 0%, #F1F5FB 100%);
border-radius: var(--r-sm); text-align: center;
}
.ficha-marca .foto-marca img {
max-width: 100%; max-height: 130px; width: auto; object-fit: contain;
filter: drop-shadow(0 8px 12px rgba(15,29,56,.18));
}
.ficha-marca .pie-m {
margin-top: auto; padding-top: 14px; display: flex; align-items: center;
justify-content: space-between; gap: 10px;
}
/* #5D7089 da 5.07:1 sobre blanco; el #7A8CA6 anterior solo llegaba a 3.43:1 */
.ficha-marca .n-prod { font-size: .8rem; color: #5D7089; }
.ficha-marca .ver-m { color: var(--azul); font-weight: 600; font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }
.ficha-marca:hover .ver-m { color: var(--azul-osc); }
.ficha-marca .etiqueta-propia {
align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--naranja);
background: #FDEBDD; padding: 4px 10px; border-radius: 999px;
}
/* ============================================================
NOVEDADES — tarjetas con foto grande (estilo ILP)
============================================================ */
.grid-novedades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid-novedades { grid-template-columns: 1fr; } }
.novedad {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
overflow: hidden; display: flex; flex-direction: column;
transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.novedad:hover { border-color: #C3D2E8; box-shadow: var(--sombra-hover); transform: translateY(-4px); text-decoration: none; }
.novedad .foto-n {
aspect-ratio: 16 / 10; background: var(--fondo); display: grid; place-items: center;
overflow: hidden; padding: 20px; border-bottom: 1px solid var(--fondo);
}
.novedad .foto-n img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; transition: transform .5s cubic-bezier(.22,.8,.36,1); }
.novedad:hover .foto-n img { transform: scale(1.06); }
.novedad .cuerpo-n { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.novedad .cuerpo-n .etiqueta-n {
align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--azul); background: #E7EEF9;
padding: 5px 11px; border-radius: 999px;
}
.novedad h3 { font-size: 1.25rem; line-height: 1.15; }
.novedad p { color: var(--tinta-2); font-size: .92rem; }
.novedad .ver-n { margin-top: auto; padding-top: 12px; color: var(--azul); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }
/* ============================================================
BANDA DE GARANTÍA — franja de confianza
============================================================ */
.garantia {
background-color: var(--navy); color: #fff; position: relative; overflow: hidden;
padding: 52px 0;
}
.garantia::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 56px 56px;
}
.garantia .contenedor {
position: relative; z-index: 1; display: grid;
grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
}
.garantia .escudo {
width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
background: rgba(255,255,255,.08); border: 1px solid var(--vidrio-borde);
display: grid; place-items: center; color: #FF9A5C;
}
.garantia h2 { font-size: 1.7rem; color: #fff; }
.garantia p { color: #B9C7DE; margin-top: 6px; max-width: 62ch; }
@media (max-width: 860px) {
.garantia .contenedor { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
/* ============================================================
TESTIMONIOS
============================================================ */
.testimonios { background: var(--fondo); }
.grid-testi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-testi { grid-template-columns: 1fr; } }
.testi {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
padding: 28px 26px; display: flex; flex-direction: column; gap: 16px;
border-top: 3px solid var(--azul); border-radius: 0 0 var(--r) var(--r);
}
.testi .comillas { color: #C3D2E8; }
.testi p { color: var(--tinta); font-size: .98rem; line-height: 1.6; flex: 1; }
.testi .autor { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--fondo); }
.testi .autor .inicial {
width: 42px; height: 42px; border-radius: 50%; background: #E7EEF9; color: var(--azul);
display: grid; place-items: center; font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
.testi .autor b { display: block; font-size: .94rem; }
.testi .autor span { color: var(--tinta-2); font-size: .84rem; }
/* Aviso de contenido pendiente — se quita al poner testimonios reales */
.testi.pendiente { border-top-color: #EF9F27; background: #FFFCF6; }
.testi.pendiente p { color: var(--tinta-2); font-style: italic; }
.aviso-pendiente {
background: #FAEEDA; border: 1px solid #FAC775; border-radius: var(--r-sm);
padding: 14px 18px; color: #854F0B; font-size: .9rem; margin-bottom: 22px;
display: flex; gap: 10px; align-items: flex-start;
}
.aviso-pendiente svg { flex-shrink: 0; margin-top: 2px; }
/* ============================================================
SELECTOR DE IDIOMA
============================================================ */
.idioma { display: inline-flex; align-items: center; gap: 2px; }
.idioma button {
min-height: 38px; min-width: 44px; padding: 0 9px; color: #8FA3C4; font-size: .82rem;
font-weight: 600; letter-spacing: .04em; transition: color var(--trans);
}
.idioma button[aria-current="true"] { color: #fff; }
.idioma button:hover { color: #E8EEF9; }
.idioma .sep { color: #4E648C; font-size: .8rem; }
@media (max-width: 700px) { .idioma button { min-height: 44px; } }
/* ============================================================
BANDA DE MARCAS — credencial de distribución, no marquesina
============================================================ */
.banda-marcas { background: #fff; border-block: 1px solid var(--linea); padding: 40px 0; }
.banda-marcas .titulo-banda {
text-align: center; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--tinta-2); font-weight: 600; margin-bottom: 26px;
}
.banda-marcas .fila {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 6px 30px;
}
/* área táctil de 44px alrededor del logo/texto, sin cambiar cómo se ve */
.banda-marcas .logo-m, .banda-marcas .txt-m {
display: inline-flex; align-items: center; min-height: 44px;
}
.banda-marcas .logo-m img {
/* Tope de ancho + object-fit: hay logotipos muy alargados (MisterCool mide
6.5 veces su alto) que a igual altura salían al triple de ancho que el
resto y se comían la fila. Con el tope se encogen hasta caber, sin
deformarse. */
height: 34px; width: auto; max-width: 128px; object-fit: contain;
opacity: .78;
filter: grayscale(1);
transition: opacity var(--trans), filter var(--trans);
}
.banda-marcas .logo-m:hover img { opacity: 1; filter: grayscale(0); }
.banda-marcas .txt-m {
font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em;
font-weight: 600; font-size: 1.02rem; color: #7A8CA6;
transition: color var(--trans);
}
.banda-marcas a.txt-m:hover { color: var(--azul); text-decoration: none; }
/* ===== Hero showroom — el slider ocupa el ancho completo =====
Tres capas que se mueven a velocidades distintas al cambiar de producto:
palabra gigante de la marca (la más lenta, al fondo) → foto → ficha.
Ese desfase es lo que da profundidad; quien lo anima es Motion, en app.js.
Sin caja: el producto va recortado y flota sobre el navy, con un foco
detrás y una sombra elíptica de "suelo" debajo. */
.hero-show { padding: 40px 0 50px; }
.hero-show .contenedor {
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 40px; align-items: center;
}
.hs-intro { position: relative; z-index: 3; }
/* El titular baja de tamaño: aquí el peso visual lo lleva el producto. */
.hero-show h1 { font-size: clamp(2.3rem, 4.4vw, 3.7rem); }
.hero-show p.baja { font-size: 1.05rem; max-width: 44ch; margin: 20px 0 30px; }
/* Ojo al tocar esto: cabecera + padding + este alto tienen que caber en la
pantalla, si no la ficha del producto se va debajo del pliegue. */
.hs-marco { position: relative; min-height: min(68vh, 590px); }
/* Foco cenital: el halo que da sensación de vitrina iluminada. */
.hs-marco::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
left: 50%; top: 0; width: 82%; aspect-ratio: 1;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(127,177,245,.30) 0%, rgba(127,177,245,.10) 42%, transparent 68%);
}
/* Por encima de .hs-intro (z-index 3) a propósito: el producto se sale hacia
la izquierda y tiene que pasar POR DELANTE del titular, no por detrás. */
.hs-pista { position: absolute; inset: 0; z-index: 4; }
.hs-slide {
position: absolute; inset: 0; display: grid;
/* Una sola columna, declarada: si no, la ficha (fila 2) no cabe junto a la
foto (que ocupa 1/-1) y el grid le inventa una segunda columna, dejando
a la foto con la mitad del ancho. */
grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto;
opacity: 0; pointer-events: none;
}
.hs-slide.activo { opacity: 1; pointer-events: auto; }
/* Con Motion cargado, app.js pone .motion-on y el cambio de slide lo maneja él.
Sin Motion queda este fundido CSS: la portada nunca se rompe si el bundle
no carga, solo pierde el desplazamiento de las capas. */
.hs-pista:not(.motion-on) .hs-slide { transition: opacity .55s ease; }
.hs-pista.motion-on .hs-slide,
.hs-pista.motion-on .hs-palabra,
.hs-pista.motion-on .hs-foto { will-change: opacity, transform; }
/* --- capa de fondo: la marca en tipografía gigante --- */
.hs-palabra {
position: absolute; z-index: 0; top: 44%; margin-top: -.42em;
left: -38%; right: -12%;
font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
font-size: clamp(4.5rem, 12.5vw, 11rem); line-height: .84; letter-spacing: -.035em;
text-align: center; white-space: nowrap; pointer-events: none;
color: rgba(255,255,255,.06);
-webkit-text-stroke: 1px rgba(127,177,245,.14);
/* se apaga hacia la izquierda para no pelearse con el titular */
mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 88%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 88%, transparent 100%);
}
/* --- capa central: la foto, tamaño póster ---
Ocupa las dos filas del slide y se sale por la izquierda con margen negativo:
así queda enorme y monta sobre el titular. pointer-events:none es obligatorio,
porque al invadir la columna izquierda se tragaría los clics de los botones. */
.hs-foto {
position: relative; z-index: 1; grid-area: 1 / 1 / -1 / -1; pointer-events: none;
/* left, no transform: el transform es de Motion y lo pisaría en cada cambio */
left: -14%; margin-left: -18%; margin-right: -4%; padding: 0;
/* place-content en vez de place-items: así la celda mide lo que mide la
imagen, y la sombra de suelo puede anclarse a SU base y no a la del bloque. */
display: grid; place-content: center; place-items: center;
}
.hs-foto img {
grid-area: 1 / 1; position: relative; z-index: 1;
/* height y no max-height: los recortes miden 440–530 px de alto, así que con
max-height la mayoría se quedaba a tamaño natural y no crecía nada. Forzar
la altura los sube como mucho un 15%, que no se nota, y los iguala. */
height: min(54vh, 460px); width: auto; object-fit: contain;
/* Sombra proyectada real sobre la silueta recortada, no sobre una caja. */
filter: drop-shadow(0 34px 40px rgba(0,0,0,.62));
}
/* El titular y la bajada cambian con el slide: una transición corta evita el
corte seco del texto al reemplazarse. */
.hs-intro h1, .hs-intro .baja { transition: opacity .28s ease; }
@media (prefers-reduced-motion: reduce) {
.hs-intro h1, .hs-intro .baja { transition: none; }
}
/* Foto de la tarjeta de novedad: las fotos verticales (gomas, plantas) se
recortaban por arriba. Se encuadra por el centro. */
.novedad .foto-n img { object-fit: cover; object-position: center; }
/* Slide de FOTO real, no recorte: va enmarcada, con esquinas redondeadas y
borde, porque una foto rectangular flotando sin marco parece un recorte que
salió mal. */
.hs-foto.hs-real img {
/* Las fotos son verticales (600x900): con poca altura salen estrechas y la
ficha del producto les tapaba el pedestal de la marca. */
height: min(58vh, 470px); width: auto; max-width: 100%;
object-fit: cover; border-radius: var(--r);
border: 1px solid rgba(255,255,255,.16);
box-shadow: 0 30px 60px -22px rgba(0,0,0,.75);
filter: none;
/* Sin flotar ni inclinarse: la inclinación es para los recortes, que no
tienen caja. En una foto enmarcada se ve como un cuadro torcido, y encima
el ancho extra que gana al girar se metía debajo del titular. */
animation: none !important;
transform: none !important;
}
.hs-foto.hs-real::after { display: none; } /* sin la elipse de suelo */
/* El contenedor se corre a la izquierda para que los recortes invadan el
titular a propósito; una foto con marco no debe hacerlo. */
.hs-foto.hs-real {
left: 0; margin-left: 0;
/* Se sube para que la ficha del producto, que va anclada abajo, quede por
debajo de la foto y no encima del producto. */
align-self: start; margin-top: 4px; margin-bottom: 96px;
}
/* Sombra de suelo: la elipse difusa que asienta el producto. */
.hs-foto::after {
content: ""; grid-area: 1 / 1; align-self: end; justify-self: center;
width: 72%; height: 30px; border-radius: 50%; margin-bottom: -15px;
background: radial-gradient(ellipse, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 45%, transparent 72%);
filter: blur(7px);
}
/* La inclinación va DENTRO del keyframe a propósito: una animación CSS le gana
a cualquier transform en línea, así que si la pusiera aparte, al flotar se
perdería el giro. Motion anima el contenedor .hs-foto, no la ![]()
. */
.hs-slide.activo .hs-foto img { animation: hsFlota 7s ease-in-out infinite alternate; }
@keyframes hsFlota {
from { transform: translateY(0) rotate(-7deg) scale(1); }
to { transform: translateY(-14px) rotate(-5.4deg) scale(1.025); }
}
/* --- capa de frente: la ficha del producto --- */
.hs-datos {
position: relative; z-index: 2; grid-area: 2 / 1; pointer-events: auto;
justify-self: end; align-self: end;
width: min(100%, 400px); padding: 18px 20px; color: #fff;
display: grid; gap: 10px; border-radius: var(--r-sm);
border: 1px solid var(--vidrio-borde);
/* Navy translúcido y no blanco: ahora el producto pasa POR DETRÁS de la
ficha, y con vidrio claro el texto quedaba ilegible sobre la foto. */
background: linear-gradient(165deg, rgba(11,25,52,.84), rgba(11,25,52,.68));
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hs-datos .marca {
font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: #7FB1F5; display: flex; align-items: center; gap: 10px;
}
.hs-datos .marca::after { content: ""; flex: 1; height: 1px; background: var(--vidrio-borde); }
.hs-datos h3 {
font-size: 1.4rem; line-height: 1.12; color: #fff;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 2.24em;
}
.hs-datos .pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hs-datos .cat { color: #9DB0CE; font-size: .86rem; }
.hs-cta {
display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px;
border-radius: 999px; background: var(--wa); color: #fff; font-weight: 600; font-size: .92rem;
transition: background var(--trans), transform var(--trans);
}
.hs-cta:hover { background: var(--wa-osc); text-decoration: none; transform: translateY(-1px); }
/* --- controles: fila bajo el titular, como en las portadas de producto --- */
/* wrap obligatorio: sin él, el ancho mínimo de esta fila (~400px) estira la
columna del grid y desborda la pantalla en móvil. */
.hs-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hs-nav {
width: 50px; height: 50px; border-radius: 999px; flex-shrink: 0;
background: rgba(255,255,255,.08); border: 1px solid var(--vidrio-borde);
color: #fff; display: grid; place-items: center;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
transition: background var(--trans), border-color var(--trans), transform var(--trans);
}
.hs-nav:hover { background: rgba(255,255,255,.2); border-color: #7FB1F5; }
.hs-nav:active { transform: scale(.93); }
.hs-contador {
font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
letter-spacing: .12em; color: #6E85A8; margin-left: 4px;
}
.hs-contador b { color: #fff; font-weight: 700; }
.hs-puntos { display: flex; gap: 8px; margin-left: auto; }
/* La barra visual mide 4px, pero el botón ocupa 44px de alto para que se
pueda tocar con el dedo. El ::before es lo que se ve. */
.hs-puntos button {
width: 30px; height: 44px; background: none; display: grid; align-items: center;
transition: width var(--trans);
}
.hs-puntos button::before {
content: ""; display: block; width: 100%; height: 4px; border-radius: 999px;
background: rgba(255,255,255,.28); transition: background var(--trans);
}
.hs-puntos button[aria-current="true"] { width: 48px; }
.hs-puntos button[aria-current="true"]::before { background: #FF9A5C; }
.hs-etiqueta {
position: absolute; top: 4px; right: 4px; z-index: 3;
background: rgba(18,135,73,.9); color: #fff; font-weight: 600; font-size: .8rem;
padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
@media (prefers-reduced-motion: reduce) {
/* sin flotar, pero conservando la inclinación de vitrina */
.hs-slide.activo .hs-foto img { animation: none; transform: rotate(-7deg); }
}
@media (max-width: 1100px) {
.hero-show .contenedor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.hs-marco { min-height: 520px; }
}
@media (max-width: 900px) {
.hero { padding: 64px 0 76px; }
/* minmax(0,…) y no 1fr: evita que el contenido más ancho de la columna
(la fila de controles) empuje el grid por encima del ancho de pantalla. */
.hero .contenedor { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.hs-marco { min-height: 460px; }
/* en móvil no hay columna izquierda que invadir: el producto se centra */
.hs-foto { left: 0; margin-left: -6%; margin-right: -6%; }
.hs-foto img { height: min(40vh, 300px); }
.hs-palabra { left: -18%; right: -18%; font-size: clamp(3.4rem, 21vw, 7rem); }
.hs-datos { justify-self: stretch; width: 100%; }
.hs-barra { margin-top: 26px; }
.hs-puntos { margin-left: 0; }
}
/* ===== Hero de renta — slider de equipos por detrás del texto =====
Aquí las fotos NO son recortes sino fotos de obra con fondo, así que en vez
de flotar como el hero de portada, pasan a pantalla completa por detrás con
un velo encima. El velo no es decorativo: sin él el titular blanco no pasa
contraste sobre fotos claras (planta blanca, tijerilla al sol). */
.hero-renta { position: relative; }
.hr-fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hr-slide {
position: absolute; inset: 0; opacity: 0;
background-size: cover; background-position: center;
}
.hr-slide.activo { opacity: 1; }
.hr-fondo:not(.motion-on) .hr-slide { transition: opacity 1s ease; }
.hr-fondo.motion-on .hr-slide { will-change: transform, opacity; }
/* El .75 de la banda del texto está medido, no elegido a ojo: con .68 el
párrafo gris (#C0CDE2) se quedaba en 3.79:1 sobre los blancos de las fotos,
por debajo del 4.5:1 de WCAG AA. Subirlo más solo apaga la foto. */
.hr-fondo::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, rgba(11,25,52,.5) 0%, rgba(11,25,52,0) 26%,
rgba(11,25,52,0) 74%, rgba(11,25,52,.5) 100%),
linear-gradient(180deg, rgba(11,25,52,.94) 0%, rgba(11,25,52,.75) 36%,
rgba(11,25,52,.78) 70%, rgba(11,25,52,.96) 100%);
}
/* la retícula técnica va POR ENCIMA de las fotos: las liga al resto del sitio */
.hero-renta::before { z-index: 1; }
.hr-etiqueta {
position: absolute; z-index: 2; bottom: 26px;
right: max(20px, calc(50% - 600px));
display: inline-flex; align-items: center; gap: 8px;
font-size: .82rem; color: #C0CDE2;
padding: 8px 14px; border-radius: 999px;
background: rgba(255,255,255,.07); border: 1px solid var(--vidrio-borde);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hr-etiqueta b { color: #fff; font-weight: 600; }
@media (max-width: 700px) {
.hr-etiqueta { bottom: 18px; right: 20px; left: 20px; justify-content: center; }
}
/* ---------- Categorías ---------- */
.grid-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat-card {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
padding: 26px 20px 22px; display: grid; gap: 12px; justify-items: start;
color: var(--tinta); position: relative; overflow: hidden;
box-shadow: var(--sombra);
transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
/* barra de acento que crece al pasar el cursor */
.cat-card::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: var(--grad-cta); transform: scaleX(0); transform-origin: left;
transition: transform var(--trans);
}
.cat-card:hover::before { transform: scaleX(1); }
.cat-card:hover { border-color: transparent; box-shadow: var(--sombra-hover); transform: translateY(-4px); text-decoration: none; }
.cat-card .icono {
width: 52px; height: 52px; border-radius: 14px;
background: linear-gradient(140deg, #EAF1FC, #DBE7F8); color: var(--azul);
display: grid; place-items: center;
transition: transform var(--trans), background var(--trans), color var(--trans);
}
.cat-card:hover .icono { transform: scale(1.08) rotate(-4deg); background: var(--grad-azul); color: #fff; }
.cat-card b { font-family: var(--f-display); text-transform: uppercase; font-size: 1.14rem; font-weight: 600; letter-spacing: 0; }
.cat-card span { color: var(--tinta-2); font-size: .86rem; }
@media (max-width: 1000px) { .grid-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .grid-cats { grid-template-columns: repeat(2, 1fr); } }
/* ---------- Marcas (marquee infinito, adaptado de InfiniteSlider) ---------- */
.marcas { background: #fff; border-block: 1px solid var(--linea); padding: 26px 0; }
.marcas .contenedor { display: flex; align-items: center; gap: 22px; }
.marcas .titulo-marcas {
flex-shrink: 0; max-width: 150px; text-align: right;
border-right: 1px solid var(--linea); padding-right: 22px;
}
.marquesina { position: relative; overflow: hidden; flex: 1; min-width: 0; }
.marquesina-pista {
display: flex; gap: 12px; width: max-content;
animation: marquesina 36s linear infinite;
}
.marquesina:hover .marquesina-pista { animation-play-state: paused; }
@keyframes marquesina {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* desvanecido en los bordes (equivalente ligero del ProgressiveBlur) */
.marquesina::before, .marquesina::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 72px; z-index: 2; pointer-events: none;
}
.marquesina::before { left: 0; background: linear-gradient(90deg, var(--fondo-marquee, #fff) 12%, transparent); }
.marquesina::after { right: 0; background: linear-gradient(-90deg, var(--fondo-marquee, #fff) 12%, transparent); }
/* marquee sobre secciones oscuras */
.vitrina .chip { color: #B9C7DE; border-color: #24406F; }
.vitrina a.chip:hover { color: #fff; border-color: #7FB1F5; }
@media (prefers-reduced-motion: reduce) {
.marquesina-pista { animation: none; flex-wrap: wrap; width: auto; }
.marquesina::before, .marquesina::after { display: none; }
.marquesina-pista .chip[aria-hidden="true"] { display: none; }
}
@media (max-width: 700px) { .marcas .titulo-marcas { display: none; } }
.marcas .lista { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chip {
font-family: var(--f-display); text-transform: uppercase; letter-spacing: .06em;
font-weight: 600; font-size: .95rem; color: var(--tinta-2);
border: 1px solid var(--linea); border-radius: 999px; padding: 0 18px;
min-height: 44px; display: inline-flex; align-items: center;
transition: color var(--trans), border-color var(--trans);
}
a.chip:hover { color: var(--azul); border-color: var(--azul); text-decoration: none; }
/* chips con logo real de la marca */
.chip-logo { padding: 0 16px; background: #fff; }
/* Mismo tope que en la banda: los logotipos muy alargados se encogen para
que todos los chips pesen visualmente lo mismo. */
.chip-logo img { height: 28px; width: auto; max-width: 110px; object-fit: contain; }
.vitrina .chip-logo { background: rgba(255,255,255,.94); border-color: transparent; }
/* Segundo enlace dentro de la tarjeta de catálogo: la tarjeta descarga el PDF,
esto abre el libro 3D. Va como y no como porque anidar enlaces es
HTML inválido; el clic lo intercepta el JS de catalogos.html. */
.cat-pdf .leer-3d {
margin-top: auto; padding-top: 10px;
display: inline-flex; align-items: center; min-height: 34px;
color: var(--azul); font-weight: 600; font-size: .88rem;
}
.cat-pdf .leer-3d:hover { text-decoration: underline; }
/* ---------- Cards de producto ---------- */
.grid-productos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .grid-productos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .grid-productos { grid-template-columns: repeat(2, 1fr); } }
.prod {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--sombra);
transition: box-shadow var(--trans), border-color var(--trans), transform var(--trans);
}
.prod:hover { box-shadow: var(--sombra-hover); border-color: transparent; transform: translateY(-4px); }
.prod .foto {
aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 16px; overflow: hidden;
background: linear-gradient(170deg, #FBFCFE 0%, #F1F5FB 100%);
border-bottom: 1px solid var(--fondo);
}
.prod .foto img { max-height: 100%; object-fit: contain; transition: transform var(--trans); }
.prod:hover .foto img { transform: scale(1.07); }
/* Fotos recortadas (PNG con transparencia): sin caja blanca que las encierre,
con sombra proyectada sobre la silueta para que asienten en la tarjeta. */
.prod .foto img.recorte {
/* .foto lleva aspect-ratio, así que su altura es indefinida durante el
cálculo y un max-height en % no resuelve: el recorte vertical se salía por
abajo. Se estira a la celda y se deja que object-fit haga el encaje. */
place-self: stretch; width: 100%; height: 100%; min-height: 0;
filter: drop-shadow(0 12px 14px rgba(15,29,56,.22));
/* Los recortes ya traen su propio margen dentro del lienzo cuadrado, así
que el relleno de la caja se recorta o el producto sale diminuto. */
margin: -8px;
}
.prod .foto .sin-foto { color: #9FB0C9; }
.prod .cuerpo { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.prod .marca { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); }
/* Con logo: se reconoce la marca de un vistazo, sin leer. Altura fija para que
la fila de la marca mida siempre lo mismo y las tarjetas no se desalineen,
y tope de ancho porque hay logotipos muy alargados. */
.prod .marca-logo {
display: flex; align-items: center; height: 22px;
}
.prod .marca-logo img {
max-height: 22px; max-width: 104px; width: auto; object-fit: contain;
object-position: left center;
}
.prod .nombre {
font-weight: 600; font-size: .95rem; line-height: 1.35; color: var(--tinta);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 2.7em;
}
.prod .cat { font-size: .8rem; color: var(--tinta-2); }
/* fila de acciones: Cotizar (WhatsApp directo) + agregar a lista */
.prod .acciones-prod { margin-top: auto; display: flex; gap: 8px; }
.prod .btn-wa-prod {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; border-radius: var(--r-sm); background: var(--wa); color: #fff;
font-weight: 600; font-size: .92rem; transition: background var(--trans);
}
.prod .btn-wa-prod:hover { background: var(--wa-osc); text-decoration: none; }
.prod .btn-add {
width: 44px; min-height: 44px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-sm); border: 2px solid var(--azul);
color: var(--azul); font-weight: 600;
transition: background var(--trans), color var(--trans);
}
.prod .btn-add:hover { background: var(--azul); color: #fff; }
.prod .btn-add.ya { background: var(--ok); border-color: var(--ok); color: #fff; }
/* ============================================================
RENTA — tarjetas grandes de equipo
============================================================ */
.grid-renta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 950px) { .grid-renta { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.equipo {
position: relative; border-radius: var(--r); overflow: hidden; background: #fff;
border: 1px solid var(--linea); box-shadow: var(--sombra);
display: flex; flex-direction: column;
transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.equipo:hover { box-shadow: var(--sombra-hover); transform: translateY(-5px); border-color: transparent; }
.equipo .foto {
position: relative; aspect-ratio: 4 / 3; overflow: hidden;
background: linear-gradient(165deg, #F7FAFE 0%, #E9F0FA 100%);
display: grid; place-items: center; padding: 20px;
}
.equipo .foto img { max-height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.22,.8,.36,1); }
/* Igual que en .prod: la caja lleva aspect-ratio, así que el max-height en %
no resuelve y el recorte se desbordaba. Se estira y encaja con object-fit. */
.equipo .foto img.recorte {
place-self: stretch; width: 100%; height: 100%; min-height: 0;
filter: drop-shadow(0 14px 16px rgba(15,29,56,.24));
}
.equipo:hover .foto img { transform: scale(1.08) rotate(-1deg); }
.equipo .insignia {
position: absolute; top: 14px; left: 14px;
background-color: var(--naranja); background-image: var(--grad-cta);
color: #fff; font-weight: 600; font-size: .76rem;
letter-spacing: .06em; text-transform: uppercase;
padding: 6px 13px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(194,65,12,.8);
}
.equipo .cuerpo { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.equipo h3 { font-size: 1.42rem; }
.equipo .desc { color: var(--tinta-2); font-size: .95rem; }
.equipo .specs { display: flex; flex-wrap: wrap; gap: 7px; }
.equipo .specs span {
font-size: .8rem; font-weight: 500; color: var(--tinta-2);
background: var(--fondo); border: 1px solid var(--linea);
padding: 5px 11px; border-radius: 999px;
}
.equipo .btn-wa-prod {
margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; border-radius: 999px; background: var(--wa); color: #fff; font-weight: 600;
transition: background var(--trans), transform var(--trans);
}
.equipo .btn-wa-prod:hover { background: var(--wa-osc); text-decoration: none; transform: translateY(-1px); }
/* ---------- Renta / bloque dividido ---------- */
.split {
color: #fff; position: relative; overflow: hidden;
background:
radial-gradient(700px 420px at 85% 15%, rgba(47,107,196,.32), transparent 62%),
radial-gradient(560px 340px at 8% 90%, rgba(194,65,12,.22), transparent 60%),
linear-gradient(160deg, #14284C, var(--navy)),
var(--navy); /* color de respaldo */
}
.split::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: var(--cinta); }
.split .contenedor { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split p { color: #B9C7DE; margin: 14px 0 26px; }
.split ul { list-style: none; display: grid; gap: 12px; margin-bottom: 30px; }
.split li { display: flex; gap: 10px; align-items: start; color: #D7E1F2; }
.split li svg { color: #FF9A5C; flex-shrink: 0; margin-top: 3px; }
.split .panel {
background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--r); padding: 32px;
display: grid; gap: 20px;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.split .panel .dato { display: flex; gap: 14px; align-items: center; }
.split .panel .dato .ic { width: 44px; height: 44px; border-radius: var(--r-sm); background: #1E355F; color: #7FB1F5; display: grid; place-items: center; flex-shrink: 0; }
.split .panel .dato b { display: block; }
.split .panel .dato span { color: #8FA3C4; font-size: .9rem; }
@media (max-width: 900px) { .split .contenedor { grid-template-columns: 1fr; } }
/* ---------- Catálogos PDF ---------- */
.grid-catalogos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat-pdf {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r); padding: 28px;
display: grid; gap: 13px; justify-items: start; box-shadow: var(--sombra);
color: var(--tinta);
transition: box-shadow var(--trans), border-color var(--trans), transform var(--trans);
}
.cat-pdf:hover { box-shadow: var(--sombra-hover); border-color: transparent; transform: translateY(-4px); text-decoration: none; }
.cat-pdf .ic {
width: 52px; height: 52px; border-radius: 14px;
background: linear-gradient(140deg, #FDEBDD, #FBDCC4); color: var(--naranja);
display: grid; place-items: center; transition: transform var(--trans);
}
.cat-pdf:hover .ic { transform: scale(1.08) rotate(-4deg); }
.cat-pdf span { color: var(--tinta-2); font-size: .9rem; }
/* --- variante con miniatura de una página real del catálogo ---
Va como variante y no tocando .cat-pdf porque esa clase se reusa como
tarjeta genérica con icono en nosotros.html y contacto.html. */
.cat-pdf.con-mini {
grid-template-columns: auto 1fr; gap: 16px;
align-items: center; justify-items: stretch;
/* menos padding que la tarjeta genérica: la miniatura ya ocupa 88px y en
3 columnas el texto se queda sin ancho y parte "3.2 MB" en dos líneas */
padding: 22px;
}
.cat-pdf .cuerpo { display: grid; gap: 8px; }
.cat-pdf .mini {
position: relative; width: 88px; aspect-ratio: 1102 / 1426;
}
/* Dos hojas asomando por detrás: da el grosor del catálogo sin descargar
ninguna imagen extra. */
.cat-pdf .mini::before, .cat-pdf .mini::after {
content: ""; position: absolute; inset: 0; border-radius: 4px;
background: #fff; border: 1px solid var(--linea);
transition: transform var(--trans);
}
.cat-pdf .mini::before { transform: translate(8px, -6px) rotate(4.5deg); }
.cat-pdf .mini::after { transform: translate(4px, -3px) rotate(2deg); }
.cat-pdf:hover .mini::before { transform: translate(12px, -9px) rotate(7.5deg); }
.cat-pdf:hover .mini::after { transform: translate(7px, -5px) rotate(3.5deg); }
.cat-pdf .mini img {
position: relative; z-index: 1;
width: 100%; height: 100%; object-fit: cover;
border-radius: 4px; border: 1px solid var(--linea);
box-shadow: 0 8px 16px -8px rgba(11,25,52,.4);
}
@media (prefers-reduced-motion: reduce) {
.cat-pdf .mini::before, .cat-pdf .mini::after { transition: none; }
}
@media (max-width: 800px) { .grid-catalogos { grid-template-columns: 1fr; } }
/* variantes de columnas (no usar estilos en línea: anularían estas media queries) */
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.estrecho { max-width: 900px; margin-inline: auto; }
.dos-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .dos-col { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 900px) { .cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }
/* ---------- Franja confianza ---------- */
.confianza { background: #fff; border-top: 1px solid var(--linea); padding: 72px 0; }
.confianza .contenedor { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.conf { display: flex; gap: 16px; align-items: start; }
.conf .ic {
width: 52px; height: 52px; border-radius: 14px;
background: linear-gradient(140deg, #EAF1FC, #DBE7F8); color: var(--azul);
display: grid; place-items: center; flex-shrink: 0;
}
.conf b { display: block; font-size: 1.02rem; }
.conf span { color: var(--tinta-2); font-size: .92rem; }
@media (max-width: 800px) { .confianza .contenedor { grid-template-columns: 1fr; gap: 18px; } }
/* ---------- Footer ---------- */
.footer { background: var(--navy); color: #B9C7DE; position: relative; margin-top: 0; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--cinta); }
.footer .contenedor { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; padding-top: 56px; padding-bottom: 40px; }
.footer h3 { color: #fff; margin-bottom: 14px; font-size: 1.05rem; letter-spacing: .08em; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer a { color: #B9C7DE; }
.footer a:hover { color: #fff; }
.footer .contacto li { display: flex; gap: 10px; align-items: start; }
.footer .contacto svg { flex-shrink: 0; margin-top: 3px; color: #7FB1F5; }
.footer .legal { border-top: 1px solid #24406F; padding: 18px 0; font-size: .85rem; }
.footer .legal .contenedor { display: flex; justify-content: space-between; gap: 12px; padding-top: 0; padding-bottom: 0; flex-wrap: wrap; }
.footer .logo-pie { background: #fff; border-radius: var(--r-sm); padding: 8px 14px; display: inline-block; margin-bottom: 16px; }
.footer .logo-pie img { height: 36px; }
@media (max-width: 900px) { .footer .contenedor { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
.footer .contenedor { grid-template-columns: 1fr; }
.footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
.footer ul { gap: 0; }
.filtros label { min-height: 44px; }
}
/* ============================================================
CONTACTO — canales a la izquierda, mapa real a la derecha
La página anterior eran cuatro tarjetas iguales: no se veía cuál era el
canal bueno ni dónde queda la tienda. Ahora WhatsApp manda visualmente y
el mapa ancla la página, que es lo que busca quien entra aquí.
============================================================ */
.contacto-grid {
display: grid; grid-template-columns: 1.02fr .98fr; gap: 26px; align-items: stretch;
}
@media (max-width: 950px) { .contacto-grid { grid-template-columns: 1fr; } }
.canales { display: flex; flex-direction: column; gap: 12px; }
.canal {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
padding: 18px 20px; box-shadow: var(--sombra); color: var(--tinta);
transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.canal:hover, .canal:focus-visible {
border-color: transparent; box-shadow: var(--sombra-hover);
transform: translateY(-2px); text-decoration: none;
}
.canal .ic {
width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px;
display: grid; place-items: center; background: var(--fondo); color: var(--azul);
}
.canal b { display: block; font-family: var(--f-display); font-size: 1.12rem; letter-spacing: .01em; }
.canal span { display: block; color: var(--tinta-2); font-size: .9rem; margin-top: 3px; }
.canal .flecha { color: #B6C4D9; transition: transform var(--trans), color var(--trans); }
.canal:hover .flecha { transform: translateX(4px); color: var(--azul); }
/* El canal que de verdad usa la gente: se sale de la fila para que se note. */
/* El degradado no puede aclararse más: con el #16A05A que tenía antes, ni el
blanco puro llegaba al 4.5:1 de AA (se quedaba en 3.95). Los dos extremos
de aquí dan 6.4:1 y 4.79:1. */
.canal-wa {
/* background-color aparte del degradado: si el degradado no pinta queda el
verde y no el fondo claro con texto blanco encima. Es el mismo fallo que
ya se corrigió una vez en el sitio y aquí se había vuelto a colar. */
background-color: #128749;
background-image: linear-gradient(140deg, #0E6E3C 0%, #128749 100%);
border-color: transparent; color: #fff; padding: 22px 20px;
}
.canal-wa .ic { background: rgba(255,255,255,.16); color: #fff; }
/* .95 y no .85: al 85% el texto secundario caía a 4.22:1 sobre el verde. */
.canal-wa span { color: rgba(255,255,255,.95); }
.canal-wa .flecha { color: rgba(255,255,255,.7); }
.canal-wa:hover .flecha { color: #fff; }
.canal-wa .etiqueta-wa {
display: inline-block; margin-bottom: 6px; padding: 3px 9px; border-radius: 999px;
/* Verde sólido y no blanco translúcido: sobre el translúcido el texto blanco
se queda en 1:1 de contraste calculado y, sobre todo, se ve flojo. */
background: #0B5C32; font-size: .68rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
/* ---- mapa ---- */
.mapa-caja {
position: relative; border-radius: var(--r); overflow: hidden;
border: 1px solid var(--linea); box-shadow: var(--sombra);
background: var(--fondo); min-height: 420px; display: flex;
}
.mapa-caja iframe { flex: 1; width: 100%; border: 0; display: block; min-height: 420px; }
/* Ficha sobre el mapa: si el iframe no carga —sin internet, o abierto por
doble clic— la dirección y los botones siguen ahí. */
.mapa-ficha {
/* 34px y no 16: por debajo va la atribución de Google ("Datos del mapa
©…"), que no se puede tapar según sus condiciones de uso. */
position: absolute; left: 16px; right: 16px; bottom: 34px; z-index: 2;
background: rgba(255,255,255,.96);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-radius: var(--r-sm); padding: 16px 18px;
box-shadow: 0 10px 30px -8px rgba(15,29,56,.35);
}
.mapa-ficha b { font-family: var(--f-display); font-size: 1.1rem; color: var(--navy); }
.mapa-ficha p { color: var(--tinta-2); font-size: .88rem; margin: 4px 0 12px; }
.mapa-acciones { display: flex; gap: 9px; flex-wrap: wrap; }
/* 44px y no 42: es el mínimo táctil, y con 42 la auditoría lo marcaba. */
.mapa-acciones .btn { min-height: 44px; padding: 0 18px; font-size: .9rem; }
/* ---- horario ---- */
.horario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .horario-grid { grid-template-columns: 1fr; } }
.horario-item {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
padding: 22px; box-shadow: var(--sombra);
}
.horario-item .dia {
font-family: var(--f-display); text-transform: uppercase; letter-spacing: .1em;
font-size: .76rem; color: var(--tinta-2);
}
.horario-item .hora {
display: block; margin-top: 8px; font-family: var(--f-display);
font-size: 1.5rem; color: var(--navy); line-height: 1.1;
}
.horario-item .nota { display: block; margin-top: 8px; color: var(--tinta-2); font-size: .87rem; }
.horario-item.abierto { border-color: var(--wa); }
.horario-item.abierto .hora { color: var(--wa); }
/* ============================================================
NOSOTROS — panel de cifras y opiniones de Google
============================================================ */
.cifras {
background-color: var(--navy); border-radius: var(--r); overflow: hidden;
position: relative; padding: 34px;
}
/* Retícula técnica: el mismo lenguaje de plano industrial del hero. */
.cifras::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 54px 54px;
}
.cifras::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
background: var(--cinta);
}
.cifras-grid {
position: relative; z-index: 1;
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: rgba(255,255,255,.09);
}
@media (max-width: 460px) { .cifras-grid { grid-template-columns: 1fr; } }
.cifra {
background: var(--navy); padding: 22px 20px;
display: flex; flex-direction: column; gap: 6px;
}
.cifra .ic-c { color: #7FB1F5; opacity: .85; }
.cifra b {
font-family: var(--f-display); font-size: clamp(2rem, 4.4vw, 2.8rem);
color: #fff; line-height: 1; letter-spacing: .01em;
}
.cifra span { color: #B9C7DE; font-size: .88rem; line-height: 1.35; }
/* ---- opiniones de Google ---- */
.op-cabeza {
display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
padding: 26px 30px; box-shadow: var(--sombra);
}
@media (max-width: 700px) { .op-cabeza { grid-template-columns: 1fr; gap: 18px; } }
.op-nota { text-align: center; padding-right: 26px; border-right: 1px solid var(--linea); }
@media (max-width: 700px) { .op-nota { border-right: 0; border-bottom: 1px solid var(--linea); padding: 0 0 18px; } }
.op-nota .valor {
font-family: var(--f-display); font-size: 3.4rem; line-height: 1; color: var(--navy);
}
.op-estrellas { display: inline-flex; gap: 3px; margin-top: 8px; color: #F5A623; }
.op-nota .de { display: block; margin-top: 6px; color: var(--tinta-2); font-size: .84rem; }
.op-cabeza h3 { font-size: 1.35rem; color: var(--navy); }
.op-cabeza p { color: var(--tinta-2); margin: 8px 0 16px; font-size: .95rem; }
.op-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.op-acciones .btn { min-height: 44px; padding: 0 20px; font-size: .92rem; }
.grid-opiniones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 20px; }
@media (max-width: 900px) { .grid-opiniones { grid-template-columns: 1fr; } }
.opinion {
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
padding: 22px; box-shadow: var(--sombra);
display: flex; flex-direction: column; gap: 12px;
}
.opinion .estrellas { display: flex; gap: 2px; color: #F5A623; }
.opinion p { color: var(--tinta); font-size: .94rem; line-height: 1.55; flex: 1; }
.opinion .quien { display: flex; align-items: center; gap: 11px; }
.opinion .avatar {
width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
background-color: var(--azul); background-image: var(--grad-azul);
color: #fff; font-family: var(--f-display); font-size: 1.05rem; line-height: 1;
display: grid; place-items: center; overflow: hidden;
}
.opinion .avatar img { width: 100%; height: 100%; object-fit: cover; }
.opinion .quien b { display: block; font-size: .92rem; color: var(--tinta); }
/* Hijo directo del bloque de texto, NO cualquier span: el avatar también es un
span dentro de .quien y este color y tamaño se lo comían. */
.opinion .quien > span > span { display: block; font-size: .8rem; color: var(--tinta-2); }
/* Estado sin clave de API: no se inventan opiniones, se explica qué falta. */
.op-vacio {
grid-column: 1 / -1;
background: #FFF9E8; border: 1px solid #F0DFA8; border-radius: var(--r);
padding: 20px 22px; color: #6B5514; font-size: .92rem; line-height: 1.6;
}
.op-vacio b { color: #4A3A0C; }
.op-vacio code {
background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px;
font-size: .88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ============================================================
«LO QUE NOS DIFERENCIA» — tarjetas numeradas
Antes eran seis cajas planas iguales. El número grande al fondo da jerarquía
y ritmo de lectura, y el icono entra con un rebote corto.
============================================================ */
.grid-porque { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-porque { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-porque { grid-template-columns: 1fr; } }
.porque-card {
position: relative; overflow: hidden;
background: #fff; border: 1px solid var(--linea); border-radius: var(--r);
padding: 26px 24px 24px; box-shadow: var(--sombra);
transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.porque-card:hover {
transform: translateY(-5px); box-shadow: var(--sombra-hover); border-color: transparent;
}
/* El número: grande, desvaído y detrás de todo. */
.porque-card .num {
position: absolute; top: -12px; right: 6px; z-index: 0;
font-family: var(--f-display); font-size: 5.4rem; line-height: 1;
color: var(--azul); opacity: .07; letter-spacing: -.02em;
transition: opacity var(--trans), transform var(--trans);
}
.porque-card:hover .num { opacity: .13; transform: translateY(4px); }
.porque-card .ic,
.porque-card h3,
.porque-card span:not(.num) { position: relative; z-index: 1; }
.porque-card .ic {
width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px;
display: grid; place-items: center;
background: linear-gradient(150deg, #FFE9DC 0%, #FFD5BE 100%);
color: var(--naranja);
}
.porque-card h3 { font-size: 1.12rem; color: var(--navy); margin-bottom: 8px; }
.porque-card > span:not(.num):not(.ic) {
display: block; color: var(--tinta-2); font-size: .93rem; line-height: 1.55;
}
/* El icono entra con un rebote corto, encadenado al stagger de .rev-hijos. */
.anim .rev-hijos.visible .porque-card .ic { animation: porqueIcono .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes porqueIcono {
from { transform: scale(.5) rotate(-14deg); opacity: 0; }
to { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.anim .rev-hijos.visible .porque-card .ic { animation: none; }
.porque-card:hover { transform: none; }
}
/* ---------- Cotizar flotante ----------
Solo en el teléfono, y solo cuando ya hay algo en la lista: hasta entonces
plantilla.js lo deja con [hidden]. En escritorio no aparece nunca, porque el
botón del header ya está siempre a la vista. */
.cotiza-flotante { display: none; }
/* ---------- WhatsApp flotante ---------- */
.wa-flotante {
position: fixed; right: 18px; bottom: 18px; z-index: 80;
width: 56px; height: 56px; border-radius: 999px; background: var(--wa); color: #fff;
display: grid; place-items: center; box-shadow: 0 8px 22px rgba(11,21,38,.28);
transition: transform var(--trans), background var(--trans);
}
.wa-flotante:hover { transform: scale(1.06); background: var(--wa-osc); }
/* ============================================================
MÓVIL — barra inferior fija + hoja "Explorar"
Solo por debajo de 700px. En escritorio el nav azul con submenús ya cumple,
así que todo esto queda en display:none y no pesa nada.
============================================================ */
.barra-movil { display: none; }
.hoja, .hoja-velo { display: none; }
@media (max-width: 700px) {
/* Hueco para que la barra no tape el final del pie. */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.barra-movil {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
background: #fff; border-top: 1px solid var(--linea);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -6px 22px rgba(11,21,38,.10);
transition: transform .28s cubic-bezier(.22,.8,.36,1);
}
/* Al bajar se aparta para dejar leer; al subir vuelve. */
.barra-movil.se-va { transform: translateY(115%); }
.bm-item {
display: flex; flex-direction: column; align-items: center; gap: 3px;
min-height: 52px; justify-content: center;
color: var(--tinta-2); font-size: .68rem; font-weight: 600;
background: none; border: 0; padding: 0;
transition: color var(--trans);
}
.bm-item:hover, .bm-item:focus-visible { color: var(--azul); text-decoration: none; }
.bm-item[aria-current="page"] { color: var(--azul); }
.bm-ic { position: relative; display: grid; place-items: center; }
/* Punto bajo el icono del destino actual: marca la página sin robar altura. */
.bm-item[aria-current="page"] .bm-ic::after {
content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 999px; background: var(--naranja);
}
.bm-item .conteo {
position: absolute; top: -5px; right: -8px; min-width: 17px; height: 17px;
border-radius: 999px; background: var(--naranja); color: #fff;
font-size: .66rem; font-weight: 700; display: none; place-items: center; padding: 0 4px;
}
.bm-txt { line-height: 1; }
/* Botón central: sobresale de la barra, como el FAB de una app. */
.bm-fab {
display: flex; flex-direction: column; align-items: center; gap: 5px;
background: none; border: 0; padding: 0; margin-top: -26px;
color: var(--azul); font-size: .68rem; font-weight: 700;
}
.bm-fab svg {
width: 26px; height: 26px; box-sizing: content-box; padding: 13px;
border-radius: 999px; color: #fff;
background-color: var(--naranja); background-image: var(--grad-cta);
box-shadow: 0 8px 20px -4px rgba(194,65,12,.7);
transition: transform var(--trans);
}
.bm-fab[aria-expanded="true"] svg { transform: rotate(-90deg); }
.bm-fab:active svg { transform: scale(.94); }
/* En móvil el flotante de WhatsApp sube para no chocar con la barra. */
.wa-flotante { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
.cotiza-flotante {
display: inline-flex; align-items: center; gap: 9px;
position: fixed; right: 18px; z-index: 80;
bottom: calc(142px + env(safe-area-inset-bottom, 0px));
height: 48px; padding: 0 18px 0 15px; border: 0; border-radius: 999px;
background-color: var(--naranja); background-image: var(--grad-cta);
color: #fff; font-family: var(--f-display); font-size: .84rem;
letter-spacing: .03em; text-transform: uppercase;
box-shadow: 0 10px 24px -6px rgba(194,65,12,.75);
animation: cf-entra .34s cubic-bezier(.22,.8,.36,1);
}
.cotiza-flotante:active { transform: scale(.97); }
/* El contador del header cuelga en absoluto sobre la esquina del botón; aquí
va en línea, dentro de la píldora, que es donde se lee. */
.cotiza-flotante .conteo {
position: static; display: grid; place-items: center;
min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
background: #fff; color: var(--naranja); font-size: .78rem; line-height: 1;
}
/* Después de la regla de display, si no el atributo no gana. */
.cotiza-flotante[hidden] { display: none; }
@keyframes cf-entra {
from { transform: translateY(14px) scale(.9); opacity: 0; }
to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.cotiza-flotante { animation: none; }
}
/* ---------- hoja inferior ---------- */
.hoja-velo {
display: block; position: fixed; inset: 0; z-index: 95;
background: rgba(11,21,38,.55); opacity: 0; pointer-events: none;
transition: opacity var(--trans);
}
.hoja-velo.abierta { opacity: 1; pointer-events: auto; }
.hoja {
display: flex; flex-direction: column;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
max-height: 86vh; background: #fff;
border-radius: 20px 20px 0 0; box-shadow: 0 -14px 40px rgba(11,21,38,.3);
transform: translateY(101%);
transition: transform .32s cubic-bezier(.22,.8,.36,1);
}
.hoja[hidden] { display: none; }
.hoja.abierta { transform: translateY(0); }
.hoja-asa {
width: 42px; height: 4px; border-radius: 999px; background: #CBD6E6;
margin: 10px auto 0; flex-shrink: 0;
}
.hoja-cab {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px 10px; border-bottom: 1px solid var(--linea); flex-shrink: 0;
}
.hoja-cab h3 { font-size: 1.25rem; }
.hoja-x {
width: 40px; height: 40px; display: grid; place-items: center;
border-radius: 999px; color: var(--tinta-2); background: var(--fondo);
}
/* min-height:0 para que el hijo con scroll pueda encogerse dentro del flex */
.hoja-cuerpo { overflow-y: auto; min-height: 0; padding: 16px 18px 26px; -webkit-overflow-scrolling: touch; }
.hoja-rapido { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.hoja-rapido a {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 14px 6px; border-radius: var(--r-sm); text-align: center;
color: #fff; min-height: 44px;
}
.hoja-rapido a:hover { text-decoration: none; }
.hoja-rapido b { font-size: .88rem; }
.hoja-rapido span { font-size: .68rem; opacity: .85; }
.hr-wa { background: var(--wa); }
.hr-tel { background: var(--azul); }
.hr-cat { background-color: var(--naranja); background-image: var(--grad-cta); }
.hoja-titulo {
font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em;
font-size: .78rem; color: var(--tinta-2); margin: 22px 0 10px;
}
.hoja-deptos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hoja-deptos a {
display: flex; align-items: center; gap: 10px; min-height: 52px;
padding: 8px 11px; border: 1px solid var(--linea); border-radius: var(--r-sm);
color: var(--tinta); font-size: .84rem; font-weight: 500; line-height: 1.25;
transition: border-color var(--trans), background var(--trans);
}
.hoja-deptos a:hover, .hoja-deptos a:focus-visible {
border-color: var(--azul); background: var(--fondo); text-decoration: none;
}
.hoja-deptos svg { color: var(--azul); flex-shrink: 0; }
.hoja-lista { list-style: none; }
.hoja-lista a {
display: flex; align-items: center; min-height: 48px;
border-bottom: 1px solid var(--linea); color: var(--tinta); font-weight: 500;
}
.hoja-lista li:last-child a { border-bottom: 0; }
.hoja-pie { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea); }
.hoja-pie p {
display: flex; align-items: center; gap: 7px;
font-size: .82rem; color: var(--tinta-2);
}
.hoja-pie svg { flex-shrink: 0; }
.hoja-pie-fila { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.hoja-pie-fila > a {
width: 44px; height: 44px; display: grid; place-items: center;
border-radius: 999px; color: var(--tinta-2); background: var(--fondo);
}
.hoja-pie-fila > a:hover { color: var(--azul); }
/* El selector nació para la topbar navy: sobre el blanco de la hoja el
idioma activo se pintaba en blanco y desaparecía. */
.hoja-pie .idioma { margin-left: auto; }
.hoja-pie .idioma button { color: var(--tinta-2); }
.hoja-pie .idioma button[aria-current="true"] { color: var(--azul); }
.hoja-pie .idioma .sep { color: var(--linea); }
}
/* ---------- Drawer lista de cotización ---------- */
.velo {
position: fixed; inset: 0; background: rgba(11,21,38,.55); z-index: 100;
opacity: 0; pointer-events: none; transition: opacity var(--trans);
}
.velo.abierto { opacity: 1; pointer-events: auto; }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 110;
background: #fff; display: flex; flex-direction: column;
transform: translateX(105%); transition: transform 240ms ease;
box-shadow: -12px 0 34px rgba(11,21,38,.25);
}
.drawer.abierto { transform: translateX(0); }
.drawer header {
background: var(--navy); color: #fff; padding: 18px 20px;
display: flex; justify-content: space-between; align-items: center;
}
.drawer header h3 { font-size: 1.15rem; letter-spacing: .06em; }
.drawer header button { color: #fff; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); }
.drawer header button:hover { background: var(--navy-2); }
.drawer .lista { flex: 1; overflow: auto; padding: 14px 20px; display: grid; gap: 10px; align-content: start; }
.drawer .item-cot {
display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center;
border: 1px solid var(--linea); border-radius: var(--r-sm); padding: 10px;
}
.drawer .item-cot img, .drawer .item-cot .mini { width: 54px; height: 54px; object-fit: contain; background: #fff; border-radius: 6px; border: 1px solid var(--fondo); }
.drawer .item-cot .mini { display: grid; place-items: center; color: #9FB0C9; }
.drawer .item-cot b { font-size: .88rem; font-weight: 600; line-height: 1.3; display: block; }
.drawer .item-cot span { font-size: .78rem; color: var(--tinta-2); }
.drawer .item-cot .quitar { color: #B42318; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); }
.drawer .item-cot .quitar:hover { background: #FEF1F0; }
.drawer .vacio { text-align: center; color: var(--tinta-2); padding: 46px 10px; display: grid; gap: 12px; justify-items: center; }
.drawer .vacio svg { color: #C3D2E8; }
.drawer footer { border-top: 1px solid var(--linea); padding: 16px 20px; display: grid; gap: 10px; }
.drawer footer .nota { font-size: .82rem; color: var(--tinta-2); text-align: center; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-osc); }
/* ============================================================
VITRINA — slider circular 3D de productos
(adaptación vanilla de circular-gallery / 21st.dev)
============================================================ */
.vitrina { background: var(--navy); color: #fff; overflow: hidden; position: relative; }
.vitrina::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--cinta); }
.vitrina .cabeza-seccion h2 { color: #fff; }
.vitrina .cabeza-seccion p { color: #B9C7DE; }
/* --- carrusel showroom: el central grande, los lados encogidos y apagados --- */
.vs-escena {
position: relative; height: 440px;
touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.vs-escena.arrastrando { cursor: grabbing; }
/* foco de vitrina detrás del producto del centro */
.vs-escena::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
left: 50%; top: 0; width: 470px; aspect-ratio: 1; transform: translateX(-50%);
background: radial-gradient(circle, rgba(127,177,245,.26) 0%, rgba(127,177,245,.08) 45%, transparent 70%);
}
/* la marca del producto centrado, en grande al fondo (igual que el hero) */
.vs-palabra {
position: absolute; z-index: 0; top: 40%; margin-top: -.42em; left: -8%; right: -8%;
font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
font-size: clamp(3.5rem, 10vw, 9rem); line-height: .84; letter-spacing: -.035em;
text-align: center; white-space: nowrap; pointer-events: none;
color: rgba(255,255,255,.06);
-webkit-text-stroke: 1px rgba(127,177,245,.13);
mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.vs-pista { position: absolute; inset: 0; z-index: 1; }
.vs-pista.motion-on .vs-item { will-change: transform, opacity; }
/* sin Motion el movimiento lo hace la transición, para no quedarnos sin nada */
.vs-pista:not(.motion-on) .vs-item {
transition: transform .5s cubic-bezier(.22,.8,.36,1), opacity .4s ease;
}
.vs-item {
position: absolute; top: 0; left: 50%; width: 300px; margin-left: -150px; height: 100%;
display: grid; grid-template-rows: 1fr auto; gap: 10px;
text-align: center; color: #fff;
}
.vs-item:hover { text-decoration: none; }
.vs-item .lienzo { position: relative; display: grid; place-content: center; place-items: center; }
.vs-item img {
grid-area: 1 / 1; position: relative; z-index: 1;
max-height: 300px; max-width: 100%; width: auto; object-fit: contain;
filter: drop-shadow(0 26px 30px rgba(0,0,0,.55));
}
/* sombra de suelo anclada a la base de la imagen, no del bloque */
.vs-item .lienzo::after {
content: ""; grid-area: 1 / 1; align-self: end; justify-self: center;
width: 74%; height: 24px; border-radius: 50%; margin-bottom: -12px;
background: radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%);
filter: blur(6px);
}
.vs-item .datos { display: grid; gap: 4px; padding-bottom: 8px; }
.vs-item .marca {
font-size: .72rem; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: #7FB1F5;
}
.vs-item .nombre {
font-weight: 600; font-size: .9rem; line-height: 1.3; color: #fff;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* el texto de los laterales se apaga: la lectura es del central */
.vs-item:not(.centro) .datos { opacity: .5; }
.vs-item.centro .nombre { font-size: 1.04rem; }
.vs-item.centro:hover .nombre { color: #A8CBFF; }
.vitrina-controles { display: flex; justify-content: center; gap: 12px; padding: 26px 0 8px; }
.vitrina-controles button {
width: 48px; height: 48px; border-radius: 999px; border: 2px solid #4E648C;
color: #fff; display: grid; place-items: center; transition: border-color var(--trans), color var(--trans);
}
.vitrina-controles button:hover { border-color: var(--naranja); color: #FF9A5C; }
.vitrina-nota { text-align: center; color: #8FA3C4; font-size: .85rem; padding-bottom: 8px; }
@media (max-width: 700px) {
.vs-escena { height: 380px; }
.vs-escena::before { width: 320px; }
/* 220 de ancho contra los 200 de separación que usa app.js: las tarjetas de
los lados asoman lo justo para que se entienda que hay más. */
.vs-item { width: 220px; margin-left: -110px; }
.vs-item img { max-height: 240px; }
}
/* ============================================================
ANIMACIONES (guiadas por motion.csv de ui-ux-pro-max)
============================================================ */
/* entrada del hero: fade-up escalonado */
@keyframes sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero .kicker, .hero h1, .hero p.baja, .hero .acciones, .hero .stats {
animation: sube .5s cubic-bezier(.22, .8, .36, 1) both;
}
.hero h1 { animation-delay: .06s; }
.hero p.baja { animation-delay: .12s; }
.hero .acciones { animation-delay: .18s; }
.hero .stats { animation-delay: .26s; }
.hero .tarjeta-visual { animation: sube .6s cubic-bezier(.22, .8, .36, 1) .2s both; }
/* iconos flotantes del hero (estilo web3media-hero) */
.hero .flotantes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero .contenedor { position: relative; z-index: 1; }
.flota {
position: absolute; color: #2E4A7E; opacity: .55;
animation: flotando var(--fd, 7s) ease-in-out var(--fr, 0s) infinite alternate;
}
@keyframes flotando {
from { transform: translateY(-8px) rotate(-4deg); }
to { transform: translateY(10px) rotate(5deg); }
}
/* Reveal al hacer scroll (300-400ms, offset pequeño).
Solo se ocultan si el JS arrancó (html.anim): sin JS el contenido se ve siempre. */
.anim .rev { opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s cubic-bezier(.22, .8, .36, 1); }
.rev.ver { opacity: 1; transform: none; }
.anim .rev-hijos > * { opacity: 0; transform: translateY(16px); transition: opacity .4s ease, transform .4s cubic-bezier(.22, .8, .36, 1); }
.rev-hijos.ver > * { opacity: 1; transform: none; }
.rev-hijos.ver > :nth-child(2) { transition-delay: .06s; }
.rev-hijos.ver > :nth-child(3) { transition-delay: .12s; }
.rev-hijos.ver > :nth-child(4) { transition-delay: .18s; }
.rev-hijos.ver > :nth-child(5) { transition-delay: .24s; }
.rev-hijos.ver > :nth-child(6) { transition-delay: .3s; }
.rev-hijos.ver > :nth-child(7) { transition-delay: .36s; }
.rev-hijos.ver > :nth-child(8) { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
.anim .rev, .anim .rev-hijos > * { opacity: 1; transform: none; }
}
/* ---------- Spotlight glow (adaptado de spotlight-card / GlowCard) ----------
Borde luminoso que sigue el puntero. Solo decorativo: se activa al hover,
no interfiere con clics (pointer-events none) ni con lectores de pantalla. */
.glow { position: relative; }
.glow::after {
content: ""; position: absolute; inset: -1px; border-radius: inherit;
pointer-events: none; z-index: 1;
border: 2px solid transparent;
background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%),
var(--glow-color, rgba(36, 86, 166, .85)), transparent 72%) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
mask-composite: exclude;
opacity: 0; transition: opacity var(--trans);
}
.glow:hover::after, .glow:focus-within::after { opacity: 1; }
/* variante para paneles sobre fondo oscuro: brilla en naranja */
.glow-naranja::after { --glow-color: rgba(255, 154, 92, .9); }
@media (hover: none) { .glow::after { display: none; } }
/* ============================================================
MODAL DE CUENTA — entrar / registrarse
============================================================ */
.acciones-header { display: flex; align-items: center; gap: 10px; }
.btn-cuenta {
display: inline-flex; align-items: center; gap: 9px;
min-height: 48px; padding: 0 18px; border-radius: var(--r);
border: 1.5px solid var(--linea); color: var(--tinta); font-weight: 600;
transition: border-color var(--trans), color var(--trans), background var(--trans);
}
.btn-cuenta:hover { border-color: var(--azul); color: var(--azul); background: #F2F6FC; }
@media (max-width: 1050px) { .btn-cuenta .texto { display: none; } .btn-cuenta { padding: 0 14px; } }
.modal {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(.97);
z-index: 120; width: min(940px, calc(100vw - 32px)); max-height: min(92vh, 760px);
background: #fff; border-radius: var(--r); overflow: hidden;
display: grid; grid-template-columns: .82fr 1.18fr;
/* minmax(0,1fr) ata la fila a la altura del modal; sin esto la fila crece con el
formulario (1330px) y el panel lateral queda cortado fuera de vista. */
grid-template-rows: minmax(0, 1fr);
box-shadow: var(--sombra-alta);
opacity: 0; pointer-events: none;
transition: opacity var(--trans), transform var(--trans);
}
.modal.abierto { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal-x {
position: absolute; top: 14px; right: 14px; z-index: 3;
width: 46px; height: 46px; border-radius: 999px; color: var(--tinta-2);
display: grid; place-items: center; transition: background var(--trans), color var(--trans);
}
.modal-x:hover { background: var(--fondo); color: var(--tinta); }
/* panel lateral con los beneficios */
.modal-lado {
/* min-height:0 es lo que permite que la fila del grid respete la altura del
modal; sin él, el contenido largo del formulario estira la fila y desborda. */
min-height: 0; overflow: hidden;
color: #fff; padding: 40px 34px; display: flex; flex-direction: column; gap: 20px;
background-color: var(--navy);
background-image:
radial-gradient(520px 320px at 20% 10%, rgba(47,107,196,.5), transparent 62%),
radial-gradient(420px 280px at 90% 95%, rgba(194,65,12,.34), transparent 60%),
linear-gradient(160deg, #14284C, var(--navy));
position: relative;
}
.modal-lado::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--cinta); }
.modal-lado img { background: #fff; border-radius: var(--r-sm); padding: 8px 12px; height: 46px; width: auto; align-self: start; }
.modal-lado h3 { font-size: 1.5rem; }
.modal-lado ul { list-style: none; display: grid; gap: 12px; }
.modal-lado li { display: flex; gap: 10px; align-items: start; color: #C0CDE2; font-size: .94rem; }
.modal-lado li svg { color: #FF9A5C; flex-shrink: 0; margin-top: 3px; }
.modal-lado .pie-lado { margin-top: auto; color: #9DB0CE; font-size: .88rem; }
.modal-lado .pie-lado a { color: #A8CBFF; }
/* cuerpo con los formularios */
.modal-cuerpo { padding: 40px 38px; overflow-y: auto; min-height: 0; }
.modal-cuerpo h2 { font-size: 1.9rem; margin-bottom: 20px; }
.pestanas { position: relative; display: flex; gap: 4px; border-bottom: 2px solid var(--linea); margin-bottom: 26px; }
.pestanas button {
padding: 0 4px 12px; margin-right: 22px; min-height: 46px;
font-family: var(--f-display); text-transform: uppercase; letter-spacing: .04em;
font-size: 1.02rem; font-weight: 600; color: var(--tinta-2);
transition: color var(--trans);
}
.pestanas button[aria-selected="true"] { color: var(--azul); }
.pestana-marca {
position: absolute; bottom: -2px; left: 0; height: 2px; width: 118px;
background: var(--azul); border-radius: 2px; transition: transform var(--trans);
}
.modal.en-crear .pestana-marca { transform: translateX(140px); width: 118px; }
.panel-cuenta { display: grid; gap: 15px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: .88rem; font-weight: 600; color: var(--tinta); }
.campo-caja { position: relative; display: flex; align-items: center; }
.campo-ic { position: absolute; left: 14px; color: #7A8CA6; display: grid; place-items: center; pointer-events: none; }
.campo input {
width: 100%; min-height: 50px; padding: 0 14px 0 42px;
border: 1.5px solid var(--linea); border-radius: var(--r-sm);
font: 400 1rem var(--f-cuerpo); color: var(--tinta); background: #FAFCFE;
transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.campo input::placeholder { color: #93A3B9; }
.campo input:focus {
outline: none; border-color: var(--azul); background: #fff;
box-shadow: 0 0 0 3px rgba(36,86,166,.22);
}
.campo.con-error input { border-color: #B42318; background: #FFFAFA; }
.campo.con-error input:focus { box-shadow: 0 0 0 3px rgba(180,35,24,.2); }
.campo-error { color: #B42318; font-size: .82rem; min-height: 0; }
.campo.con-error .campo-error { min-height: 1.2em; }
.campo-ayuda { color: var(--tinta-2); font-size: .82rem; }
.ver-clave {
position: absolute; right: 4px; width: 46px; height: 46px;
display: grid; place-items: center; color: #7A8CA6; border-radius: var(--r-sm);
transition: color var(--trans), background var(--trans);
}
.ver-clave:hover { color: var(--azul); background: var(--fondo); }
.fila-opciones { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.recordar { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: .9rem; color: var(--tinta-2); cursor: pointer; }
.recordar input { accent-color: var(--azul); width: 17px; height: 17px; }
.recordar.acepto { align-items: start; padding-top: 4px; }
.olvide { font-size: .9rem; font-weight: 500; display: inline-flex; align-items: center; min-height: 46px; }
.btn.ancho { width: 100%; margin-top: 6px; }
.cambiar { text-align: center; color: var(--tinta-2); font-size: .92rem; margin-top: 4px; }
/* padding vertical para llegar a 44px táctiles sin romper el flujo del párrafo */
.enlace { color: var(--azul); font-weight: 600; text-decoration: underline; display: inline-block; padding: 12px 2px; }
.enlace:hover { color: var(--azul-osc); }
/* selector personal / empresa */
.tipo-cuenta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.opcion-tipo input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion-tipo .marco {
display: grid; gap: 3px; justify-items: center; text-align: center;
padding: 16px 12px; border: 1.5px solid var(--linea); border-radius: var(--r-sm);
color: var(--tinta-2); cursor: pointer;
transition: border-color var(--trans), background var(--trans), color var(--trans);
}
.opcion-tipo .marco b { color: var(--tinta); font-size: .95rem; }
.opcion-tipo .marco small { font-size: .78rem; }
.opcion-tipo .marco:hover { border-color: #B9CBE6; background: #FAFCFE; }
.opcion-tipo input:checked + .marco { border-color: var(--azul); background: #F2F6FC; color: var(--azul); }
.opcion-tipo input:focus-visible + .marco { outline: 3px solid var(--naranja); outline-offset: 2px; }
/* medidor de fuerza */
.fuerza { display: flex; gap: 5px; }
.fuerza span { flex: 1; height: 4px; border-radius: 999px; background: var(--linea); transition: background var(--trans); }
.fuerza span.activa.n1 { background: #DC2626; }
.fuerza span.activa.n2 { background: #EA8C0C; }
.fuerza span.activa.n3 { background: #2F6BC4; }
.fuerza span.activa.n4 { background: var(--ok); }
.fuerza-txt { font-size: .82rem; color: var(--tinta-2); min-height: 1.2em; }
@media (max-width: 800px) {
.modal { grid-template-columns: 1fr; max-height: 94vh; }
.modal-lado { display: none; }
.modal-cuerpo { padding: 46px 24px 30px; }
.tipo-cuenta { grid-template-columns: 1fr; }
}
/* ---------- Aviso toast ---------- */
.toast {
position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
background: var(--navy); color: #fff; padding: 12px 22px; border-radius: 999px;
font-weight: 500; font-size: .95rem; z-index: 130; opacity: 0; pointer-events: none;
transition: opacity var(--trans), transform var(--trans);
}
.toast.ver { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ============================================================
CATÁLOGO (catalogo.html)
============================================================ */
.cabecera-catalogo {
color: #fff; padding: 62px 0 56px; position: relative; overflow: hidden;
background:
radial-gradient(700px 400px at 15% 0%, rgba(47,107,196,.4), transparent 62%),
radial-gradient(600px 360px at 90% 110%, rgba(194,65,12,.24), transparent 60%),
linear-gradient(160deg, #14284C, var(--navy)),
var(--navy); /* color de respaldo: si los degradados no pintan, el texto claro sigue legible */
}
.cabecera-catalogo::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
background-size: 26px 26px;
mask-image: linear-gradient(180deg, #000, transparent 85%);
-webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.cabecera-catalogo .contenedor { position: relative; z-index: 1; }
.cabecera-catalogo h1 { margin: 14px 0 10px; }
.cabecera-catalogo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--cinta); }
.cabecera-catalogo p { color: #C0CDE2; font-size: 1.06rem; max-width: 62ch; }
/* Buscador grande del catálogo */
.buscador-grande { position: relative; display: flex; align-items: center; max-width: 660px; margin-top: 26px; }
.buscador-grande .bg-lupa { position: absolute; left: 20px; color: #6B7F9E; pointer-events: none; }
.buscador-grande input {
width: 100%; min-height: 60px; padding: 0 54px 0 54px;
border: 2px solid transparent; border-radius: 999px;
font: 500 1.06rem var(--f-cuerpo); color: var(--tinta); background: #fff;
box-shadow: 0 12px 30px -12px rgba(0,0,0,.5);
transition: box-shadow var(--trans), border-color var(--trans);
}
.buscador-grande input::placeholder { color: #7A8CA6; }
.buscador-grande input:focus {
outline: none; border-color: #FF9A5C;
box-shadow: 0 0 0 4px rgba(255,154,92,.35), 0 12px 30px -12px rgba(0,0,0,.5);
}
.bg-limpiar {
position: absolute; right: 8px; width: 44px; height: 44px; border-radius: 999px;
display: grid; place-items: center; color: var(--tinta-2);
transition: background var(--trans), color var(--trans);
}
.bg-limpiar:hover { background: var(--fondo); color: var(--tinta); }
.sugerencias-rapidas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.sugerencias-rapidas span { color: #9DB0CE; font-size: .88rem; margin-right: 4px; }
.sugerencias-rapidas button {
min-height: 38px; padding: 0 16px; border-radius: 999px;
border: 1px solid var(--vidrio-borde); background: var(--vidrio); color: #D7E1F2;
font-size: .9rem; font-weight: 500;
transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.sugerencias-rapidas button:hover { background: rgba(255,255,255,.16); border-color: #7FB1F5; color: #fff; }
@media (max-width: 700px) {
.buscador-grande input { min-height: 54px; font-size: 1rem; }
.sugerencias-rapidas button { min-height: 44px; }
}
.layout-catalogo { display: grid; grid-template-columns: 260px 1fr; gap: 28px; padding: 34px 0 70px; align-items: start; }
@media (max-width: 900px) { .layout-catalogo { grid-template-columns: 1fr; } }
.filtros { background: #fff; border: 1px solid var(--linea); border-radius: var(--r); padding: 20px; display: grid; gap: 22px; position: sticky; top: 96px; }
@media (max-width: 900px) { .filtros { position: static; } }
.filtros h3 { font-size: 1rem; letter-spacing: .08em; margin-bottom: 10px; }
.filtros .grupo { display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.filtros label {
display: flex; gap: 10px; align-items: center; min-height: 36px; padding: 0 8px;
border-radius: 6px; font-size: .92rem; color: var(--tinta-2); cursor: pointer;
}
.filtros label:hover { background: var(--fondo); color: var(--tinta); }
.filtros input { accent-color: var(--azul); width: 17px; height: 17px; flex-shrink: 0; }
.filtros .conteo-f { margin-left: auto; font-size: .78rem; color: #5D7089; }
.filtros .limpiar { color: var(--naranja); font-weight: 600; font-size: .9rem; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
.barra-resultados { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.barra-resultados .n { color: var(--tinta-2); }
.barra-resultados .n b { color: var(--tinta); }
.sin-resultados { background: #fff; border: 1px dashed var(--linea); border-radius: var(--r); padding: 60px 20px; text-align: center; color: var(--tinta-2); display: grid; gap: 10px; justify-items: center; }
.sin-resultados svg { color: #C3D2E8; }
.ver-mas { display: grid; place-items: center; margin-top: 28px; }