/* onePercent v2.4 — multi-svc + img-ref */ /* ===================================================== SISTEMA DE VARIABLES CSS — ARQUITECTURA [data-theme] Paleta CMYK logo: Negro #1A1A1A · Amarillo · Magenta · Cyan JS: document.documentElement.setAttribute('data-theme','light') ===================================================== */ /* ── Tipografías y constantes (no cambian con el tema) ── */ :root { --ff1: 'Bebas Neue',sans-serif; --ff2: 'Barlow Condensed',sans-serif; --ff3: 'Barlow',sans-serif; --lk: #1A1A1A; --red: #D63B2F; --grn: #00B050; } /* ── TEMA OSCURO (default) ── */ :root, [data-theme="dark"] { --bg0: #0D0D0D; --bg1: #141414; --bg2: #1C1C1C; --bg3: #232323; --bd1: #2E2E2E; --bd2: #3A3A3A; --t1: #F2F0EB; --t2: #9090A0; --t3: #585450; --ly: #FFE600; --lm: #E91E8C; --lc: #00A3E0; --lg: #808080; --grad: linear-gradient(160deg,#FFE600 0%,#E91E8C 52%,#00A3E0 100%); --gradh: linear-gradient(90deg,#FFE600 0%,#FF5500 35%,#E91E8C 65%,#00A3E0 100%); --map-filter: grayscale(1) invert(.85) contrast(1.1); } /* ── TEMA CLARO ── */ [data-theme="light"] { /* ── Fondos: paleta cálida premium ── */ --bg0: #F5F5F8; /* crema cálida — más rica que blanco puro */ --bg1: #EEEEF4; /* tono medio cálido */ --bg2: #FFFFFF; /* blanco puro para tarjetas */ --bg3: #EBEBF2; /* superficie elevada */ /* ── Bordes ── */ --bd1: #D4D4DE; --bd2: #C0C0C8; /* ── Texto: ricos, no fríos ── */ --t1: #18182A; /* casi negro con tinte cálido */ --t2: #383848; /* marrón oscuro cálido */ --t3: #70707A; /* gris cálido medio */ /* ── Brand: COLORES VÍVIDOS en modo claro (como en imprenta real) ── */ --ly: #A87000; /* dorado impresión — 4.8:1 sobre blanco */ --lm: #C40050; /* magenta rico — 5.5:1 sobre blanco */ --lc: #0055A0; /* cyan profundo — 5.0:1 sobre blanco */ --lg: #65605A; /* ── Gradientes: vívidos sobre fondos claros ── */ --grad: linear-gradient(160deg, #A87000 0%, #C40050 52%, #0055A0 100%); --gradh: linear-gradient(90deg, #A87000 0%, #E03000 35%, #C40050 65%, #0055A0 100%); /* ── Filtro Maps ── */ --map-filter: grayscale(.3) contrast(1.1) brightness(1.05); } /* ── CAPA SEMÁNTICA — aliases que apuntan al tema activo ── */ :root { --color-bg: var(--bg0); --color-surface: var(--bg2); --color-surface-raised: var(--bg3); --color-text: var(--t1); --color-text-secondary: var(--t2); --color-text-muted: var(--t3); --color-accent: var(--lm); --color-accent-yellow: var(--ly); --color-accent-cyan: var(--lc); --color-border: var(--bd1); --color-border-strong: var(--bd2); --color-gradient: var(--grad); --color-gradient-h: var(--gradh); } /* Light mode vars moved to [data-theme="light"] */ /* Nav in light */ [data-theme="light"] nav.scrolled { background: rgba(250,248,245,.97); border-bottom-color: var(--bd1); } /* Hero in light */ [data-theme="light"] .hero-bg { background: radial-gradient(ellipse 40% 60% at 15% 80%, rgba(0,111,168,.07) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 85% 20%, rgba(200,0,90,.06) 0%, transparent 55%), #F5F5F8; } [data-theme="light"] .hero-h1-s { -webkit-text-stroke-color: rgba(26,26,26,.2); } [data-theme="light"] .hero-desc { color: var(--t2); } /* Marquee stays black — brand */ /* Services */ [data-theme="light"] .srv-feat .srv-desc { color: rgba(0,0,0,.62); } [data-theme="light"] .proc-tex { opacity: .015; } /* Cards */ [data-theme="light"] .proc-step { background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.06); } [data-theme="light"] .testi-card { background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.06); } /* Forms */ [data-theme="light"] .form-blk { background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.05); } [data-theme="light"] .finput { background: #F5F5F8; border-color: #D0D0DA; color: #1A1A1A; } [data-theme="light"] .finput:focus { background: #FFF; border-color: var(--lm); } [data-theme="light"] .finput::placeholder { color: #AAA49C; } [data-theme="light"] .fselect { background: #F5F5F8; border-color: #D0D0DA; color: #1A1A1A; } [data-theme="light"] .fselect option { background: #F5F5F8; color: #1A1A1A; } [data-theme="light"] .pay-opt { background: #F5F5F8; border-color: #D0D0DA; } [data-theme="light"] .add-btn { border-color: #D0D0DA; color: #404050; } /* Cart drawer */ [data-theme="light"] .cart-drw { background: #FFFFFF; } [data-theme="light"] .cart-head, [data-theme="light"] .cart-foot { background: #FFFFFF; border-color: var(--bd1); } /* WA widget */ [data-theme="light"] #wa-box { background: #FFFFFF; border-color: var(--bd2); } [data-theme="light"] #wa-msgs { background: #EBEBF2; } [data-theme="light"] .wa-bot-bbl { background: #FFFFFF; color: #1A1A1A; box-shadow: 0 1px 3px rgba(0,0,0,.08); } [data-theme="light"] .wa-chip { background: #FFFFFF; border-color: #D0D0DA; color: #404050; } [data-theme="light"] .wa-chips, [data-theme="light"] .wa-inp-row { background: #F5F5F8; } [data-theme="light"] #wa-input { background: #FFFFFF; border-color: #D0D0DA; color: #1A1A1A; } [data-theme="light"] .wa-footer { background: #F5F5F8; } /* Order panel */ [data-theme="light"] .o-panel { background: #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,.06); } [data-theme="light"] .o-panel-body { background: #FFFFFF; } /* Locations */ [data-theme="light"] .loc-card { background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.06); } [data-theme="light"] .loc-info { color: var(--t2); } /* Footer stays dark — brand identity */ [data-theme="light"] footer { background: #1A1A1A; } /* CTA section — gradient stays as brand */ /* Toast */ [data-theme="light"] .toast { background: #FFFFFF; box-shadow: 0 4px 20px rgba(0,0,0,.12); } /* Loader */ [data-theme="light"] #loader { background: #F5F5F8; } [data-theme="light"] .mob { background: #F5F5F8; } /* Sec label bar */ [data-theme="light"] .sec-lbl::before { background: var(--ly); } /* Prod card */ [data-theme="light"] .prod-card { background: #FFFFFF; } [data-theme="light"] .coupon-btn { border-color: var(--lc); color: var(--lc); } [data-theme="light"] .coupon-btn:hover { background: var(--lc); color: #FFF; } [data-theme="light"] .wa-cta-p { background: rgba(200,0,90,.05); border-color: rgba(200,0,90,.18); } [data-theme="light"] .wa-cta-p-lbl { color: var(--lm); } [data-theme="light"] .cta-sub { color: rgba(0,0,0,.6); } [data-theme="light"] .cta-info { color: var(--lk,#1A1A1A); } [data-theme="light"] nav.scrolled { background: rgba(245,244,241,.97); } [data-theme="light"] .mob-menu { background: #F2F2F8; } [data-theme="light"] .cart-drw { background: #FFFFFF; } [data-theme="light"] #loader { background: #F2F2F8; } [data-theme="light"] .proc-step { background: #FFFFFF; } [data-theme="light"] .testi-card { background: #FFFFFF; } [data-theme="light"] .form-blk { background: #FFFFFF; } [data-theme="light"] .finput { background: #F2F2F8; border-color: #C4C4CE; color: #1A1A1A; } [data-theme="light"] .fselect { background: #F2F2F8; border-color: #C4C4CE; color: #1A1A1A; } [data-theme="light"] .fselect option { background: #F2F2F8; } [data-theme="light"] .o-panel { background: #EBEBF2; } [data-theme="light"] .pay-opt { background: #F2F2F8; border-color: #C4C4CE; } [data-theme="light"] .add-btn { border-color: #C4C4CE; color: #505060; } [data-theme="light"] footer { background: #1A1A1A; } [data-theme="light"] .hero-img-card { background: rgba(255,255,255,.95); } [data-theme="light"] #wa-box { background: #FFFFFF; border-color: var(--bd2); } [data-theme="light"] #wa-msgs { background: #EBEBF2; } [data-theme="light"] .wa-bot-bbl { background: #FFFFFF; color: #1A1A1A; } [data-theme="light"] .wa-chip { background: #FFFFFF; border-color: #C4C4CE; color: #505060; } [data-theme="light"] .loc-card { background: #FFFFFF; } [data-theme="light"] .toast { background: #FFFFFF; } /* ===================================================== [data-theme="light"] — WEBKIT TEXT FILL FIX Todos los elementos con -webkit-text-fill-color:transparent deben recibir reset explícito. color: alone no funciona. ===================================================== */ /* ── Reset: elementos que deben ser SÓLIDOS en modo claro ── */ [data-theme="light"] .sec-h2, [data-theme="light"] .fcard-name, [data-theme="light"] .fcard-sub, [data-theme="light"] .proc-title, [data-theme="light"] .proc-desc, [data-theme="light"] .testi-name, [data-theme="light"] .testi-q, [data-theme="light"] .testi-loc, [data-theme="light"] .loc-city, [data-theme="light"] .loc-info, [data-theme="light"] .pay-card-name, [data-theme="light"] .svc-opt-name, [data-theme="light"] .o-panel-hd-title, [data-theme="light"] .o-panel-title, [data-theme="light"] .o-li-name, [data-theme="light"] .o-tot-row, [data-theme="light"] .review-lbl, [data-theme="light"] .review-val, [data-theme="light"] .success-desc, [data-theme="light"] .step-label, [data-theme="light"] .fi-hint, [data-theme="light"] .guar-txt, [data-theme="light"] .prod-name, [data-theme="light"] .prod-desc, [data-theme="light"] .prod-note, [data-theme="light"] .nav-links a, [data-theme="light"] .cart-empty, [data-theme="light"] .toast-txt, [data-theme="light"] .ldr-one, [data-theme="light"] .wa-alt-desc { -webkit-text-fill-color: unset !important; background: none !important; background-clip: unset !important; -webkit-background-clip:unset !important; } /* ── Colores sólidos explícitos ── */ [data-theme="light"] .sec-h2 { color: var(--t1); } [data-theme="light"] .proc-title { color: var(--t1); } [data-theme="light"] .proc-desc { color: var(--t2); } [data-theme="light"] .testi-name { color: var(--t1); } [data-theme="light"] .testi-q { color: var(--t2); } [data-theme="light"] .testi-loc { color: var(--t3); } [data-theme="light"] .loc-city { color: var(--t1); } [data-theme="light"] .loc-info { color: var(--t2); } [data-theme="light"] .pay-card-name { color: var(--t2); } [data-theme="light"] .svc-opt-name { color: var(--t2); } [data-theme="light"] .o-panel-hd-title { color: var(--t1); } [data-theme="light"] .o-panel-title { color: var(--t1); } [data-theme="light"] .o-li-name { color: var(--t1); } [data-theme="light"] .review-lbl { color: var(--t3); } [data-theme="light"] .review-val { color: var(--t1); } [data-theme="light"] .success-desc { color: var(--t2); } [data-theme="light"] .step-label { color: var(--t3); } [data-theme="light"] .step-label.active{ color: var(--t1); font-weight:700; } [data-theme="light"] .fi-hint { color: var(--t3); } [data-theme="light"] .guar-txt { color: var(--t2); } [data-theme="light"] .prod-name { color: var(--t1); } [data-theme="light"] .prod-desc { color: var(--t2); } [data-theme="light"] .prod-note { color: var(--t3); } [data-theme="light"] .nav-links a { color: var(--t2); } [data-theme="light"] .cart-empty { color: var(--t3); } [data-theme="light"] .toast-txt { color: var(--t1); } [data-theme="light"] .ldr-one { color: var(--t1); } /* ── Elementos que SÍ conservan gradiente en modo claro ── (var(--grad) ya usa la versión oscurecida via [data-theme="light"]) */ [data-theme="light"] .gtxt, [data-theme="light"] .hero-h1-g, [data-theme="light"] .sec-lbl span, [data-theme="light"] .cart-tot-val, [data-theme="light"] .prod-cat, [data-theme="light"] .prod-price, [data-theme="light"] .stat-n, [data-theme="light"] .flbl, [data-theme="light"] .fi-label, [data-theme="light"] .wk-cat, [data-theme="light"] .loc-role, [data-theme="light"] .srv-price { background: var(--grad) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── Stepper ── */ [data-theme="light"] .step-circle { background:var(--bg3); border:2px solid var(--bd1); color:var(--t2); -webkit-text-fill-color:var(--t2); } [data-theme="light"] .step-circle.active{ background:var(--gradh); border-color:transparent; color:var(--lk); -webkit-text-fill-color:var(--lk); } [data-theme="light"] .step-circle.done { background:var(--t1); border-color:var(--t1); color:var(--ly); -webkit-text-fill-color:var(--ly); } [data-theme="light"] .step-line { background:var(--bd1); } [data-theme="light"] .step-line.done { background:var(--gradh); } /* ── Inputs y formularios ── */ [data-theme="light"] .fi-inp { background:#FFF; border-color:var(--bd1); color:var(--t1); -webkit-text-fill-color:var(--t1); } [data-theme="light"] .fi-inp::placeholder { color:var(--t3); } [data-theme="light"] .fi-inp:focus { border-color:var(--lm); box-shadow:0 0 0 3px rgba(181,0,74,.1); } [data-theme="light"] .qty-btn { background:var(--bg3); color:var(--t1); -webkit-text-fill-color:var(--t1); } [data-theme="light"] .qty-val { background:var(--bg2); color:var(--t1); -webkit-text-fill-color:var(--t1); } [data-theme="light"] .pay-card.sel .pay-card-name { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* ── Navegación ── */ [data-theme="light"] .nav-links a:hover { color:var(--t1); } [data-theme="light"] .theme-btn { background:var(--bg3); border-color:var(--bd2); color:var(--t1); -webkit-text-fill-color:var(--t1); } /* ── Footer siempre oscuro (identidad de marca) ── */ /* ── Google Maps ── */ [data-theme="light"] iframe[src*="google.com/maps"] { filter:var(--map-filter); } /* ── SCROLL REVEAL ANIMATIONS ── */ .scroll-reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); } .scroll-reveal.visible { opacity: 1; transform: translateY(0); } .scroll-reveal.d1 { transition-delay: .15s; } .scroll-reveal.d2 { transition-delay: .30s; } .scroll-reveal.d3 { transition-delay: .45s; } /* ── NAV ACTIVE SECTION ── */ .nav-links a.nav-active { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── GRADIENT USAGE REDUCTION — only on key brand elements ── */ /* Service category labels, product category use solid accent instead */ .srv-price { background: none !important; -webkit-text-fill-color: var(--ly) !important; color: var(--ly) !important; } .prod-cat { background: none !important; -webkit-text-fill-color: var(--lm) !important; color: var(--lm) !important; font-size: 9px; } [data-theme="light"] .srv-price { -webkit-text-fill-color: var(--ly) !important; } [data-theme="light"] .prod-cat { -webkit-text-fill-color: var(--lm) !important; } /* ── SVG ICON ALIGNMENT ── */ .srv-icon { display:flex; align-items:center; justify-content:center; } .srv-icon svg, .proc-icon svg { display:block; } .proc-icon { display:flex; align-items:center; justify-content:center; } .fi-icon { display:flex; align-items:center; justify-content:center; } .fi-icon svg { display:block; flex-shrink:0; } .pay-icon-lg { display:flex; align-items:center; justify-content:center; } .pay-icon-lg svg { display:block; } .guar-icon { display:flex; align-items:center; justify-content:center; line-height:1; } .guar-icon svg { display:block; } .svc-emoji { display:flex; align-items:center; justify-content:center; } .svc-emoji svg { display:block; } .o-submit-icon { display:flex; align-items:center; line-height:1; } .o-submit-icon svg { display:block; } .success-icon { display:flex; align-items:center; justify-content:center; } .success-icon svg { stroke:var(--grn); } .o-empty-icon svg { stroke:var(--t3); } .wa-alt-icon svg { display:block; } .nav-phone svg { display:inline-block; vertical-align:middle; margin-right:4px; } .cta-info svg { display:inline-block; vertical-align:middle; margin-right:6px; } .loc-info svg { display:inline-block; vertical-align:middle; margin-right:5px; flex-shrink:0; } /* ── CART ANIMATION ── */ @keyframes cartBounce { 0%,100%{transform:scale(1)} 25%{transform:scale(1.35) rotate(-8deg)} 50%{transform:scale(1.2) rotate(8deg)} 75%{transform:scale(1.28) rotate(-4deg)} } @keyframes badgePop { 0%{transform:scale(0) rotate(-15deg);opacity:0} 60%{transform:scale(1.3) rotate(5deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} } @keyframes cartToast { 0%{transform:translateX(120%);opacity:0} 15%{transform:translateX(0);opacity:1} 80%{transform:translateX(0);opacity:1} 100%{transform:translateX(120%);opacity:0} } .nav-cta.bounce { animation:cartBounce .5s cubic-bezier(.4,0,.2,1); } .cnt-badge.pop { animation:badgePop .35s cubic-bezier(.4,0,.2,1); } #cartToastNotif { position:fixed; bottom:100px; right:24px; z-index:9999; background:var(--bg2); border:1px solid var(--bd1); padding:14px 18px; display:flex; align-items:center; gap:12px; box-shadow:0 8px 32px rgba(0,0,0,.4); transform:translateX(120%); opacity:0; transition:none; pointer-events:none; min-width:220px; } #cartToastNotif.show { animation:cartToast 2.8s ease forwards; } #cartToastNotif-ico { width:36px;height:36px;background:var(--lm); display:flex;align-items:center;justify-content:center;flex-shrink:0; } #cartToastNotif-txt { font-family:var(--ff3); } #cartToastNotif-name { font-size:13px;font-weight:600;color:var(--t1);margin-bottom:2px; } #cartToastNotif-sub { font-size:11px;color:var(--t3); } /* ── LIGHT MODE: Secciones que conservan fondo oscuro ── */ /* (marca la diferencia visual entre secciones) */ [data-theme="light"] #inicio { background: var(--bg0) !important; } [data-theme="light"] #inicio .hero-desc, [data-theme="light"] #inicio .stat-l, [data-theme="light"] #inicio .hic-tag, [data-theme="light"] #inicio .hic-name, [data-theme="light"] #inicio nav:not(.scrolled) { background: transparent !important; } /* Secciones alternas para ritmo visual */ [data-theme="light"] #trabajos { background: var(--bg1) !important; } [data-theme="light"] #proceso { background: var(--bg3) !important; } /* Marquee siempre oscuro */ [data-theme="light"] .mq-inner { background: var(--bg1) !important; } /* CTA siempre con gradiente */ [data-theme="light"] #contacto { background: var(--bg3) !important; } /* ── LIGHT MODE: Secciones con fondo claro mejoradas ── */ [data-theme="light"] #servicios { background: var(--bg0) !important; } [data-theme="light"] #productos { background: var(--bg1) !important; } [data-theme="light"] #testimonios{ background: var(--bg0) !important; } [data-theme="light"] #ubicacion { background: var(--bg1) !important; } [data-theme="light"] #nosotros { background: var(--bg0) !important; } [data-theme="light"] #calculadora{ background: var(--bg3) !important; } /* ── Texto en secciones oscuras del light mode ── */ [data-theme="light"] #trabajos .wk-name, [data-theme="light"] #trabajos .wk-cat, /* process light mode handled above */ /* ── Nav scrolled en light mode ── */ [data-theme="light"] nav.scrolled { background: rgba(245,242,238,.96) !important; box-shadow: 0 1px 20px rgba(26,23,20,.1) !important; border-bottom-color: var(--bd1) !important; } /* ── Tarjetas de servicio en light mode ── */ [data-theme="light"] .srv-card { background: var(--bg2) !important; } [data-theme="light"] .srv-feat { background: var(--gradh) !important; } /* ── Productos en light mode ── */ [data-theme="light"] .prod-card { background: var(--bg2) !important; box-shadow: 0 2px 16px rgba(26,23,20,.08) !important; } [data-theme="light"] .prod-foot { background: var(--bg3) !important; border-top: 1px solid var(--bd1) !important; } /* ── Testimonios en light mode ── */ [data-theme="light"] .testi-card { background: #FFFFFF !important; box-shadow: 0 2px 20px rgba(26,23,20,.08) !important; border: 1px solid var(--bd1) !important; } [data-theme="light"] .testi-q { color: var(--t2) !important; -webkit-text-fill-color: var(--t2) !important; } [data-theme="light"] .testi-name { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } /* ── Ubicaciones en light mode ── */ [data-theme="light"] .loc-card { background: #FFFFFF !important; box-shadow: 0 2px 16px rgba(26,23,20,.08) !important; } [data-theme="light"] .loc-city { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } /* ── Section headers en light mode ── */ [data-theme="light"] .sec-h2 { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; background: none !important; } [data-theme="light"] .sec-h2 .gtxt { background: var(--grad) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── Footer siempre oscuro ── */ [data-theme="light"] footer { background: #18182A !important; } /* ── Botones en light mode ── */ [data-theme="light"] .btn-grad { color: #1A1A1A !important; -webkit-text-fill-color: #1A1A1A !important; } [data-theme="light"] .btn-out { border-color: rgba(26,23,20,.3) !important; color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } [data-theme="light"] .theme-btn { background: var(--bg2) !important; border-color: var(--bd2) !important; color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; box-shadow: 0 1px 6px rgba(26,23,20,.12) !important; } /* ── Checkout en light mode ── */ [data-theme="light"] .op-co { --c0:#F5F5F8; --c1:#EEEEF4; --c2:#FFFFFF; --c3:#EBEBF2; --b1:#D4D4DE; --b2:#C0C0C8; --t1:#18182A; --t2:#383848; --t3:#70707A; --lm:#C40050; --ly:#A87000; --lc:#0055A0; } [data-theme="light"] #stripe-config-notice { display:none !important; } /* ── WhatsApp widget light mode ── */ [data-theme="light"] #wa-widget { box-shadow: 0 8px 40px rgba(26,23,20,.2) !important; } [data-theme="light"] #wa-msgs { background: #F0F0F8 !important; } [data-theme="light"] .wa-bot-bbl { background: #FFFFFF !important; border: 1px solid #DCDCE8 !important; color: #383848 !important; } [data-theme="light"] .wa-user-bbl { background: #C40050 !important; color: #fff !important; } /* ── LIGHT MODE: Hero completamente claro ── */ [data-theme="light"] #inicio { background: var(--bg0) !important; } [data-theme="light"] .hero-bg { opacity: 0 !important; } [data-theme="light"] .hero-h1 { color: var(--t1) !important; } [data-theme="light"] .hero-h1-g { -webkit-text-fill-color: transparent !important; } [data-theme="light"] .hero-h1-s { color: var(--bd1) !important; -webkit-text-fill-color: var(--bd1) !important; } [data-theme="light"] .hero-desc { color: var(--t2) !important; } [data-theme="light"] .hero-desc strong { -webkit-text-fill-color: transparent !important; } [data-theme="light"] .hero-stats { border-top-color: var(--bd1) !important; } [data-theme="light"] .stat-n { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } [data-theme="light"] .stat-l { color: var(--t3) !important; } [data-theme="light"] .hero-tag { color: var(--lm) !important; } [data-theme="light"] .hero-tag::before { background: var(--lm) !important; } [data-theme="light"] .hic-item { background: var(--bg2) !important; border-color: var(--bd1) !important; } [data-theme="light"] .hero-right .hs-overlay { background: none !important; } [data-theme="light"] .hero-right { border: 1px solid var(--bd1) !important; } /* ── LIGHT MODE: Marquee claro ── */ [data-theme="light"] .mq-inner { background: var(--bg1) !important; border-color: var(--bd1) !important; } [data-theme="light"] .mq-item { color: var(--t2) !important; -webkit-text-fill-color: var(--t2) !important; background: none !important; } [data-theme="light"] .mq-sep { background: var(--lm) !important; } /* ── LIGHT MODE: Trabajos claros ── */ [data-theme="light"] #trabajos { background: var(--bg1) !important; } [data-theme="light"] .wk-item { background: var(--bg2) !important; box-shadow: 0 2px 12px rgba(26,23,20,.08) !important; } [data-theme="light"] .wk-overlay { background: linear-gradient(to top, rgba(26,23,20,.7) 0%, transparent 60%) !important; } [data-theme="light"] .wk-name { color: #fff !important; -webkit-text-fill-color: #fff !important; } [data-theme="light"] .wk-cat { color: rgba(255,255,255,.8) !important; -webkit-text-fill-color: rgba(255,255,255,.8) !important; } /* ── LIGHT MODE: Footer siempre oscuro (identidad) ── */ [data-theme="light"] footer { background: #18182A !important; } /* ── LIGHT MODE: Proceso — rediseño limpio ── */ [data-theme="light"] #proceso { background: #EBEBF2 !important; } [data-theme="light"] .proc-tex { display: none !important; } [data-theme="light"] .proc-step { background: #FFFFFF !important; border: 1px solid #D4D4DE !important; box-shadow: 0 4px 24px rgba(26,23,20,.08) !important; position: relative !important; } [data-theme="light"] .proc-step::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #A87000, #C40050, #0055A0) !important; opacity: 0 !important; transition: opacity .3s !important; } [data-theme="light"] .proc-step:hover::before { opacity: 1 !important; } [data-theme="light"] .proc-step:hover { box-shadow: 0 8px 36px rgba(26,23,20,.14) !important; transform: translateY(-2px) !important; } [data-theme="light"] .proc-n { background: linear-gradient(160deg, #A87000 0%, #C40050 52%, #0055A0 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; opacity: .15 !important; } [data-theme="light"] .proc-icon svg { stroke: var(--lm) !important; } [data-theme="light"] .proc-title { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; background: none !important; } [data-theme="light"] .proc-desc { color: var(--t2) !important; -webkit-text-fill-color: var(--t2) !important; } [data-theme="light"] .sec-lbl span { color: var(--lm) !important; -webkit-text-fill-color: var(--lm) !important; } /* ── LIGHT MODE: Section labels ── */ [data-theme="light"] .sec-lbl { border-left-color: var(--lm) !important; } [data-theme="light"] .sec-h2 { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; background: none !important; } /* ── LIGHT MODE: Servicios ── */ [data-theme="light"] .srv-card { background: var(--bg2) !important; box-shadow: 0 2px 12px rgba(26,23,20,.07) !important; } [data-theme="light"] .srv-name { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; background: none !important; } [data-theme="light"] .srv-desc { color: var(--t2) !important; } [data-theme="light"] .srv-price { -webkit-text-fill-color: var(--ly) !important; color: var(--ly) !important; } [data-theme="light"] .srv-icon svg { stroke: var(--lm) !important; } [data-theme="light"] .srv-badge { box-shadow: 0 2px 8px rgba(0,0,0,.1) !important; } /* ── LIGHT MODE: Clientes strip ── */ [data-theme="light"] .clients-strip, [data-theme="light"] #clientes-strip { background: var(--bg2) !important; border-color: var(--bd1) !important; } [data-theme="light"] .client-name { color: var(--t3) !important; } /* ── LIGHT MODE: Nosotros ── */ [data-theme="light"] #nosotros { background: var(--bg0) !important; } [data-theme="light"] #nosotros h2 { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; background: none !important; } [data-theme="light"] #nosotros p { color: var(--t2) !important; } [data-theme="light"] #nosotros .stat-n { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } [data-theme="light"] #nosotros strong { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } [data-theme="light"] #nosotros > div > div:last-child > div:last-child { background: var(--grad) !important; } /* ── LIGHT MODE: CTA ── */ [data-theme="light"] .cta-bg { opacity: 1 !important; } [data-theme="light"] #contacto .cta-title, [data-theme="light"] #contacto .cta-desc { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ── LIGHT MODE: Calculadora ── */ [data-theme="light"] #calculadora { background: var(--bg1) !important; } [data-theme="light"] .calc-result-box { background: var(--bg2) !important; border-color: var(--bd1) !important; } [data-theme="light"] .calc-select, [data-theme="light"] .calc-qty-inp { background: var(--bg2) !important; border-color: var(--bd1) !important; color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } /* ── LIGHT MODE: NAV ── */ [data-theme="light"] nav:not(.scrolled) { background: rgba(245,242,238,.97) !important; border-bottom: 1px solid var(--bd1) !important; } [data-theme="light"] .nav-logo-txt { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } [data-theme="light"] .nav-links a { color: var(--t2) !important; -webkit-text-fill-color: var(--t2) !important; } [data-theme="light"] .nav-links a:hover { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } [data-theme="light"] .nav-logo-box { border-color: var(--t1) !important; } /* ── LIGHT MODE: Checkout completo claro ── */ [data-theme="light"] .op-co-hd { background: var(--bg2) !important; border-bottom-color: var(--bd1) !important; } [data-theme="light"] .op-stepper { background: var(--bg3) !important; border-bottom-color: var(--bd1) !important; } [data-theme="light"] .op-co-body { background: var(--bg0) !important; } [data-theme="light"] .op-co-main { background: var(--bg0) !important; border-right-color: var(--bd1) !important; } [data-theme="light"] .op-panel { background: var(--bg3) !important; border-left-color: var(--bd1) !important; } [data-theme="light"] .op-panel-hd { background: var(--bg2) !important; border-bottom-color: var(--bd1) !important; } [data-theme="light"] .op-svc { background: var(--bg2) !important; border-color: var(--bd1) !important; } [data-theme="light"] .op-svc:hover { background: var(--bg3) !important; border-color: var(--bd2) !important; } [data-theme="light"] .op-svc.sel { background: rgba(200,0,90,.04) !important; border-color: var(--lm) !important; } [data-theme="light"] .op-inp, [data-theme="light"] .op-textarea, [data-theme="light"] .op-select { background: var(--bg2) !important; border-color: var(--bd1) !important; color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } [data-theme="light"] .op-pay { background: var(--bg2) !important; border-color: var(--bd1) !important; } [data-theme="light"] .op-bank { background: var(--bg2) !important; } [data-theme="light"] .op-review-block { background: var(--bg2) !important; border-color: var(--bd1) !important; } [data-theme="light"] .op-review-hd { background: var(--bg3) !important; border-color: var(--bd1) !important; } [data-theme="light"] .op-totals { background: var(--bg2) !important; border-color: var(--bd1) !important; } [data-theme="light"] .op-panel-empty { color: var(--t3) !important; } [data-theme="light"] .op-panel-empty svg { stroke: var(--t3) !important; } [data-theme="light"] .op-guar { border-top-color: var(--bd1) !important; } [data-theme="light"] .op-guar-item { border-right-color: var(--bd1) !important; } [data-theme="light"] .op-wa-alt { background: rgba(37,211,102,.06) !important; border-top-color: var(--bd1) !important; } /* ── LIGHT MODE: Ubicación ── */ [data-theme="light"] #ubicacion { background: var(--bg0) !important; } [data-theme="light"] .loc-card { background: var(--bg2) !important; box-shadow: 0 2px 16px rgba(26,23,20,.08) !important; border: 1px solid var(--bd1) !important; } [data-theme="light"] .loc-city { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; background: none !important; } [data-theme="light"] .loc-adr { color: var(--t2) !important; } [data-theme="light"] .loc-info svg { stroke: var(--lm) !important; } /* ── LIGHT MODE: Testimonios ── */ [data-theme="light"] #testimonios { background: var(--bg1) !important; } [data-theme="light"] .testi-card { background: #FFFFFF !important; box-shadow: 0 4px 24px rgba(26,23,20,.1) !important; } [data-theme="light"] .stars .star { -webkit-text-fill-color: var(--ly) !important; color: var(--ly) !important; } /* ── DARK MODE: Proceso cards mejoradas ── */ .proc-step { position: relative; overflow: hidden; } .proc-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradh); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .proc-step:hover::before { transform: scaleX(1); } /* ── NAV: SVG Logo styles ── */ .nl svg { display:block; color:var(--t1); transition:color .3s; } [data-theme="light"] .nl svg { color:var(--t1); } .nl { display:flex; align-items:center; gap:10px; text-decoration:none; } /* ── DARK MODE: Global quality improvements ── */ /* Cards with subtle hover elevation */ .srv-card:hover { transform: translateY(-3px); transition: transform .3s; } .prod-card:hover { transform: translateY(-2px); transition: transform .3s; } /* Subtle gradients on section dividers */ #servicios, #productos, #testimonios { position: relative; } /* Remove checkered from dark mode completely */ [data-theme="dark"] .proc-tex { opacity: .015; } /* ─────────────────────────── RESET ─── */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--bg0); color:var(--t1); font-family:var(--ff3); overflow-x:hidden; cursor:none; } /* ─────────────────────────── CURSOR ─── */ #cdot,#cring { position:fixed; pointer-events:none; z-index:9999; border-radius:50%; transform:translate(-50%,-50%); } #cdot { width:9px; height:9px; background:var(--ly); transition:width .15s,height .15s; } #cring { width:34px; height:34px; border:1.5px solid rgba(233,30,140,.45); transition:width .18s,height .18s; } /* ─────────────────────────── LOADER ─── */ #loader { position:fixed; inset:0; background:var(--bg0); z-index:10000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; transition:opacity .8s ease, visibility .8s ease; } #loader.gone { opacity:0; visibility:hidden; } .ldr-box { display:flex; align-items:center; border:3px solid var(--t1); padding:10px 14px; gap:12px; position:relative; } .ldr-one { font-family:var(--ff1); font-size:clamp(48px,8vw,84px); color:var(--t1); line-height:1; } .ldr-eq { font-family:var(--ff1); font-size:clamp(48px,8vw,84px); color:var(--ly); line-height:1; } .ldr-bar2 { width:5px; height:clamp(48px,8vw,84px); background:var(--t1); } .ldr-txt2 { display:flex; flex-direction:column; padding-left:8px; justify-content:center; } .ldr-txt2 b { font-family:var(--ff2); font-size:14px; font-weight:700; letter-spacing:.06em; } .ldr-txt2 small { font-family:var(--ff2); font-size:9px; letter-spacing:.2em; color:var(--t3); text-transform:uppercase; } .ldr-tri { position:absolute; bottom:-3px; right:-3px; width:0; height:0; border-left:12px solid transparent; border-bottom:12px solid var(--ly); } .ldr-sub { font-family:var(--ff2); font-size:11px; letter-spacing:.45em; text-transform:uppercase; color:var(--t3); } .ldr-prog { width:180px; height:2px; background:var(--bg3); border-radius:1px; overflow:hidden; } .ldr-fill { height:100%; border-radius:1px; background:var(--gradh); animation:ldrAnim 2.2s ease-in-out forwards; } @keyframes ldrAnim { 0%{width:0%} 80%{width:90%} 100%{width:100%} } /* ─────────────────────────── NAV ─── */ nav { position:fixed; top:0; left:0; right:0; z-index:900; height:68px; padding:0 52px; display:flex; align-items:center; justify-content:space-between; transition:background .4s, border .4s; } nav.scrolled { background:rgba(13,13,13,.96); backdrop-filter:blur(20px); border-bottom:1px solid var(--bd1); } [data-theme="light"] nav.scrolled { background:rgba(245,244,241,.97); } .nl { display:flex; align-items:center; text-decoration:none; cursor:none; position:relative; } .nl-box { border:2px solid rgba(242,240,235,.8); padding:5px 8px; display:flex; align-items:center; gap:4px; transition:border-color .3s; } [data-theme="light"] .nl-box { border-color: rgba(26,26,26,.6); } [data-theme="light"] .nl-one { color: var(--lk,#1A1A1A); } [data-theme="light"] .nl-vbar { background: var(--lk,#1A1A1A); } [data-theme="light"] .nl-info b { color: var(--lk,#1A1A1A); } [data-theme="light"] .nl-info small { color: var(--t3); } .nl-one { font-family:var(--ff1); font-size:20px; color:var(--t1); line-height:1; } .nl-eq { font-family:var(--ff1); font-size:20px; color:var(--ly); line-height:1; } .nl-vbar { width:3px; height:20px; background:var(--t1); margin:0 2px; } .nl-info { display:flex; flex-direction:column; padding-left:8px; justify-content:center; } .nl-info b { font-family:var(--ff2); font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--t1); } .nl-info small { font-family:var(--ff2); font-size:9px; letter-spacing:.2em; color:var(--t3); text-transform:uppercase; } .nl-tri { position:absolute; bottom:-2px; left:54px; width:0; height:0; border-left:7px solid transparent; border-bottom:7px solid var(--ly); } .nav-links { display:flex; gap:32px; list-style:none; } .nav-links a { font-family:var(--ff2); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t2); text-decoration:none; cursor:none; transition:color .25s; position:relative; } .nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:2px; background:var(--ly); transition:width .3s; } .nav-links a:hover { color:var(--t1); } .nav-links a:hover::after { width:100%; } .nav-r { display:flex; align-items:center; gap:12px; } .nav-phone { font-family:var(--ff2); font-size:13px; font-weight:700; color:var(--ly); text-decoration:none; cursor:none; } .nav-cta { background:var(--gradh); color:var(--lk); font-family:var(--ff2); font-size:11px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; padding:9px 20px; border:none; cursor:none; display:flex; align-items:center; gap:8px; transition:opacity .25s, transform .25s; } .nav-cta:hover { opacity:.88; transform:translateY(-1px); } .cnt-badge { background:var(--red); color:#fff; border-radius:50%; width:16px; height:16px; font-size:9px; font-weight:900; display:flex; align-items:center; justify-content:center; } .theme-btn { width:36px; height:36px; border-radius:50%; border:1.5px solid var(--bd2); background:var(--bg3); color:var(--t1); font-size:17px; cursor:none; display:flex; align-items:center; justify-content:center; transition:all .3s; } .theme-btn:hover { border-color:var(--lm); transform:rotate(20deg); } .ham { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:none; } .ham span { display:block; width:24px; height:2px; background:var(--t1); transition:all .3s; } /* ─────────────────────────── MOBILE MENU ─── */ .mob { display:none; position:fixed; inset:0; background:var(--bg0); z-index:800; flex-direction:column; align-items:center; justify-content:center; gap:28px; } .mob.open { display:flex; } .mob a { font-family:var(--ff1); font-size:44px; letter-spacing:.08em; text-decoration:none; cursor:none; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* ─────────────────────────── CART DRAWER ─── */ .cart-veil { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:800; opacity:0; visibility:hidden; transition:all .3s; } .cart-veil.open { opacity:1; visibility:visible; } .cart-drw { position:fixed; right:0; top:0; bottom:0; width:390px; max-width:96vw; background:var(--bg2); z-index:801; transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; } .cart-drw.open { transform:translateX(0); } .cart-top { height:3px; background:var(--gradh); } .cart-head { padding:20px 24px; border-bottom:1px solid var(--bd1); display:flex; justify-content:space-between; align-items:center; } .cart-head h3 { font-family:var(--ff1); font-size:22px; letter-spacing:.08em; } .cart-x { background:none; border:none; color:var(--t2); font-size:20px; cursor:none; transition:color .2s; } .cart-x:hover { color:var(--t1); } .cart-body { flex:1; overflow-y:auto; padding:18px 24px; display:flex; flex-direction:column; gap:14px; } .cart-body::-webkit-scrollbar { width:2px; } .cart-body::-webkit-scrollbar-thumb { background:var(--lm); } .cart-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--t3); font-style:italic; } .cart-foot { padding:18px 24px; border-top:1px solid var(--bd1); } .cart-tot { display:flex; justify-content:space-between; font-family:var(--ff1); font-size:24px; letter-spacing:.06em; margin-bottom:14px; } .cart-tot-val { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* ─────────────────────────── TOAST ─── */ .toast { position:fixed; bottom:24px; right:24px; z-index:9000; background:var(--bg3); border-left:3px solid var(--ly); padding:13px 20px; display:flex; align-items:center; gap:10px; transform:translateY(70px); opacity:0; transition:all .35s cubic-bezier(.34,1.56,.64,1); pointer-events:none; } .toast.show { transform:translateY(0); opacity:1; } .toast-txt { font-family:var(--ff2); font-size:14px; letter-spacing:.06em; color:var(--t1); } /* ─────────────────────────── BUTTONS ─── */ .btn { font-family:var(--ff2); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:13px 32px; border:none; cursor:none; display:inline-flex; align-items:center; gap:10px; text-decoration:none; transition:all .28s; position:relative; overflow:hidden; } .btn-grad { background:var(--gradh); color:var(--lk); } .btn-grad:hover { opacity:.88; transform:translateY(-2px); box-shadow:0 12px 32px rgba(233,30,140,.25); } .btn-out { background:transparent; border:1.5px solid var(--bd2); color:var(--t2); } .btn-out:hover { border-color:var(--lm); color:var(--t1); } .btn-dark { background:var(--lk); color:#F2F0EB; } /* always on dark bg */ .btn-dark:hover { background:var(--bd2); } /* ─────────────────────────── SHARED ─── */ section { padding:96px 60px; } .sec-lbl { font-family:var(--ff2); font-size:11px; font-weight:700; letter-spacing:.5em; text-transform:uppercase; display:flex; align-items:center; gap:12px; margin-bottom:10px; } .sec-lbl::before { content:''; width:22px; height:2px; background:var(--ly); } .sec-lbl span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .sec-h2 { font-family:var(--ff1); font-size:clamp(42px,6vw,80px); line-height:.9; letter-spacing:.03em; } .gtxt { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } /* REVEAL */ .rv { opacity:0; transform:translateY(32px); transition:opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); } .rv.vis { opacity:1; transform:none; } .d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s} .d4{transition-delay:.32s} /* ─────────────────────────── HERO ─── */ #hero { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; padding:0; position:relative; overflow:hidden; } .hero-bg { position:absolute; inset:0; background: radial-gradient(ellipse 40% 60% at 15% 80%, rgba(0,163,224,.06) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 85% 20%, rgba(233,30,140,.05) 0%, transparent 55%), var(--bg0); } .hero-cmyk { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#FFE600,#FF5500,#E91E8C,#9900CC,#00A3E0); } .hero-left { position:relative; z-index:2; padding:140px 52px 80px; display:flex; flex-direction:column; justify-content:center; } .hero-ey { font-family:var(--ff2); font-size:11px; font-weight:700; letter-spacing:.45em; text-transform:uppercase; display:flex; align-items:center; gap:12px; margin-bottom:20px; opacity:0; animation:upFade .7s ease 2.4s forwards; } .hero-ey-dot { width:6px; height:6px; border-radius:50%; background:var(--ly); animation:blink 1.5s infinite; } .hero-ey span { background:var(--gradh); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} } .hero-h1 { font-family:var(--ff1); font-size:clamp(56px,8.5vw,118px); line-height:.88; letter-spacing:.02em; opacity:0; animation:upFade .85s ease 2.6s forwards; } .hero-h1-g { display:block; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero-h1-s { display:block; -webkit-text-stroke:1.5px rgba(242,240,235,.3); color:transparent; } .hero-desc { font-size:16px; font-weight:300; line-height:1.8; color:var(--t2); max-width:440px; margin-top:22px; opacity:0; animation:upFade .85s ease 2.8s forwards; } .hero-desc strong { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:600; } .hero-ctas { display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; opacity:0; animation:upFade .85s ease 3s forwards; } .hero-stats { display:flex; gap:40px; margin-top:44px; padding-top:28px; border-top:1px solid var(--bd1); opacity:0; animation:upFade .85s ease 3.2s forwards; flex-wrap:wrap; } .stat-n { font-family:var(--ff1); font-size:40px; line-height:1; letter-spacing:.03em; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .stat-l { font-family:var(--ff2); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--t3); margin-top:2px; } .hero-right { position:relative; overflow:hidden; } .hero-right img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:.6; transition:opacity .5s; } .hero-ov { position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,230,0,.06),rgba(233,30,140,.05),rgba(0,163,224,.06)), linear-gradient(to left,rgba(13,13,13,0) 50%,var(--bg0) 100%); } .hero-img-card { position:absolute; bottom:40px; right:40px; background:rgba(20,20,20,.92); backdrop-filter:blur(12px); border:1px solid var(--bd2); padding:22px; max-width:220px; opacity:0; animation:upFade .9s ease 2.8s forwards; } .hic-top { height:2px; background:var(--gradh); margin:-22px -22px 18px; } .hic-tag { font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.35em; text-transform:uppercase; color:var(--t3); margin-bottom:6px; } .hic-name { font-family:var(--ff1); font-size:28px; letter-spacing:.06em; color:var(--t1); line-height:1; } .hic-price { font-family:var(--ff2); font-size:13px; font-weight:700; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-top:6px; } .hic-badge { display:inline-block; background:var(--lm); color:#fff; font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:3px 10px; margin-top:8px; } @keyframes upFade { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} } /* ─────────────────────────── MARQUEE ─── */ .mq-wrap { overflow:hidden; } .mq-bar { height:3px; background:linear-gradient(90deg,#FFE600,#FF5500,#E91E8C,#9900CC,#00A3E0); } .mq-inner { background:var(--lk); padding:14px 0; } .mq-track { display:flex; white-space:nowrap; animation:mqRoll 24s linear infinite; } .mq-item { display:inline-flex; align-items:center; gap:16px; padding:0 24px; font-family:var(--ff1); font-size:16px; letter-spacing:.12em; color:#F2F0EB; } /* always on dark bg */ .mq-sep { width:5px; height:5px; border-radius:50%; background:var(--ly); flex-shrink:0; } @keyframes mqRoll { from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ─────────────────────────── SERVICES ─── */ #servicios { background:var(--bg1); padding-bottom:0; } .srv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:56px; } .srv-card { position:relative; overflow:hidden; cursor:none; aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end; background:var(--bg2); } .srv-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .75s cubic-bezier(.4,0,.2,1); background:#1C1C1C; } .srv-card:hover img { transform:scale(1.07); } .srv-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(13,13,13,.95) 0%,rgba(13,13,13,.5) 45%,rgba(13,13,13,.1) 100%); transition:background .4s; } .srv-card:hover .srv-ov { background:linear-gradient(to top,rgba(13,13,13,.98) 0%,rgba(13,13,13,.7) 50%,rgba(13,13,13,.25) 100%); } .srv-content { position:relative; z-index:2; padding:28px; } .srv-line { height:2px; background:var(--gradh); width:0; transition:width .4s; margin-bottom:10px; } .srv-card:hover .srv-line { width:40px; } .srv-icon { font-size:28px; margin-bottom:8px; } .srv-name { font-family:var(--ff1); font-size:28px; letter-spacing:.06em; color:#F2F0EB; line-height:1; } /* on dark overlay */ .srv-desc { font-family:var(--ff3); font-size:13px; font-weight:300; line-height:1.65; color:rgba(242,240,235,.55); margin-top:8px; max-height:0; overflow:hidden; transition:max-height .4s, opacity .4s; opacity:0; } .srv-card:hover .srv-desc { max-height:100px; opacity:1; } .srv-price { font-family:var(--ff2); font-size:13px; font-weight:700; margin-top:12px; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .srv-badge { position:absolute; top:18px; right:18px; z-index:3; font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:4px 12px; } .srv-feat { background:var(--gradh); display:flex; flex-direction:column; justify-content:flex-end; padding:32px; aspect-ratio:4/5; cursor:none; } .srv-feat .srv-name { color:var(--lk); } .srv-feat .srv-price { color:var(--lk); -webkit-text-fill-color:var(--lk); background:none; font-size:15px; font-weight:900; } .srv-feat .srv-desc { color:rgba(0,0,0,.6); max-height:200px; opacity:1; } .srv-feat .srv-line { background:rgba(0,0,0,.3); width:40px; } /* ─────────────────────────── GALERÍA TRABAJOS ─── */ #trabajos { background:var(--bg0); } .wk-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:18px; } .wk-filter { display:flex; gap:6px; flex-wrap:wrap; } .wftab { font-family:var(--ff2); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:7px 18px; background:transparent; border:1px solid var(--bd1); color:var(--t3); cursor:none; transition:all .25s; } .wftab.on, .wftab:hover { background:var(--gradh); color:var(--lk); border-color:transparent; } .wk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; } .wk-item { position:relative; overflow:hidden; cursor:none; background:var(--bg2); } .wk-item:nth-child(1) { grid-column:span 2; grid-row:span 2; } .wk-item:nth-child(4) { grid-row:span 2; } .wk-item img { width:100%; height:100%; min-height:220px; object-fit:cover; object-position:center; transition:transform .6s cubic-bezier(.4,0,.2,1); display:block; background:#1C1C1C; } .wk-item:hover img { transform:scale(1.06); } .wk-ov { position:absolute; inset:0; background:rgba(13,13,13,.75); opacity:0; transition:opacity .3s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px; text-align:center; } .wk-item:hover .wk-ov { opacity:1; } .wk-cat { font-family:var(--ff2); font-size:10px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .wk-name { font-family:var(--ff2); font-size:16px; font-weight:700; color:#F2F0EB; letter-spacing:.06em; } /* on dark overlay */ /* ─────────────────────────── PRODUCTOS ─── */ #productos { background:var(--bg1); } .prod-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; flex-wrap:wrap; gap:18px; } .filter-bar { display:flex; gap:6px; flex-wrap:wrap; } .ftab { font-family:var(--ff2); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:7px 18px; background:transparent; border:1px solid var(--bd1); color:var(--t3); cursor:none; transition:all .25s; } .ftab.on, .ftab:hover { border-color:var(--lc); color:var(--lc); background:rgba(0,163,224,.07); } .prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); gap:3px; } .prod-card { background:var(--bg2); display:flex; flex-direction:column; position:relative; overflow:hidden; cursor:none; transition:transform .3s; } .prod-card:hover { transform:translateY(-4px); } .prod-card-top { height:2px; background:var(--gradh); } .prod-img { aspect-ratio:4/3; position:relative; overflow:hidden; background:var(--bg3); } .prod-img img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .55s; display:block; background:#1C1C1C; } .prod-card:hover .prod-img img { transform:scale(1.05); } .prod-bdg { position:absolute; top:12px; left:12px; z-index:2; font-family:var(--ff2); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; padding:4px 11px; } .bdg-y { background:var(--ly); color:var(--lk); } .bdg-m { background:var(--lm); color:#fff; } .bdg-c { background:var(--lc); color:var(--lk); } .prod-cta-ov { position:absolute; bottom:0; left:0; right:0; padding:12px; background:linear-gradient(to top,rgba(13,13,13,.95),transparent); transform:translateY(100%); transition:transform .28s; } .prod-card:hover .prod-cta-ov { transform:translateY(0); } .prod-info { padding:18px 18px 0; flex:1; } .prod-cat { font-family:var(--ff2); font-size:10px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; margin-bottom:3px; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .prod-name { font-family:var(--ff2); font-size:19px; font-weight:700; color:var(--t1); letter-spacing:.03em; line-height:1.2; } .prod-desc { font-family:var(--ff3); font-size:13px; color:var(--t2); line-height:1.6; margin-top:5px; } .prod-foot { display:flex; justify-content:space-between; align-items:center; padding:12px 18px 18px; } .prod-price { font-family:var(--ff1); font-size:26px; letter-spacing:.03em; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .prod-note { font-family:var(--ff2); font-size:10px; color:var(--t3); display:block; letter-spacing:.1em; } .add-btn { background:transparent; border:1px solid var(--bd2); color:var(--t2); font-family:var(--ff2); font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; padding:8px 14px; cursor:none; transition:all .25s; } .add-btn:hover { background:var(--gradh); border-color:transparent; color:var(--lk); } /* ─────────────────────────── PROCESO ─── */ #proceso { background:var(--bg2); position:relative; overflow:hidden; } .proc-tex { position:absolute; inset:0; background: radial-gradient(circle, rgba(255,230,0,.06) 1px, transparent 1px) 0 0 / 28px 28px; pointer-events:none; } .proc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin-top:56px; position:relative; z-index:1; } .proc-step { background:var(--bg1); padding:36px 26px; display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden; cursor:none; } .proc-line { height:2px; background:var(--gradh); width:0; transition:width .5s; margin-bottom:2px; } .proc-step:hover .proc-line { width:100%; } .proc-num { font-family:var(--ff1); font-size:64px; line-height:1; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; opacity:.1; } .proc-icon { font-size:28px; } .proc-title { font-family:var(--ff2); font-size:17px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t1); } .proc-desc { font-family:var(--ff3); font-size:14px; color:var(--t2); line-height:1.65; } /* ─────────────────────────── TESTIMONIOS ─── */ #testimonios { background:var(--bg0); } .testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px; } .testi-card { background:var(--bg2); padding:30px; position:relative; overflow:hidden; transition:transform .3s; } .testi-card:hover { transform:translateY(-3px); } .testi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradh); } .stars { display:flex; gap:2px; margin-bottom:14px; } .star { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-size:14px; } .testi-q { font-family:var(--ff3); font-size:15px; font-weight:300; line-height:1.75; color:var(--t2); font-style:italic; margin-bottom:20px; } .testi-au { display:flex; align-items:center; gap:12px; } .testi-av { width:38px; height:38px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-family:var(--ff1); font-size:16px; color:var(--lk); flex-shrink:0; } .testi-name { font-family:var(--ff2); font-size:14px; font-weight:700; color:var(--t1); letter-spacing:.05em; } .testi-loc { font-family:var(--ff2); font-size:10px; color:var(--t3); letter-spacing:.15em; text-transform:uppercase; } /* ─────────────────────────── UBICACIONES ─── */ #ubicacion { background:var(--bg0); padding-bottom:0; } .loc-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-top:48px; } .loc-card { background:var(--bg2); } .loc-top { height:3px; background:var(--gradh); } .loc-body { padding:28px 28px 0; } .loc-city { font-family:var(--ff1); font-size:30px; letter-spacing:.06em; color:var(--t1); } .loc-role { font-family:var(--ff2); font-size:11px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin:6px 0 16px; } .loc-info { font-family:var(--ff3); font-size:14px; color:var(--t2); line-height:1.75; display:flex; flex-direction:column; gap:5px; } .loc-btn-wrap { padding:20px 28px; } .loc-map { width:100%; height:260px; border:0; display:block; } /* ─────────────────────────── CHECKOUT ─── */ #pedido { background:var(--bg2); } .co-layout { display:grid; grid-template-columns:1fr 390px; gap:32px; margin-top:56px; align-items:start; } .form-blk { background:var(--bg3); padding:32px; display:flex; flex-direction:column; gap:18px; margin-bottom:12px; position:relative; overflow:hidden; } .form-blk::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradh); } .form-title { font-family:var(--ff1); font-size:19px; letter-spacing:.08em; color:var(--t1); display:flex; align-items:center; gap:12px; } .form-title::after { content:''; flex:1; height:1px; background:var(--bd1); } .f2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .fg { display:flex; flex-direction:column; gap:6px; } .flbl { font-family:var(--ff2); font-size:10px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .finput { background:var(--bg2); border:1px solid var(--bd1); color:var(--t1); font-family:var(--ff3); font-size:15px; padding:11px 14px; outline:none; transition:border-color .25s; width:100%; } .finput::placeholder { color:var(--t3); } .finput:focus { border-color:var(--lm); } textarea.finput { resize:vertical; min-height:88px; } .fselect { background:var(--bg2); border:1px solid var(--bd1); color:var(--t1); font-family:var(--ff3); font-size:15px; padding:11px 14px; outline:none; width:100%; -webkit-appearance:none; transition:border-color .25s; cursor:none; } .fselect option { background:var(--bg2); } .fselect:focus { border-color:var(--lc); } .pay-opts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .pay-opt { background:var(--bg2); border:1.5px solid var(--bd1); padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:none; transition:all .25s; } .pay-opt.sel, .pay-opt:hover { border-color:var(--lm); background:rgba(233,30,140,.06); } .pay-emoji { font-size:20px; } .pay-name { font-family:var(--ff2); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--t2); } .pay-opt.sel .pay-name { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .card-fields { display:flex; flex-direction:column; gap:14px; } .cn-wrap { position:relative; } .cbrands { position:absolute; right:12px; top:50%; transform:translateY(-50%); display:flex; gap:6px; } .cbrand { font-family:var(--ff2); font-size:10px; font-weight:700; color:var(--t3); transition:color .25s; } .cbrand.lit { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .coupon-row { display:flex; gap:8px; } .coupon-row .finput { flex:1; } .coupon-btn { background:transparent; border:1.5px solid var(--lc); color:var(--lc); font-family:var(--ff2); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:0 18px; cursor:none; transition:all .25s; white-space:nowrap; } .coupon-btn:hover { background:var(--lc); color:var(--lk); } .o-panel { background:var(--bg3); position:sticky; top:80px; } .o-panel-top { height:3px; background:var(--gradh); } .o-panel-body { padding:28px; } .o-panel-title { font-family:var(--ff1); font-size:22px; letter-spacing:.08em; margin-bottom:22px; } .o-items { display:flex; flex-direction:column; gap:12px; margin-bottom:22px; } .o-item { display:flex; gap:10px; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--bd1); } .o-item:last-child { border-bottom:none; } .o-thumb { width:48px; height:48px; background:var(--bg2); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; } .o-name { font-family:var(--ff2); font-size:14px; font-weight:700; color:var(--t1); } .o-qty { font-family:var(--ff2); font-size:10px; color:var(--t3); letter-spacing:.1em; } .o-price { font-family:var(--ff1); font-size:18px; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-left:auto; } .o-rm { background:none; border:none; color:var(--t3); cursor:none; transition:color .2s; font-size:13px; } .o-rm:hover { color:var(--lm); } .o-lines { border-top:1px solid var(--bd1); padding-top:14px; display:flex; flex-direction:column; gap:8px; } .o-line { display:flex; justify-content:space-between; font-family:var(--ff2); font-size:12px; letter-spacing:.08em; color:var(--t2); } .o-line.tot { font-family:var(--ff1); font-size:26px; letter-spacing:.05em; color:var(--t1); border-top:1px solid var(--bd1); padding-top:12px; margin-top:4px; } .o-line.tot span:last-child { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .sbmt-btn { width:100%; justify-content:center; margin-top:18px; padding:16px; } .sec-badges { display:flex; justify-content:center; gap:14px; margin-top:12px; flex-wrap:wrap; } .sec-badge { font-family:var(--ff2); font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--t3); display:flex; align-items:center; gap:4px; } .wa-cta-p { margin-top:14px; padding:14px; background:rgba(233,30,140,.06); border:1px solid rgba(233,30,140,.15); } .wa-cta-p-lbl { font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--lm); margin-bottom:8px; } /* ─────────────────────────── CTA CONTACTO ─── */ #contacto { padding:80px 60px; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; position:relative; overflow:hidden; } .cta-bg { position:absolute; inset:0; background:var(--grad); } .cta-content, .cta-right { position:relative; z-index:1; } .cta-title { font-family:var(--ff1); font-size:clamp(40px,6vw,78px); color:var(--lk); line-height:.9; letter-spacing:.02em; } .cta-sub { font-family:var(--ff2); font-size:15px; font-weight:600; color:rgba(0,0,0,.55); letter-spacing:.1em; margin-top:10px; } .cta-right { display:flex; flex-direction:column; gap:12px; } .cta-info { font-family:var(--ff2); font-size:14px; font-weight:700; color:var(--lk); letter-spacing:.06em; display:flex; align-items:center; gap:8px; } /* ─────────────────────────── FOOTER ─── */ footer { background:var(--lk); border-top:3px solid transparent; border-image:var(--gradh) 1; padding:56px 60px 28px; } .foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px; margin-bottom:44px; } .foot-bio { font-family:var(--ff3); font-size:14px; color:#8A8480; line-height:1.7; max-width:280px; margin:14px 0 18px; } /* always on dark bg */ .foot-social { display:flex; gap:8px; } .soc { width:34px; height:34px; background:var(--bg2); border:1px solid var(--bd1); display:flex; align-items:center; justify-content:center; color:var(--t2); font-size:14px; text-decoration:none; cursor:none; transition:all .25s; } .soc:hover { background:var(--gradh); border-color:transparent; color:var(--lk); } .foot-col-title { font-family:var(--ff1); font-size:15px; letter-spacing:.1em; color:#F2F0EB; margin-bottom:14px; } /* always on dark bg */ .foot-links { list-style:none; display:flex; flex-direction:column; gap:9px; } .foot-links a { font-family:var(--ff3); font-size:13px; color:#8A8480; text-decoration:none; cursor:none; transition:color .22s; } /* always on dark bg */ .foot-links a:hover { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .foot-bottom { border-top:1px solid var(--bd1); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; } .foot-copy { font-family:var(--ff2); font-size:11px; color:#706C68; letter-spacing:.1em; } /* always on dark bg */ .foot-cmyk { display:flex; gap:6px; align-items:center; } .cmyk-dot { width:10px; height:10px; border-radius:50%; } /* ─────────────────────────── WA IA WIDGET ─── */ #wa-widget { position:fixed; bottom:28px; right:28px; z-index:8000; display:flex; flex-direction:column; align-items:flex-end; gap:10px; } #wa-box { display:none; width:340px; background:var(--bg2); border-radius:16px 16px 4px 16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); border:1px solid var(--bd2); flex-direction:column; } #wa-box.open { display:flex; } .wa-hd { background:var(--gradh); padding:16px 18px; display:flex; align-items:center; gap:12px; } .wa-av { width:40px; height:40px; background:rgba(255,255,255,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; } .wa-hd-name { font-family:var(--ff2); font-size:15px; font-weight:700; letter-spacing:.06em; color:#000; } .wa-hd-status { font-family:var(--ff3); font-size:11px; color:rgba(0,0,0,.6); display:flex; align-items:center; gap:5px; } .wa-online { width:7px; height:7px; background:#00e676; border-radius:50%; display:inline-block; flex-shrink:0; } .wa-close { margin-left:auto; background:rgba(0,0,0,.15); border:none; color:#000; width:28px; height:28px; border-radius:50%; cursor:none; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } #wa-msgs { padding:16px; display:flex; flex-direction:column; gap:10px; max-height:280px; overflow-y:auto; background:var(--bg0); } #wa-msgs::-webkit-scrollbar { width:2px; } #wa-msgs::-webkit-scrollbar-thumb { background:var(--lm); } .wa-bot-row { display:flex; gap:8px; align-items:flex-end; } .wa-av-sm { width:28px; height:28px; background:var(--grad); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; } .wa-bot-bbl { background:var(--bg3); padding:10px 14px; border-radius:16px 16px 16px 4px; max-width:240px; font-family:var(--ff3); font-size:13px; color:var(--t1); line-height:1.55; } .wa-user-bbl { align-self:flex-end; background:var(--gradh); color:#000; padding:9px 14px; border-radius:16px 16px 4px 16px; max-width:240px; font-family:var(--ff3); font-size:13px; line-height:1.5; } .wa-typing { display:flex; gap:4px; align-items:center; padding:4px 0; } .wa-typing span { width:7px; height:7px; border-radius:50%; background:var(--t3); display:inline-block; animation:waDot .8s infinite; } .wa-typing span:nth-child(2) { animation-delay:.15s; } .wa-typing span:nth-child(3) { animation-delay:.30s; } @keyframes waDot { 0%,100%{transform:translateY(0);background:var(--t3)} 50%{transform:translateY(-5px);background:var(--lm)} } .wa-chips { padding:10px 14px; display:flex; gap:6px; flex-wrap:wrap; border-top:1px solid var(--bd1); background:var(--bg2); } .wa-chip { font-family:var(--ff2); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:transparent; border:1px solid var(--bd2); color:var(--t2); padding:5px 12px; border-radius:20px; cursor:none; transition:all .25s; white-space:nowrap; } .wa-chip:hover { border-color:var(--lm); color:var(--t1); } .wa-inp-row { padding:12px 14px; display:flex; gap:8px; border-top:1px solid var(--bd1); background:var(--bg2); } #wa-input { flex:1; background:var(--bg3); border:1px solid var(--bd2); color:var(--t1); font-family:var(--ff3); font-size:13px; padding:9px 14px; border-radius:24px; outline:none; } .wa-send { background:var(--gradh); border:none; width:38px; height:38px; border-radius:50%; cursor:none; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; } .wa-footer { padding:10px 14px; background:var(--bg0); display:flex; align-items:center; justify-content:center; border-top:1px solid var(--bd1); } .wa-footer a { font-family:var(--ff2); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#25D366; text-decoration:none; display:flex; align-items:center; gap:6px; } #wa-fab { width:58px; height:58px; background:linear-gradient(135deg,#25D366,#128C7E); border:none; border-radius:50%; cursor:none; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 32px rgba(37,211,102,.4); transition:transform .3s, box-shadow .3s; position:relative; flex-shrink:0; animation:waPulse 2.5s ease-in-out infinite; } @keyframes waPulse { 0%,100% { box-shadow:0 8px 32px rgba(37,211,102,.4),0 0 0 0 rgba(37,211,102,.4); } 50% { box-shadow:0 8px 32px rgba(37,211,102,.4),0 0 0 14px rgba(37,211,102,0); } } #wa-fab::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(37,211,102,.3); animation:waRing 2.5s ease-in-out infinite; } @keyframes waRing { 0%,100% { transform:scale(1); opacity:.8; } 50% { transform:scale(1.15); opacity:0; } } #wa-fab:hover { transform:scale(1.08); box-shadow:0 12px 40px rgba(37,211,102,.55); } .wa-ia-badge { position:absolute; top:-3px; right:-3px; width:18px; height:18px; background:var(--grad); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:900; color:#000; font-family:var(--ff2); } /* ─────────────────────────── RESPONSIVE ─── */ @media(max-width:1100px){ #hero { grid-template-columns:1fr; } .hero-right { display:none; } .co-layout { grid-template-columns:1fr; } .srv-grid { grid-template-columns:repeat(2,1fr); } .proc-grid { grid-template-columns:repeat(2,1fr); } .testi-grid { grid-template-columns:repeat(2,1fr); } .wk-grid { grid-template-columns:repeat(2,1fr); } .wk-item:nth-child(1), .wk-item:nth-child(4) { grid-column:auto; grid-row:auto; } .foot-grid { grid-template-columns:1fr 1fr; } .loc-grid { grid-template-columns:1fr; } } @media(max-width:768px){ section { padding:68px 20px; } nav { padding:0 20px; } .nav-links, .nav-phone, .nav-cta { display:none; } .ham { display:flex; } .hero-left { padding:110px 20px 60px; } .hero-h1 { font-size:58px; } .srv-grid { grid-template-columns:1fr; } .proc-grid { grid-template-columns:1fr; } .testi-grid { grid-template-columns:1fr; } .wk-grid { grid-template-columns:1fr 1fr; } #contacto { flex-direction:column; padding:60px 20px; } .foot-grid { grid-template-columns:1fr; gap:28px; } .foot-bottom { flex-direction:column; align-items:flex-start; } .f2col { grid-template-columns:1fr; } } /* ── FIX: IMPRESIÓN visible en modo claro ── */ [data-theme="light"] [data-cfg="hero-t1"] { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; opacity: 1 !important; animation: none !important; } /* Fix: hero-h1-s stroke visible en modo claro */ [data-theme="light"] .hero-h1-s { -webkit-text-stroke: 1.5px rgba(24,24,42,.25) !important; color: transparent !important; -webkit-text-fill-color: transparent !important; opacity: 1 !important; animation: none !important; } /* Fix: resto del hero-h1 visible */ [data-theme="light"] .hero-h1 { opacity: 1; } [data-theme="light"] .hero-h1-g { opacity: 1 !important; animation: none !important; } /* removed */ [data-theme="light"] .hero-desc { color: var(--t2) !important; -webkit-text-fill-color: var(--t2) !important; } [data-theme="light"] .hero-desc strong { -webkit-text-fill-color: transparent !important; background: var(--grad) !important; -webkit-background-clip: text !important; background-clip: text !important; } /* ── HERO TEXT: visible en modo claro (fondo claro) ── */ [data-theme="light"] .hero-desc { color: var(--t2) !important; -webkit-text-fill-color: var(--t2) !important; } [data-theme="light"] .hero-desc strong { background: var(--grad) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } [data-theme="light"] .stat-l { color: var(--t3) !important; -webkit-text-fill-color: var(--t3) !important; } [data-theme="light"] .hic-tag { color: var(--t3) !important; } [data-theme="light"] .hic-name { color: var(--t1) !important; -webkit-text-fill-color: var(--t1) !important; } [data-theme="light"] .hero-tag { color: var(--lm) !important; } /* ── MULTI-SERVICE: cart items en Step 1 ── */ .op-cart-list { display:flex; flex-direction:column; gap:8px; margin-top:20px; margin-bottom:8px; } .op-cart-item { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--c2); border:1px solid var(--b1); border-left:3px solid var(--lm); position:relative; } .op-cart-item-ico { width:32px; height:32px; background:var(--c3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; } .op-cart-item-info { flex:1; } .op-cart-item-name { font-family:var(--ff2); font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--t1); } .op-cart-item-detail { font-size:11px; color:var(--t3); font-family:var(--ff3); margin-top:2px; } .op-cart-item-price { font-family:var(--ff1); font-size:16px; letter-spacing:.06em; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .op-cart-rm { background:none; border:none; color:var(--t3); cursor:pointer; font-size:16px; padding:4px; transition:color .2s; line-height:1; } .op-cart-rm:hover { color:var(--red); } .op-add-btn { width:100%; background:transparent; border:1.5px dashed var(--b2); color:var(--t2); padding:12px; font-family:var(--ff2); font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; transition:all .22s; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:8px; } .op-add-btn:hover { border-color:var(--lm); color:var(--lm); background:rgba(181,0,74,.04); } .op-add-btn svg { stroke:currentColor; } .op-svc-selected-info { background:rgba(181,0,74,.05); border:1px solid rgba(181,0,74,.15); padding:12px 16px; margin-bottom:16px; display:none; font-family:var(--ff2); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--lm); } .op-svc-selected-info.show { display:flex; align-items:center; justify-content:space-between; } /* ── REFERENCE IMAGES upload ── */ .op-upload-section { margin-top:24px; } .op-upload-lbl { font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--t3); display:block; margin-bottom:8px; } .op-upload-area { border:2px dashed var(--b1); padding:20px; text-align:center; cursor:pointer; transition:all .22s; background:var(--c2); position:relative; overflow:hidden; } .op-upload-area:hover, .op-upload-area.drag { border-color:var(--lc); background:rgba(0,85,160,.04); } .op-upload-area input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; } .op-upload-icon { font-size:24px; margin-bottom:8px; opacity:.5; } .op-upload-txt { font-family:var(--ff3); font-size:12px; color:var(--t3); } .op-upload-txt strong { color:var(--lc); font-weight:600; } .op-upload-max { font-size:10px; color:var(--t3); margin-top:4px; opacity:.7; } .op-img-previews { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .op-img-thumb { width:64px; height:64px; position:relative; flex-shrink:0; border:1px solid var(--b1); overflow:hidden; } .op-img-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .op-img-rm { position:absolute; top:2px; right:2px; width:18px; height:18px; background:rgba(0,0,0,.7); border:none; color:#fff; cursor:pointer; font-size:11px; border-radius:0; display:flex; align-items:center; justify-content:center; } .op-img-count { font-family:var(--ff2); font-size:10px; color:var(--t3); margin-top:6px; display:none; letter-spacing:.1em; } .op-img-count.show { display:block; } /* ── VARIABLES LOCALES (no dependen del tema) ─────────── */ .op-co { --c0:#0D0D0D; --c1:#141414; --c2:#1C1C1C; --c3:#232323; --b1:#2A2A2A; --b2:#363636; --t1:#F2F0EB; --t2:#9090A0; --t3:#585450; --ly:#FFE600; --lm:#E91E8C; --lc:#00A3E0; --red:#D63B2F; --grn:#00B050; --grad:linear-gradient(135deg,#FFE600 0%,#E91E8C 55%,#00A3E0 100%); --gradh:linear-gradient(90deg,#FFE600 0%,#FF5500 40%,#E91E8C 70%,#00A3E0 100%); --ff1:'Bebas Neue',sans-serif; --ff2:'Barlow Condensed',sans-serif; --ff3:'Barlow',sans-serif; } [data-theme="light"] .op-co { --c0:#F5F5F8; --c1:#EEEEF4; --c2:#FFFFFF; --c3:#EBEBF2; --b1:#D4D4DE; --b2:#C0C0C8; --t1:#1A1A1A; --t2:#404050; --t3:#807870; --ly:#A87000; --lm:#C40050; --lc:#0055A0; } /* ── RESET CONTENEDOR ────────────────────────────────── */ .op-co * { box-sizing:border-box; margin:0; padding:0; } .op-co { color:var(--t1); font-family:var(--ff3); } /* ── HEADER ──────────────────────────────────────────── */ .op-co-hd { background:var(--c1); border-bottom:1px solid var(--b1); padding:20px 40px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:60px; z-index:10; } .op-co-hd-left { display:flex; align-items:center; gap:16px; } .op-co-badge { font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; background:rgba(0,176,80,.1); color:var(--grn); padding:4px 10px; border:1px solid rgba(0,176,80,.2); display:flex; align-items:center; gap:5px; } .op-co-badge::before { content:''; width:6px; height:6px; background:var(--grn); border-radius:50%; animation:opPulse 2s infinite; } @keyframes opPulse { 0%,100%{opacity:1} 50%{opacity:.3} } .op-co-title { font-family:var(--ff1); font-size:20px; letter-spacing:.1em; color:var(--t1); } /* ── STEPPER ─────────────────────────────────────────── */ .op-stepper { display:flex; align-items:center; padding:28px 40px; background:var(--c0); border-bottom:1px solid var(--b1); overflow-x:auto; gap:0; } .op-step { display:flex; align-items:center; flex:1; min-width:0; } .op-step:last-child { flex:none; } .op-step-dot { width:36px; height:36px; border-radius:50%; flex-shrink:0; border:2px solid var(--b2); background:var(--c2); display:flex; align-items:center; justify-content:center; font-family:var(--ff2); font-size:14px; font-weight:700; color:var(--t3); transition:all .35s cubic-bezier(.4,0,.2,1); position:relative; } .op-step-dot.active { border-color:transparent; background:linear-gradient(135deg,#E91E8C,#C40050); color:#fff; box-shadow:0 0 0 4px rgba(233,30,140,.18), 0 4px 16px rgba(233,30,140,.3); transform:scale(1.08); } .op-step-dot.done { border-color:var(--t1); background:var(--t1); color:var(--c0); } .op-step-dot.done::after { content:''; position:absolute; width:10px; height:6px; border-bottom:2px solid var(--c0); border-left:2px solid var(--c0); transform:rotate(-45deg) translate(1px,-1px); } .op-step-txt { margin-left:10px; line-height:1.2; } .op-step-n { font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--t3); } .op-step-lbl { font-family:var(--ff2); font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--t3); } .op-step-dot.active ~ .op-step-txt .op-step-lbl { color:var(--t1); } .op-step-line { flex:1; height:1px; background:var(--b1); margin:0 16px; position:relative; overflow:hidden; } .op-step-line-fill { position:absolute; inset:0; background:var(--grad); width:0%; transition:width .5s ease; } .op-step-line.done .op-step-line-fill { width:100%; } /* ── LAYOUT ──────────────────────────────────────────── */ .op-co-body { display:grid; grid-template-columns:1fr 360px; min-height:calc(100vh - 130px); } @media(max-width:900px){ .op-co-body{ grid-template-columns:1fr; } } /* ── MAIN (izquierda) ───────────────────────────────── */ .op-co-main { padding:48px 52px; border-right:1px solid var(--b1); } @media(max-width:900px){ .op-co-main{ padding:32px 24px; border-right:none; } } .op-step-panel { display:none; animation:opSlideIn .28s ease; } .op-step-panel.active { display:block; } @keyframes opSlideIn { from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } } .op-sec-title { font-family:var(--ff1); font-size:28px; letter-spacing:.08em; color:var(--t1); margin-bottom:4px; } .op-sec-sub { font-size:13px; color:var(--t3); margin-bottom:32px; font-family:var(--ff3); } /* ── SERVICE GRID ────────────────────────────────────── */ .op-svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:8px; margin-bottom:32px; } .op-svc { background:var(--c2); border:1.5px solid var(--b1); padding:16px 14px; cursor:pointer; transition:all .22s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; } .op-svc::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradh); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .op-svc:hover { border-color:var(--b2); background:var(--c3); transform:translateY(-2px); } .op-svc:hover::after,.op-svc.sel::after { transform:scaleX(1); } .op-svc.sel { border-color:var(--lm); background:rgba(181,0,74,.05); } .op-svc-ico { width:32px; height:32px; display:flex; align-items:center; } .op-svc-ico svg { stroke:var(--t3); transition:stroke .2s; } .op-svc:hover .op-svc-ico svg,.op-svc.sel .op-svc-ico svg { stroke:var(--lm); } .op-svc-name { font-family:var(--ff2); font-size:12px; font-weight:700; letter-spacing:.07em; color:var(--t1); line-height:1.2; } .op-svc.sel .op-svc-name { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .op-svc-price { font-size:10px; color:var(--t3); font-family:var(--ff3); } .op-svc-check { position:absolute; top:8px; right:8px; width:18px; height:18px; background:var(--lm); border-radius:50%; display:none; align-items:center; justify-content:center; } .op-svc-check::after { content:''; width:8px; height:5px; border-bottom:1.5px solid #fff; border-left:1.5px solid #fff; transform:rotate(-45deg) translate(1px,-1px); } .op-svc.sel .op-svc-check { display:flex; } /* ── CANTIDAD Y FECHA ───────────────────────────────── */ .op-qty-row { display:grid; grid-template-columns:160px 1fr; gap:20px; margin-bottom:24px; } @media(max-width:600px){ .op-qty-row{ grid-template-columns:1fr; } } .op-qty-wrap { display:flex; align-items:stretch; border:1.5px solid var(--b1); background:var(--c2); } .op-qty-btn { width:40px; background:var(--c3); border:none; color:var(--t2); font-size:18px; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .op-qty-btn:hover { background:var(--gradh); color:#1A1A1A; } .op-qty-inp { flex:1; background:transparent; border:none; text-align:center; font-family:var(--ff1); font-size:22px; letter-spacing:.05em; color:var(--t1); outline:none; min-width:0; } /* ── INPUTS ──────────────────────────────────────────── */ .op-field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media(max-width:600px){ .op-field-row{ grid-template-columns:1fr; } } .op-field { margin-bottom:18px; } .op-lbl { font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--t3); display:block; margin-bottom:7px; } .op-inp-wrap { position:relative; display:flex; align-items:center; } .op-inp-ico { position:absolute; left:14px; color:var(--t3); display:flex; align-items:center; pointer-events:none; } .op-inp { width:100%; background:var(--c2); border:1.5px solid var(--b1); color:var(--t1); padding:13px 16px 13px 44px; font-family:var(--ff3); font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s; -webkit-text-fill-color:var(--t1); } .op-inp:focus { border-color:var(--lm); box-shadow:0 0 0 3px rgba(181,0,74,.1); } .op-inp::placeholder { color:var(--t3); -webkit-text-fill-color:var(--t3); } .op-inp.err { border-color:var(--red); } .op-inp.ok { border-color:var(--grn); } .op-inp-no-ico { padding-left:16px !important; } .op-err-msg { font-size:11px; color:var(--red); margin-top:5px; font-family:var(--ff3); display:none; } .op-err-msg.show { display:block; } .op-hint { font-size:11px; color:var(--t3); margin-top:5px; font-family:var(--ff3); } /* ── TEXTAREA ────────────────────────────────────────── */ .op-textarea { width:100%; background:var(--c2); border:1.5px solid var(--b1); color:var(--t1); -webkit-text-fill-color:var(--t1); padding:13px 16px; font-family:var(--ff3); font-size:14px; outline:none; resize:vertical; min-height:100px; transition:border-color .2s, box-shadow .2s; } .op-textarea:focus { border-color:var(--lm); box-shadow:0 0 0 3px rgba(181,0,74,.1); } .op-textarea::placeholder { color:var(--t3); -webkit-text-fill-color:var(--t3); } /* ── SELECT ──────────────────────────────────────────── */ .op-select { width:100%; background:var(--c2); border:1.5px solid var(--b1); color:var(--t1); -webkit-text-fill-color:var(--t1); padding:13px 40px 13px 44px; font-family:var(--ff3); font-size:14px; outline:none; appearance:none; cursor:pointer; transition:border-color .2s; } .op-select:focus { border-color:var(--lm); } .op-sel-arr { position:absolute; right:14px; color:var(--t3); pointer-events:none; } /* ── MÉTODOS DE PAGO ─────────────────────────────────── */ .op-pay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:28px; } @media(max-width:500px){ .op-pay-grid{ grid-template-columns:1fr; } } .op-pay { background:var(--c2); border:1.5px solid var(--b1); padding:18px 14px; cursor:pointer; transition:all .22s; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; position:relative; } .op-pay:hover:not(:disabled) { border-color:var(--b2); background:var(--c3); } .op-pay.sel { border-color:var(--lm); background:rgba(181,0,74,.05); } .op-pay:disabled { opacity:.4; cursor:not-allowed; } .op-pay-chk { position:absolute; top:8px; right:8px; width:18px; height:18px; background:var(--lm); border-radius:50%; display:none; align-items:center; justify-content:center; } .op-pay-chk::after { content:''; width:8px; height:5px; border-bottom:1.5px solid #fff; border-left:1.5px solid #fff; transform:rotate(-45deg) translate(1px,-1px); } .op-pay.sel .op-pay-chk { display:flex; } .op-pay svg { stroke:var(--t3); transition:stroke .2s; } .op-pay.sel svg { stroke:var(--lm); } .op-pay-name { font-family:var(--ff2); font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--t2); } .op-pay.sel .op-pay-name { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .op-pay-sub { font-size:9px; color:var(--t3); font-family:var(--ff3); } .op-pay-coming { font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.15em; color:var(--ly); text-transform:uppercase; } /* ── BANCO CARDS ─────────────────────────────────────── */ .op-bank { background:var(--c2); padding:18px 20px; margin-bottom:10px; border-left:3px solid; position:relative; } .op-bank-name { font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--t3); margin-bottom:10px; } .op-bank-num { font-family:var(--ff1); font-size:28px; letter-spacing:.18em; color:var(--t1); margin-bottom:4px; } .op-bank-owner { font-family:var(--ff3); font-size:13px; color:var(--t2); } .op-bank-copy { position:absolute; top:14px; right:14px; background:transparent; border:1px solid var(--b2); color:var(--t3); padding:4px 10px; font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.15em; cursor:pointer; transition:all .2s; } .op-bank-copy:hover { border-color:var(--t2); color:var(--t1); } .op-bank-note { padding:12px 16px; background:rgba(255,200,0,.06); border:1px solid rgba(255,200,0,.15); margin-top:14px; font-family:var(--ff3); font-size:12px; color:var(--t2); line-height:1.6; } .op-bank-note strong { color:var(--ly); } /* ── STRIPE PLACEHOLDER ──────────────────────────────── */ .op-stripe-box { background:var(--c2); border:1.5px solid var(--b1); padding:16px; min-height:54px; margin-bottom:16px; position:relative; } .op-stripe-pending { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--ff3); font-size:12px; color:var(--t3); gap:8px; } /* ── REVIEW ──────────────────────────────────────────── */ .op-review-block { background:var(--c2); border:1.5px solid var(--b1); margin-bottom:12px; } .op-review-hd { padding:12px 18px; background:var(--c3); border-bottom:1px solid var(--b1); display:flex; justify-content:space-between; align-items:center; } .op-review-hd-t { font-family:var(--ff2); font-size:9px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--t3); } .op-review-edit { font-family:var(--ff3); font-size:11px; color:var(--lc); background:none; border:none; cursor:pointer; } .op-review-body { padding:16px 18px; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; } .op-review-k { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); font-family:var(--ff3); margin-bottom:2px; } .op-review-v { font-size:13px; color:var(--t1); font-family:var(--ff3); } .op-terms-row { display:flex; align-items:flex-start; gap:12px; padding:20px 0; border-top:1px solid var(--b1); margin-top:20px; } .op-checkbox { width:18px; height:18px; flex-shrink:0; accent-color:var(--lm); cursor:pointer; } .op-terms-txt { font-size:12px; color:var(--t3); line-height:1.6; font-family:var(--ff3); } .op-terms-txt a { color:var(--lc); text-decoration:none; } /* ── BOTONES DE NAV ──────────────────────────────────── */ .op-nav { display:flex; align-items:center; justify-content:space-between; padding-top:28px; border-top:1px solid var(--b1); margin-top:36px; gap:12px; } .op-btn-next { background:var(--gradh); color:#1A1A1A; border:none; padding:15px 36px; font-family:var(--ff1); font-size:18px; letter-spacing:.1em; cursor:pointer; transition:opacity .2s, transform .15s; display:flex; align-items:center; gap:8px; } .op-btn-next:hover { opacity:.88; transform:translateX(2px); } .op-btn-back { background:transparent; border:1.5px solid var(--b2); color:var(--t2); padding:14px 24px; font-family:var(--ff3); font-size:14px; cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:6px; } .op-btn-back:hover { border-color:var(--t2); color:var(--t1); } .op-btn-confirm { background:var(--gradh); color:#1A1A1A; border:none; padding:16px 40px; font-family:var(--ff1); font-size:20px; letter-spacing:.1em; cursor:pointer; transition:opacity .2s; display:flex; align-items:center; gap:10px; } .op-btn-confirm:hover { opacity:.88; } /* ── PANEL DERECHO ──────────────────────────────────── */ .op-panel { background:var(--c1); border-left:1px solid var(--b1); position:sticky; top:120px; max-height:calc(100vh - 120px); overflow-y:auto; display:flex; flex-direction:column; } @media(max-width:900px){ .op-panel{ position:static; max-height:none; border-left:none; border-top:1px solid var(--b1); } } .op-panel-hd { padding:24px; border-bottom:1px solid var(--b1); background:var(--c2); position:sticky; top:0; z-index:1; } .op-panel-hd-top { display:flex; align-items:center; justify-content:space-between; } .op-panel-title { font-family:var(--ff1); font-size:14px; letter-spacing:.12em; color:var(--t1); text-transform:uppercase; } .op-panel-count { background:var(--c3); color:var(--t3); font-family:var(--ff2); font-size:10px; font-weight:700; padding:3px 8px; letter-spacing:.1em; border-radius:0; } .op-panel-body { flex:1; padding:0; } .op-item { display:flex; gap:12px; padding:16px 24px; border-bottom:1px solid var(--b1); align-items:flex-start; } .op-item-ico { width:38px; height:38px; background:var(--c3); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .op-item-ico svg { stroke:var(--lm); } .op-item-info { flex:1; min-width:0; } .op-item-name { font-family:var(--ff2); font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--t1); margin-bottom:2px; } .op-item-qty { font-size:11px; color:var(--t3); font-family:var(--ff3); } .op-item-price { font-family:var(--ff1); font-size:17px; letter-spacing:.06em; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; } .op-panel-empty { padding:40px 24px; text-align:center; color:var(--t3); font-size:13px; font-family:var(--ff3); } .op-panel-empty svg { stroke:var(--t3); margin-bottom:12px; display:block; margin-left:auto; margin-right:auto; } .op-totals { padding:20px 24px; border-top:1px solid var(--b1); background:var(--c2); } .op-total-row { display:flex; justify-content:space-between; align-items:center; font-family:var(--ff3); font-size:12px; color:var(--t2); padding:6px 0; border-bottom:1px solid var(--b1); } .op-total-row:last-of-type { border-bottom:none; } .op-total-final { display:flex; justify-content:space-between; align-items:center; padding-top:16px; margin-top:4px; border-top:1px solid var(--b2); } .op-total-lbl { font-family:var(--ff1); font-size:16px; letter-spacing:.08em; color:var(--t1); } .op-total-val { font-family:var(--ff1); font-size:26px; letter-spacing:.06em; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .op-total-usd { font-size:10px; color:var(--t3); font-family:var(--ff3); margin-top:2px; text-align:right; } .op-submit-wrap { padding:16px 24px; } .op-submit { width:100%; background:var(--gradh); border:none; color:#1A1A1A; padding:18px; font-family:var(--ff1); font-size:19px; letter-spacing:.1em; cursor:pointer; transition:opacity .2s; display:flex; align-items:center; justify-content:center; gap:10px; } .op-submit:hover { opacity:.88; } .op-coupon { padding:0 24px 16px; } .op-coupon-row { display:flex; gap:8px; } .op-coupon-inp { flex:1; background:var(--c2); border:1.5px solid var(--b1); color:var(--t1); padding:10px 12px; font-family:var(--ff3); font-size:13px; outline:none; -webkit-text-fill-color:var(--t1); } .op-coupon-inp:focus { border-color:var(--lm); } .op-coupon-inp::placeholder { color:var(--t3); -webkit-text-fill-color:var(--t3); } .op-coupon-btn { background:transparent; border:1.5px solid var(--b2); color:var(--t2); padding:10px 14px; font-family:var(--ff2); font-size:11px; font-weight:700; letter-spacing:.12em; cursor:pointer; transition:all .2s; } .op-coupon-btn:hover { border-color:var(--lc); color:var(--lc); } .op-guar { display:flex; gap:0; border-top:1px solid var(--b1); } .op-guar-item { flex:1; padding:12px 10px; text-align:center; border-right:1px solid var(--b1); font-family:var(--ff3); } .op-guar-item:last-child { border-right:none; } .op-guar-ico { display:flex; justify-content:center; margin-bottom:4px; } .op-guar-ico svg { stroke:var(--t3); width:14px; height:14px; } .op-guar-txt { font-size:9px; color:var(--t3); letter-spacing:.05em; } .op-wa-alt { padding:16px 24px; border-top:1px solid var(--b1); display:flex; align-items:center; gap:12px; background:rgba(37,211,102,.04); } .op-wa-ico { color:#25D366; display:flex; } .op-wa-txt { font-family:var(--ff3); font-size:11px; color:var(--t3); line-height:1.4; } .op-wa-txt a { color:#25D366; text-decoration:none; } /* ── SUCCESS ─────────────────────────────────────────── */ .op-success { display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 40px; min-height:60vh; } .op-success.show { display:flex; animation:opSlideIn .4s ease; } .op-success-ico { width:72px; height:72px; border-radius:50%; background:rgba(0,176,80,.1); border:2px solid rgba(0,176,80,.3); display:flex; align-items:center; justify-content:center; margin-bottom:28px; } .op-success-ico svg { stroke:var(--grn); } .op-success-title { font-family:var(--ff1); font-size:48px; letter-spacing:.08em; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:8px; } .op-success-num { font-family:var(--ff1); font-size:20px; letter-spacing:.15em; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:16px; } .op-success-desc { font-size:15px; color:var(--t2); font-family:var(--ff3); max-width:400px; line-height:1.7; } /* ── FIX CRÍTICO: hero section ID mismatch ── CSS usaba #hero pero HTML tiene id="inicio". Sin position:relative, los hijos absolute se escapan. */ #inicio { position: relative; overflow: hidden; } #inicio .hero-cmyk { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1; } #inicio .hs-counter, #inicio .hs-dots, #inicio .hs-progress { z-index: 3; } /* Admin bar offset para usuarios logueados */ body.admin-bar nav { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar nav { top: 46px; } }