/* ============================================================
   CLIMA ALEM – REDESIGN PREMIUM 2025
   Paleta: Rojo #9E1B22 | Amarillo #FFC107 | Azul #1E2F8D
============================================================ */

/* ── VARIABLES ── */
:root {
    --rojo:      #9E1B22;
    --rojo-dark: #7a1219;
    --amarillo:  #FFC107;
    --azul:      #1E2F8D;
    --azul-dark: #14205e;
    --azul-light:#3d4fc4;
    --negro:     #0d0d0d;
    --gris-bg:   #f5f6fa;
    --gris-card: #ffffff;
    --gris-text: #4a4a5a;
    --borde:     #e8eaf0;
    --sombra:    0 4px 24px rgba(30,47,141,.08);
    --sombra-hover: 0 12px 40px rgba(30,47,141,.18);
    --radio:     16px;
    --radio-sm:  10px;
    --trans:     all .35s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background:#fff;
    color: var(--negro);
    overflow-x:hidden;
}
img { max-width:100%; display:block; }
a  { text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; }

/* ── SCROLL PROGRESS ── */
.scroll-progress {
    position: fixed; top:0; left:0;
    height: 3px; width:0%;
    background: linear-gradient(90deg, var(--rojo), var(--amarillo), var(--azul));
    z-index: 9999;
    transition: width .1s;
}

/* ── WHATSAPP FLOTANTE ── */
.whatsapp-float {
    position: fixed; bottom:32px; right:32px;
    width:60px; height:60px;
    background: #25D366;
    border-radius:50%;
    border:3px solid #fff;
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#fff;
    box-shadow: 0 6px 20px rgba(37,211,102,.5);
    z-index: 1000;
    transition: var(--trans);
    animation: pulseWsp 2.5s ease-in-out infinite;
}
.whatsapp-float:hover {
    transform: scale(1.12);
    box-shadow: 0 8px 28px rgba(37,211,102,.7);
}
.wsp-tooltip {
    position:absolute; right:72px;
    background: var(--negro); color:#fff;
    font-size:13px; font-weight:600;
    padding:6px 14px; border-radius:20px;
    white-space:nowrap; opacity:0;
    transform:translateX(10px);
    pointer-events:none;
    transition: var(--trans);
}
.whatsapp-float:hover .wsp-tooltip { opacity:1; transform:translateX(0); }
@keyframes pulseWsp {
    0%,100%{ box-shadow:0 6px 20px rgba(37,211,102,.5); }
    50%    { box-shadow:0 6px 30px rgba(37,211,102,.75); }
}

