/* ============================================================================
NATURAL LIFE (.D.A) — SISTEMA DE DISENO PREMIUM
Hoja de estilo maestra. Compartida por TODAS las paginas del sitio estatico.
Direccion de arte: premium pero cercano (confianza natural + calidez llanera).
Referencia mental: nivel Awwwards de productos naturales.
ESTRUCTURA DE ESTE ARCHIVO
01. Tokens (:root) ........ color, tipografia fluida, espaciado, radios, sombra
02. Reset / base .......... normalizacion elegante y tipografia base
03. Layout ................ .contenedor, .seccion, ritmo vertical
04. Tipografia editorial .. .eyebrow, .titulo-seccion, .display, prosa
05. Navegacion ............ .nav sticky con blur + menu movil
06. Botones ............... .btn, .btn-wa (WhatsApp), .btn-fantasma
07. Chips / filtros ....... .chip (categorias y buscador)
08. Tarjeta de producto ... .card-producto + .card-foto (encuadre de foto real)
09. Grilla ................ .grid y variantes
10. Bloque editorial ...... .editorial estilo poster + .callout
11. Hero FUSION/SEPARACION andamiaje de capas (.hero, .hero-strip)
12. Pie de pagina ......... .pie
13. Utilidades ............ .reveal (scroll), espaciados, helpers
14. Cursor-glow ........... capa decorativa opcional
15. Responsive ............ breakpoints 640 / 900 / 1200
16. Accesibilidad ......... foco visible, prefers-reduced-motion, print
REGLA DE FOTO (importante): las imagenes en assets/img/ son tomas de tienda
con fondo de anaquel y mostrador de vidrio. SIEMPRE se muestran dentro de
.card-foto: aspect-ratio fijo + object-fit:cover + fondo gradiente de marca
+ veladura (overlay) que recorta visualmente el fondo + sombra suave.
============================================================================ */
/* ============================================================================
01. TOKENS — :root
Unica fuente de verdad. No usar HEX sueltos en el resto del sitio; usar var().
============================================================================ */
:root {
/* --- Paleta de marca (HEX exactos, no alterar) --- */
--verde-marca: #4CAF50; /* primario, manzana .D.A: botones / acentos */
--verde-profundo: #2E5E3A; /* titulos y texto sobre claro */
--verde-salvia: #9CAF88; /* fondos suaves, detalles */
--crema: #F4F6F0; /* fondo base */
--crema-calido: #FBF7EC; /* fondo alterno (secciones) */
--dorado: #C9A227; /* acento premium — USAR POCO (lineas, sellos) */
--terracota: #C77B43; /* acento llanero puntual */
--carbon: #2B2B2B; /* texto largo */
--blanco: #FFFFFF;
/* --- Derivados utiles (tintes / sombras de los anteriores) --- */
--verde-marca-700: #3C9140; /* hover de boton primario */
--verde-marca-900: #256128; /* presion / borde profundo */
--verde-tenue: rgba(76,175,80,.12); /* fondos lavados de verde */
--salvia-tenue: rgba(156,175,136,.18); /* superficies suaves */
--linea: rgba(46,94,58,.14); /* hairlines sobre claro */
--linea-fuerte: rgba(46,94,58,.24);
--dorado-linea: rgba(201,162,39,.55); /* filete dorado fino */
--tinta-suave: rgba(43,43,43,.66); /* texto secundario */
--tinta-tenue: rgba(43,43,43,.50); /* texto terciario */
--vidrio: rgba(255,255,255,.72); /* fondo nav glass */
/* WhatsApp (marca oficial, solo para el boton .btn-wa) */
--wa: #25D366;
--wa-oscuro: #1EBE5A;
/* --- Tipografia: familias --- */
/* Los de Google Fonts van en el del HTML (ver BUILDER BRIEF). */
--fuente-display: "Fraunces", "Georgia", "Times New Roman", serif; /* titulos */
--fuente-cuerpo: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* UI / cuerpo */
/* PROHIBIDO usar Inter. */
/* --- Escala tipografica fluida (clamp: min, preferido vw, max) --- */
--fs-display: clamp(2.85rem, 1.6rem + 6.2vw, 6rem); /* hero / display */
--fs-h1: clamp(2.35rem, 1.5rem + 4.2vw, 4.25rem); /* titulo de pagina */
--fs-h2: clamp(1.95rem, 1.4rem + 2.6vw, 3rem); /* titulo de seccion */
--fs-h3: clamp(1.4rem, 1.15rem + 1.2vw, 1.85rem); /* subtitulo / nombre producto */
--fs-h4: clamp(1.12rem, 1rem + .5vw, 1.3rem);
--fs-lead: clamp(1.1rem, 1rem + .55vw, 1.4rem); /* parrafo destacado */
--fs-base: clamp(1rem, .96rem + .2vw, 1.075rem); /* cuerpo */
--fs-sm: clamp(.875rem, .85rem + .1vw, .95rem); /* secundario */
--fs-xs: .8rem; /* eyebrow / chips / metadatos */
--lh-apretado: 1.04; /* display */
--lh-titulo: 1.14; /* headings */
--lh-cuerpo: 1.68; /* prosa */
/* Tracking */
--track-eyebrow: .22em;
--track-amplio: .04em;
/* --- Espaciado (escala modular, base 8) --- */
--e-1: .25rem;
--e-2: .5rem;
--e-3: .75rem;
--e-4: 1rem;
--e-5: 1.5rem;
--e-6: 2rem;
--e-7: 3rem;
--e-8: 4rem;
--e-9: 6rem;
--e-10: 8rem;
/* Ritmo vertical de seccion (fluido) */
--seccion-y: clamp(4rem, 2.5rem + 7vw, 8rem);
--contenedor-x: clamp(1.15rem, .6rem + 3vw, 2.5rem);
--contenedor-max: 1200px;
--prosa-max: 68ch;
/* --- Radios --- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 22px;
--r-xl: 30px;
--r-pill: 999px;
/* --- Sombras suaves (premium, baja opacidad, tinte verde) --- */
--sombra-xs: 0 1px 2px rgba(38,60,40,.06);
--sombra-sm: 0 2px 8px rgba(38,60,40,.07);
--sombra-md: 0 10px 28px rgba(38,60,40,.10);
--sombra-lg: 0 22px 55px rgba(38,60,40,.14);
--sombra-xl: 0 40px 90px rgba(38,60,40,.18);
--sombra-foto: 0 18px 50px rgba(38,60,40,.20); /* tarjetas de producto */
/* --- Transiciones (microinteracciones SUTILES) --- */
--t-rapida: 160ms cubic-bezier(.4,0,.2,1);
--t-media: 280ms cubic-bezier(.4,0,.2,1);
--t-lenta: 520ms cubic-bezier(.22,1,.36,1); /* salida suave para reveal */
--t-suave: cubic-bezier(.22,1,.36,1);
/* --- z-index --- */
--z-glow: 0;
--z-base: 1;
--z-nav: 100;
--z-menu: 110;
/* Altura de la barra de navegacion (para offsets de anclas) */
--nav-h: 72px;
color-scheme: light;
}
/* ============================================================================
02. RESET / BASE
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + 1rem); /* anclas no quedan bajo la nav */
-webkit-tap-highlight-color: transparent;
}
body {
font-family: var(--fuente-cuerpo);
font-size: var(--fs-base);
line-height: var(--lh-cuerpo);
font-weight: 400;
color: var(--carbon);
background-color: var(--crema);
/* Veladuras de marca muy sutiles para que el fondo "respire" (no plano). */
background-image:
radial-gradient(60rem 60rem at 8% -10%, var(--verde-tenue), transparent 60%),
radial-gradient(48rem 48rem at 108% 8%, var(--salvia-tenue), transparent 55%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, picture, svg, video, canvas {
display: block;
max-width: 100%;
height: auto;
}
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:where(h1, h2, h3, h4) {
font-family: var(--fuente-display);
font-weight: 500;
line-height: var(--lh-titulo);
color: var(--verde-profundo);
font-optical-sizing: auto; /* Fraunces es variable optica */
letter-spacing: -.01em;
text-wrap: balance; /* titulos equilibrados */
}
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
::selection { background: var(--verde-salvia); color: var(--verde-profundo); }
hr {
border: 0;
height: 1px;
background: var(--linea);
margin: var(--e-6) 0;
}
/* ============================================================================
03. LAYOUT — contenedor + seccion (ritmo vertical)
============================================================================ */
/* Caja central con ancho maximo y padding fluido lateral. */
.contenedor {
width: 100%;
max-width: var(--contenedor-max);
margin-inline: auto;
padding-inline: var(--contenedor-x);
}
/* Contenedor estrecho para prosa larga (legibilidad). */
.contenedor--estrecho { max-width: 820px; }
/* Seccion: bloque con ritmo vertical generoso (espacio en blanco). */
.seccion {
position: relative;
padding-block: var(--seccion-y);
}
.seccion--compacta { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.seccion--ras-arriba { padding-top: 0; }
/* Fondos de seccion alternos (variar el ritmo entre secciones). */
.seccion--crema { background: var(--crema); }
.seccion--calido { background: var(--crema-calido); }
.seccion--salvia { background: linear-gradient(180deg, var(--crema-calido), var(--salvia-tenue)); }
.seccion--verde { background: var(--verde-profundo); color: var(--crema); }
.seccion--verde :where(h1,h2,h3,h4) { color: var(--blanco); }
.seccion--verde .eyebrow { color: var(--verde-salvia); }
.seccion--verde .eyebrow::before { background: var(--verde-salvia); }
/* Filete dorado fino como separador premium (USAR POCO). */
.filete-dorado {
height: 1px;
border: 0;
background: linear-gradient(90deg, transparent, var(--dorado-linea), transparent);
margin-inline: auto;
max-width: 220px;
}
/* ============================================================================
04. TIPOGRAFIA EDITORIAL — eyebrow, titulo de seccion, display, prosa
============================================================================ */
/* Eyebrow: micro-rotulo sobre el titulo (con guion fino a la izquierda). */
.eyebrow {
display: inline-flex;
align-items: center;
gap: .6em;
font-family: var(--fuente-cuerpo);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--verde-marca);
margin-bottom: var(--e-3);
}
.eyebrow::before {
content: "";
width: 1.8em;
height: 2px;
background: var(--verde-marca);
border-radius: 2px;
}
/* Titulo de seccion. */
.titulo-seccion {
font-size: var(--fs-h2);
max-width: 22ch;
}
.titulo-seccion--centrado {
text-align: center;
margin-inline: auto;
}
/* Display gigante (heroes, posters editoriales). */
.display {
font-family: var(--fuente-display);
font-weight: 500;
font-size: var(--fs-display);
line-height: var(--lh-apretado);
letter-spacing: -.02em;
}
.display em { /* enfasis serif en italica optica de Fraunces */
font-style: italic;
font-weight: 400;
color: var(--verde-marca);
}
/* Parrafo destacado (intros de seccion). */
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--tinta-suave);
max-width: var(--prosa-max);
}
/* Encabezado de seccion: agrupa eyebrow + titulo + lead con ancho de prosa. */
.encabezado { max-width: 60ch; margin-bottom: var(--e-7); }
.encabezado--centrado {
text-align: center;
margin-inline: auto;
}
.encabezado--centrado .eyebrow { justify-content: center; }
/* Prosa larga (paginas de contenido: nosotros, envios, ficha). */
.prosa { max-width: var(--prosa-max); }
.prosa > * + * { margin-top: var(--e-4); }
.prosa h2, .prosa h3 { margin-top: var(--e-7); }
.prosa h2 { font-size: var(--fs-h3); }
.prosa h3 { font-size: var(--fs-h4); }
.prosa a {
color: var(--verde-marca);
text-decoration: underline;
text-decoration-color: var(--dorado-linea);
text-underline-offset: .2em;
transition: color var(--t-rapida);
}
.prosa a:hover { color: var(--verde-profundo); }
.prosa ul { margin-left: 1.1em; }
.prosa li { list-style: disc; margin-top: var(--e-2); padding-left: .25em; }
.prosa li::marker { color: var(--verde-marca); }
/* ============================================================================
05. NAVEGACION — .nav sticky con blur + menu movil
Marcado exacto en el BUILDER BRIEF. JS (main.js) gestiona toggle + link activo.
============================================================================ */
.nav {
position: sticky;
top: 0;
z-index: var(--z-nav);
background: var(--vidrio);
-webkit-backdrop-filter: saturate(160%) blur(14px);
backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color var(--t-media), background var(--t-media), box-shadow var(--t-media);
}
/* Estado al hacer scroll (JS agrega .nav--scrolled). */
.nav--scrolled {
border-bottom-color: var(--linea);
box-shadow: var(--sombra-sm);
background: rgba(255,255,255,.82);
}
.nav__inner {
min-height: var(--nav-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-5);
}
/* Marca / logo (manzana .D.A + wordmark). */
.nav__marca {
display: inline-flex;
align-items: center;
gap: .65rem;
font-family: var(--fuente-display);
font-weight: 600;
font-size: 1.28rem;
color: var(--verde-profundo);
letter-spacing: -.01em;
white-space: nowrap;
}
.nav__logo { /* manzana CSS (placeholder hasta logo .D.A real) */
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
background: radial-gradient(circle at 32% 30%, var(--verde-marca), var(--verde-marca-900));
position: relative;
flex: none;
box-shadow: var(--sombra-xs);
}
.nav__logo::after { /* hojita */
content: "";
position: absolute;
top: -4px; left: 52%;
width: 11px; height: 7px;
background: var(--verde-profundo);
border-radius: 0 80% 0 80%;
transform: rotate(-22deg);
}
.nav__marca small {
display: block;
font-family: var(--fuente-cuerpo);
font-size: .62rem;
font-weight: 600;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--verde-marca);
line-height: 1;
margin-top: 2px;
}
/* Lista de enlaces. */
.nav__links {
display: flex;
align-items: center;
gap: clamp(.5rem, 1.5vw, 1.75rem);
}
.nav__link {
position: relative;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--carbon);
padding: .5rem .2rem;
transition: color var(--t-rapida);
}
.nav__link::after { /* subrayado animado */
content: "";
position: absolute;
left: 0; bottom: .15rem;
width: 100%;
height: 2px;
background: var(--verde-marca);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-media);
}
.nav__link:hover { color: var(--verde-profundo); }
.nav__link:hover::after { transform: scaleX(1); }
/* Link activo (JS o atributo aria-current="page"). */
.nav__link.is-activa,
.nav__link[aria-current="page"] { color: var(--verde-profundo); font-weight: 600; }
.nav__link.is-activa::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
/* Acciones a la derecha (boton WhatsApp + hamburguesa). */
.nav__acciones { display: flex; align-items: center; gap: var(--e-3); }
/* Boton hamburguesa (solo movil). */
.nav__toggle {
display: none;
width: 44px; height: 44px;
border: 1px solid var(--linea);
border-radius: var(--r-sm);
background: var(--blanco);
cursor: pointer;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
transition: border-color var(--t-rapida), background var(--t-rapida);
}
.nav__toggle:hover { border-color: var(--verde-marca); }
.nav__toggle span {
display: block;
width: 20px; height: 2px;
background: var(--verde-profundo);
border-radius: 2px;
transition: transform var(--t-media), opacity var(--t-rapida);
}
/* Animacion hamburguesa -> X (cuando aria-expanded="true"). */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ============================================================================
06. BOTONES — .btn (primario), .btn-wa (WhatsApp), .btn-fantasma
============================================================================ */
.btn,
.btn-wa,
.btn-fantasma {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .6em;
font-family: var(--fuente-cuerpo);
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: .01em;
line-height: 1;
padding: .95em 1.6em;
border-radius: var(--r-pill);
border: 1.5px solid transparent;
cursor: pointer;
white-space: nowrap;
text-align: center;
transition: transform var(--t-rapida), box-shadow var(--t-media),
background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida);
will-change: transform;
}
.btn:active, .btn-wa:active, .btn-fantasma:active { transform: translateY(1px) scale(.99); }
/* Primario — manzana .D.A. */
.btn {
background: var(--verde-marca);
color: var(--blanco);
box-shadow: 0 8px 20px rgba(76,175,80,.28);
}
.btn:hover {
background: var(--verde-marca-700);
box-shadow: 0 12px 28px rgba(76,175,80,.36);
transform: translateY(-2px);
}
/* WhatsApp — verde oficial WA + icono. Es el CTA transversal del sitio, asi que
merece el gesto de hover con MAS caracter (jerarquia de microinteraccion). */
.btn-wa {
background: var(--wa);
color: var(--blanco);
box-shadow: 0 8px 22px rgba(37,211,102,.30);
}
.btn-wa:hover {
background: var(--wa-oscuro);
box-shadow: 0 16px 34px rgba(37,211,102,.42);
transform: translateY(-3px);
}
.btn-wa svg, .btn-wa .ico {
width: 1.15em; height: 1.15em; flex: none; fill: currentColor;
transition: transform var(--t-media);
}
/* El icono de WA "saluda" levemente en hover (detalle vivo, no en el resto). */
.btn-wa:hover svg, .btn-wa:hover .ico { transform: scale(1.12) rotate(-6deg); }
/* Fantasma — contorno, para acciones secundarias sobre fondo claro. */
.btn-fantasma {
background: transparent;
color: var(--verde-profundo);
border-color: var(--linea-fuerte);
}
/* Secundario: gesto MAS contenido que los CTA (sin salto vertical). Solo
afirma el borde y el fondo; asi la jerarquia de respuesta es perceptible. */
.btn-fantasma:hover {
border-color: var(--verde-marca);
background: var(--verde-tenue);
}
/* Variante sobre fondo oscuro (.seccion--verde). */
.seccion--verde .btn-fantasma { color: var(--crema); border-color: rgba(255,255,255,.4); }
.seccion--verde .btn-fantasma:hover { background: rgba(255,255,255,.10); border-color: var(--crema); }
/* Modificadores de tamano. */
.btn--lg, .btn-wa--lg { padding: 1.15em 2em; font-size: var(--fs-base); }
.btn--sm, .btn-wa--sm { padding: .7em 1.1em; font-size: var(--fs-xs); }
.btn--bloque { display: flex; width: 100%; }
/* ============================================================================
07. CHIPS / FILTROS — .chip (categorias del catalogo y buscador)
============================================================================ */
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--e-2);
align-items: center;
}
.chip {
display: inline-flex;
align-items: center;
gap: .45em;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--verde-profundo);
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-pill);
padding: .55em 1.05em;
cursor: pointer;
user-select: none;
transition: background var(--t-rapida), border-color var(--t-rapida),
color var(--t-rapida), transform var(--t-rapida);
}
.chip:hover { border-color: var(--verde-marca); transform: translateY(-1px); }
.chip .chip__n { /* contador opcional de productos */
font-size: .72em;
font-weight: 700;
color: var(--tinta-tenue);
}
/* Activo (aria-pressed="true" o .is-activa, lo gestiona main.js). */
.chip.is-activa,
.chip[aria-pressed="true"] {
background: var(--verde-marca);
border-color: var(--verde-marca);
color: var(--blanco);
}
.chip.is-activa .chip__n,
.chip[aria-pressed="true"] .chip__n { color: rgba(255,255,255,.8); }
/* Buscador del catalogo. */
.buscador {
position: relative;
display: flex;
align-items: center;
min-width: min(100%, 320px);
}
.buscador__input {
width: 100%;
font-size: var(--fs-sm);
color: var(--carbon);
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-pill);
padding: .8em 1em .8em 2.7em;
transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.buscador__input::placeholder { color: var(--tinta-tenue); }
.buscador__input:focus {
outline: none;
border-color: var(--verde-marca);
box-shadow: 0 0 0 4px var(--verde-tenue);
}
.buscador__ico {
position: absolute;
left: 1em;
width: 1.05em; height: 1.05em;
stroke: var(--tinta-suave);
pointer-events: none;
}
/* Barra de herramientas del catalogo (chips + buscador en fila). */
.barra-filtros {
display: flex;
flex-wrap: wrap;
gap: var(--e-4);
align-items: center;
justify-content: space-between;
margin-bottom: var(--e-7);
}
/* ============================================================================
08. TARJETA DE PRODUCTO — .card-producto + .card-foto
.card-foto encuadra la foto REAL de tienda sobre fondo de marca y recorta
visualmente el anaquel con una veladura (gradiente). object-fit:cover +
object-position centrado-alto para favorecer la etiqueta del producto.
============================================================================ */
.card-producto {
position: relative;
display: flex;
flex-direction: column;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--sombra-sm);
transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-media);
height: 100%;
}
.card-producto:hover {
transform: translateY(-6px);
box-shadow: var(--sombra-lg);
border-color: var(--salvia-tenue);
}
/* --- Marco de foto: el corazon del trato visual de imagen --- */
.card-foto {
position: relative;
aspect-ratio: 4 / 5; /* retrato: encuadra el producto vertical */
/* Fondo gradiente suave de marca: si la foto deja ver anaquel, este fondo y
la veladura de abajo lo recortan visualmente. */
background:
radial-gradient(120% 90% at 50% 18%, var(--crema-calido), var(--salvia-tenue) 78%, var(--verde-salvia));
overflow: hidden;
isolation: isolate;
}
.card-foto img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* recorta el fondo de anaquel */
object-position: 50% 32%; /* sube el encuadre hacia la etiqueta */
/* Color de fondo de carga (evita el "marco vacio" antes de que cargue). */
background-color: var(--crema-calido);
transition: transform var(--t-lenta), filter var(--t-media);
z-index: 1;
}
/* Encuadre por producto: cada foto coloca su etiqueta a distinta altura, asi
que ajustamos object-position con una variable opcional --foco (la setea el
HTML por imagen). Por defecto, encuadre centrado-alto. */
.card-foto img[style*="--foco"] { object-position: 50% var(--foco); }
/* Hover de card: en vez de un zoom que solo muestra mas anaquel, realzamos
sutilmente el producto (brillo/contraste). Microinteraccion diferenciada. */
.card-producto:hover .card-foto img { transform: scale(1.015); filter: saturate(1.06) brightness(1.02); }
/* Veladura de marca SOLO en bordes superior/inferior, sin mix-blend-mode (que
ensuciaba los tonos medios de la foto). Funde el techo del local y el
mostrador con el fondo de marca sin virar el color del producto. */
.card-foto::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(180deg, rgba(244,246,240,.22) 0%, transparent 16% 80%, rgba(46,94,58,.16) 100%);
}
/* Etiqueta de categoria flotando sobre la foto. */
.card-foto__cat {
position: absolute;
top: var(--e-3); left: var(--e-3);
z-index: 3;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--track-amplio);
text-transform: uppercase;
color: var(--verde-profundo);
background: rgba(255,255,255,.86);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border-radius: var(--r-pill);
padding: .4em .85em;
box-shadow: var(--sombra-xs);
}
/* Sello "insignia" para Kmarita (el terror del llano). Lenguaje premium y
coherente con la paleta calida: base crema translucida + filete dorado fino
+ texto verde profundo en cursiva Fraunces (NO fondo negro tipo licor). Dialoga
con .card-foto__cat (misma familia de etiqueta sobre foto). */
.card-foto__sello {
position: absolute;
top: var(--e-3); right: var(--e-3);
z-index: 3;
display: inline-flex;
align-items: center;
gap: .4em;
font-family: var(--fuente-display);
font-style: italic;
font-size: var(--fs-xs);
color: var(--verde-profundo);
background: rgba(251,247,236,.92); /* crema-calido translucido */
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border: 1px solid var(--dorado-linea);
border-radius: var(--r-pill);
padding: .4em .85em;
letter-spacing: .01em;
box-shadow: var(--sombra-xs);
}
/* Punto dorado de "lacre" a la izquierda del sello (detalle premium minimo). */
.card-foto__sello::before {
content: "";
width: .5em; height: .5em;
border-radius: 50%;
background: var(--dorado);
flex: none;
}
/* --- Cuerpo de la tarjeta --- */
.card-producto__cuerpo {
display: flex;
flex-direction: column;
gap: var(--e-2);
padding: var(--e-5);
flex: 1;
}
.card-producto__nombre {
font-size: var(--fs-h3);
line-height: 1.15;
}
/* Variante compacta del nombre (cards de dato/contacto/relacionados): evita
los font-size inline repetidos que parchaban la escala. */
.card-producto__nombre--sm { font-size: var(--fs-h4); }
/* Encabezado h3/h4 a tamano h4 desde el sistema (FAQ de ficha, tarjetas de
contacto): centraliza lo que antes era style="font-size:var(--fs-h4)". */
.titulo-h4 { font-size: var(--fs-h4); }
.card-producto__desc {
font-size: var(--fs-sm);
color: var(--tinta-suave);
line-height: 1.55;
}
/* Meta (presentacion / sabor) en linea. */
.card-producto__meta {
display: flex;
flex-wrap: wrap;
gap: var(--e-2);
margin-top: var(--e-1);
}
.card-producto__precio {
margin-top: auto;
padding-top: var(--e-4);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--verde-marca);
}
/* Pie de acciones de la tarjeta. */
.card-producto__acciones {
display: flex;
gap: var(--e-2);
margin-top: var(--e-4);
}
.card-producto__acciones .btn-wa,
.card-producto__acciones .btn-fantasma { flex: 1; }
/* Tarjeta como enlace completo: foco accesible cubre toda la card. */
.card-producto a.cubrir::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
}
/* ============================================================================
09. GRILLA — .grid + variantes (mobile-first, auto-fit)
============================================================================ */
.grid {
display: grid;
gap: clamp(1rem, .5rem + 1.6vw, 2rem);
grid-template-columns: 1fr;
}
/* Auto-fit responsivo segun ancho minimo de columna. */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grid--auto-ancho { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.grid--align-centro { align-items: center; }
/* ============================================================================
10. BLOQUE EDITORIAL — .editorial estilo poster + .callout
Tipografia grande dialogando con la foto del producto. Etiquetas .callout
anotan sabor / gramaje / beneficio (poster editorial premium con PRODUCTOS).
============================================================================ */
.editorial {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.5rem, 1rem + 3vw, 4rem);
align-items: center;
}
/* Lado de texto. */
.editorial__texto { display: flex; flex-direction: column; gap: var(--e-4); }
.editorial__titulo {
font-size: var(--fs-h1);
line-height: 1.05;
letter-spacing: -.02em;
}
.editorial__titulo .acento { color: var(--verde-marca); font-style: italic; font-weight: 400; }
/* Lado de imagen: marco editorial con filete y "etiquetas" flotantes. */
.editorial__media {
position: relative;
border-radius: var(--r-xl);
overflow: visible; /* permite que los .callout salgan del marco */
isolation: isolate;
}
.editorial__foto {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-xl);
overflow: hidden;
background: radial-gradient(120% 90% at 50% 20%, var(--crema-calido), var(--verde-salvia));
box-shadow: var(--sombra-foto);
}
.editorial__foto img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 32%;
background-color: var(--crema-calido); /* fondo de carga */
}
.editorial__foto img[style*="--foco"] { object-position: 50% var(--foco); }
.editorial__foto::after { /* misma veladura de recorte que las cards (sin multiply) */
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(244,246,240,.20), transparent 22% 78%, rgba(46,94,58,.18));
}
/* Filete dorado decorativo del marco editorial (detalle premium minimo). */
.editorial__media::before {
content: "";
position: absolute;
inset: -10px;
border: 1px solid var(--dorado-linea);
border-radius: calc(var(--r-xl) + 10px);
z-index: -1;
opacity: .6;
}
/* Etiqueta flotante (callout): sabor / gramaje / beneficio. */
.callout {
position: absolute;
z-index: 3;
display: inline-flex;
flex-direction: column;
gap: .15em;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-md);
box-shadow: var(--sombra-md);
padding: .7em 1em;
max-width: 12rem;
}
.callout__k { /* clave / rotulo */
font-size: .68rem;
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--verde-marca);
}
.callout__v { /* valor */
font-size: var(--fs-sm);
font-weight: 500;
color: var(--carbon);
line-height: 1.3;
}
/* Posiciones sugeridas (el HTML las combina con utilidades). */
.callout--tl { top: 8%; left: -6%; }
.callout--tr { top: 14%; right: -6%; }
.callout--bl { bottom: 14%; left: -6%; }
.callout--br { bottom: 8%; right: -6%; }
/* ============================================================================
11. HERO — FUSION / SEPARACION (andamiaje)
El producto insignia (Kmarita) se compone de franjas verticales (.hero-strip)
que arrancan SEPARADAS/desplazadas y se FUSIONAN con scroll/cursor.
main.js controla la variable --fusion (0=separado .. 1=fusionado) por capa.
CONTRATO DE MARCADO: ver DESIGN-SYSTEM.md y el BUILDER BRIEF.
============================================================================ */
.hero {
position: relative;
min-height: clamp(560px, 92vh, 920px);
display: grid;
grid-template-columns: 1fr;
align-items: center;
padding-block: clamp(2rem, 1rem + 5vw, 5rem);
overflow: hidden;
}
/* Texto del hero. */
.hero__texto {
position: relative;
z-index: 3;
max-width: 36rem;
display: flex;
flex-direction: column;
gap: var(--e-5);
}
.hero__titulo { font-size: var(--fs-display); line-height: var(--lh-apretado); letter-spacing: -.025em; }
.hero__lead { font-size: var(--fs-lead); color: var(--tinta-suave); max-width: 32rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-2); }
/* --- Escenario de la imagen fusion/separacion --- */
.hero__media {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
max-width: 30rem;
margin-inline: auto;
/* Halo de marca detras del producto. */
filter: drop-shadow(0 30px 60px rgba(38,60,40,.25));
}
.hero__halo {
position: absolute;
inset: -8%;
z-index: 0;
border-radius: 50%;
background: radial-gradient(circle at 50% 42%, var(--verde-tenue), transparent 62%);
}
/* Stage que contiene las franjas; recorta a la silueta del producto. */
.hero-stage {
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--r-xl);
overflow: hidden;
background: radial-gradient(120% 100% at 50% 16%, var(--crema-calido), var(--verde-salvia));
box-shadow: var(--sombra-foto);
}
/* Cada franja muestra su PROPIA columna vertical de la imagen (clip-path +
background-position-x alineados), de modo que en reposo (separacion = 0) las
4 franjas RECONSTRUYEN el producto completo. main.js escribe --fusion
(1 = producto entero en reposo .. baja hacia 0 = franjas ligeramente
separadas al interactuar). La separacion es SUTIL: parallax editorial, no un
producto despedazado. Primera impresion = producto solido y entero.
--sep es el factor de separacion visible: sep = (1 - fusion), acotado para
que aun "separado" el producto se lea entero. */
.hero-strip {
position: absolute;
inset: 0;
--sep: calc(1 - var(--fusion, 1));
/* background-image lo aplica main.js INLINE (lee --hero-img de #hero-stage y
lo pinta en cada franja), para que la ruta RELATIVA resuelva contra el
documento y no contra esta hoja. Ver heroFusion() en main.js. */
background-repeat: no-repeat;
/* La imagen se dimensiona al ANCHO COMPLETO del escenario en las 4 franjas;
cada franja la desplaza en X a su columna (0/33/66/100%) para alinear con
su clip-path. Asi las tiras encajan y forman una sola foto. */
background-size: cover;
background-position-y: 30%;
will-change: transform;
/* Offsets SUTILES (no 90px): leve apertura lateral + microrotacion. */
transform:
translate3d(calc(var(--dx, 0px) * var(--sep)),
calc(var(--dy, 0px) * var(--sep)), 0)
rotate(calc(var(--rot, 0deg) * var(--sep)));
opacity: 1; /* nunca fantasmal */
transition: transform var(--t-lenta);
}
/* Cuatro franjas verticales por defecto (el HTML puede definir mas).
background-position-x por columna => reconstruye la imagen. Offsets pequenos. */
.hero-strip:nth-child(1) { clip-path: inset(0 75% 0 0); background-position-x: 0%; --dx: -16px; --dy: -8px; --rot: -1.4deg; }
.hero-strip:nth-child(2) { clip-path: inset(0 50% 0 25%); background-position-x: 33%; --dx: -6px; --dy: 9px; --rot: 1deg; }
.hero-strip:nth-child(3) { clip-path: inset(0 25% 0 50%); background-position-x: 66%; --dx: 6px; --dy: -9px; --rot: -1deg; }
.hero-strip:nth-child(4) { clip-path: inset(0 0 0 75%); background-position-x: 100%; --dx: 16px; --dy: 8px; --rot: 1.4deg; }
/* Cuando JS marca el hero como interactivo, quitamos la transicion para seguir
el cursor en tiempo real con requestAnimationFrame (mas fino). */
.hero.is-interactivo .hero-strip { transition: none; }
/* Pista de interaccion ("desliza / mueve el cursor"). */
.hero__pista {
position: absolute;
left: 50%; bottom: var(--e-5);
transform: translateX(-50%);
z-index: 3;
display: inline-flex;
align-items: center;
gap: .5em;
font-size: var(--fs-xs);
letter-spacing: var(--track-amplio);
text-transform: uppercase;
color: var(--tinta-suave);
}
.hero__pista::after {
content: "";
width: 22px; height: 22px;
border-right: 2px solid var(--verde-marca);
border-bottom: 2px solid var(--verde-marca);
transform: rotate(45deg);
animation: hero-bota 1.8s var(--t-suave) infinite;
}
@keyframes hero-bota {
0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; }
50% { transform: translateY(6px) rotate(45deg); opacity: 1; }
}
/* ============================================================================
12. PIE DE PAGINA — .pie
Marcado exacto en el BUILDER BRIEF.
============================================================================ */
.pie {
background: var(--verde-profundo);
color: rgba(244,246,240,.78);
padding-block: var(--e-9) var(--e-6);
margin-top: var(--seccion-y);
}
.pie a { color: rgba(244,246,240,.78); transition: color var(--t-rapida); }
.pie a:hover { color: var(--blanco); }
.pie__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--e-7);
padding-bottom: var(--e-7);
border-bottom: 1px solid rgba(244,246,240,.14);
}
.pie__marca { display: flex; flex-direction: column; gap: var(--e-3); max-width: 30ch; }
.pie__marca .nav__marca { color: var(--blanco); }
.pie__marca .nav__marca small { color: var(--verde-salvia); }
.pie__claim { font-size: var(--fs-sm); line-height: 1.6; }
.pie__col h4 {
color: var(--blanco);
font-family: var(--fuente-cuerpo);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
margin-bottom: var(--e-4);
}
.pie__col ul { display: flex; flex-direction: column; gap: var(--e-2); }
.pie__col li { font-size: var(--fs-sm); }
/* Bloque de contacto / ubicacion. */
.pie__dato { font-size: var(--fs-sm); line-height: 1.6; }
.pie__dato strong { color: var(--blanco); display: block; font-weight: 600; margin-bottom: 2px; }
.pie__base {
display: flex;
flex-wrap: wrap;
gap: var(--e-3) var(--e-5);
justify-content: space-between;
align-items: center;
padding-top: var(--e-5);
font-size: var(--fs-xs);
color: rgba(244,246,240,.6);
}
.pie__base .filete { width: 100%; height: 1px; background: var(--dorado-linea); opacity: .4; }
/* ============================================================================
13. UTILIDADES — reveal (scroll), espaciados, helpers, badges
============================================================================ */
/* --- Scroll reveal: estado inicial. main.js agrega .visible al entrar. --- */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity var(--t-lenta), transform var(--t-lenta);
will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }
/* Variantes direccionales. */
.reveal--izq { transform: translateX(-30px); }
.reveal--der { transform: translateX(30px); }
.reveal--zoom { transform: scale(.96); }
.reveal--izq.visible, .reveal--der.visible, .reveal--zoom.visible { transform: none; }
/* Escalonado: aplicar .reveal a hijos y data-delay; main.js lee el indice. */
.reveal[style*="--d"] { transition-delay: var(--d, 0ms); }
/* --- Badge / etiqueta inline (texto pequeno con fondo tenue). --- */
.badge {
display: inline-flex;
align-items: center;
gap: .4em;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: var(--track-amplio);
text-transform: uppercase;
color: var(--verde-profundo);
background: var(--verde-tenue);
border-radius: var(--r-pill);
padding: .4em .85em;
}
.badge--dorado { color: var(--dorado); background: rgba(201,162,39,.12); }
.badge--terracota { color: var(--terracota); background: rgba(199,123,67,.12); }
/* --- Pildora de dato (presentacion / sabor en fichas y cards). --- */
.dato-pill {
display: inline-flex;
align-items: center;
gap: .4em;
font-size: var(--fs-xs);
font-weight: 500;
color: var(--tinta-suave);
background: var(--salvia-tenue);
border-radius: var(--r-sm);
padding: .35em .7em;
}
/* --- Helpers de texto / layout. --- */
.t-centro { text-align: center; }
.t-verde { color: var(--verde-marca); }
.t-dorado { color: var(--dorado); }
.t-suave { color: var(--tinta-suave); }
.italica { font-style: italic; }
.solo-lector { /* contenido para lectores de pantalla */
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.flex { display: flex; }
.flex-centro { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--e-2); } .gap-3 { gap: var(--e-3); } .gap-4 { gap: var(--e-4); } .gap-5 { gap: var(--e-5); }
.mt-3 { margin-top: var(--e-3); } .mt-4 { margin-top: var(--e-4); } .mt-5 { margin-top: var(--e-5); } .mt-6 { margin-top: var(--e-6); }
.mb-4 { margin-bottom: var(--e-4); } .mb-5 { margin-bottom: var(--e-5); } .mb-6 { margin-bottom: var(--e-6); }
.ancho-total { width: 100%; }
.oculto { display: none !important; } /* main.js lo usa para filtrar catalogo */
/* Estado vacio del catalogo (sin resultados). */
.vacio {
display: none;
text-align: center;
padding: var(--e-8) var(--e-4);
color: var(--tinta-suave);
}
.vacio.is-visible { display: block; }
/* ============================================================================
13b. CHAT-MINI — preview del asistente (reutilizable)
Tarjeta de conversacion compacta para teasers del asistente (home, etc.).
Comparte tokens y lenguaje con el mockup completo de asistente.html, pero
vive en el sistema para no repetir foto de producto donde corresponde una
muestra del asistente. Solo tokens var(--*); sin colores sueltos.
============================================================================ */
.chat-mini {
display: flex;
flex-direction: column;
gap: var(--e-3);
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-lg);
box-shadow: var(--sombra-lg);
padding: var(--e-5);
}
.chat-mini__cab {
display: flex;
align-items: center;
gap: var(--e-3);
padding-bottom: var(--e-3);
border-bottom: 1px solid var(--linea);
}
.chat-mini__avatar { /* manzana de marca, igual que .nav__logo */
width: 34px; height: 34px; flex: none;
border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
background: radial-gradient(circle at 32% 30%, var(--verde-marca), var(--verde-marca-900));
position: relative;
}
.chat-mini__avatar::after {
content: ""; position: absolute; top: -4px; left: 52%;
width: 11px; height: 7px; background: var(--verde-profundo);
border-radius: 0 80% 0 80%; transform: rotate(-22deg);
}
.chat-mini__nombre { font-family: var(--fuente-display); font-weight: 600; color: var(--verde-profundo); font-size: 1rem; }
.chat-mini__estado { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-xs); letter-spacing: var(--track-amplio); text-transform: uppercase; color: var(--verde-marca); }
.chat-mini__estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wa); }
.chat-mini__b { /* burbuja */
max-width: 88%;
padding: var(--e-3) var(--e-4);
font-size: var(--fs-sm);
line-height: 1.5;
border-radius: var(--r-md);
}
.chat-mini__b--bot { align-self: flex-start; background: var(--crema); color: var(--carbon); border: 1px solid var(--linea); border-bottom-left-radius: var(--r-xs); }
.chat-mini__b--yo { align-self: flex-end; background: var(--verde-marca); color: var(--blanco); border-bottom-right-radius: var(--r-xs); }
.chat-mini__b strong { font-weight: 700; }
/* ============================================================================
14. CURSOR-GLOW — capa decorativa opcional (sutil)
main.js mueve --mx/--my; respeta prefers-reduced-motion (desactiva).
============================================================================ */
.cursor-glow {
position: fixed;
inset: 0;
z-index: var(--z-glow);
pointer-events: none;
opacity: 0;
transition: opacity var(--t-media);
background: radial-gradient(
16rem 16rem at var(--mx, 50%) var(--my, 50%),
rgba(76,175,80,.10), transparent 60%
);
}
.cursor-glow.is-activo { opacity: 1; }
/* ============================================================================
15. RESPONSIVE — breakpoints 640 / 900 / 1200 (mobile-first)
============================================================================ */
/* >= 640px : tablets pequenas */
@media (min-width: 640px) {
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.card-producto__acciones { gap: var(--e-3); }
}
/* >= 900px : tablets grandes / laptops -> aparece layout de 2 columnas real */
@media (min-width: 900px) {
:root { --nav-h: 80px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Hero a dos columnas: texto + media. */
.hero { grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.hero__media { margin-inline: 0; }
/* Editorial a dos columnas; alterna lado con .editorial--invertido. */
.editorial { grid-template-columns: 1fr 1fr; }
.editorial--invertido .editorial__texto { order: 2; }
.editorial--invertido .editorial__media { order: 1; }
/* Pie a varias columnas. */
.pie__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--e-6); }
}
/* >= 1200px : escritorio amplio */
@media (min-width: 1200px) {
.editorial { gap: 4.5rem; }
}
/* <= 899px : navegacion movil (panel desplegable controlado por main.js) */
@media (max-width: 899px) {
.nav__toggle { display: inline-flex; }
.nav__links {
position: fixed;
inset: var(--nav-h) 0 auto 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: rgba(255,255,255,.97);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--linea);
box-shadow: var(--sombra-lg);
padding: var(--e-3) var(--contenedor-x) var(--e-6);
/* Cerrado por defecto: colapsado y no interactivo. */
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: max-height var(--t-media), opacity var(--t-media),
transform var(--t-media), visibility var(--t-media);
}
/* Abierto: main.js pone data-abierto="true" en el contenedor de la nav. */
.nav[data-abierto="true"] .nav__links {
max-height: 80vh;
opacity: 1;
visibility: visible;
transform: none;
overflow-y: auto;
}
.nav__link {
padding: var(--e-4) var(--e-2);
border-bottom: 1px solid var(--linea);
font-size: var(--fs-base);
}
.nav__link::after { display: none; }
.nav__link.is-activa, .nav__link[aria-current="page"] { color: var(--verde-marca); }
/* En movil, el boton WhatsApp de la nav se compacta. */
.nav__acciones .btn-wa span.txt { display: none; }
/* Callouts editoriales no se salen del marco en pantallas chicas. */
.callout { position: static; max-width: none; margin-top: var(--e-2); box-shadow: var(--sombra-sm); }
.editorial__media { display: flex; flex-direction: column; gap: var(--e-3); }
.editorial__media::before { display: none; }
.callout-grupo { display: flex; flex-wrap: wrap; gap: var(--e-2); }
}
/* ============================================================================
16. ACCESIBILIDAD — foco visible, motion, print
============================================================================ */
/* Foco visible y consistente (teclado). NUNCA quitar outline sin reemplazo. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
outline: 3px solid var(--verde-marca);
outline-offset: 2px;
border-radius: var(--r-xs);
}
/* Salto al contenido (primer tab). El HTML incluye . */
.saltar {
position: absolute;
left: var(--e-3); top: -100px;
z-index: 1000;
background: var(--verde-profundo);
color: var(--blanco);
padding: .7em 1.2em;
border-radius: var(--r-sm);
transition: top var(--t-rapida);
}
.saltar:focus { top: var(--e-3); }
/* Respeto a quien prefiere menos movimiento: apaga animaciones y la fusion. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.reveal { opacity: 1; transform: none; }
.hero-strip { transform: none !important; opacity: 1 !important; } /* producto siempre fusionado */
.hero__pista { display: none; }
.cursor-glow { display: none; }
}
/* Impresion: simple, sin fondos pesados. */
@media print {
body { background: #fff; color: #000; }
.nav, .pie, .cursor-glow, .hero__pista, .btn, .btn-wa, .btn-fantasma { display: none !important; }
.card-producto { break-inside: avoid; box-shadow: none; border-color: #ccc; }
}