/* ═══════════════════════════════════════════════════════════════════ BASE · reset, tipografía, layout, header y footer Lee todo de tokens.css. Ningún color literal vive acá. ═══════════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box} /* `[hidden]` que de verdad oculta. El navegador trae `[hidden]{display:none}` en su hoja de user-agent, pero CUALQUIER declaración de autor con `display` le gana: no es un tema de especificidad, las reglas del UA pierden por definición. Así que todo componente que declare `display:flex/grid/block` deja de responder al atributo `hidden`, y el JS que lo esconde no esconde nada. Ya había pasado dos veces en este proyecto (.panel y .acc__p tienen su parche propio) y una tercera dejó el diálogo de salida tapando la pantalla entera e interceptando todos los clics. El !important es necesario: sin él, una regla de clase en componentes.css (que carga después) vuelve a ganar por orden. */ [hidden]{display:none !important} /* Sin esto, cualquier ancla del menú deja el título de la sección tapado por el header fijo. */ html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr) + var(--cinta-h) + 16px)} body{ margin:0;background:var(--fondo);color:var(--tinta); font-family:var(--fb);font-size:var(--t-base);line-height:1.6; -webkit-font-smoothing:antialiased; } body.sin-scroll{overflow:hidden} img,svg,video{display:block;max-width:100%} img{height:auto} button,input,select{font:inherit;color:inherit} button{background:none;border:0;padding:0;cursor:pointer} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p,figure,ul,ol{margin:0} ul,ol{padding:0;list-style:none} :focus-visible{outline:2px solid var(--oliva-cl);outline-offset:3px} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ── Tipografía ───────────────────────────────────────────────────── Los títulos de sección van en versalitas con tracking abierto, que es la firma tipográfica de Skinome. Sin el letter-spacing, Space Grotesk en mayúsculas se apelmaza. */ .d1,.d2,.d3{font-family:var(--fs);font-weight:500;line-height:1.04; letter-spacing:var(--tr-tight);text-wrap:balance} .d1{font-size:var(--t-h1)} .d2{font-size:var(--t-h2)} .d3{font-size:var(--t-h3);line-height:1.2} .caps{font-family:var(--fs);font-weight:500;font-size:var(--t-h2); line-height:1.1;text-transform:uppercase;letter-spacing:.04em} .kicker{font-family:var(--fs);font-size:var(--t-xs);font-weight:600; text-transform:uppercase;letter-spacing:var(--tr-caps); color:var(--tinta-3)} .lead{font-size:var(--t-lead);line-height:1.55;color:var(--tinta-2); max-width:56ch;text-wrap:pretty} .precio{font-family:var(--fb);font-variant-numeric:tabular-nums; font-weight:500;letter-spacing:0} /* ── Layout ─────────────────────────────────────────────────────── */ .wrap{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)} .sect{padding-block:var(--sect)} .sect--fondo2{background:var(--fondo-2)} .sect--oscura{background:var(--oliva);color:var(--crema)} .sect--oscura .lead{color:var(--crema-2)} .sect--oscura .kicker{color:var(--crema-2)} /* Los grises de texto secundario están calculados contra el beige de la página, no contra el oliva de esta sección: --tinta-3 sobre Oliva Profundo da 2.6:1. Cualquier texto atenuado que caiga acá adentro tiene que pasar a crema. */ .sect--oscura .card__f, .sect--oscura .card__d, .sect--oscura .buscador__meta{color:var(--crema-2)} /* Apilado en móvil: con flex en fila, el enlace de la derecha se parte en dos renglones («Ver la / línea») y queda desalineado del título. */ .cab{display:flex;flex-direction:column;align-items:flex-start; gap:14px;margin-bottom:clamp(24px,3vw,44px)} .cab p{margin-top:10px} @media(min-width:640px){ .cab{flex-direction:row;align-items:end;justify-content:space-between;gap:24px} } /* ── Botones ──────────────────────────────────────────────────────── El CTA es fondo Oliva Profundo con texto Crema. Es regla de brand/04 verificada por contraste, no una preferencia. */ .btn{display:inline-flex;align-items:center;justify-content:center; gap:10px;min-height:50px;padding:0 30px;border-radius:var(--radio); font-family:var(--fs);font-size:var(--t-sm);font-weight:600; text-transform:uppercase;letter-spacing:var(--tr-caps); transition:background .25s ease,color .25s ease,border-color .25s ease; cursor:pointer} /* El CTA va por sus propios tokens en vez de --oliva/--crema directo. En claro son exactamente esos dos, o sea que nada cambia; en oscuro se invierten (fondo Crema, texto Oliva) porque Oliva Profundo sobre Corteza da 1.4:1 y el botón desaparece del fondo. --oliva y --crema siguen significando lo mismo en los dos temas: sólo cambia cuál de los dos hace de fondo del CTA. */ .btn--cta{background:var(--cta-bg);color:var(--cta-fg)} .btn--cta:hover{background:var(--cta-bg-h)} .btn--linea{border:1px solid var(--tinta);color:var(--tinta)} .btn--linea:hover{background:var(--tinta);color:var(--fondo)} .btn--clara{background:var(--crema);color:var(--oliva)} .btn--clara:hover{background:var(--crema-h)} .btn--fantasma{border:1px solid var(--crema-2);color:var(--crema)} .btn--fantasma:hover{background:var(--crema);color:var(--oliva)} /* Hermano claro de .btn--linea: mismo contorno de 1px, pero en Oliva Profundo en vez de tinta. Existe para los bloques en claro sobre foto (.banner--claro), donde un botón sólido pesa demasiado sobre una composición de producto y un contorno en tinta se lee genérico. No compite con .btn--cta: brand/04 reserva el sólido —fondo Oliva, texto Crema— para el CTA primario, y este es un secundario que lleva a una ficha. El hover sí termina en esa combinación exacta, así que el estado fuerte del botón cumple la regla al pie. */ .btn--linea-oliva{border:1px solid var(--oliva);color:var(--oliva)} .btn--linea-oliva:hover{background:var(--cta-bg);color:var(--cta-fg)} /* La flecha acompaña al cursor. 4px alcanza: más se lee como que el botón se desarma. */ .btn--linea-oliva svg{flex:none;transition:transform .35s var(--e-expo)} .btn--linea-oliva:hover svg{transform:translateX(4px)} .btn--sm{min-height:40px;padding:0 20px} /* ── Header ───────────────────────────────────────────────────────── Arranca transparente sobre el hero y se vuelve sólido al scrollear. La variable --hdr existe porque el hero necesita saber cuánto mide para centrarse en el espacio que queda. */ :root{--hdr:64px} @media(min-width:1024px){ :root{--hdr:76px} } /* La cinta y el header van juntos dentro de .top. Al scrollear, el bloque entero sube exactamente el alto de la cinta: la cinta sale de pantalla y el header queda pegado arriba, sin salto ni superposición. Es más simple que animar `top`, y no reflowea. */ .top{position:fixed;inset:0 0 auto;z-index:80; transition:transform .35s var(--e-drawer)} .top.compacta{transform:translateY(calc(-1 * var(--cinta-h)))} .top.oculta{transform:translateY(-100%)} /* El relleno del header es un TELÓN QUE BAJA, no un fundido: una capa absoluta que crece de height:0 al alto del header en .25s. Es exactamente lo que hace Skinome, y se percibe distinto que una opacidad — se lee como que la barra se despliega desde el borde. El color del texto viaja en una variable para cambiar al mismo tiempo y con la misma curva. */ .hdr{position:relative;height:var(--hdr); --hdr-txt:var(--crema); /* estado transparente, sobre la foto */ --hdr-bg-h:0px; /* alto del telón */ --hdr-bg-color:var(--fondo); /* color del telón ya desplegado */ --hdr-bg-borde:var(--borde); /* su borde inferior */ --cont-bg:var(--crema); /* la burbuja del contador */ --cont-fg:var(--oliva); color:var(--hdr-txt); transition:color .25s ease} .hdr__bg{position:absolute;top:0;left:0;width:100%; height:var(--hdr-bg-h); background:var(--hdr-bg-color);border-bottom:1px solid var(--hdr-bg-borde); transition:height .25s ease,background-color .25s ease,border-color .25s ease; pointer-events:none;z-index:0} /* Con el mega menú de "Tienda" abierto, el telón y el panel tienen que leerse como una sola pieza que baja junta: el borde inferior del telón se apaga acá (el panel ya trae el suyo propio, ver .mega en componentes.css), si no queda una línea partiendo la cortina en dos justo donde el header termina y el panel empieza. */ .hdr:has(.mega-w:hover) .hdr__bg, .hdr:has(.mega-w:focus-within) .hdr__bg, .hdr:has(.mega.abierto) .hdr__bg{border-bottom-color:transparent} /* Velo superior. Sin él, los links claros sobre una foto clara quedan justo en el límite de lo legible — el hero de Verde Oliva es un olivar a contraluz, no un fondo oscuro. Se apaga al bajar el telón. */ .hdr::before{content:'';position:absolute;inset:0 0 auto;height:220%; background:linear-gradient(180deg,rgba(24,22,20,.38) 0%,rgba(24,22,20,0) 100%); pointer-events:none;transition:opacity .25s ease;z-index:0} /* Páginas sin hero: el header arranca relleno. Un header transparente con texto crema sobre el beige del catálogo es texto invisible. */ /* :has(:focus-visible) y no :focus-within — la diferencia importa. :focus-within se cumple con CUALQUIER foco, incluido el que deja un click del mouse. Al hacer click en un link o en un ícono del header, ese elemento queda enfocado, y el telón blanco se quedaba abajo para siempre aunque el mouse ya se hubiera ido: había que ir a hacer click a otro lado para que subiera. :focus-visible sólo se cumple cuando el navegador decide que el foco tiene que verse — o sea, navegando con teclado, no clickeando. Así el telón sigue bajando al tabular hacia el header (que es para lo que estaba puesto: si no, el foco queda sobre texto crema invisible) y ya no se queda trabado después de un click. js/header.js tiene un btn.blur() en el botón del mega menú por exactamente este mismo problema; eso resolvía UN botón, esto resuelve todos y sin romper el teclado. */ .hdr--fijo,.hdr:hover,.hdr:has(:focus-visible),.hdr.solida{ --hdr-txt:var(--tinta);--hdr-bg-h:var(--hdr); --cont-bg:var(--oliva);--cont-fg:var(--crema)} .hdr--fijo::before,.hdr:hover::before, .hdr:has(:focus-visible)::before,.hdr.solida::before{opacity:0} /* Telón oscuro: cuando el bloque que quedó detrás del header (ver scrollHeader() en header.js) es oliva —.sect--oscura, el footer, cualquier otro que reutilice ese mismo fondo—, el telón ya desplegado se pinta oliva en vez de crema, con el mismo par texto/logo claro que usa el header transparente sobre el hero. Tres clases de selector (vs. las dos de la regla de arriba) le ganan la especificidad sin depender del orden en la hoja. */ .hdr.solida.hdr--oscuro,.hdr--fijo.hdr--oscuro{ --hdr-txt:var(--crema);--hdr-bg-color:var(--oliva); --hdr-bg-borde:var(--oliva-h); --cont-bg:var(--crema);--cont-fg:var(--oliva)} .hdr.solida.hdr--oscuro .hdr__logo-img--claro, .hdr--fijo.hdr--oscuro .hdr__logo-img--claro{opacity:1} .hdr.solida.hdr--oscuro .hdr__logo-img--oscura, .hdr--fijo.hdr--oscuro .hdr__logo-img--oscura{opacity:0} /* El halo de :hover en los íconos asume fondo claro (ver comentario más abajo); sobre telón oliva un negro al 6% casi no se ve. */ .hdr--oscuro .icono-btn:hover{background:var(--hover-sobre-foto)} .hdr__in{position:relative;z-index:1; display:flex;align-items:center;gap:20px;height:100%} /* El isotipo cruza entre dos PNG (crema / oliva) con la misma curva y el mismo gatillo que --hdr-txt: un logo rasterizado no puede heredar currentColor como el texto. .25s ease, igual que el telón, para que el cambio se note lo menos posible. */ .hdr__logo{position:relative;display:inline-flex;align-items:center; min-height:44px;width:26px} .hdr__logo-img{position:absolute;left:0;top:50%;translate:0 -50%; width:26px;height:auto;transition:opacity .25s ease} .hdr__logo-img--claro{opacity:1} .hdr__logo-img--oscura{opacity:0} .hdr--fijo .hdr__logo-img--claro,.hdr:hover .hdr__logo-img--claro, .hdr:has(:focus-visible) .hdr__logo-img--claro,.hdr.solida .hdr__logo-img--claro{opacity:0} .hdr--fijo .hdr__logo-img--oscura,.hdr:hover .hdr__logo-img--oscura, .hdr:has(:focus-visible) .hdr__logo-img--oscura,.hdr.solida .hdr__logo-img--oscura{opacity:1} .hdr__nav{display:none;flex:1;justify-content:center;gap:28px} @media(min-width:1024px){.hdr__nav{display:flex}} .hdr__acc{display:flex;align-items:center;gap:6px;margin-left:auto} .icono-btn{display:grid;place-items:center;width:40px;height:40px; border-radius:50%;transition:background .2s ease} /* Un solo halo: dentro del header, tener el mouse encima de un ícono implica tener el mouse encima del header, así que el telón ya bajó — claro la mayor parte del tiempo, salvo con .hdr--oscuro (ver arriba), que pisa este halo con uno claro-sobre-oliva. */ .icono-btn:hover{background:var(--hover-suave)} .icono-btn svg{width:20px;height:20px;fill:currentColor} /* El botón de menú corre -8px para que el trazo del ícono (no el círculo invisible de 40px alrededor) quede alineado con el borde del .wrap — si no, el hueco de padding interno del botón lo corre de más hacia adentro. En mobile, con --gutter en 20px, ese mismo ajuste deja el ícono pegado casi al borde de la pantalla; se anula ahí para que la barra respire. */ .hdr__menu-btn{margin-left:-8px} @media(max-width:640px){ .hdr__menu-btn{margin-left:0} } .icono-btn{position:relative} /* Posicionado contra el botón, no contra el header: antes dependía de la posición estática del , que es frágil y se corre en cuanto cambia el layout de la barra. */ .contador{position:absolute;top:2px;right:2px; min-width:17px;height:17px;padding:0 4px;border-radius:9px; background:var(--cont-bg);color:var(--cont-fg); font-family:var(--fs);font-size:10px;font-weight:600;line-height:17px; text-align:center;transition:background .25s ease,color .25s ease} /* ── Footer ─────────────────────────────────────────────────────── */ .ft{background:var(--oliva);color:var(--crema);padding-block:var(--sect) 40px} .ft a:hover{color:var(--crema-h)} .ft__news{max-width:520px;margin-inline:auto;text-align:center; padding-bottom:clamp(48px,6vw,80px); border-bottom:1px solid rgba(247,244,236,.18)} .ft__campo{display:flex;gap:8px;margin-top:24px} .ft__campo input{flex:1;min-height:50px;padding:0 16px; background:transparent;border:1px solid var(--crema-2); border-radius:var(--radio);color:var(--crema)} .ft__campo input::placeholder{color:rgba(247,244,236,.5)} .ft__campo input:focus{outline:none;border-color:var(--crema)} .ft__campo input[aria-invalid="true"]{border-color:var(--err-cl)} /* El aviso del formulario. Reserva su renglón desde el principio (min-height) para que aparecer un error no empuje el footer. */ .ft__aviso{min-height:1.4em;margin-top:10px;text-align:center; font-size:var(--t-sm);color:var(--crema-2)} .ft__aviso[data-estado="error"]{color:var(--err-cl)} .ft__aviso[data-estado="ok"]{color:var(--crema)} .ft__cols{display:grid;gap:36px;padding-top:clamp(48px,6vw,80px); grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .ft__cols h3{font-family:var(--fs);font-size:var(--t-xs);font-weight:600; text-transform:uppercase;letter-spacing:var(--tr-caps); color:var(--crema-2);margin-bottom:16px} .ft__cols li + li{margin-top:10px} .ft__cols a{font-size:var(--t-sm)} /* Redes. Las que todavía no tienen usuario van apagadas y sin tabulación: un ícono que se ve activo y no lleva a ningún lado es peor que no tenerlo. */ .ft__redes{display:flex;gap:10px;margin-top:clamp(32px,4vw,48px)} .ft__red{display:flex;align-items:center;justify-content:center; width:40px;height:40px;border:1px solid rgba(247,244,236,.28); border-radius:var(--radio);color:var(--crema-2); transition:border-color .2s ease,color .2s ease,background .2s ease} .ft__red svg{width:19px;height:19px} .ft__red:hover{border-color:var(--crema);color:var(--crema); background:rgba(247,244,236,.08)} .ft__red--pendiente{opacity:.35;pointer-events:none} .ft__pie{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between; align-items:center;margin-top:clamp(40px,5vw,64px);padding-top:24px; border-top:1px solid rgba(247,244,236,.18); font-size:var(--t-sm);color:var(--crema-2)} /* ── Selector de idioma ───────────────────────────────────────────── Dos botones y una barra, no un desplegable: con dos opciones, un