/* ========================================================================== PORTÓN & CONSTRUCCIÓN — CSS del header sobre Elessi -------------------------------------------------------------------------- Extraído de preview/assets/porton.css (líneas 12-32 y 85-250). Se carga en TODAS las páginas, no solo en la home, así que incluye sus propios tokens: porton-home.css solo se encola en la portada y aquí no se puede depender de él. DOS CAMBIOS respecto al original, para no pisar a Elessi: .container → .pc-container (Elessi usa .container en todo el sitio) .btn → .header .btn (Elessi también define .btn) Destino: elessi-theme-child/assets/css/porton-header.css ========================================================================== */ /* ---------- Tokens ---------- */ :root{ --pc-red:#E4221D; --pc-red-dark:#B81813; --pc-red-soft:#FDECEB; /* Negros neutros, sin tinte de color. La referencia Voltix usaba un azul-negro (#0E121D), pero en superficies oscuras grandes —el cotizador, la sección de servicios— ese matiz se nota y se lee como azul, no como negro. */ --pc-ink:#0F0F0F; --pc-ink-2:#171717; --pc-ink-3:#232323; --pc-black:#0A0A0A; --pc-graphite:#1A1A1A; --pc-slate-700:#3F3F46; --pc-slate-500:#71717A; --pc-on-dark:#ABABAB; --pc-border:#E4E4E7; --pc-bg:#FFFFFF; --pc-bg-alt:#F5F6F7; --pc-whatsapp:#25D366; --pc-success:#15803D; --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px; --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px; --radius:4px;--radius-lg:8px;--radius-card:16px;--radius-pill:50px; --container:1240px; --font-display:'Barlow Condensed',system-ui,sans-serif; --font-body:'Inter',system-ui,-apple-system,sans-serif; --shadow-sm:0 1px 3px rgba(10,10,10,.08); --shadow-md:0 4px 16px rgba(10,10,10,.10); --shadow-lg:0 12px 40px rgba(10,10,10,.16); } /* ---------- Base mínima que el header necesita ---------- */ .skip{position:absolute;left:-9999px} .skip:focus{left:var(--space-4);top:var(--space-4);z-index:999;background:#fff; padding:var(--space-3) var(--space-4);border:2px solid var(--pc-red)} /* .pc-container y no .container: Elessi usa .container en todo el sitio y redefinir su ancho máximo descuadraría tienda, fichas y pie. */ .pc-container{max-width:var(--container);margin:0 auto;padding:0 var(--space-5)} /* ---------- Botones, acotados al header ---------- Elessi define .btn por su cuenta. Al encerrar estas reglas dentro de .header y .topbar, el estilo de la maqueta solo manda aquí dentro. */ .header .btn{display:inline-flex;align-items:center;justify-content:center; gap:var(--space-2);min-height:48px;padding:0 var(--space-5); font-family:var(--font-display);font-weight:700;font-size:1.0625rem; text-transform:uppercase;letter-spacing:.03em;line-height:1; border:2px solid transparent;border-radius:var(--radius-pill);cursor:pointer; text-decoration:none; transition:background-color .2s ease,color .2s ease,transform .2s ease,border-color .2s ease} .header .btn:hover{transform:translateY(-1px)} .header .btn:active{transform:translateY(0)} .header .btn--primary{background:var(--pc-red);color:#fff} .header .btn--primary:hover{background:var(--pc-red-dark);color:#fff} .header .btn--block{width:100%} /* ---------- Topbar, header, menús (original, líneas 85-250) ---------- */ /* ---------- Topbar ---------- */ .topbar{background:var(--pc-black);color:#D4D4D8;font-size:.8125rem} .topbar__in{display:flex;align-items:center;justify-content:space-between; gap:var(--space-4);min-height:38px;flex-wrap:wrap} .topbar__list{display:flex;gap:var(--space-5);list-style:none;margin:0;padding:0} .topbar__list li{display:flex;align-items:center;gap:6px} .topbar svg{width:15px;height:15px;color:var(--pc-red);flex:none} .topbar a:hover{color:#fff} @media(max-width:767px){.topbar__list--left{display:none} .topbar__in{justify-content:center}} /* ---------- Header ---------- */ .header{position:sticky;top:0;z-index:80;background:#fff; border-bottom:1px solid var(--pc-border);box-shadow:var(--shadow-sm)} .header__in{display:flex;align-items:center;gap:var(--space-5);min-height:92px; transition:min-height .25s ease} @media(min-width:1024px){.header__in{min-height:120px}} .brand img{height:62px;width:auto;transition:height .25s ease} @media(min-width:1024px){.brand img{height:86px}} /* Al bajar, el encabezado se compacta para no comerse la pantalla. El logo grande se luce arriba, que es donde importa. */ .header[data-scrolled="true"] .header__in{min-height:72px} .header[data-scrolled="true"] .brand img{height:50px} @media(min-width:1024px){ .header[data-scrolled="true"] .header__in{min-height:86px} .header[data-scrolled="true"] .brand img{height:62px} } /* El menú horizontal aparece a partir de 1200px, no de 1024px: con el logo y la tipografía más grandes, 7 enlaces más el botón ya no caben cómodos en 1024. Entre 1024 y 1199 se usa el menú de hamburguesa. */ .nav{margin-left:auto;display:none} @media(min-width:1200px){.nav{display:block}} .nav__list{display:flex;gap:var(--space-1);list-style:none;margin:0;padding:0} .nav__list a{display:flex;align-items:center;min-height:48px;padding:0 var(--space-3); font-family:var(--font-display);font-weight:700; font-size:clamp(1.1875rem,1.35vw,1.3125rem); text-transform:uppercase;letter-spacing:.02em;position:relative;transition:color .2s} .nav__list a::after{content:"";position:absolute;left:var(--space-3);right:var(--space-3); bottom:14px;height:3px;background:var(--pc-red);transform:scaleX(0); transform-origin:left;transition:transform .2s ease} .nav__list a:hover{color:var(--pc-red)} .nav__list a:hover::after,.nav__list a[aria-current="page"]::after{transform:scaleX(1)} /* ---- Submenú de Productos (escritorio) ---- Se abre al pasar el mouse y también al enfocar con el teclado: si solo respondiera al mouse, quien navega con tabulador no podría llegar a las categorías. */ .nav__item--sub{position:relative} .nav__flecha{width:14px;height:14px;flex:none;margin-left:2px; transition:transform .2s ease} .nav__item--sub:hover .nav__flecha, .nav__item--sub:focus-within .nav__flecha{transform:rotate(180deg)} .submenu{ position:absolute;top:100%;left:0;z-index:70; min-width:250px;margin:0;padding:var(--space-2); list-style:none; background:#fff;border:1px solid var(--pc-border); border-top:3px solid var(--pc-red); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .18s ease,transform .18s ease,visibility .18s; } .nav__item--sub:hover .submenu, .nav__item--sub:focus-within .submenu, .submenu[data-abierto="true"]{opacity:1;visibility:visible;transform:none} /* Puente invisible entre el enlace y el panel: sin él, el submenú se cierra al cruzar el hueco con el mouse. */ .nav__item--sub::after{content:"";position:absolute;top:100%;left:0; width:100%;height:14px} .submenu a{ min-height:44px;padding:0 var(--space-3); font-size:1rem;letter-spacing:0;text-transform:none; font-family:var(--font-body);font-weight:600; color:var(--pc-slate-700);border-radius:var(--radius); } .submenu a::after{display:none} /* sin el subrayado del menú principal */ .submenu a:hover{background:var(--pc-red-soft);color:var(--pc-red-dark)} /* ---- Submenú de Productos (móvil) ---- */ .mobile-nav__grupo{position:relative;border-bottom:1px solid var(--pc-border)} .mobile-nav__grupo > a{border-bottom:0} .mobile-nav__toggle{ position:absolute;top:0;right:0;width:52px;height:52px; display:grid;place-items:center;background:none;border:0;cursor:pointer; color:var(--pc-black); } .mobile-nav__toggle .nav__flecha{width:18px;height:18px} .mobile-nav__grupo[data-abierto="true"] .nav__flecha{transform:rotate(180deg)} .mobile-nav__sub{display:none;padding:0 0 var(--space-3) var(--space-4); border-left:2px solid var(--pc-red);margin-left:var(--space-2)} .mobile-nav__grupo[data-abierto="true"] .mobile-nav__sub{display:block} /* Doble clase para ganar a `.mobile-nav a`, que se define más abajo en la hoja y con la misma especificidad se impondría. */ .mobile-nav .mobile-nav__sub a{ min-height:46px;line-height:46px;font-size:1rem; font-family:var(--font-body);font-weight:600;text-transform:none; letter-spacing:0;color:var(--pc-slate-700);border-bottom:0; } .mobile-nav .mobile-nav__sub a:hover{color:var(--pc-red)} /* ---- Liquidación: el enlace caliente del menú ---- Va en píldora clara con texto rojo, no en rojo sólido: el botón "Cotizar ahora" ya es un bloque rojo y dos manchas del mismo color compiten entre sí en vez de destacar. Así se distingue de todo lo demás sin robarle el ojo al botón principal. */ .nav__list a.is-liquidacion{ /* Rojo oscuro, no el rojo puro: sobre la píldora clara el rojo de marca da 4,2:1 y solo cumple por ser texto grande. Con el oscuro son 6:1 y sigue cumpliendo aunque algún día se reduzca el tamaño del menú. */ color:var(--pc-red-dark); background:#FEF2F1; border:1.5px solid #F8CFCC; border-radius:var(--radius-pill); padding:0 var(--space-4); margin-left:var(--space-2); gap:7px; transition:background-color .2s ease,border-color .2s ease,color .2s ease; } .nav__list a.is-liquidacion::after{display:none} /* sin subrayado: ya tiene píldora */ .nav__list a.is-liquidacion:hover{ background:var(--pc-red);border-color:var(--pc-red);color:#fff; } /* Punto que late, para que el ojo lo encuentre sin buscarlo */ .nav__list a.is-liquidacion::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--pc-red);flex:none; /* el punto sí en rojo vivo: es decorativo */ animation:pc-latido 1.8s ease-in-out infinite; } .nav__list a.is-liquidacion:hover::before{background:#fff} @keyframes pc-latido{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} } /* En el menú móvil, misma idea adaptada a la lista vertical */ .mobile-nav a.is-liquidacion{ color:var(--pc-red); display:flex;align-items:center;gap:8px; } .mobile-nav a.is-liquidacion::before{ content:"";width:8px;height:8px;border-radius:50%; background:currentColor;flex:none; animation:pc-latido 1.8s ease-in-out infinite; } @media(prefers-reduced-motion:reduce){ .nav__list a.is-liquidacion::before, .mobile-nav a.is-liquidacion::before{animation:none} } .header__cta{display:none;margin-left:auto} @media(min-width:1200px){.header__cta{display:inline-flex;margin-left:var(--space-4)}} .burger{margin-left:auto;width:48px;height:48px;display:grid;place-items:center; background:none;border:2px solid var(--pc-border);border-radius:var(--radius);cursor:pointer} @media(min-width:1200px){.burger{display:none}} .burger svg{width:24px;height:24px} .mobile-nav{display:none;border-top:1px solid var(--pc-border);padding:var(--space-3) 0 var(--space-5)} .mobile-nav[data-open="true"]{display:block} .mobile-nav a{display:block;min-height:52px;line-height:52px; font-family:var(--font-display);font-weight:700;font-size:1.25rem; text-transform:uppercase;border-bottom:1px solid var(--pc-border)} .mobile-nav .btn{margin-top:var(--space-4)} /* ========================================================================== CORRECCIONES SOBRE ELESSI -------------------------------------------------------------------------- Todo lo de abajo nace de medir el sitio real, no de suponer. Elessi define estilos globales para `a` y `button` que ganaban a la maqueta porque la maqueta original se apoyaba en un reset (`a{color:inherit}`) que aquí no se puede aplicar: cambiaría el color de los enlaces de toda la tienda. La solución es dar el color explícito donde hace falta, sin !important: basta con la especificidad de clase. ========================================================================== */ /* ---------- 1. Topbar legible ---------- Elessi pone a{color:#333}. Sobre el negro del topbar eso da 1,3:1 de contraste: prácticamente invisible. En blanco puro son 19:1. */ .topbar, .topbar__list, .topbar__list li{color:#fff} .topbar__list a{color:#fff;text-decoration:none} .topbar__list a:hover, .topbar__list a:focus-visible{color:var(--pc-red);text-decoration:underline} /* Los iconos siguen en rojo de marca: son el acento, no el texto. */ .topbar svg{color:var(--pc-red)} /* Nada de partir un teléfono ni un email en dos líneas. */ .topbar__list li{white-space:nowrap} /* ---------- 2. Topbar en móvil ---------- A 375px no caben las cuatro cosas. Se prioriza por utilidad real: el teléfono es lo único que se toca desde un celular. */ @media(max-width:767px){ .topbar__list--left{display:none} .topbar__in{justify-content:center} .topbar__list{font-size:.75rem;gap:var(--space-4)} } @media(max-width:429px){ /* El email no cabe junto al teléfono en pantallas pequeñas y partirlo se ve peor que no mostrarlo. Sigue estando en el pie y en Contacto. */ .topbar__list li:last-child{display:none} } /* ---------- 3. Hamburguesa visible ---------- Elessi da a los