/* ── HEADER ── */
.cabecera {
    position: fixed; top:0; left:0; right:0;
    z-index: 900;
    padding: 0 40px;
    background: linear-gradient(135deg, var(--rojo) 0%, #c22229 30%, var(--amarillo) 65%, var(--azul) 100%);
    box-shadow: 0 2px 16px rgba(0,0,0,.2);
    transition: var(--trans);
}
.cabecera.scrolled {
    background: rgba(13,13,13,.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.header-inner {
    max-width:1280px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    height:72px;
}
.logo-imagen {
    height:80px;
    margin-bottom:-20px;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.4));
    transition: var(--trans);
    position:relative; z-index:100;
}
.logo-imagen:hover { transform:translateY(-4px) scale(1.04); }

.menu ul { display:flex; gap:8px; }
.nav-link {
    color:#fff; font-weight:600; font-size:15px;
    padding: 8px 14px; border-radius:8px;
    position:relative; transition: var(--trans);
}
.nav-link::after {
    content:''; position:absolute; bottom:2px; left:50%; right:50%;
    height:2px; background:var(--amarillo);
    border-radius:2px; transition: var(--trans);
}
.nav-link:hover::after { left:14px; right:14px; }
.nav-link:hover { color:var(--amarillo); }

/* Hamburguesa */
.hamburger {
    display:none; flex-direction:column; gap:5px;
    background:none; border:none; padding:6px;
}
.hamburger span {
    display:block; width:26px; height:2.5px;
    background:#fff; border-radius:4px;
    transition: var(--trans);
}
.hamburger.open span:nth-child(1){ transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: rotate(-45deg) translate(5px,-5px); }

/* Mega menú "Categorías" (se abre con hover; el link en sí lleva al catálogo sin filtro) */
.menu-item-categorias { position:relative; padding-bottom:14px; }
.nav-categorias-link i { font-size:11px; margin-left:6px; transition:var(--trans); }
.menu-item-categorias:hover .nav-categorias-link i,
.menu-item-categorias:focus-within .nav-categorias-link i { transform:rotate(180deg); }

.megamenu {
    position:absolute; top:100%; left:50%;
    background:#fff; border-radius:var(--radio); box-shadow:var(--sombra-hover);
    border:1px solid var(--borde);
    padding:28px; display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:28px; min-width:640px; max-width:900px;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(-50%) translateY(8px);
    transition:var(--trans); z-index:950;
}
.menu-item-categorias:hover .megamenu,
.menu-item-categorias:focus-within .megamenu {
    opacity:1; visibility:visible; pointer-events:all;
    transform:translateX(-50%) translateY(0);
}
.megamenu-columna { display:flex; flex-direction:column; gap:9px; }
.megamenu-titulo {
    font-size:13px; font-weight:800; color:var(--negro);
    text-transform:uppercase; letter-spacing:.6px;
    padding-bottom:9px; margin-bottom:2px;
    border-bottom:2px solid var(--azul);
}
.megamenu-titulo:hover { color:var(--azul); }
.megamenu-link { font-size:14px; color:var(--gris-text); transition:var(--trans); }
.megamenu-link:hover { color:var(--azul); padding-left:4px; }

/* ── HERO ── */
.hero {
    min-height:100vh;
    background: linear-gradient(160deg, rgba(255,252,245,.96) 0%, rgba(240,237,228,.92) 100%),
                url('fondo-hero.png') center/cover no-repeat fixed;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    text-align:center; padding:100px 24px 60px;
    position:relative; overflow:hidden;
}
.hero-particles {
    position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.particle {
    position:absolute; border-radius:50%;
    background:rgba(30,47,141,.06);
    animation: floatParticle linear infinite;
}
@keyframes floatParticle {
    0%  { transform:translateY(100vh) rotate(0deg); opacity:0; }
    10% { opacity:1; }
    90% { opacity:1; }
    100%{ transform:translateY(-100px) rotate(720deg); opacity:0; }
}
.hero-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(30,47,141,.08); backdrop-filter:blur(10px);
    border:1px solid rgba(30,47,141,.18);
    color:var(--azul); font-size:14px; font-weight:600;
    padding:8px 20px; border-radius:40px;
    margin-bottom:24px; letter-spacing:.5px;
}
.hero-contenido h1 {
    font-size: clamp(40px,6vw,76px);
    font-weight:900; color:#1a1a2e; line-height:1.1;
    margin-bottom:20px;
}
.texto-gradiente {
    background: linear-gradient(90deg, var(--rojo), var(--azul));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-contenido p {
    font-size:clamp(16px,2vw,20px); color:#5a5a6e;
    max-width:640px; margin:0 auto 40px; line-height:1.7;
}
.botones-hero { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.btn-primario {
    padding:16px 36px; border-radius:40px;
    background:var(--azul); color:#fff;
    font-size:16px; font-weight:700;
    display:inline-flex; align-items:center; gap:10px;
    box-shadow:0 6px 24px rgba(30,47,141,.5);
    transition: var(--trans);
    border:2px solid transparent;
}
.btn-primario:hover {
    background:#fff; color:var(--azul);
    transform:translateY(-4px);
    box-shadow:0 12px 36px rgba(30,47,141,.3);
}
.btn-wsp {
    padding:16px 36px; border-radius:40px;
    background:#25D366; color:#fff;
    font-size:16px; font-weight:700;
    display:inline-flex; align-items:center; gap:10px;
    box-shadow:0 6px 24px rgba(37,211,102,.4);
    transition: var(--trans);
}
.btn-wsp:hover {
    background:#1da851;
    transform:translateY(-4px);
    box-shadow:0 12px 36px rgba(37,211,102,.5);
}

.hero-scroll-hint {
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:6px;
    color:rgba(90,90,110,.5); font-size:12px; letter-spacing:2px; text-transform:uppercase;
    animation: fadeInBounce 2s ease-in-out infinite;
}
.scroll-arrow {
    width:20px; height:20px;
    border-right:2px solid rgba(90,90,110,.35);
    border-bottom:2px solid rgba(90,90,110,.35);
    transform:rotate(45deg);
}
@keyframes fadeInBounce {
    0%,100%{ opacity:.4; transform:translateX(-50%) translateY(0); }
    50%    { opacity:1;  transform:translateX(-50%) translateY(6px); }
}

/* ── BANDA MÉTRICAS ── */
.banda-metricas {
    background: linear-gradient(135deg, var(--azul-dark), var(--azul));
    padding:40px 24px;
}
.metricas-grid {
    max-width:1000px; margin:0 auto;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:16px; text-align:center;
}
.metrica {
    padding:20px 10px;
    border-right:1px solid rgba(255,255,255,.15);
}
.metrica:last-child{ border-right:none; }
.metrica strong {
    font-size:clamp(32px,4vw,48px); font-weight:900;
    color:var(--amarillo); line-height:1;
}
.metrica span { color:var(--amarillo); font-size:28px; font-weight:700; }
.metrica p { color:rgba(255,255,255,.75); font-size:14px; margin-top:6px; }

/* ── SECCIÓN SHARED HELPERS ── */
.seccion-header { text-align:center; margin-bottom:56px; }
.etiqueta-seccion {
    display:inline-block;
    background:linear-gradient(135deg,rgba(30,47,141,.1),rgba(158,27,34,.1));
    color:var(--azul); font-size:13px; font-weight:700;
    padding:6px 18px; border-radius:40px; letter-spacing:1.5px;
    text-transform:uppercase; margin-bottom:14px;
    border:1px solid rgba(30,47,141,.2);
}
.titulo-seccion {
    font-size:clamp(28px,3.5vw,42px); font-weight:800;
    color:var(--negro); margin-bottom:14px; line-height:1.2;
}
.subtitulo-seccion { font-size:18px; color:var(--gris-text); max-width:600px; margin:0 auto; }

.cotizacion-info {
    display:inline-flex; align-items:center; gap:8px;
    margin:18px auto 0; padding:8px 20px; border-radius:40px;
    background:#fff; border:1px solid var(--borde);
    font-size:13px; font-weight:600; color:var(--gris-text);
}
.cotizacion-info i { color:var(--azul); font-size:12px; }

/* ── PRODUCTOS ── */
.seccion-productos {
    padding:100px 24px;
    background:var(--gris-bg);
}
.filtros-productos {
    display:flex; gap:12px; justify-content:center;
    flex-wrap:wrap; margin-bottom:48px;
}
.filtro-prod {
    padding:10px 24px; border-radius:40px;
    border:2px solid var(--borde);
    background:#fff; color:var(--gris-text);
    font-size:14px; font-weight:600;
    transition: var(--trans);
}
.filtro-prod:hover, .filtro-prod.activo {
    background:var(--azul); color:#fff; border-color:var(--azul);
    box-shadow:0 4px 16px rgba(30,47,141,.25);
}

.grid-productos {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:28px; max-width:1280px; margin:0 auto;
}

.contenedor-ver-mas { display:flex; justify-content:center; margin-top:40px; }
.btn-ver-mas {
    display:inline-flex; align-items:center; gap:10px;
    background:#fff; color:var(--azul);
    padding:15px 32px; border-radius:40px;
    border:2px solid var(--azul);
    font-size:15px; font-weight:700;
    transition:var(--trans); box-shadow:var(--sombra);
}
.btn-ver-mas:hover { background:var(--azul); color:#fff; transform:translateY(-2px); box-shadow:var(--sombra-hover); }
.btn-ver-mas span { font-weight:500; opacity:.7; font-size:13px; }
.btn-ver-mas:hover span { opacity:.85; }

.tarjeta-producto {
    background:#fff; border-radius:var(--radio);
    overflow:hidden; box-shadow:var(--sombra);
    transition: var(--trans);
    border:1px solid var(--borde);
}
.tarjeta-producto:hover {
    transform:translateY(-10px);
    box-shadow:var(--sombra-hover);
    border-color:transparent;
}
.tarjeta-producto.oculto { display:none; }

.producto-imagen {
    height:200px; position:relative;
    display:flex; align-items:center; justify-content:center;
    background:#ffffff; overflow:hidden;
}
.producto-imagen img {
    width:100%; height:100%; object-fit:contain;
    padding:16px; transition: var(--trans);
}
.tarjeta-producto:hover .producto-imagen img { transform:scale(1.08); }

.producto-sin-foto {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background:var(--gris-bg);
}
.producto-sin-foto i { font-size:44px; color:var(--borde); }

.producto-badge {
    position:absolute; top:14px; right:14px;
    font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px;
    text-transform:uppercase; letter-spacing:.8px;
}
.producto-badge.nuevo     { background:var(--amarillo); color:var(--negro); }
.producto-badge.destacado { background:var(--rojo); color:#fff; }

.producto-info { padding:24px; }
.producto-categoria {
    font-size:11px; font-weight:700; color:var(--azul);
    text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; display:block;
}
.producto-info h3 { font-size:20px; font-weight:700; color:var(--negro); margin-bottom:10px; }
.producto-info p  { font-size:14px; color:var(--gris-text); line-height:1.6; margin-bottom:20px; }

.producto-footer {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    flex-wrap:wrap;
}
.producto-precio { font-size:13px; font-weight:600; color:var(--gris-text); }
.btn-producto {
    display:inline-flex; align-items:center; gap:8px;
    background:#25D366; color:#fff;
    padding:10px 20px; border-radius:24px;
    font-size:13px; font-weight:700;
    transition: var(--trans);
    box-shadow:0 4px 14px rgba(37,211,102,.35);
}
.btn-producto:hover {
    background:#1da851; transform:scale(1.05);
    box-shadow:0 6px 20px rgba(37,211,102,.5);
}

.btn-variantes {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent; color:var(--azul);
    padding:10px 18px; border-radius:24px;
    border:2px solid var(--azul);
    font-size:13px; font-weight:700;
    transition: var(--trans);
}
.btn-variantes:hover { background:var(--azul); color:#fff; }
.btn-variantes i { transition: var(--trans); }

.producto-variantes {
    max-height:0; overflow:hidden;
    transition: max-height .35s ease;
    margin-top:0;
}
.tarjeta-producto.variantes-abiertas .producto-variantes {
    max-height:600px; margin-top:16px;
}
.variante-row {
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:10px 4px;
    border-top:1px solid var(--borde);
    font-size:14px;
}
.variante-medida { color:var(--negro); font-weight:600; flex:1; }
.variante-precio { color:var(--gris-text); font-weight:600; white-space:nowrap; }
.variante-btn {
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; border-radius:50%;
    background:#25D366; color:#fff; font-size:14px; flex-shrink:0;
    transition: var(--trans);
}
.variante-btn:hover { background:#1da851; transform:scale(1.1); }

/* ── CATÁLOGO COMPLETO (catalogo.html) ── */
.seccion-catalogo-completo { padding:140px 24px 100px; background:var(--gris-bg); min-height:70vh; }
.catalogo-breadcrumb { max-width:1280px; margin:0 auto 8px; font-size:14px; color:var(--gris-text); }
.catalogo-breadcrumb a { color:var(--azul); font-weight:600; }
.catalogo-titulo-pagina {
    max-width:1280px; margin:0 auto 20px;
    font-size:clamp(28px,3.5vw,40px); font-weight:800; color:var(--negro);
}
.catalogo-cotizacion-wrap { max-width:1280px; margin:0 auto 28px; text-align:center; }

.catalogo-buscador-wrap { max-width:1280px; margin:0 auto 32px; }
.catalogo-buscador { position:relative; max-width:520px; margin:0 auto; }
.catalogo-buscador i {
    position:absolute; left:20px; top:50%; transform:translateY(-50%);
    color:var(--gris-text); font-size:15px; pointer-events:none;
}
.catalogo-buscador input {
    width:100%; padding:14px 20px 14px 48px;
    border:2px solid var(--borde); border-radius:40px;
    font-size:15px; font-family:inherit; color:var(--negro);
    background:#fff; transition:var(--trans);
}
.catalogo-buscador input:focus {
    outline:none; border-color:var(--azul);
    box-shadow:0 0 0 3px rgba(30,47,141,.1);
}

.catalogo-layout {
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:260px minmax(0,1fr); gap:36px;
    align-items:start;
}
.catalogo-sidebar {
    background:#fff; border:1px solid var(--borde); border-radius:var(--radio);
    padding:24px; position:sticky; top:96px;
    max-height:calc(100vh - 120px); overflow-y:auto;
    min-width:0;
}
.catalogo-principal { min-width:0; }
.filtro-sidebar-titulo {
    font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
    color:var(--negro); margin:20px 0 12px;
}
.filtro-sidebar-titulo:first-child { margin-top:0; }
.filtro-grupo { margin-bottom:16px; }
.filtro-grupo:last-child { margin-bottom:0; }
.filtro-grupo-titulo {
    font-size:12px; font-weight:700; color:var(--azul);
    text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px;
}
.filtro-check {
    display:flex; align-items:center; gap:8px;
    font-size:14px; color:var(--gris-text);
    padding:5px 0; cursor:pointer;
}
.filtro-check input { accent-color:var(--azul); width:16px; height:16px; cursor:pointer; }
.filtro-check:hover { color:var(--azul); }
.btn-limpiar-filtros {
    width:100%; margin-top:20px; padding:10px; border-radius:24px;
    border:2px solid var(--borde); background:#fff; color:var(--gris-text);
    font-size:13px; font-weight:700; transition:var(--trans);
}
.btn-limpiar-filtros:hover { border-color:var(--rojo); color:var(--rojo); }

.catalogo-toolbar {
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    margin-bottom:24px;
}
.catalogo-contador { font-size:14px; color:var(--gris-text); }
.catalogo-orden { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--gris-text); }
.catalogo-orden select {
    padding:8px 14px; border-radius:8px; border:1px solid var(--borde);
    font-size:14px; font-family:inherit; color:var(--negro); background:#fff;
}
.catalogo-sin-resultados {
    grid-column:1/-1; text-align:center; padding:60px 20px;
    color:var(--gris-text); font-size:16px;
}

@media (max-width:900px) {
    .catalogo-layout { grid-template-columns:minmax(0,1fr); }
    .catalogo-sidebar { position:static; max-height:none; overflow-y:visible; }
}

/* ── SERVICIOS ── */
.seccion-servicios {
    padding:100px 24px;
    background:#fff;
}
.grid-servicios {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px; max-width:1280px; margin:0 auto;
}
.tarjeta-servicio {
    background:var(--gris-bg); border-radius:var(--radio);
    padding:40px 28px; border:1px solid var(--borde);
    text-align:center; transition:var(--trans);
    position:relative; overflow:hidden;
}
.tarjeta-servicio::before {
    content:''; position:absolute; bottom:0; left:0; right:0;
    height:4px;
    background:linear-gradient(90deg,var(--rojo),var(--amarillo),var(--azul));
    transform:scaleX(0); transition:var(--trans);
    transform-origin:left;
}
.tarjeta-servicio:hover { transform:translateY(-8px); box-shadow:var(--sombra-hover); background:#fff; }
.tarjeta-servicio:hover::before { transform:scaleX(1); }

.servicio-icon-wrap {
    width:72px; height:72px; border-radius:50%;
    background:linear-gradient(135deg,var(--azul),var(--azul-light));
    display:flex; align-items:center; justify-content:center;
    font-size:28px; color:#fff;
    margin:0 auto 20px;
    box-shadow:0 6px 20px rgba(30,47,141,.3);
    transition:var(--trans);
}
.tarjeta-servicio:hover .servicio-icon-wrap {
    background:linear-gradient(135deg,var(--rojo),#d4414a);
    transform:rotate(-8deg) scale(1.1);
}
.tarjeta-servicio h3 { font-size:22px; font-weight:700; color:var(--negro); margin-bottom:12px; }
.tarjeta-servicio p  { font-size:15px; color:var(--gris-text); line-height:1.6; margin-bottom:24px; }

.btn-desplegable {
    background:none; border:2px solid var(--azul); color:var(--azul);
    padding:10px 22px; border-radius:24px;
    font-size:14px; font-weight:600;
    display:inline-flex; align-items:center; gap:8px;
    transition:var(--trans);
}
.btn-desplegable:hover { background:var(--azul); color:#fff; }
.icono-flecha { transition: transform .35s; }
.tarjeta-servicio.abierta .icono-flecha { transform:rotate(180deg); }

.btn-consultar {
    display:inline-flex; align-items:center; gap:8px;
    background:#25D366; color:#fff;
    padding:10px 22px; border-radius:24px;
    font-size:14px; font-weight:600;
    transition:var(--trans);
    box-shadow:0 4px 14px rgba(37,211,102,.3);
}
.btn-consultar:hover { background:#1da851; transform:scale(1.05); }

.servicio-detalle {
    max-height:0; overflow:hidden; opacity:0;
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
    transition: max-height .45s ease, opacity .35s ease, margin .35s ease;
}
.tarjeta-servicio.abierta .servicio-detalle {
    max-height:200px; opacity:1; margin-top:20px;
}
.chip-servicio {
    display:inline-flex; align-items:center; gap:6px;
    background:#fff; color:var(--azul);
    border:1.5px solid var(--azul);
    padding:8px 18px; border-radius:24px;
    font-size:13px; font-weight:600;
    transition:var(--trans);
}
.chip-servicio:hover { background:var(--azul); color:#fff; }

/* ── NOSOTROS ── */
.seccion-nosotros {
    padding:100px 24px;
    background:linear-gradient(135deg,#f0f2fa,#fff);
}
.nosotros-grid {
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
}
.nosotros-imagen { position:relative; }
.nosotros-imagen img {
    width:100%; border-radius:var(--radio);
    box-shadow:0 16px 48px rgba(30,47,141,.15);
}
.nosotros-badge-float {
    position:absolute; bottom:-24px; right:-24px;
    background:#fff;
    border-radius:var(--radio-sm); padding:16px 20px;
    display:flex; align-items:center; gap:14px;
    box-shadow:0 8px 28px rgba(0,0,0,.12);
    border-left:4px solid var(--amarillo);
}
.nosotros-badge-float i { font-size:28px; color:var(--amarillo); }
.nosotros-badge-float strong { display:block; font-size:14px; color:var(--negro); }
.nosotros-badge-float span  { font-size:12px; color:var(--gris-text); }

.nosotros-texto h2 { font-size:clamp(28px,3vw,40px); font-weight:800; margin:14px 0 20px; line-height:1.2; }
.nosotros-texto p  { font-size:16px; color:var(--gris-text); line-height:1.7; margin-bottom:16px; }

.estadisticas-nosotros { display:flex; gap:28px; margin-top:32px; flex-wrap:wrap; }
.stat-item {
    background:#fff; border-radius:var(--radio-sm);
    padding:20px 24px; text-align:center;
    box-shadow:var(--sombra); border-bottom:4px solid var(--rojo); flex:1; min-width:100px;
}
.stat-item strong {
    display:inline; font-size:36px; font-weight:900; color:var(--azul);
}
.stat-item > span { font-size:28px; font-weight:900; color:var(--azul); }
.stat-item p { font-size:12px; color:var(--gris-text); font-weight:600; margin-top:4px; }

/* ── OPINIONES ── */
.seccion-opiniones {
    padding:100px 24px; background:#fff; overflow:hidden;
}
.carrusel-wrapper { max-width:1200px; margin:0 auto; }
.carrusel-opiniones {
    display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:12px; scrollbar-width:none;
}
.carrusel-opiniones::-webkit-scrollbar { display:none; }
.tarjeta-opinion {
    min-width:320px; flex:0 0 320px;
    background:var(--gris-bg); border-radius:var(--radio);
    padding:32px; scroll-snap-align:start;
    border:1px solid var(--borde);
    transition:var(--trans);
}
.tarjeta-opinion:hover { transform:translateY(-6px); box-shadow:var(--sombra-hover); }
.opinion-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.avatar-opinion {
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,var(--azul),var(--azul-light));
    color:#fff; font-size:16px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.opinion-header strong { font-size:16px; color:var(--negro); display:block; margin-bottom:4px; }
.estrellas { color:var(--amarillo); font-size:13px; }
.tarjeta-opinion > p { font-size:15px; color:var(--gris-text); line-height:1.6; font-style:italic; }
.carrusel-dots { display:flex; gap:8px; justify-content:center; margin-top:24px; }
.dot {
    width:8px; height:8px; border-radius:50%; background:var(--borde); cursor:pointer;
    transition:var(--trans);
}
.dot.activo { background:var(--azul); width:24px; border-radius:4px; }

/* ── GALERÍA ── */
.seccion-galeria { padding:100px 24px; background:var(--gris-bg); }
.filtros-galeria {
    display:flex; gap:12px; justify-content:center;
    flex-wrap:wrap; margin-bottom:40px;
}
.btn-filtro {
    padding:10px 26px; border-radius:40px;
    border:2px solid var(--borde); background:#fff;
    color:var(--gris-text); font-size:14px; font-weight:600; cursor:pointer;
    transition:var(--trans);
}
.btn-filtro.activo, .btn-filtro:hover {
    background:var(--azul); color:#fff; border-color:var(--azul);
    box-shadow:0 4px 16px rgba(30,47,141,.25);
}
.grid-galeria {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:20px; max-width:1280px; margin:0 auto;
}
.item-galeria {
    overflow:hidden; border-radius:var(--radio);
    box-shadow:var(--sombra); position:relative; cursor:pointer;
}
.item-galeria img {
    width:100%; height:260px; object-fit:cover;
    transition:transform .5s cubic-bezier(.4,0,.2,1);
    display:block;
}
.item-galeria:hover img { transform:scale(1.08); }
.galeria-overlay {
    position:absolute; inset:0;
    background:rgba(30,47,141,.5);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:28px;
    opacity:0; transition:var(--trans);
}
.item-galeria:hover .galeria-overlay { opacity:1; }

/* ── CONTACTO ── */
.seccion-contacto { padding:100px 24px; background:#fff; }
.contacto-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:48px; max-width:1200px; margin:0 auto; align-items:start;
}
.mapa-google iframe {
    border-radius:var(--radio);
    box-shadow:var(--sombra);
    width:100%; margin-bottom:28px;
}
.datos-contacto { display:flex; flex-direction:column; gap:16px; }
.dato-item { display:flex; align-items:flex-start; gap:16px; }
.dato-icon {
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--azul),var(--azul-light));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:16px;
}
.dato-item strong { display:block; font-size:14px; color:var(--negro); margin-bottom:2px; }
.dato-item span   { font-size:14px; color:var(--gris-text); }

.formulario-contacto {
    background:var(--gris-bg); padding:40px; border-radius:var(--radio);
    box-shadow:var(--sombra); border-top:4px solid var(--amarillo);
}
.formulario-contacto h3 { font-size:24px; font-weight:700; color:var(--azul); margin-bottom:28px; }
.campo-form { display:flex; flex-direction:column; margin-bottom:18px; }
.campo-form label { font-size:13px; font-weight:600; color:var(--negro); margin-bottom:6px; }
.campo-form input,
.campo-form select,
.campo-form textarea {
    padding:13px 16px; border:2px solid var(--borde);
    border-radius:var(--radio-sm); font-size:15px; font-family:inherit;
    background:#fff; transition:var(--trans); color:var(--negro);
}
.campo-form input:focus,
.campo-form select:focus,
.campo-form textarea:focus {
    outline:none; border-color:var(--azul);
    box-shadow:0 0 0 3px rgba(30,47,141,.1);
}
.grupo-campos { display:flex; gap:16px; }
.grupo-campos .campo-form { flex:1; margin-bottom:18px; }

.btn-enviar {
    background:linear-gradient(135deg,var(--azul),var(--azul-light));
    color:#fff; padding:16px 28px; border:none;
    border-radius:var(--radio-sm); font-size:16px; font-weight:700;
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
    transition:var(--trans); margin-top:4px;
}
.btn-enviar:hover {
    background:linear-gradient(135deg,var(--rojo),#c22229);
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(158,27,34,.4);
}

/* Toast de confirmación */
.toast {
    position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--azul); color:#fff;
    padding:14px 28px; border-radius:40px;
    font-size:14px; font-weight:600;
    box-shadow:0 8px 28px rgba(0,0,0,.2);
    opacity:0; transition:var(--trans); pointer-events:none; z-index:9999;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── FOOTER ── */
.pie-pagina {
    background:linear-gradient(135deg,#0d0d1a,#1a1a2e);
    color:#fff; padding:64px 24px 0;
}
.footer-inner {
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:48px; padding-bottom:48px;
    border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand h2 { font-size:28px; font-weight:800; color:var(--amarillo); margin-bottom:10px; }
.footer-brand p   { color:rgba(255,255,255,.55); font-size:14px; line-height:1.6; margin-bottom:24px; }
.footer-redes { display:flex; gap:12px; }
.footer-redes a {
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:16px; transition:var(--trans);
}
.footer-redes a:hover { background:var(--rojo); border-color:var(--rojo); transform:translateY(-3px); }

.footer-nav h4 { font-size:14px; font-weight:700; color:var(--amarillo); margin-bottom:18px; letter-spacing:1px; text-transform:uppercase; }
.footer-nav ul { display:flex; flex-direction:column; gap:10px; }
.footer-nav a { color:rgba(255,255,255,.55); font-size:14px; transition:var(--trans); }
.footer-nav a:hover { color:#fff; padding-left:6px; }

.footer-contacto h4 { font-size:14px; font-weight:700; color:var(--amarillo); margin-bottom:18px; letter-spacing:1px; text-transform:uppercase; }
.footer-contacto p {
    color:rgba(255,255,255,.55); font-size:14px;
    display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.footer-contacto i { color:var(--amarillo); width:16px; }

.footer-bottom {
    max-width:1200px; margin:0 auto;
    padding:20px 0; text-align:center;
    color:rgba(255,255,255,.3); font-size:13px;
}

/* ── LIGHTBOX ── */
.lightbox {
    position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9998;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:var(--trans);
}
.lightbox.activo { opacity:1; pointer-events:all; }
.lightbox img { max-width:90vw; max-height:85vh; border-radius:var(--radio); box-shadow:0 20px 60px rgba(0,0,0,.8); }
.lightbox-close {
    position:absolute; top:20px; right:24px;
    background:rgba(255,255,255,.15); border:none; color:#fff;
    width:44px; height:44px; border-radius:50%; font-size:18px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:var(--trans);
}
.lightbox-close:hover { background:var(--rojo); }

/* ── ANIMACIONES DE ENTRADA ── */
.reveal-up, .reveal-left, .reveal-right {
    opacity:0; transition: opacity .7s ease, transform .7s ease;
}
.reveal-up    { transform:translateY(40px); }
.reveal-left  { transform:translateX(-50px); }
.reveal-right { transform:translateX(50px); }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
    opacity:1; transform:translate(0);
}

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
    .nosotros-grid   { grid-template-columns:1fr; gap:40px; }
    .contacto-grid   { grid-template-columns:1fr; }
    .footer-inner    { grid-template-columns:1fr 1fr; }
    .nosotros-badge-float { right:0; bottom:-16px; }
}

@media (max-width:768px) {
    .cabecera { padding:0 20px; }
    .menu {
        position:fixed; top:72px; left:0; right:0; bottom:0;
        background:rgba(13,13,13,.97); backdrop-filter:blur(16px);
        padding:24px; transform:translateY(-120%); opacity:0;
        transition:var(--trans); pointer-events:none;
        overflow-y:auto;
    }
    .menu.open { transform:translateY(0); opacity:1; pointer-events:all; }
    .menu ul { flex-direction:column; gap:4px; }
    .nav-link { display:block; padding:14px 16px; font-size:17px; }
    .menu-item-categorias { padding-bottom:0; }
    .megamenu { display:none; }
    body.menu-abierto { overflow:hidden; }
    .hamburger { display:flex; }
    .header-inner { height:64px; }
    .logo-imagen { height:64px; margin-bottom:-14px; }
    .hero-contenido h1 { font-size:36px; }
    .grupo-campos { flex-direction:column; }
    .footer-inner { grid-template-columns:1fr; gap:32px; }
    .estadisticas-nosotros { gap:16px; }
    .banda-metricas .metrica { border-right:none; border-bottom:1px solid rgba(255,255,255,.1); }
    .banda-metricas .metrica:last-child { border-bottom:none; }
}

@media (max-width:480px) {
    .botones-hero { flex-direction:column; align-items:center; }
    .btn-primario, .btn-wsp { width:100%; justify-content:center; }
    .tarjeta-opinion { min-width:280px; flex:0 0 280px; }
    .whatsapp-float { bottom:20px; right:20px; width:52px; height:52px; font-size:24px; }
    .variante-btn { width:38px; height:38px; font-size:16px; }
    .variante-row { padding:12px 4px; }
}

@media (max-width:360px) {
    /* Debajo de este ancho, una tarjeta de 300px mínimo ya no entra con el padding lateral */
    .grid-productos { grid-template-columns:1fr; }
}