/* ============================================================ DESIGN TOKENS — fuente única de verdad de colores/radios ============================================================ */ :root { --negro: #08080a; /* fondo principal */ --negro-2: #050506; /* body/exterior */ --superficie: #16161b; /* tarjetas, chips, inputs */ --superficie-2:#0e0e12; /* barras de specs */ --borde: #232328; --borde-sutil: #1a1a1f; --rojo: #e10600; --rojo-oscuro: #a30400; --turquesa: #00f0c0; --lima: #c6ff00; /* exclusivo badge Oferta */ --blanco: #ffffff; --gris-texto: #b5b8c2; --gris-apagado:#7d808a; --gris-nav: #9a9ca6; --whatsapp: #25d366; --radio-card: 12px; --radio-btn: 5px; --sombra-card: 0 24px 60px rgba(0,0,0,.32); --sombra-panel:0 24px 50px rgba(0,0,0,.4); /* Fijos: no cambian con el tema (texto sobre fondos de marca que siempre son claros/oscuros, independiente del modo claro/oscuro) */ --texto-acento: #08080a; /* texto oscuro sobre lima/turquesa */ --texto-inverso: #ffffff; /* texto blanco sobre rojo/whatsapp */ --turquesa-texto: var(--turquesa); /* turquesa como texto plano; se oscurece en modo claro */ } /* ============================================================ MODO CLARO — se activa con ============================================================ */ [data-theme="claro"] { --negro: #ffffff; --negro-2: #f2f3f5; --superficie: #ffffff; --superficie-2: #eef0f3; --borde: #e1e3e8; --borde-sutil: #ececef; --blanco: #0c0c10; --gris-texto: #52555f; --gris-apagado: #74767f; --gris-nav: #5c5f68; --turquesa-texto: #00916f; --sombra-card: 0 16px 40px rgba(20,20,30,.10); --sombra-panel: 0 16px 40px rgba(20,20,30,.12); } /* La "marca" (header, footer, hero, marquee, banda CTA) se mantiene siempre oscura en ambos temas — el logo es blanco y no hay versión oscura del isotipo, así que estas zonas no invierten. */ header.site-header, footer.site-footer, .hero-carousel-section, .catalogo-hero, .marquee-bar, .cta-band { --negro: #08080a; --negro-2: #050506; --superficie: #16161b; --superficie-2: #0e0e12; --borde: #232328; --borde-sutil: #1a1a1f; --blanco: #ffffff; --gris-texto: #b5b8c2; --gris-apagado: #7d808a; --gris-nav: #9a9ca6; --turquesa-texto: var(--turquesa); } /* ============================================================ BASE ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Barlow', 'Segoe UI', Arial, sans-serif; color: var(--blanco); background: var(--negro-2); line-height: 1.6; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } .container { max-width: 1180px; margin: 0 auto; padding: 0 32px; } /* ============================================================ TIPOGRAFÍA DISPLAY (Archivo) ============================================================ */ .f-display { font-family: 'Archivo', sans-serif; } /* ============================================================ TRICOLOR BAR ============================================================ */ .tricolor-bar { display: block; height: 4px; background: linear-gradient(90deg, var(--rojo) 0 50%, var(--turquesa) 50%); } /* ============================================================ HEADER ============================================================ */ header.site-header { position: sticky; top: 0; z-index: 100; background: var(--negro); border-bottom: 1px solid var(--borde-sutil); box-shadow: 0 2px 20px rgba(0,0,0,.5); } .navbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; } .logo { display: inline-flex; align-items: center; text-decoration: none; } .logo img { height: 38px; width: auto; display: block; } nav.main-nav ul { display: flex; list-style: none; gap: 28px; align-items: center; } nav.main-nav a { font-family: 'Archivo', sans-serif; font-weight: 800; font-style: italic; font-size: 0.88rem; text-transform: uppercase; letter-spacing: .4px; color: var(--gris-nav); padding: 6px 0; } nav.main-nav a:hover, nav.main-nav a.active { color: var(--turquesa); } .has-dropdown { position: relative; } .dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-card); padding: 10px; min-width: 200px; flex-direction: column; box-shadow: var(--sombra-card); } .has-dropdown:hover .dropdown { display: flex; } .dropdown a { padding: 10px 14px; border-radius: 6px; font-style: normal; font-weight: 600; font-size: 0.88rem; color: var(--blanco); text-transform: none; } .dropdown a:hover { background: var(--borde); color: var(--turquesa); } .navbar-icons { display: flex; align-items: center; gap: 14px; font-size: 1.1rem; } .icon-search { color: var(--blanco); font-size: 1.2rem; } .tema-toggle { background: none; border: none; color: var(--blanco); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0; } .navbar-carrito-btn { position: relative; background: none; border: none; color: var(--blanco); font-size: 1.2rem; cursor: pointer; padding: 0; } .navbar-carrito-badge { position: absolute; top: -6px; right: -8px; background: var(--turquesa); color: var(--negro); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 10px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; } .menu-toggle { display: none; color: var(--blanco); background: none; border: none; font-size: 1.6rem; cursor: pointer; } /* ============================================================ HERO CARRUSEL (solo index.html) ============================================================ */ .hero-carousel-section { position: relative; overflow: hidden; background: repeating-linear-gradient(118deg, #0c0c10 0 40px, #08080a 40px 80px); border-bottom: 4px solid var(--turquesa); } .hero-carousel-section::before { content: ''; position: absolute; top: 50%; left: -10%; width: 120%; height: 260px; transform: translateY(-50%) skewY(-7deg); background: radial-gradient(ellipse at center, rgba(225,6,0,.5), transparent 62%); filter: blur(8px); pointer-events: none; z-index: 0; } .carousel-track { display: flex; width: 300%; transition: transform .55s cubic-bezier(.65,.05,.2,1); } .carousel-slide { width: calc(100% / 3); flex-shrink: 0; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 20px; padding: 46px 60px 50px; position: relative; z-index: 1; } /* Slide — columna izquierda */ .slide-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Archivo', sans-serif; font-weight: 800; font-style: italic; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: var(--negro); padding: 6px 16px; transform: skewX(-8deg); margin-bottom: 16px; } .slide-eyebrow.turquesa { background: var(--turquesa); } .slide-eyebrow.rojo { background: var(--rojo); color: var(--blanco); } .slide-title { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 92px; line-height: .85; text-transform: uppercase; letter-spacing: -4px; margin: 0 0 8px; color: transparent; -webkit-text-stroke: 2px var(--blanco); text-shadow: 0 0 50px rgba(225,6,0,.4); } .slide-desc { font-size: 16px; line-height: 1.55; color: var(--gris-texto); max-width: 430px; margin: 0 0 26px; } .slide-btns { display: flex; gap: 12px; margin-bottom: 28px; } .btn-hero { background: var(--rojo); color: var(--blanco); padding: 14px 30px; font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; transform: skewX(-8deg); display: inline-block; border: none; cursor: pointer; transition: background .2s; } .btn-hero:hover { background: var(--rojo-oscuro); } .btn-hero-outline { border: 2px solid var(--blanco); padding: 12px 24px; font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; transform: skewX(-8deg); display: inline-block; color: var(--blanco); cursor: pointer; transition: background .2s, color .2s; } .btn-hero-outline:hover { background: var(--blanco); color: var(--negro); } .slide-specs { display: flex; gap: 26px; border-top: 1px solid var(--borde-sutil); padding-top: 18px; width: fit-content; } .slide-spec-val { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 24px; color: var(--blanco); } .slide-spec-val.acento { color: var(--turquesa); } .slide-spec-lbl { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gris-apagado); } /* Slide — columna derecha (imagen) */ .slide-img-col { display: flex; justify-content: center; align-items: center; position: relative; } .slide-img-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(225,6,0,.32), transparent 68%); } .slide-img-glow.turquesa { background: radial-gradient(circle, rgba(0,240,192,.26), transparent 68%); } .slide-img-panel { position: relative; width: 340px; height: 540px; background: transparent; border-radius: 0; box-shadow: none; display: flex; align-items: flex-start; justify-content: center; padding: 0; overflow: hidden; } .slide-img-panel img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: drop-shadow(0 24px 40px rgba(0,0,0,.55)); } /* Controles del carrusel */ .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(8,8,10,.6); color: var(--blanco); font-size: 22px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background .2s; } .carousel-arrow:hover { background: rgba(225,6,0,.7); } .carousel-arrow-prev { left: 16px; } .carousel-arrow-next { right: 16px; } .carousel-dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; z-index: 10; } .carousel-dot { height: 9px; width: 9px; border-radius: 50px; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,.35); transition: all .3s ease; } .carousel-dot.activo { width: 28px; background: var(--rojo); } /* ============================================================ MARQUEE ============================================================ */ @keyframes trx-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-bar { background: var(--negro); padding: 14px 0; overflow: hidden; border-bottom: 1px solid var(--borde-sutil); } .marquee-track { display: flex; gap: 48px; align-items: center; white-space: nowrap; font-family: 'Archivo', sans-serif; font-weight: 800; font-style: italic; font-size: 16px; color: #3a3c44; text-transform: uppercase; letter-spacing: 1px; animation: trx-marq 18s linear infinite; width: max-content; } .marquee-track .sep-rojo { color: var(--rojo); } .marquee-track .sep-turq { color: var(--turquesa); } .marquee-track .marquee-sep { height: 18px; width: auto; opacity: 0.85; } /* ============================================================ SECCIÓN MODELOS 2026 (home) ============================================================ */ .prod-section { padding: 56px 32px; background: var(--negro); } .prod-section-hdr { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; } .prod-section-tag { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: var(--rojo); margin-bottom: 6px; } .prod-section-h2 { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 38px; text-transform: uppercase; letter-spacing: -1px; margin: 0; } .prod-section-ver { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--gris-texto); border-bottom: 2px solid var(--rojo); padding-bottom: 4px; } .prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Tarjeta de producto (home + eventual catálogo) */ .prod-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-card); overflow: hidden; transition: transform .25s, border-color .25s; cursor: pointer; } .prod-card:hover { transform: translateY(-4px); border-color: var(--rojo); } .prod-card-img { height: 230px; background: linear-gradient(160deg, #ffffff, #eceef1); display: flex; align-items: center; justify-content: center; position: relative; } .prod-card-img img { max-height: 200px; max-width: 88%; object-fit: contain; } .prod-badge { position: absolute; top: 14px; left: 14px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 11px; padding: 4px 10px; border-radius: 50px; text-transform: uppercase; z-index: 1; } .prod-badge.oferta { background: var(--lima); color: var(--texto-acento); } .prod-badge.nuevo { background: var(--turquesa); color: var(--texto-acento); } .prod-badge.agotado { background: var(--gris-apagado); color: var(--blanco); } .prod-card-body { padding: 18px; } .prod-eyebrow { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-apagado); margin-bottom: 4px; } .prod-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-style: italic; font-size: 20px; text-transform: uppercase; margin: 0 0 8px; } .prod-prices { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .prod-price { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; color: var(--blanco); } .prod-price-old { font-size: 13px; color: var(--gris-apagado); text-decoration: line-through; } .prod-cuotas { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 13px; color: var(--turquesa-texto); margin-bottom: 14px; } .prod-btn { width: 100%; background: var(--rojo); color: var(--texto-inverso); text-align: center; padding: 11px; border-radius: var(--radio-btn); border: none; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; display: block; transition: background .2s; } .prod-btn:hover { background: var(--rojo-oscuro); } /* ============================================================ CTA BAND ============================================================ */ .cta-band { background: var(--rojo); padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; } .cta-band-title { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 30px; text-transform: uppercase; letter-spacing: -1px; color: var(--blanco); } .cta-band-btn { background: var(--negro); color: var(--blanco); padding: 14px 30px; font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 13px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; border: none; cursor: pointer; text-decoration: none; transition: background .2s; } .cta-band-btn:hover { background: #111; } /* ============================================================ FOOTER ============================================================ */ footer.site-footer { background: var(--negro); padding: 26px 32px; display: flex; justify-content: space-between; align-items: center; color: var(--gris-apagado); font-size: 12.5px; border-top: 1px solid var(--borde-sutil); } .footer-logo img { height: 28px; width: auto; opacity: .85; } /* ============================================================ CARRITO DRAWER (compartido en todas las páginas) ============================================================ */ .carrito-flotante { position: fixed; bottom: 24px; right: 24px; background: var(--rojo); color: var(--texto-inverso); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 6px 22px rgba(225,6,0,.45); z-index: 250; cursor: pointer; border: none; } .carrito-flotante .carrito-contador { position: absolute; top: -4px; right: -4px; background: var(--turquesa); color: var(--texto-acento); font-size: 0.7rem; font-weight: 800; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .carrito-drawer { position: fixed; top: 0; right: -100%; width: 380px; max-width: 92vw; height: 100%; background: var(--superficie); border-left: 1px solid var(--borde); box-shadow: -10px 0 30px rgba(0,0,0,.5); z-index: 300; transition: right .25s ease; display: flex; flex-direction: column; } .carrito-drawer.abierto { right: 0; } .carrito-header { padding: 20px; border-bottom: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; } .carrito-header h3 { font-family: 'Archivo', sans-serif; text-transform: uppercase; color: var(--blanco); } .carrito-cerrar { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--gris-texto); } .carrito-items { flex: 1; overflow-y: auto; padding: 16px 20px; } .carrito-vacio { color: var(--gris-texto); font-size: .9rem; text-align: center; padding: 40px 0; } .carrito-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--borde); } .carrito-item .info { font-size: .88rem; color: var(--gris-texto); } .carrito-item .info strong { display: block; color: var(--blanco); } .carrito-item .quitar { background: none; border: none; color: var(--rojo); cursor: pointer; font-size: .8rem; font-weight: 700; } .carrito-footer { padding: 20px; border-top: 1px solid var(--borde); } .carrito-total { display: flex; justify-content: space-between; font-weight: 800; color: var(--blanco); margin-bottom: 14px; font-size: 1.1rem; } .carrito-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 290; } .carrito-overlay.abierto { display: block; } .form-box input, .form-box select, .form-box textarea { width: 100%; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--borde); background: var(--negro); color: var(--blanco); border-radius: 8px; font-family: inherit; font-size: .95rem; } .form-box input::placeholder, .form-box textarea::placeholder { color: var(--gris-apagado); } /* ============================================================ BOTÓN GLOBAL (para productos.html / contacto.html) ============================================================ */ .btn { display: inline-block; background: var(--rojo); color: var(--texto-inverso); padding: 12px 28px; border-radius: var(--radio-btn); font-family: 'Archivo', sans-serif; font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; border: none; cursor: pointer; transition: background .2s, transform .2s; } .btn:hover { background: var(--rojo-oscuro); transform: translateY(-2px); } .btn-outline { background: transparent; border: 2px solid var(--blanco); margin-left: 14px; } .btn-outline:hover { background: var(--blanco); color: var(--negro); } .btn-block { width: 100%; display: block; text-align: center; } /* ============================================================ SECCIONES GENÉRICAS (productos.html / contacto.html) ============================================================ */ section.page-section { padding: 70px 0; background: var(--negro); } .bg-gris { background: var(--superficie); } .section-title { text-align: center; margin-bottom: 44px; } .section-title .tag { font-family: 'Archivo', sans-serif; color: var(--rojo); font-weight: 800; letter-spacing: 2px; font-size: .8rem; text-transform: uppercase; } .section-title h2 { font-family: 'Archivo', sans-serif; color: var(--blanco); font-size: 2rem; margin-top: 8px; text-transform: uppercase; font-weight: 900; } .section-title p { color: var(--gris-texto); max-width: 600px; margin: 14px auto 0; } /* FILTRO CATEGORÍAS (productos.html) */ .tabs-categoria { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; justify-content: center; } .tab-categoria { background: var(--superficie); border: 1px solid var(--borde); color: var(--blanco); padding: 10px 20px; border-radius: 50px; font-family: 'Archivo', sans-serif; font-weight: 700; text-transform: uppercase; font-size: .82rem; cursor: pointer; } .tab-categoria:hover { border-color: var(--rojo); color: var(--rojo); } .tab-categoria.activo { background: var(--rojo); border-color: var(--rojo); color: var(--texto-inverso); } /* GRID DE PRODUCTOS (productos.html — usa .card existente) */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-card); overflow: hidden; transition: .25s; position: relative; } .card:hover { transform: translateY(-6px); border-color: var(--rojo); } .card .card-img { height: 190px; background: linear-gradient(160deg, #ffffff, #eceef1); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gris-apagado); gap: 6px; } .card .card-img .card-icon { font-size: 2.4rem; } .card .card-img .card-icon-text { font-size: .78rem; font-weight: 600; } .card .card-body { padding: 18px; } .card h3 { font-family: 'Archivo', sans-serif; font-style: italic; color: var(--blanco); font-size: 1.02rem; margin-bottom: 8px; text-transform: uppercase; } .card .precio { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--rojo); font-size: 1.1rem; margin-bottom: 12px; } .badge-oferta { position: absolute; top: 12px; left: 12px; background: var(--lima); color: var(--texto-acento); font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 50px; text-transform: uppercase; } .card select.talle-select { width: 100%; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--borde); background: var(--negro); color: var(--blanco); border-radius: 8px; font-family: inherit; font-size: .88rem; } /* GRID 4 categorías */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cat-card { background: var(--negro); border: 1px solid var(--borde); border-radius: var(--radio-card); padding: 30px 16px; text-align: center; font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase; font-size: .9rem; color: var(--blanco); transition: .2s; } .cat-card:hover { transform: translateY(-4px); border-color: var(--rojo); color: var(--turquesa); } .cat-card .cat-icon { font-size: 2.2rem; margin-bottom: 12px; } /* INFRA / ENVÍOS */ .infra-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; } .infra-grid .infra-item { background: var(--negro); border: 1px solid var(--borde); border-radius: var(--radio-card); padding: 26px 16px; } .infra-grid .infra-icon { font-size: 1.6rem; margin-bottom: 8px; color: var(--turquesa); } .infra-grid .infra-label { font-size: .88rem; color: var(--gris-texto); } /* CONTACTO */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .contact-cards { display: flex; flex-direction: column; gap: 18px; } .contact-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-card); padding: 22px 26px; } .contact-card h4 { font-family: 'Archivo', sans-serif; color: var(--turquesa); margin-bottom: 10px; text-transform: uppercase; font-size: .95rem; } .contact-card p { font-size: .92rem; color: var(--gris-texto); margin-bottom: 4px; } .form-box { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-card); padding: 30px; } /* WHATSAPP FLOAT */ .whatsapp-float { position: fixed; bottom: 24px; left: 24px; background: var(--whatsapp); color: var(--texto-inverso); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 6px 18px rgba(0,0,0,.4); z-index: 200; } /* ============================================================ CATÁLOGO (productos.html) ============================================================ */ .catalogo-hero { padding: 40px 32px 24px; background: repeating-linear-gradient(118deg, #0c0c10 0 40px, #08080a 40px 80px); border-bottom: 1px solid var(--borde-sutil); } .catalogo-hero-tag { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: var(--rojo); margin-bottom: 8px; } .catalogo-hero-titulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 52px; line-height: 1; text-transform: uppercase; letter-spacing: -2px; margin: 0 0 10px; } .catalogo-hero-desc { font-size: 15px; color: var(--gris-texto); max-width: 520px; margin: 0; } .catalogo-subtitulo { font-family: 'Archivo', sans-serif; font-weight: 800; font-style: italic; font-size: 22px; text-transform: uppercase; letter-spacing: -.5px; margin: 0; } .cat-filter-bar { padding: 18px 32px; display: flex; gap: 10px; flex-wrap: wrap; position: sticky; top: 61px; /* altura del header (navbar ~57px + tricolor-bar 4px) */ background: var(--negro); z-index: 10; border-bottom: 1px solid var(--borde-sutil); } .cat-grid-4 { padding: 8px 32px 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .cat-prod-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-card); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, border-color .2s; cursor: pointer; } .cat-prod-card:hover { transform: translateY(-4px); border-color: var(--rojo); } .cat-prod-img { height: 240px; background: linear-gradient(160deg, #ffffff, #eceef1); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .cat-prod-img img { max-height: 208px; max-width: 86%; object-fit: contain; } .cat-prod-body { padding: 16px; display: flex; flex-direction: column; flex: 1; } .cat-prod-eyebrow { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-apagado); margin-bottom: 4px; } .cat-prod-nombre { font-family: 'Archivo', sans-serif; font-weight: 800; font-style: italic; font-size: 18px; text-transform: uppercase; margin: 0 0 8px; } .cat-prod-link { color: inherit; } .cat-prod-link:hover { color: var(--turquesa-texto); } .cat-prod-prices { display: flex; align-items: baseline; gap: 8px; margin-top: auto; margin-bottom: 3px; } .cat-prod-precio { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; color: var(--blanco); } .cat-prod-precio-old { font-size: 12px; color: var(--gris-apagado); text-decoration: line-through; } .cat-prod-cuotas { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 12px; color: var(--turquesa-texto); margin-bottom: 6px; } .cat-prod-descuento { display: inline-block; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--texto-acento); background: var(--lima); padding: 3px 8px; border-radius: 5px; margin-bottom: 13px; } /* ============================================================ FICHA DE PRODUCTO (ficha.html) ============================================================ */ .ficha-breadcrumb { padding: 16px 32px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gris-apagado); border-bottom: 1px solid var(--borde-sutil); display: flex; align-items: center; gap: 8px; } .ficha-breadcrumb a { color: var(--gris-apagado); } .ficha-breadcrumb a:hover { color: var(--blanco); } .ficha-breadcrumb-sep { opacity: .5; } .ficha-breadcrumb-actual { color: var(--blanco); } .ficha-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 36px; padding: 38px 32px 44px; } /* Galería */ .ficha-galeria-main { background: linear-gradient(160deg, #ffffff, #e9ebee); border-radius: 16px; height: 460px; display: flex; align-items: center; justify-content: center; padding: 28px; position: relative; box-shadow: var(--sombra-panel); overflow: hidden; } .ficha-galeria-main .prod-badge { top: 18px; left: 18px; } .ficha-main-img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 16px 26px rgba(0,0,0,.28)); display: none; } .ficha-main-img.activo { display: block; } .ficha-thumbs { display: flex; gap: 12px; margin-top: 14px; } .ficha-thumb { width: 84px; height: 84px; border-radius: 9px; cursor: pointer; background: linear-gradient(160deg, #ffffff, #e9ebee); display: flex; align-items: center; justify-content: center; padding: 8px; border: 2px solid var(--borde); transition: border-color .2s; overflow: hidden; } .ficha-thumb img { max-height: 100%; max-width: 100%; object-fit: contain; } .ficha-thumb.activo { border-color: var(--turquesa); } .ficha-thumb:hover { border-color: var(--turquesa); } /* Info */ .ficha-eyebrow { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; color: var(--rojo); margin-bottom: 8px; } .ficha-titulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 56px; line-height: .9; text-transform: uppercase; letter-spacing: -2px; margin: 0 0 4px; color: transparent; -webkit-text-stroke: 2px var(--blanco); } .ficha-subtitulo { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gris-texto); margin-bottom: 18px; } .ficha-precio-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 2px; } .ficha-precio-promo { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 38px; color: var(--blanco); } .ficha-precio-lista { font-size: 16px; color: var(--gris-apagado); text-decoration: line-through; } .ficha-badge-promo { background: rgba(0, 240, 192, .12); color: var(--turquesa); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 9px; border-radius: 5px; } .ficha-cuotas { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 14px; color: var(--turquesa-texto); margin-bottom: 6px; } .ficha-descuento { display: inline-block; font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 13px; color: var(--texto-acento); background: var(--lima); padding: 5px 10px; border-radius: 6px; margin-bottom: 22px; } .ficha-nota { font-size: 13px; color: var(--gris-apagado); margin-bottom: 22px; } .ficha-desc { font-size: 15px; line-height: 1.6; color: var(--gris-texto); margin: 0 0 22px; } .ficha-specs-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; } .ficha-spec { background: var(--superficie); border: 1px solid var(--borde); border-radius: 9px; padding: 12px 14px; } .ficha-spec-lbl { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gris-apagado); } .ficha-spec-val { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 15px; margin-top: 2px; } .ficha-acciones { display: flex; gap: 12px; align-items: stretch; margin-bottom: 12px; } .ficha-qty-wrap { display: flex; align-items: center; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); } .ficha-qty-btn { width: 42px; height: 48px; background: none; border: none; color: var(--blanco); font-size: 20px; cursor: pointer; } .ficha-qty-num { min-width: 34px; text-align: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; } .ficha-btn-comprar { flex: 1; background: var(--rojo); color: var(--texto-inverso); text-align: center; border: none; border-radius: 6px; font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; transition: background .2s; } .ficha-btn-comprar:hover { background: var(--rojo-oscuro); } .ficha-btn-wa { width: 100%; border: 2px solid var(--whatsapp); background: none; color: var(--blanco); text-align: center; padding: 13px; border-radius: 6px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; transition: background .2s; } .ficha-btn-wa:hover { background: rgba(37, 211, 102, .1); } .ficha-logistica { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--borde-sutil); padding-top: 18px; } .ficha-logistica-item { display: flex; align-items: center; gap: 12px; font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--gris-texto); } .ficha-logistica-item strong { color: var(--blanco); } .ficha-logistica-icon { font-size: 18px; color: var(--turquesa); } /* Sección especificaciones completas */ .ficha-specs-tabla-section { padding: 0 32px 48px; } .ficha-section-titulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 26px; text-transform: uppercase; letter-spacing: -.5px; margin: 0 0 6px; } .ficha-section-barra { height: 3px; width: 54px; background: var(--rojo); margin-bottom: 22px; } .ficha-specs-tabla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; background: var(--superficie-2); border: 1px solid var(--borde-sutil); border-radius: var(--radio-card); padding: 8px 26px; } .ficha-specs-fila { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--borde-sutil); } .ficha-specs-fila.no-border { border-bottom: none; } .ficha-specs-lbl { font-family: 'Barlow', sans-serif; font-size: 14px; color: var(--gris-apagado); } .ficha-specs-val { font-family: 'Barlow', sans-serif; font-weight: 700; font-size: 14px; color: var(--blanco); } /* Sección relacionados */ .ficha-related-section { padding: 0 32px 56px; } .ficha-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* Placeholder para productos sin foto */ .ficha-placeholder-img { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--gris-apagado); font-family: 'Barlow', sans-serif; } .ficha-placeholder-img span { font-size: 40px; opacity: .45; } .ficha-placeholder-img small { font-size: 13px; opacity: .6; } .ficha-placeholder-img.grande span { font-size: 64px; } .ficha-placeholder-img.grande small { font-size: 15px; } .ficha-related-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-card); overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform .2s, border-color .2s; } .ficha-related-card:hover { transform: translateY(-4px); border-color: var(--rojo); } .ficha-related-img { height: 200px; background: linear-gradient(160deg, #ffffff, #eceef1); display: flex; align-items: center; justify-content: center; } .ficha-related-img img { max-height: 172px; max-width: 84%; object-fit: contain; } .ficha-related-body { padding: 16px; } /* ============================================================ CONTACTO (contacto.html) ============================================================ */ .contacto-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; padding: 48px 32px 64px; align-items: start; } /* Canal WhatsApp — tarjeta destacada */ .contacto-wa-card { display: flex; align-items: center; gap: 18px; background: var(--negro); border: 2px solid var(--whatsapp); border-radius: var(--radio-card); padding: 22px 24px; margin-bottom: 16px; cursor: pointer; transition: background .2s; text-decoration: none; color: inherit; } .contacto-wa-card:hover { background: rgba(37,211,102,.06); } .contacto-wa-icon { font-size: 2rem; flex-shrink: 0; } .contacto-wa-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--whatsapp); margin-bottom: 4px; } .contacto-wa-numero { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 20px; color: var(--blanco); } .contacto-wa-sub { font-size: 12.5px; color: var(--gris-apagado); margin-top: 2px; } /* Tarjetas de info secundaria */ .contacto-info-card { display: flex; align-items: flex-start; gap: 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-card); padding: 18px 20px; margin-bottom: 12px; } .contacto-info-icon { font-size: 1.2rem; margin-top: 2px; flex-shrink: 0; } .contacto-info-titulo { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-apagado); margin-bottom: 4px; } .contacto-info-val { font-family: 'Archivo', sans-serif; font-weight: 800; font-style: italic; font-size: 15px; color: var(--blanco); } .contacto-info-sub { font-size: 12px; color: var(--gris-apagado); margin-top: 2px; } .contacto-ig-link:hover { color: var(--turquesa); } /* Formulario */ .contacto-form-wrap { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-card); padding: 32px; } .contacto-form-tag { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; color: var(--rojo); margin-bottom: 6px; } .contacto-form-titulo { font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 26px; text-transform: uppercase; letter-spacing: -.5px; margin: 0 0 28px; } .contacto-form-field { margin-bottom: 16px; } .contacto-form-label { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gris-apagado); margin-bottom: 6px; } .contacto-input { width: 100%; padding: 13px 16px; background: var(--negro); border: 1px solid var(--borde); border-radius: 8px; color: var(--blanco); font-family: 'Barlow', sans-serif; font-size: 14px; transition: border-color .2s; resize: vertical; } .contacto-input:focus { outline: none; border-color: var(--turquesa); } .contacto-input::placeholder { color: var(--gris-apagado); } .contacto-submit { width: 100%; background: var(--rojo); color: var(--texto-inverso); padding: 14px; border: none; border-radius: var(--radio-btn); font-family: 'Archivo', sans-serif; font-weight: 900; font-style: italic; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; margin-top: 4px; transition: background .2s, transform .2s; } .contacto-submit:hover { background: var(--rojo-oscuro); transform: translateY(-2px); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { nav.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--negro); border-top: 1px solid var(--borde); padding: 10px 0; } nav.main-nav.abierto { display: block; } nav.main-nav ul { flex-direction: column; gap: 0; align-items: stretch; } nav.main-nav li { border-bottom: 1px solid var(--borde); } nav.main-nav a { display: block; padding: 14px 24px; } .has-dropdown .dropdown { display: flex; position: static; box-shadow: none; border: none; padding-left: 12px; } .navbar { position: relative; } .menu-toggle { display: block; } .navbar-icons { gap: 10px; } .carousel-slide { grid-template-columns: 1fr; padding: 36px 24px 44px; } .slide-img-col { margin-top: 8px; } .slide-img-glow { width: 220px; height: 220px; } .slide-img-panel { width: 160px; height: 220px; } .slide-title { font-size: 64px; } .prod-grid, .grid-3, .grid-4, .contact-grid, .infra-grid, .contacto-grid, .ficha-grid, .ficha-related-grid { grid-template-columns: 1fr; } .cta-band { flex-direction: column; gap: 18px; text-align: center; } .cat-grid-4 { grid-template-columns: repeat(2, 1fr); padding: 8px 16px 40px; } .catalogo-hero, .cat-filter-bar, .prod-section { padding-left: 16px; padding-right: 16px; } .ficha-grid { padding: 24px 16px 32px; } .ficha-specs-tabla-section, .ficha-related-section { padding-left: 16px; padding-right: 16px; } .ficha-specs-tabla { grid-template-columns: 1fr; gap: 0; } .contacto-grid { padding: 32px 16px 48px; } footer.site-footer { flex-direction: column; gap: 12px; text-align: center; } }