/* ============================================================================ BROMDEL · TEMA v2 (oscuro premium) — CAPA de reskin sobre premium.css Se activa SOLO con la clase `v2` en el . No cambia marcado ni contenido: redefine variables --p-* y reestiliza .p-*. Mismas fuentes que ya usa el sitio (DM Sans + Fraunces). ============================================================================ */ /* ---- Paleta oscura: redefinición de variables (carbón + lima + crema) ---- */ body.premium.v2{ --p-brand-primary:#7ec61f; /* acentos/links → lima claro (legible en oscuro) */ --p-brand-accent:#aed368; /* eyebrows → pistacho */ --p-ink:#F1F0E6; /* texto/títulos → crema */ --p-ink-soft:#D7DAC9; /* texto secundario */ --p-ink-mute:#9AA088; /* texto apagado (footer) */ --p-paper:#12150D; /* superficie */ --p-paper-warm:#10130B; /* superficie alterna */ --p-off-white:#0e110a; /* fondo base (carbón cálido) */ --p-sage:#3a4327; --p-sage-soft:rgba(255,255,255,.06); --p-line:rgba(210,216,192,.16); --p-line-soft:rgba(210,216,192,.10); --p-shadow-sm:0 1px 2px rgba(0,0,0,.4); --p-shadow-md:0 18px 44px -22px rgba(0,0,0,.7); --p-shadow-lg:0 30px 70px -30px rgba(0,0,0,.8); } /* ---- Fondo base + aurora sutil (sin marcado, pegada al viewport) ---- */ body.premium.v2{ background-color:#0e110a; background-image: radial-gradient(60vw 60vw at 82% -6%, rgba(91,159,12,.11), transparent 60%), radial-gradient(52vw 52vw at -12% 112%, rgba(70,81,42,.22), transparent 62%); background-attachment:fixed; background-repeat:no-repeat; color:var(--p-ink); } body.premium.v2 a{color:var(--p-brand-primary)} /* ---- Header / nav ---- */ body.premium.v2 .p-header{ background:rgba(12,14,8,.72); backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid rgba(210,216,192,.10); } body.premium.v2 .p-brand{color:#F1F0E6} body.premium.v2 .p-nav-menu a{color:rgba(241,240,230,.80)} body.premium.v2 .p-nav-menu a:hover, body.premium.v2 .p-nav-menu a.active{background:rgba(255,255,255,.07);color:#fff} body.premium.v2 .p-header-cta{background:var(--p-brand-accent);color:#0e1407 !important;font-weight:600} body.premium.v2 .p-header-cta:hover{background:#7ec61f} body.premium.v2 .p-menu-toggle{color:#F1F0E6} /* menú móvil desplegado en oscuro */ @media(max-width:980px){ body.premium.v2 .p-nav-menu.open, body.premium.v2 .p-nav-menu[style*="flex"]{ background:rgba(10,12,6,.98);backdrop-filter:blur(14px); border:1px solid rgba(210,216,192,.12);border-radius:14px;padding:10px; } } /* ---- Hero / cabeceras ---- */ body.premium.v2 .p-hero, body.premium.v2 .p-page-header{background:transparent} body.premium.v2 .p-page-header{border-bottom:1px solid rgba(210,216,192,.10)} body.premium.v2 .p-hero-eyebrow{ background:rgba(126,198,31,.12);color:#aed368;border:1px solid rgba(126,198,31,.28); } body.premium.v2 .p-eyebrow{color:#aed368} body.premium.v2 .p-lead{color:var(--p-ink-soft)} /* degradado de acento: pistacho→crema (el olivo original no se ve en oscuro) */ body.premium.v2 .p-accent, body.premium.v2 .p-hero-image .p-accent{ background:linear-gradient(100deg,#bbe07f,#eef2dd 55%,#bbe07f); -webkit-background-clip:text;background-clip:text;color:transparent; filter:none; } /* ---- Botones ---- */ body.premium.v2 .p-btn-primary{background:var(--p-brand-accent);color:#0e1407 !important;border:0} body.premium.v2 .p-btn-primary:hover{background:#7ec61f;box-shadow:0 14px 34px -12px rgba(126,198,31,.5)} body.premium.v2 .p-btn-secondary{background:rgba(255,255,255,.06);color:#F1F0E6;border:1px solid rgba(210,216,192,.22)} body.premium.v2 .p-btn-secondary:hover{background:rgba(255,255,255,.12);border-color:rgba(210,216,192,.4)} body.premium.v2 .p-btn-ghost{color:#F1F0E6} body.premium.v2 .p-btn-ghost:hover{color:#7ec61f} body.premium.v2 .p-btn-white{background:#F1F0E6;color:#0e1407 !important} /* ---- Secciones ---- */ body.premium.v2 .p-section{background:transparent} body.premium.v2 .p-section.alt{ background:rgba(255,255,255,.025); border-top:1px solid rgba(210,216,192,.08);border-bottom:1px solid rgba(210,216,192,.08); } body.premium.v2 .p-section-head p{color:var(--p-ink-soft)} /* ---- Tarjetas (cristal oscuro) ---- */ body.premium.v2 .p-service-card, body.premium.v2 .p-block-card, body.premium.v2 .p-case-card, body.premium.v2 .p-card, body.premium.v2 .p-info-block, body.premium.v2 .p-faq, body.premium.v2 .p-faq-item, body.premium.v2 .p-product, body.premium.v2 .p-stat, body.premium.v2 .p-stats-grid > *{ background:rgba(255,255,255,.04); border:1px solid rgba(210,216,192,.12); box-shadow:none; } /* caja de info de contacto: redondeada y con aire, como el formulario */ body.premium.v2 .p-info-block{border-radius:var(--p-radius-lg);padding:32px} body.premium.v2 .p-service-card:hover, body.premium.v2 .p-block-card:hover, body.premium.v2 .p-case-card:hover, body.premium.v2 .p-product:hover{ border-color:rgba(126,198,31,.4); box-shadow:0 26px 60px -32px rgba(0,0,0,.8); } body.premium.v2 .p-service-card h3, body.premium.v2 .p-block-card h3, body.premium.v2 .p-case-card h3{color:#F1F0E6} body.premium.v2 .p-service-card p, body.premium.v2 .p-block-card p{color:var(--p-ink-soft)} body.premium.v2 .p-service-icon{background:rgba(126,198,31,.14);color:#aed368} body.premium.v2 .p-service-card:hover .p-service-icon{background:rgba(126,198,31,.24)} body.premium.v2 .p-arrow,body.premium.v2 .p-service-card .p-arrow{color:#aed368} body.premium.v2 .p-tech-logo{filter:brightness(0) invert(1);opacity:.6} /* ---- Tarjeta CTA (mantiene gradiente de marca, ya destaca bien) ---- */ body.premium.v2 .p-cta-card{background:linear-gradient(135deg,#2b3219 0%,#46512A 45%,#5B9F0C 100%)} /* ---- Footer ---- */ body.premium.v2 .p-footer{background:#0a0c06;border-top:1px solid rgba(210,216,192,.10)} body.premium.v2 .p-footer-grid h3{color:#F1F0E6} body.premium.v2 .p-footer-grid p, body.premium.v2 .p-footer-grid li, body.premium.v2 .p-footer-grid a, body.premium.v2 .p-footer-bottom{color:var(--p-ink-mute)} body.premium.v2 .p-footer-grid a:hover{color:#7ec61f} body.premium.v2 .p-footer-bottom{border-top:1px solid rgba(210,216,192,.10)} /* ---- Cierre intermedio (ya era oscuro) ---- */ body.premium.v2 .p-cierre{background-color:#0a0c06} /* ---- Contenido legal / artículo / texto largo ---- */ body.premium.v2 .p-legal-content, body.premium.v2 .p-article, body.premium.v2 .p-legal-content p, body.premium.v2 .p-article p, body.premium.v2 .p-legal-content li, body.premium.v2 .p-article li{color:var(--p-ink-soft)} body.premium.v2 .p-legal-content h2, body.premium.v2 .p-legal-content h3, body.premium.v2 .p-article h2, body.premium.v2 .p-article h3{color:#F1F0E6} body.premium.v2 .p-legal-toc{background:rgba(255,255,255,.04);border:1px solid rgba(210,216,192,.12)} body.premium.v2 .p-legal-toc a{color:var(--p-ink-soft)} body.premium.v2 .p-legal-toc a:hover{color:#7ec61f} body.premium.v2 blockquote{border-left:3px solid rgba(126,198,31,.5);color:var(--p-ink-soft)} body.premium.v2 hr{border-color:rgba(210,216,192,.12)} body.premium.v2 table{color:var(--p-ink-soft)} body.premium.v2 th,body.premium.v2 td{border-color:rgba(210,216,192,.14)} body.premium.v2 th{color:#F1F0E6} body.premium.v2 pre,body.premium.v2 code{background:rgba(255,255,255,.05);color:#e8eadf} /* ---- Formularios ---- */ body.premium.v2 input,body.premium.v2 textarea,body.premium.v2 select{ background:rgba(255,255,255,.05);color:#F1F0E6;border:1px solid rgba(210,216,192,.18); } body.premium.v2 input::placeholder,body.premium.v2 textarea::placeholder{color:rgba(241,240,230,.45)} body.premium.v2 input:focus,body.premium.v2 textarea:focus,body.premium.v2 select:focus{ border-color:rgba(126,198,31,.55);outline:none; } body.premium.v2 label{color:var(--p-ink-soft)} /* ---- Filtros / chips ---- */ body.premium.v2 .p-filter-list a,body.premium.v2 .p-chip,body.premium.v2 .p-tag{ background:rgba(255,255,255,.05);color:var(--p-ink-soft);border:1px solid rgba(210,216,192,.14); } body.premium.v2 .p-filter-list a:hover, body.premium.v2 .p-filter-list a.active{background:rgba(126,198,31,.16);color:#cbe78f;border-color:rgba(126,198,31,.4)} /* ============================================================================ FIX barrido de FONDOS BLANCOS (16-jun) — componentes con #fff hardcodeado o estilos en línea claros (chips del stack, tarjeta destacada, etc.) ============================================================================ */ /* tarjetas/superficies con #fff hardcodeado en premium.css */ body.premium.v2 .p-result, body.premium.v2 .p-card-media, body.premium.v2 .p-demo-placeholder, body.premium.v2 .p-faq details{ background:rgba(255,255,255,.04);border:1px solid rgba(210,216,192,.12);color:var(--p-ink-soft); } /* formulario de contacto */ body.premium.v2 .p-form-card{background:rgba(255,255,255,.04);border:1px solid rgba(210,216,192,.12);box-shadow:none} body.premium.v2 .p-form-card label,body.premium.v2 .p-form-row label{color:#F1F0E6} body.premium.v2 .p-form-consent,body.premium.v2 .p-form-consent *{color:var(--p-ink-soft)} body.premium.v2 .p-form-row select:focus, body.premium.v2 .p-filter-search:focus, body.premium.v2 .p-price-range input:focus{background:rgba(255,255,255,.08)} /* tienda: panel de filtros + sort + buscador */ body.premium.v2 .p-shop-sidebar{background:rgba(16,19,11,.99);border:1px solid rgba(210,216,192,.12);color:var(--p-ink-soft)} body.premium.v2 .p-shop-sidebar h3,body.premium.v2 .p-shop-sidebar h4,body.premium.v2 .p-shop-sidebar label{color:#F1F0E6} body.premium.v2 .p-shop-sort select, body.premium.v2 .p-filter-search{background:rgba(255,255,255,.06);color:#F1F0E6;border:1px solid rgba(210,216,192,.18)} /* hero legal (gradiente acababa en blanco) + crosslinks legales */ body.premium.v2 .p-legal-hero{background:transparent} body.premium.v2 .p-legal-crosslinks-grid a{background:rgba(255,255,255,.04);border:1px solid rgba(210,216,192,.12);color:var(--p-ink-soft)} /* header transparente (variante) + tech-logo hover */ body.premium.v2 .p-header.transparent .p-header-cta{background:var(--p-brand-accent);color:#0e1407 !important} body.premium.v2 .p-tech-logo:hover{background:rgba(255,255,255,.08)} /* menú móvil desplegado (era blanco) */ @media(max-width:980px){ body.premium.v2 .p-nav-menu{background:rgba(10,12,6,.98);border:1px solid rgba(210,216,192,.12);border-radius:14px;padding:10px} body.premium.v2 .p-nav-menu a{color:rgba(241,240,230,.88)} } /* banner / gestor de cookies */ body.premium.v2 #bromdel-cookie-banner, body.premium.v2 .bromdel-cm-panel{background:rgba(14,17,10,.98) !important;border:1px solid rgba(210,216,192,.14) !important;color:var(--p-ink-soft) !important} body.premium.v2 #bromdel-cookie-banner h2,body.premium.v2 #bromdel-cookie-banner h3, body.premium.v2 .bromdel-cm-panel h2,body.premium.v2 .bromdel-cm-panel h3{color:#F1F0E6} body.premium.v2 .bromdel-cb-btn.secondary{background:rgba(255,255,255,.08) !important;color:#F1F0E6 !important;border:1px solid rgba(210,216,192,.2) !important} /* CATCH-ALL: estilos EN LÍNEA con fondo claro (chips del stack, tarjeta destacada…) */ body.premium.v2 [style*="background:#fff"], body.premium.v2 [style*="background: #fff"], body.premium.v2 [style*="background:#FFF"], body.premium.v2 [style*="#F7F9F1"], body.premium.v2 [style*="#f7f9f1"], body.premium.v2 [style*="#FBFBFB"], body.premium.v2 [style*="#fbfbfb"], body.premium.v2 [style*="#FAFBF6"], body.premium.v2 [style*="#fafbf6"]{ background:rgba(255,255,255,.05) !important; } /* ============================================================================ FIX bandas OSCURAS que se volvieron claras (usaban var(--p-ink) de fondo) ============================================================================ */ /* banda de estadísticas: era oscura → al flipear --p-ink a crema quedó clara y el texto blanco/sage invisible. Vuelve a banda oscura (números/labels ya legibles). */ body.premium.v2 .p-stats{background:#141810} body.premium.v2 .p-stat-label{color:#cfd4c0} /* botones que usaban var(--p-ink) de fondo (quedaban crema) → lima visible */ body.premium.v2 .p-product .p-actions a, body.premium.v2 .p-shop-filters-trigger, body.premium.v2 .bromdel-cb-btn.primary{background:var(--p-brand-accent) !important;color:#0e1407 !important} body.premium.v2 .p-product .p-actions a:hover, body.premium.v2 .bromdel-cb-btn.primary:hover{background:#7ec61f !important} body.premium.v2 .btn{background:var(--p-brand-accent) !important;color:#0e1407 !important} body.premium.v2 .btn:hover{background:#7ec61f !important} /* menú móvil del header transparente (usaba var(--p-ink)) */ body.premium.v2 .p-header.transparent .p-nav-menu{background:rgba(10,12,6,.98)} /* ============================================================================ CABECERA ESTANDARIZADA (nav+mega de la home nueva, portado a páginas v2) ============================================================================ */ body.premium.v2 .nav{position:sticky;top:0;z-index:50;transition:.35s;background:transparent} body.premium.v2 .nav .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,40px);display:flex;align-items:center;justify-content:space-between;height:72px} body.premium.v2 .nav.scrolled{background:rgba(14,17,10,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(210,216,192,.12)} body.premium.v2 .nav .brand{display:flex;align-items:center;gap:0} body.premium.v2 .nav .brand-logo{height:30px;width:auto;display:block} body.premium.v2 .nav .nav-links{display:flex;gap:30px;align-items:center} body.premium.v2 .nav .nav-links>a,body.premium.v2 .nav .nav-item>a{color:#E7E8DF;font-size:.95rem;font-weight:500;transition:.2s;text-decoration:none} body.premium.v2 .nav .nav-links>a:hover,body.premium.v2 .nav .nav-item>a:hover{color:#fff} body.premium.v2 .nav .nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.55rem;cursor:pointer;line-height:1} body.premium.v2 .nav .nav-item{position:relative;display:flex;align-items:center} body.premium.v2 .nav .nav-item>a{display:inline-flex;align-items:center;gap:5px} body.premium.v2 .nav .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.96rem;padding:13px 22px;border-radius:999px;transition:.25s;cursor:pointer;border:0;text-decoration:none} body.premium.v2 .nav .btn-lime{background:#5B9F0C !important;color:#0e1407 !important;box-shadow:0 10px 26px -10px rgba(91,159,12,.7)} body.premium.v2 .nav .btn-lime:hover{background:#7ec61f !important;transform:translateY(-2px)} body.premium.v2 .mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(12px);width:min(900px,92vw);background:rgba(20,24,13,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(210,216,192,.16);border-radius:20px;padding:26px;box-shadow:0 34px 80px -34px rgba(0,0,0,.75);opacity:0;visibility:hidden;transition:.25s;z-index:60} body.premium.v2 .mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} body.premium.v2 .has-mega:hover .mega,body.premium.v2 .has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} body.premium.v2 .mega-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px} body.premium.v2 .mega.sm{width:min(560px,92vw)} body.premium.v2 .mega.sm .mega-grid{grid-template-columns:repeat(2,1fr)} body.premium.v2 .mega-col h6{color:#7ec61f;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;font-weight:700;font-family:'DM Sans',sans-serif} body.premium.v2 .mega-col a{display:block;color:rgba(245,244,236,.80);padding:5px 0;font-size:.89rem;transition:.18s;text-decoration:none} body.premium.v2 .mega-col a:hover{color:#fff;padding-left:5px} @media(min-width:921px){ body.premium.v2 .mega{position:fixed;top:64px;left:50%;right:auto;transform:translateX(-50%) translateY(10px);width:min(980px,94vw)} body.premium.v2 .mega.sm{width:min(560px,94vw)} body.premium.v2 .mega::before{top:-32px;height:32px;left:0;right:0} body.premium.v2 .has-mega:hover .mega,body.premium.v2 .has-mega:focus-within .mega{transform:translateX(-50%) translateY(0)} } @media(max-width:920px){ body.premium.v2 .nav .nav-toggle{display:block} /* nav por encima del chatbot (z 999); SIN backdrop-filter en móvil: un filtro en el ancestro rompe el position:fixed del menú al hacer scroll (no se ve / los toques se cuelan al contenido) */ body.premium.v2 .nav{z-index:1000} body.premium.v2 .nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,17,10,.97)} body.premium.v2 .nav .nav-links{display:none;position:fixed;top:72px;left:0;right:0;bottom:0;z-index:1000;background:rgba(10,12,6,.99);flex-direction:column;align-items:stretch;gap:0;padding:18px 24px 50px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain} body.premium.v2 .nav .nav-links.open{display:flex} body.premium.v2 .nav .nav-item{display:block} body.premium.v2 .nav .nav-item>a,body.premium.v2 .nav .nav-links>a{padding:13px 0;border-bottom:1px solid rgba(210,216,192,.1);font-size:1.02rem} body.premium.v2 .nav .nav-links>a.btn{margin-top:16px;border:0;justify-content:center} body.premium.v2 .mega{position:static;transform:none;opacity:1;visibility:visible;width:auto;background:transparent;border:0;box-shadow:none;padding:8px 0 12px;backdrop-filter:none} /* en móvil el mega va estático: anula el desplazamiento (translateX) que hereda del hover/focus de escritorio y que al tocar ocultaba una columna */ body.premium.v2 .has-mega:hover .mega,body.premium.v2 .has-mega:focus-within .mega{transform:none} body.premium.v2 .mega-grid,body.premium.v2 .mega.sm .mega-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } /* ============ FIX overflow móvil: tablas con scroll interno (no desplaza la página) ============ */ @media(max-width:640px){ body.premium.v2 table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* ============================================================================ FICHA DE PRODUCTO (producto.html → usa css/styles.css, sistema --brand-*/--ink-*) Redefinir esas variables a oscuro (solo afecta a producto.v2) + cajas #fff ============================================================================ */ body.premium.v2{ --brand-primary:#7ec61f; --brand-accent:#aed368; --ink:#F1F0E6; --ink-soft:#D7DAC9; --ink-mute:#9AA088; --paper:rgba(255,255,255,.04); --paper-warm:rgba(255,255,255,.045); --sage:#0e110a; --sage-soft:#12150d; --line:rgba(210,216,192,.16); --line-soft:rgba(210,216,192,.12); } /* galería: el PNG del robot es transparente → caja oscura (consistente con el listado) */ body.premium.v2 .gallery-main, body.premium.v2 .gallery-thumb, body.premium.v2 .product{background-color:rgba(255,255,255,.04)} body.premium.v2 .gallery-thumb.active{border-color:#7ec61f} body.premium.v2 .product-description-content{background:rgba(255,255,255,.03)} body.premium.v2 .site-footer{background:#0a0c06} /* ficha producto: overrides EXPLÍCITOS de color/fondo (la redefinición de vars de styles.css no aplica aquí) */ body.premium.v2 .product-page h1, body.premium.v2 .product-page h2, body.premium.v2 .product-info h1, body.premium.v2 .related-products h2, body.premium.v2 .product-description-content h3, body.premium.v2 .product-info .meta-list strong, body.premium.v2 .product h3 a{color:#F1F0E6} body.premium.v2 .product-page p, body.premium.v2 .product-page li, body.premium.v2 .product-info .meta-list li, body.premium.v2 .product .desc, body.premium.v2 .product-description-content p, body.premium.v2 .product-description-content li{color:#D7DAC9} body.premium.v2 .product-info .price-block, body.premium.v2 .product .price{color:#bbe07f} body.premium.v2 .product-info .short-desc{background:rgba(255,255,255,.04);border-left:4px solid #7ec61f;color:#D7DAC9} body.premium.v2 .product-info .meta-list{border-top-color:rgba(210,216,192,.14)} /* ============ FIX degradado a blanco en heroes (gradiente inline acabado en #fff) ============ */ /* !important para vencer el style inline; transparente deja ver el fondo carbón */ body.premium.v2 [style*="linear-gradient"][style*="#fff"]{background:transparent !important} /* ============ FIX badges de categoría que se escapaban/solapaban (tarjetas sin position:relative) ============ */ body.premium.v2 .p-service-card, body.premium.v2 .p-block-card, body.premium.v2 .p-case-card{position:relative} /* ============ FIX opciones de