@font-face {
font-family: "Marcellus";
src: url("/fonts/marcellus.woff2?v=8a539799") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Marcellus";
src: url("/fonts/jost.woff2?v=7726a5cd") format("woff2-variations");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0030-0039;
}
@font-face {
font-family: "Jost";
src: url("/fonts/jost.woff2?v=7726a5cd") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
color-scheme: dark;
--laca-0: oklch(0.13 0.006 70);
--laca-1: oklch(0.165 0.008 70);
--laca-2: oklch(0.2 0.01 72);
--laca-3: oklch(0.245 0.012 74);
--linea: oklch(0.33 0.025 78 / 0.7);
--linea-suave: oklch(0.33 0.025 78 / 0.38);
--laton: oklch(0.8 0.11 84);
--laton-claro: oklch(0.88 0.085 90);
--laton-medio: oklch(0.68 0.1 78);
--laton-oscuro: oklch(0.5 0.08 72);
--cristal: oklch(0.84 0.025 245);
--cristal-linea: oklch(0.84 0.025 245 / 0.45);
--texto: oklch(0.95 0.012 88);
--texto-2: oklch(0.8 0.02 84);
--texto-3: oklch(0.7 0.02 80);
--sobre-laton: oklch(0.16 0.01 70);
--error: oklch(0.74 0.15 28);
--serif: "Marcellus", "Times New Roman", serif;
--sans: "Jost", "Segoe UI", system-ui, sans-serif;
--gutter: clamp(16px, 4.2vw, 48px);
--ancho: 1320px;
--sec: clamp(56px, 8vw, 116px);
--radio: 14px;
--radio-s: 10px;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-cajon: cubic-bezier(0.32, 0.72, 0, 1);
--z-base: 0;
--z-sobre: 1;
--z-mostrador: 2;
--z-cabecera: 20;
--z-dock: 30;
--z-velo: 40;
--z-hoja: 50;
--z-aviso: 60;
--cab-h: 60px;
--dock-h: 64px;
}
@media (min-width: 1024px) {
:root { --cab-h: 76px; --dock-h: 0px; }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cab-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
margin: 0;
background: var(--laca-0);
color: var(--texto);
font-family: var(--sans);
font-size: 1rem;
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 1024px) { body { font-size: 1.0625rem; } }
body.bloqueado { overflow: hidden; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--laton); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--laton); color: var(--sobre-laton); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: var(--z-aviso); background: var(--laton); color: var(--sobre-laton); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.saltar:focus { top: 12px; }
.i { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }
.cont { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.3rem + 3.9vw, 4.6rem); line-height: 1.04; }
h2 { font-size: clamp(1.8rem, 1.25rem + 2.2vw, 3.1rem); line-height: 1.08; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
b, strong { font-weight: 500; }
.lead { color: var(--texto-2); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); max-width: 60ch; }
.nota { color: var(--texto-3); font-size: 0.875rem; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 22px; border-radius: 999px;
font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em; white-space: nowrap;
transition: transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-laton { background: var(--laton); color: var(--sobre-laton); }
.btn-borde { border: 1px solid var(--laton-medio); color: var(--laton-claro); }
.btn-wa { background: var(--laton); color: var(--sobre-laton); }
.btn .burbuja {
display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: -12px; border-radius: 50%;
background: oklch(0.16 0.01 70 / 0.12); transition: transform 200ms var(--ease-out);
}
.btn-borde .burbuja { background: oklch(0.8 0.11 84 / 0.14); }
@media (hover: hover) and (pointer: fine) {
.btn-laton:hover, .btn-wa:hover { background: var(--laton-claro); }
.btn-borde:hover { border-color: var(--laton); color: var(--texto); }
.btn:hover .burbuja { transform: translate(2px, -1px); }
}
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.enlace { color: var(--laton-claro); text-decoration: underline; text-decoration-color: oklch(0.8 0.11 84 / 0.45); text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .enlace:hover { text-decoration-color: var(--laton); } }
.gabinete-pie .enlace, .reco-res-cab .enlace { display: inline-flex; align-items: center; min-height: 44px; }
.cab {
position: sticky; top: 0; z-index: var(--z-cabecera);
height: var(--cab-h);
background: oklch(0.13 0.006 70 / 0.88);
-webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
border-bottom: 1px solid var(--linea-suave);
}
.cab .cont { height: 100%; display: flex; align-items: center; gap: 12px; }
.cab-logo { display: flex; align-items: center; margin-right: auto; padding: 6px 0; }
.cab-logo img { height: 36px; width: auto; }
@media (min-width: 1024px) { .cab-logo img { height: 46px; } }
.cab-nav { display: none; }
.cab-nav a { position: relative; padding: 8px 2px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-2); }
.cab-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--laton); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out); }
.cab-nav a[aria-current="page"] { color: var(--texto); }
.cab-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .cab-nav a:hover { color: var(--texto); } .cab-nav a:hover::after { transform: scaleX(1); } }
.cab-acc { display: flex; align-items: center; gap: 4px; }
.icono-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--texto); transition: transform 160ms var(--ease-out); }
.icono-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .icono-btn:hover { background: var(--laca-3); } }
.icono-btn .i { width: 24px; height: 24px; }
.contador {
position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
background: var(--laton); color: var(--sobre-laton); font-size: 0.7rem; font-weight: 600; line-height: 18px; text-align: center;
transform: scale(1); transition: transform 200ms var(--ease-out), opacity 200ms ease;
}
.contador[data-n="0"] { opacity: 0; transform: scale(0.6); }
.cab-buscar-txt { display: none; }
.solo-escritorio { display: none; }
@media (min-width: 1024px) {
.cab .cont { gap: 28px; }
.cab-nav { display: flex; gap: 26px; }
.cab-menu { display: none; }
.solo-escritorio { display: inline-grid; }
.cab-buscar { width: auto; padding: 0 16px 0 12px; border-radius: 999px; gap: 8px; display: inline-flex; align-items: center; border: 1px solid var(--linea); }
.cab-buscar-txt { display: inline; font-size: 0.875rem; color: var(--texto-2); }
}
.cab-menu .barras { position: relative; width: 20px; height: 14px; }
.cab-menu .barras span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 240ms var(--ease-out), opacity 160ms ease; }
.cab-menu .barras span:nth-child(1) { top: 0; }
.cab-menu .barras span:nth-child(2) { top: 6px; }
.cab-menu .barras span:nth-child(3) { top: 12px; }
.cab-menu[aria-expanded="true"] .barras span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cab-menu[aria-expanded="true"] .barras span:nth-child(2) { opacity: 0; }
.cab-menu[aria-expanded="true"] .barras span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu {
position: fixed; inset: var(--cab-h) 0 0 0; z-index: var(--z-hoja);
background: var(--laca-0);
padding: 20px var(--gutter) calc(24px + var(--dock-h) + env(safe-area-inset-bottom, 0px));
overflow-y: auto; overscroll-behavior: contain;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
}
.menu.abierto { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s; }
.menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-lista a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea-suave); font-family: var(--serif); font-size: 1.6rem; }
.menu-lista a small { font-family: var(--sans); font-size: 0.8rem; color: var(--texto-3); }
.menu .menu-pie { margin-top: 28px; display: grid; gap: 14px; }
@media (prefers-reduced-motion: no-preference) {
.menu-lista li { opacity: 0; transform: translateY(10px); transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); }
.menu.abierto .menu-lista li { opacity: 1; transform: none; }
}
.dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock);
height: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
background: oklch(0.13 0.006 70 / 0.94);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-top: 1px solid var(--linea-suave);
display: grid; grid-template-columns: repeat(4, 1fr);
}
.dock a, .dock button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--texto-2); transition: transform 160ms var(--ease-out); }
.dock a:active, .dock button:active { transform: scale(0.97); }
.dock .i { width: 24px; height: 24px; }
.dock [aria-current="page"] { color: var(--laton-claro); }
.dock .contador { top: 6px; right: calc(50% - 22px); }
.dock-wa { color: var(--laton-claro) !important; }
@media (min-width: 1024px) { .dock { display: none; } }
.heroe {
position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden;
background: oklch(0.1 0.004 70);
border-bottom: 2px solid var(--laton-medio);
block-size: clamp(440px, calc(100svh - var(--cab-h) - var(--dock-h) - 58px), 780px);
}
.heroe > picture, .heroe > .heroe-txt, .heroe > .mostrador { grid-area: 1 / 1; min-width: 0; }
.heroe picture { height: 100%; min-height: 0; }
.heroe picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.heroe::after {
content: ""; grid-area: 1 / 1; align-self: end; height: 26%; pointer-events: none;
background: linear-gradient(180deg, transparent, oklch(0.1 0.004 70 / 0.9) 72%);
}
.heroe-txt { z-index: var(--z-sobre); align-self: start; padding: clamp(18px, 5vw, 36px) var(--gutter) 0; }
.heroe h1 { font-size: clamp(2rem, 1.2rem + 4.4vw, 3.2rem); max-width: 13ch; }
.heroe h1 .dorado { color: var(--laton-claro); }
.heroe .lead { margin-top: 12px; max-width: 34ch; }
.heroe-cta { display: none; }
@media (max-width: 699px) and (max-height: 740px) {
.heroe .lead { display: none; }
.heroe h1 { font-size: 1.85rem; }
}
@media (prefers-reduced-motion: no-preference) {
.heroe-txt > * { animation: subir 260ms var(--ease-out) both; }
.heroe-txt > *:nth-child(2) { animation-delay: 50ms; }
.heroe-txt > *:nth-child(3) { animation-delay: 100ms; }
}
@keyframes subir { from { transform: translateY(10px); } to { transform: none; } }
.mostrador { z-index: var(--z-mostrador); align-self: end; padding: 0 var(--gutter); }
.buscador {
display: flex; align-items: center; gap: 8px;
height: 56px; padding: 0 6px 0 16px; border-radius: 8px;
background: var(--laca-1);
border: 1px solid var(--laton-oscuro);
}
.mostrador .buscador { border-bottom: 0; border-radius: 8px 8px 0 0; }
.buscador .i { color: var(--laton); width: 22px; height: 22px; }
.buscador input {
flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 1rem; color: var(--texto);
}
.buscador input::placeholder { color: var(--texto-3); }
.buscador:focus-within { border-color: var(--laton); }
.buscador .btn { min-height: 44px; padding: 0 16px; border-radius: 6px; }
.atajos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--gutter) 4px; }
.atajos::-webkit-scrollbar { display: none; }
.atajos .chip { border-radius: 6px; min-height: 44px; }
.chip {
display: inline-flex; align-items: center; gap: 6px; flex: none;
min-height: 44px; padding: 0 16px; border-radius: 999px;
border: 1px solid var(--linea); color: var(--texto-2); font-size: 0.875rem; white-space: nowrap;
transition: transform 160ms var(--ease-out);
}
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--laton-medio); color: var(--texto); } }
.chip[aria-pressed="true"], .chip.activo { background: var(--laton); border-color: var(--laton); color: var(--sobre-laton); }
.chip .cuenta { font-size: 0.75rem; opacity: 0.75; }
@media (min-width: 700px), (min-aspect-ratio: 1/1) {
:root { --margen: max(var(--gutter), (100vw - var(--ancho)) / 2); }
.heroe { block-size: auto; grid-template-rows: auto; }
.heroe picture { height: auto; }
.heroe picture img { height: auto; aspect-ratio: 1672 / 941; max-height: calc(100svh - var(--cab-h) - 64px); min-height: 400px; object-position: 100% 18%; }
.heroe::after { height: 22%; }
.heroe-txt { align-self: center; width: calc(var(--margen) + min(40vw, 560px)); padding: 0 0 96px var(--margen); }
.heroe h1 { font-size: clamp(2rem, 4.2vw, 4.4rem); }
.heroe-txt .lead { max-width: 36ch; }
.heroe-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.mostrador { width: calc(var(--margen) + min(52vw, 640px)); padding: 0 0 0 var(--margen); }
.atajos { padding-inline: var(--margen); }
}
@media (min-width: 700px) and (max-width: 1023px) {
.heroe-txt { align-self: start; padding-top: 36px; }
.heroe-cta { display: none; }
}
.sec { padding-block: var(--sec); }
.sec-cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; margin-bottom: clamp(24px, 4vw, 44px); }
.sec-cab .lead { margin-top: 2px; }
.sec-cab.fila { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
.sec-cab.fila { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 40px; }
}
.filete { height: 1px; background: linear-gradient(90deg, transparent, var(--laton-oscuro) 18%, var(--laton-oscuro) 82%, transparent); border: 0; margin: 0; }
.mueble {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--laca-1);
}
.cajon {
position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px;
min-height: 168px; padding: 34px 16px 16px;
border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.cajon:nth-child(2n) { border-right: 0; }
.cajon:nth-child(n + 3) { border-bottom: 0; }
.cajon .tirador { position: absolute; top: 16px; left: 16px; width: 36px; height: 2px; background: var(--laton); transform-origin: left; transition: transform 220ms var(--ease-out); }
.cajon--cristal .tirador { background: var(--cristal); }
.cajon h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); }
.cajon p { color: var(--texto-2); font-size: 0.875rem; line-height: 1.45; }
.cajon .cuenta { color: var(--laton); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.cajon--cristal .cuenta { color: var(--cristal); }
.cajon:active { background-color: var(--laca-2); }
@media (hover: hover) and (pointer: fine) { .cajon:hover { background-color: var(--laca-2); } .cajon:hover .tirador { transform: scaleX(1.6); } }
@media (min-width: 900px) {
.mueble { grid-template-columns: minmax(200px, 72fr) minmax(200px, 31fr) minmax(200px, 21fr) minmax(200px, 18fr); }
.cajon { min-height: 220px; padding: 42px 22px 22px; border-bottom: 0; border-right: 1px solid var(--linea); }
.cajon:nth-child(2n) { border-right: 1px solid var(--linea); }
.cajon:last-child { border-right: 0; }
.cajon .tirador { top: 20px; left: 22px; }
.cajon p { font-size: 0.95rem; max-width: 34ch; }
}
.generos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.organo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 1024px) { .organo { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; } .organo-lado { position: sticky; top: calc(var(--cab-h) + 24px); } }
.organo-lado .sec-cab { margin-bottom: 18px; }
.organo-lado h2 { font-size: clamp(1.8rem, 1.25rem + 2vw, 2.6rem); }
.placas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scroll-snap-type: x proximity; }
.placas::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .placas { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 6px; } }
.placa {
flex: none; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
min-height: 48px; padding: 0 16px; border-radius: var(--radio-s);
background: var(--laca-1); border: 1px solid var(--linea-suave); color: var(--texto-2); text-align: left;
transition: transform 160ms var(--ease-out), opacity 200ms ease;
}
.placa:active { transform: scale(0.97); }
.placa .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--laton)); box-shadow: 0 0 10px var(--c, var(--laton)); }
.placa .nombre { font-family: var(--serif); font-size: 1.05rem; color: var(--texto); }
.placa .cuenta { font-size: 0.78rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.placa[aria-selected="true"] { background-color: var(--laton); border-color: var(--laton); }
.placa[aria-selected="true"] .nombre, .placa[aria-selected="true"] .cuenta { color: var(--sobre-laton); }
.placa[aria-selected="true"] .punto { background: var(--sobre-laton); box-shadow: none; }
.placa[data-vacia="true"] { border-color: var(--linea-suave); }
.placa[data-vacia="true"] .nombre, .placa[data-vacia="true"] .cuenta { color: var(--texto-3); }
.placa[data-vacia="true"] .punto { opacity: 0.3; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .placa:hover:not([aria-selected="true"]) { border-color: var(--laton-oscuro); color: var(--texto); } }
.placas-nota { display: none; }
@media (min-width: 1024px) { .placas-nota { display: block; margin-top: 14px; } }
.gabinete {
position: relative; border-radius: var(--radio);
background: linear-gradient(180deg, var(--laca-1), oklch(0.115 0.006 70));
border: 1px solid var(--linea-suave);
padding: 16px 14px 8px;
}
@media (min-width: 1024px) { .gabinete { padding: 22px 26px 14px; } }
.gabinete-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.nota-buscar { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 3px 0 14px; border-radius: 999px; background: var(--laca-2); border: 1px solid var(--linea); }
.nota-buscar:focus-within { border-color: var(--laton); }
.nota-buscar .i { color: var(--laton); width: 20px; height: 20px; }
.nota-buscar input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 100%; }
.nota-buscar input::placeholder { color: var(--texto-3); }
.nota-buscar .limpiar { width: 44px; height: 44px; border-radius: 50%; display: none; place-items: center; color: var(--texto-2); }
.nota-buscar.con-texto .limpiar { display: grid; }
.sugeridas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sugeridas::-webkit-scrollbar { display: none; }
.sugeridas .chip { min-height: 44px; padding: 0 14px; font-size: 0.85rem; }
.gabinete-estado { font-size: 0.9rem; color: var(--texto-2); min-height: 1.6em; }
.gabinete-estado strong { color: var(--laton-claro); font-weight: 500; }
.repisa {
position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 0;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
padding: 14px 2px 0; margin-inline: -6px;
}
.repisa::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .repisa { grid-auto-columns: 150px; } }
@media (min-width: 1024px) {
.repisa { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; row-gap: 8px; margin-inline: 0; }
}
@media (min-width: 1280px) {
.repisa { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.frasco { position: relative; display: grid; justify-items: center; align-content: start; scroll-snap-align: start; padding: 0 4px 12px; }
.frasco-img, .frasco-borde { transition: opacity 220ms ease; }
.frasco-rotulo span { }
.frasco-img { position: relative; width: 100%; aspect-ratio: 3 / 4; }
.frasco-img::before {
content: ""; position: absolute; left: 12%; right: 12%; bottom: 4%; height: 56%; border-radius: 50%;
background: radial-gradient(closest-side, var(--jugo, oklch(0.8 0.11 84 / 0.5)), transparent);
opacity: 0.22; transition: opacity 220ms ease; filter: blur(6px);
}
.frasco-img img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform 240ms var(--ease-out); }
.frasco-borde {
width: calc(100% + 8px); margin-inline: -4px; height: 4px; margin-top: -1px; background: var(--laton-medio);
}
.frasco-rotulo { display: grid; gap: 1px; margin-top: 10px; text-align: center; width: 100%; }
.frasco-rotulo .marca { font-size: 0.78rem; color: var(--texto-2); }
.frasco-rotulo .nombre { font-family: var(--serif); font-size: 0.95rem; line-height: 1.2; color: var(--texto); overflow-wrap: break-word; hyphens: auto; }
.frasco-rotulo .conc { font-size: 0.72rem; color: var(--texto-3); }
@media (hover: hover) and (pointer: fine) {
.frasco:hover .frasco-img img { transform: translateY(-6px); }
.frasco:hover .frasco-img::before { opacity: 0.55; }
}
.frasco:active .frasco-img img { transform: translateY(-3px) scale(0.97); }
.frasco.apagado .frasco-img, .frasco.apagado .frasco-borde { opacity: 0.26; }
.frasco.apagado .frasco-rotulo span { color: var(--texto-3); }
.frasco.encendido .frasco-img::before { opacity: 0.7; }
.frasco.encendido .frasco-img img { transform: translateY(-5px); }
@media (prefers-reduced-motion: no-preference) {
.repisa.entrando .frasco { animation: encender 240ms var(--ease-out) backwards; }
}
@keyframes encender { from { transform: translateY(10px); } to { transform: none; } }
.gabinete-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea-suave); }
.gabinete-vacio { padding: 30px 8px; text-align: center; color: var(--texto-2); }
.fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1280px) { .fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ficha {
position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--radio);
background: var(--laca-1); border: 1px solid var(--linea-suave); overflow: hidden;
transition: transform 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .ficha:hover { border-color: var(--laton-oscuro); } .ficha:hover .ficha-img img { transform: translateY(-6px) scale(1.02); } .ficha:hover .ficha-img::before { opacity: 0.55; } }
.ficha-img { position: relative; display: block; aspect-ratio: 1 / 1; background: radial-gradient(120% 90% at 50% 100%, var(--laca-3), var(--laca-1) 62%); overflow: hidden; }
.ficha-img::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 6%; height: 50%; border-radius: 50%; background: radial-gradient(closest-side, var(--jugo, oklch(0.8 0.11 84 / 0.5)), transparent); opacity: 0.3; filter: blur(10px); transition: opacity 220ms ease; }
.ficha-img img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 92%; padding: 10px 10px 0; transition: transform 260ms var(--ease-out); }
.ficha-img .suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 8%; background: linear-gradient(180deg, transparent, oklch(0 0 0 / 0.35)); }
.ficha-cuerpo { display: grid; align-content: start; gap: 3px; padding: 12px 12px 14px; }
.ficha .marca { font-size: 0.85rem; color: var(--texto-2); }
.ficha .nombre { font-family: var(--serif); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); line-height: 1.2; color: var(--texto); overflow-wrap: break-word; hyphens: auto; }
.ficha .nombre a::after { content: ""; position: absolute; inset: 0; z-index: var(--z-base); }
.ficha .meta { font-size: 0.8rem; color: var(--texto-3); }
.ficha .fams { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fam { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--texto-2); padding: 3px 8px 3px 7px; border-radius: 999px; background: var(--laca-2); }
.fam::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--laton)); }
.ficha-agregar {
position: absolute; z-index: var(--z-sobre); top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center; background: oklch(0.2 0.01 72 / 0.9); border: 1px solid var(--linea); color: var(--laton-claro);
transition: transform 160ms var(--ease-out);
}
.ficha-agregar:active { transform: scale(0.97); }
.ficha-agregar .i { width: 22px; height: 22px; }
.ficha-agregar .i-hecho { display: none; }
.ficha-agregar[aria-pressed="true"] { background: var(--laton); color: var(--sobre-laton); border-color: var(--laton); }
.ficha-agregar[aria-pressed="true"] .i-mas { display: none; }
.ficha-agregar[aria-pressed="true"] .i-hecho { display: block; }
@media (hover: hover) and (pointer: fine) { .ficha-agregar:hover { border-color: var(--laton); } }
.sello {
display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px;
font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em;
border: 1px solid var(--linea); color: var(--laton-claro);
}
.ficha .meta-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ilustr { position: absolute; z-index: var(--z-sobre); left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap; font-size: 0.72rem; color: var(--texto-3); }
.ficha-img .frasco-dz { padding-bottom: 30px; }
.sello--cristal { color: var(--cristal); border-color: var(--cristal-linea); }
.frasco-dz { display: block; width: 100%; height: 100%; padding: 10% 24% 5%; }
.frasco-dz svg { width: 100%; height: 100%; }
.riel-marco { position: relative; }
.riel {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 44%); gap: 10px;
overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter);
}
.riel::-webkit-scrollbar { display: none; }
.riel > * { scroll-snap-align: start; }
@media (min-width: 700px) { .riel { grid-auto-columns: minmax(200px, 30%); gap: 14px; } }
@media (min-width: 1024px) { .riel { grid-auto-columns: calc((100% - 3 * 14px) / 4); margin: 0; padding: 2px 0 4px; scroll-padding-inline: 0; } }
@media (min-width: 1440px) { .riel { grid-auto-columns: calc((100% - 4 * 14px) / 5); } }
.riel-flechas { display: none; gap: 8px; }
@media (min-width: 1024px) { .riel-flechas { display: flex; } }
.riel-flechas button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea); display: grid; place-items: center; color: var(--texto); transition: opacity 200ms ease, transform 160ms var(--ease-out); }
.riel-flechas button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .riel-flechas button:hover { border-color: var(--laton); } }
.riel-flechas button[disabled] { opacity: 0.3; }
.pestanas-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pestanas { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--laca-1); border: 1px solid var(--linea-suave); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 0.9rem; color: var(--texto-2); transition: transform 160ms var(--ease-out); }
.pestana:active { transform: scale(0.97); }
.pestana[aria-selected="true"] { background: var(--laton); color: var(--sobre-laton); }
@media (hover: hover) and (pointer: fine) { .pestana:hover:not([aria-selected="true"]) { color: var(--texto); } }
.panel[hidden] { display: none; }
.reco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 900px) {
.reco-form { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.reco-acciones { grid-column: 1 / -1; }
}
.reco-form { border-radius: var(--radio); background: var(--laca-1); border: 1px solid var(--linea-suave); padding: 18px; }
@media (min-width: 700px) { .reco-form { padding: 26px; } }
.reco-paso { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.reco-paso legend { display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-size: 1.2rem; margin-bottom: 10px; padding: 0; }
.reco-paso legend .n { font-family: var(--sans); font-size: 0.75rem; color: var(--laton); letter-spacing: 0.1em; }
.reco-paso legend small { font-family: var(--sans); font-size: 0.8rem; color: var(--texto-3); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion > span {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
border: 1px solid var(--linea); color: var(--texto-2); font-size: 0.9rem; cursor: pointer;
transition: transform 160ms var(--ease-out);
}
.opcion > span .i { width: 18px; height: 18px; }
.opcion input:checked + span { background: var(--laton); border-color: var(--laton); color: var(--sobre-laton); }
.opcion input:focus-visible + span { outline: 2px solid var(--laton); outline-offset: 3px; }
.opcion > span:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .opcion > span:hover { border-color: var(--laton-medio); color: var(--texto); } }
.opcion-fam > span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.opcion-fam input:checked + span::before { background: var(--sobre-laton); }
.reco-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 6px; }
.reco-res { display: grid; gap: 14px; }
.reco-res-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; }
.reco-vacio { border: 1px dashed var(--linea); border-radius: var(--radio); padding: 26px 20px; color: var(--texto-2); display: grid; gap: 14px; justify-items: start; }
.reco-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1280px) { .reco-lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.reco-lista .porque-txt { font-size: 0.82rem; color: var(--texto-2); margin-top: 6px; }
@media (min-width: 700px) { .reco-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.porque { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.porque span { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--linea); color: var(--laton-claro); }
.dos-lineas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .dos-lineas { grid-template-columns: 1fr 1fr; gap: 16px; } }
.linea-caja { border-radius: var(--radio); padding: 22px 20px; background: var(--laca-1); border: 1px solid var(--linea-suave); display: grid; gap: 14px; align-content: start; }
@media (min-width: 700px) { .linea-caja { padding: 30px 30px 26px; } }
.linea-caja--laton { border-top: 1px solid var(--laton-medio); }
.linea-caja--cristal { border-top: 1px solid var(--cristal); }
.linea-caja h3 { display: flex; align-items: center; gap: 12px; }
.linea-caja h3 .marca-linea { width: 28px; height: 3px; border-radius: 2px; background: var(--laton); }
.linea-caja--cristal h3 .marca-linea { background: var(--cristal); }
.linea-caja dl { margin: 0; display: grid; gap: 12px; }
.linea-caja dt { font-size: 0.85rem; color: var(--texto-3); }
.linea-caja dd { margin: 2px 0 0; color: var(--texto-2); }
.aviso-linea { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radio-s); background: var(--laca-2); color: var(--texto-2); font-size: 0.92rem; }
.aviso-linea .i { color: var(--cristal); margin-top: 3px; }
.guia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 1024px) { .guia { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; } }
.escala { display: grid; gap: 0; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--linea-suave); }
.escala-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 16px; background: var(--laca-1); border-bottom: 1px solid var(--linea-suave); }
.escala-fila:last-child { border-bottom: 0; }
.escala-fila b { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; display: block; }
.escala-fila small { color: var(--texto-3); font-size: 0.78rem; }
.escala-fila p { color: var(--texto-2); font-size: 0.9rem; }
.escala-cab { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: 0.8rem; color: var(--texto-3); background: var(--laca-2); border-bottom: 1px solid var(--linea-suave); }
@media (min-width: 700px) { .escala-fila { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; } }
.guia-notas { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 1024px) { .guia-notas { grid-template-columns: minmax(0, 1fr); margin-top: 28px; } }
@media (min-width: 700px) { .guia-notas { grid-template-columns: 1fr 1fr; } }
.guia-notas article { padding: 18px 0 0; border-top: 1px solid var(--linea); }
.guia-notas h3 { font-size: 1.2rem; margin-bottom: 8px; }
.guia-notas p, .guia-notas li { color: var(--texto-2); font-size: 0.95rem; }
.guia-notas ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pedir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 1024px) { .pedir { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; } }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: paso; }
.pasos li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea-suave); }
.pasos li::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--laton-medio); color: var(--laton-claro); font-family: var(--serif); font-size: 1.1rem; }
.pasos b { display: block; font-weight: 500; }
.pasos p { color: var(--texto-2); font-size: 0.95rem; }
.entrega { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; color: var(--texto-2); font-size: 0.95rem; }
.entrega span { display: inline-flex; align-items: center; gap: 8px; }
.entrega .i { color: var(--laton); width: 22px; height: 22px; }
.preguntas { display: grid; }
.preguntas details { border-bottom: 1px solid var(--linea-suave); }
.preguntas summary {
list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
min-height: 60px; padding: 14px 0; cursor: pointer; font-family: var(--serif); font-size: 1.12rem; line-height: 1.3;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .i { color: var(--laton); transition: transform 220ms var(--ease-out); }
.preguntas details[open] summary .i { transform: rotate(45deg); }
.preguntas .resp { padding: 0 0 18px; color: var(--texto-2); max-width: 62ch; display: grid; gap: 10px; }
@media (prefers-reduced-motion: no-preference) {
.preguntas details[open] .resp { animation: abrir 240ms var(--ease-out); }
}
@keyframes abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cierre { position: relative; overflow: hidden; text-align: center; padding-block: clamp(64px, 10vw, 140px); border-top: 1px solid var(--linea-suave); background: radial-gradient(60% 80% at 50% 110%, oklch(0.8 0.11 84 / 0.16), transparent 70%), var(--laca-0); }
.cierre img { width: 72px; margin: 0 auto 18px; }
.cierre h2 { max-width: 18ch; margin-inline: auto; }
.cierre .lead { margin: 14px auto 0; }
.cierre-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.cierre-num { margin-top: 16px; color: var(--texto-3); font-size: 0.95rem; }
.cierre-num a { color: var(--laton-claro); font-variant-numeric: tabular-nums; }
.pie { border-top: 1px solid var(--linea-suave); padding: 44px 0 28px; background: oklch(0.11 0.005 70); }
.pie-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
.pie-rejilla > :first-child, .pie-rejilla > :last-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .pie-rejilla { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; } .pie-rejilla > :first-child, .pie-rejilla > :last-child { grid-column: auto; } }
.pie img.pie-logo { width: 190px; height: auto; }
.pie h2 { font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--laton); margin-bottom: 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pie li a, .pie li span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; color: var(--texto-2); font-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) { .pie li a:hover { color: var(--texto); } }
.pie li .i { color: var(--laton); width: 20px; height: 20px; }
.pie p { color: var(--texto-3); font-size: 0.9rem; max-width: 42ch; }
.pie-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linea-suave); display: grid; gap: 8px; color: var(--texto-3); font-size: 0.8rem; }
.velo { position: fixed; inset: 0; z-index: var(--z-velo); background: oklch(0.05 0 0 / 0.6); opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s linear 240ms; }
.velo.abierto { opacity: 1; visibility: visible; transition: opacity 240ms ease, visibility 0s; }
.hoja {
position: fixed; z-index: var(--z-hoja); left: 0; right: 0; bottom: 0;
max-height: min(88svh, 760px); display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr);
background: var(--laca-1); border-top: 1px solid var(--laton-oscuro); border-radius: 20px 20px 0 0;
transform: translateY(100%); visibility: hidden;
transition: transform 280ms var(--ease-cajon), visibility 0s linear 280ms;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.hoja.abierta { transform: none; visibility: visible; transition: transform 280ms var(--ease-cajon), visibility 0s; }
.hoja-asa { width: 40px; height: 4px; border-radius: 2px; background: var(--laca-3); margin: 10px auto 0; }
.hoja-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px 12px 20px; border-bottom: 1px solid var(--linea-suave); touch-action: none; }
.hoja-cab h2 { font-size: 1.5rem; }
.hoja-cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px; }
.hoja-pie { padding: 12px 20px 16px; border-top: 1px solid var(--linea-suave); display: grid; gap: 10px; background: var(--laca-1); }
@media (min-width: 1024px) {
.hoja { left: auto; top: 0; width: 460px; max-height: none; height: 100%; border-radius: 0; border-top: 0; border-left: 1px solid var(--laton-oscuro); transform: translateX(100%); grid-template-rows: auto 1fr auto; }
.hoja-pie { align-content: end; }
.hoja.abierta { transform: none; }
.hoja-asa { display: none; }
.hoja-cab { padding-top: 18px; }
}
.sel-vacia { display: grid; gap: 12px; justify-items: start; padding: 10px 0 18px; color: var(--texto-2); }
.sel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sel-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea-suave); align-items: start; }
.sel-img { width: 64px; height: 80px; border-radius: 10px; background: radial-gradient(100% 80% at 50% 100%, var(--laca-3), var(--laca-2)); display: grid; place-items: end center; overflow: hidden; }
.sel-img img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.sel-img .frasco-dz { padding: 10% 18% 4%; }
.sel-txt .marca { font-size: 0.8rem; color: var(--texto-2); }
.sel-txt .nombre { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; }
.sel-txt .meta { font-size: 0.78rem; color: var(--texto-3); }
.tamanos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tamano { min-height: 44px; min-width: 56px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--linea); font-size: 0.8rem; color: var(--texto-2); transition: transform 160ms var(--ease-out); }
.tamano:active { transform: scale(0.97); }
.tamano[aria-pressed="true"] { background: var(--laton); color: var(--sobre-laton); border-color: var(--laton); }
.sel-quitar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--texto-3); }
@media (hover: hover) and (pointer: fine) { .sel-quitar:hover { color: var(--error); background: var(--laca-2); } }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 0.85rem; color: var(--texto-2); }
.campo input { height: 48px; padding: 0 14px; border-radius: var(--radio-s); background: var(--laca-2); border: 1px solid var(--linea); outline: none; font-size: 1rem; }
.campo input:focus { border-color: var(--laton); }
.campos { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 16px; }
.campo input { width: 100%; min-width: 0; }
.hoja-pie .nota { text-align: center; }
.busqueda { position: fixed; inset: 0; z-index: var(--z-hoja); background: var(--laca-0); display: grid; grid-template-rows: auto 1fr; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms; }
.busqueda.abierta { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s; }
.busqueda-cab { border-bottom: 1px solid var(--linea-suave); padding: 12px 0; }
.busqueda-cab .cont { display: flex; gap: 8px; align-items: center; }
.busqueda-cab .buscador { flex: 1; box-shadow: none; height: 54px; }
.busqueda-cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: 18px 0 calc(40px + env(safe-area-inset-bottom, 0px)); }
.resultados { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.resultados a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 8px; border-radius: 12px; }
.resultados a.activo { background: var(--laca-2); }
@media (hover: hover) and (pointer: fine) { .resultados a:hover { background: var(--laca-2); } }
.resultados .mini { width: 52px; height: 64px; border-radius: 8px; background: var(--laca-2); display: grid; place-items: end center; overflow: hidden; }
.resultados .mini img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.resultados .mini .frasco-dz { padding: 10% 16% 4%; }
.resultados .t { display: grid; gap: 1px; min-width: 0; }
.resultados .t .marca { font-size: 0.8rem; color: var(--texto-2); }
.resultados .t .nombre { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; }
.resultados .t .meta { font-size: 0.78rem; color: var(--texto-3); }
.resultados mark { background: none; color: var(--laton-claro); }
.busqueda-sug { display: grid; gap: 10px; }
.busqueda-sug .fila { display: flex; flex-wrap: wrap; gap: 8px; }
.busqueda-pie { margin-top: 18px; }
.aviso { position: fixed; z-index: var(--z-aviso); left: 50%; bottom: calc(var(--dock-h) + 16px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); opacity: 0; visibility: hidden; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 999px; background: var(--laca-3); border: 1px solid var(--laton-oscuro); box-shadow: 0 16px 36px -16px oklch(0 0 0 / 0.9); font-size: 0.9rem; transition: transform 240ms var(--ease-out), opacity 200ms ease, visibility 0s linear 240ms; white-space: nowrap; max-width: calc(100vw - 24px); }
.aviso.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform 240ms var(--ease-out), opacity 200ms ease, visibility 0s; }
.aviso .i { color: var(--laton); }
.aviso button { min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--laton-claro); font-weight: 500; }
.cat-cab { padding: clamp(24px, 4vw, 48px) 0 18px; display: grid; gap: 10px; }
.cat-cab h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
@media (min-width: 1024px) { .cat-herr .buscador { max-width: 680px; } }
.cat-cab .miga, .miga { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.82rem; color: var(--texto-3); list-style: none; margin: 0; padding: 0; }
.miga li + li::before { content: "/"; margin-right: 6px; color: var(--laton-oscuro); }
@media (hover: hover) and (pointer: fine) { .miga a:hover { color: var(--texto); } }
.cat-herr { position: sticky; top: var(--cab-h); z-index: calc(var(--z-cabecera) - 1); background: oklch(0.13 0.006 70 / 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 10px 0; border-bottom: 1px solid var(--linea-suave); }
.cat-herr .cont { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cat-herr .buscador { height: 48px; box-shadow: none; padding-left: 14px; }
.cat-herr .buscador .limpiar { width: 44px; height: 44px; border-radius: 50%; display: none; place-items: center; color: var(--texto-2); }
.cat-herr .buscador.con-texto .limpiar { display: grid; }
.btn-filtros { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea); position: relative; }
.btn-filtros .contador { position: static; margin-left: 2px; }
.cat-activos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; }
.cat-activos:empty { display: none; }
.cat-activos::-webkit-scrollbar { display: none; }
.cat-activos .chip { min-height: 44px; padding: 0 10px 0 14px; font-size: 0.82rem; gap: 4px; }
.cat-activos .chip .i { width: 16px; height: 16px; }
.cat-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px 0 var(--sec); }
@media (min-width: 1024px) { .cat-cuerpo { grid-template-columns: 264px minmax(0, 1fr); gap: 36px; } .btn-filtros { display: none; } .cat-herr .cont { grid-template-columns: minmax(0, 1fr) auto; } }
.cat-lado { display: none; }
@media (min-width: 1024px) { .cat-lado { display: block; position: sticky; top: calc(var(--cab-h) + 90px); max-height: calc(100svh - var(--cab-h) - 110px); overflow-y: auto; scrollbar-width: thin; padding-right: 6px; } }
.cat-resumen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--texto-2); font-size: 0.92rem; }
.orden { display: inline-flex; align-items: center; gap: 8px; }
.orden select { height: 44px; padding: 0 34px 0 12px; border-radius: 999px; background: var(--laca-1); border: 1px solid var(--linea); color: var(--texto); appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--laton) 50%), linear-gradient(135deg, var(--laton) 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-size: 5px 5px; background-repeat: no-repeat; }
.cat-mas { display: grid; justify-items: center; gap: 10px; margin-top: 28px; color: var(--texto-3); font-size: 0.9rem; }
.cat-vacio { display: grid; gap: 14px; justify-items: start; padding: 36px 22px; border: 1px dashed var(--linea); border-radius: var(--radio); color: var(--texto-2); }
.filtro { border-bottom: 1px solid var(--linea-suave); }
.filtro summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; font-family: var(--serif); font-size: 1.12rem; }
.filtro summary::-webkit-details-marker { display: none; }
.filtro summary .i { color: var(--laton); transition: transform 220ms var(--ease-out); }
.filtro[open] summary .i { transform: rotate(180deg); }
.filtro .opciones { padding-bottom: 16px; gap: 6px; }
.filtro .opcion > span { min-height: 44px; padding: 0 12px; font-size: 0.84rem; }
.filtro .opcion[data-vacia] > span, .marca-op[data-vacia] { color: var(--texto-3); border-color: var(--linea-suave); }
.filtro .opcion .cuenta { font-size: 0.72rem; opacity: 0.75; margin-left: 2px; }
.marcas-lista { display: grid; gap: 2px; padding-bottom: 14px; max-height: 300px; overflow-y: auto; }
.marca-op { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; border-radius: 8px; cursor: pointer; font-size: 0.9rem; color: var(--texto-2); }
@media (hover: hover) and (pointer: fine) { .marca-op:hover { background: var(--laca-2); color: var(--texto); } }
.marca-op input { width: 18px; height: 18px; accent-color: var(--laton); }
.marca-op .cuenta { margin-left: auto; font-size: 0.75rem; color: var(--texto-3); }
.filtro-marca-buscar { height: 40px; width: 100%; margin-bottom: 8px; padding: 0 12px; border-radius: 8px; background: var(--laca-2); border: 1px solid var(--linea); outline: none; font-size: 0.9rem; }
.prod { padding: 18px 0 0; }
.prod-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 14px; }
@media (min-width: 1024px) { .prod-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.escenario {
position: relative; border-radius: var(--radio); overflow: hidden;
aspect-ratio: 1 / 1; max-height: 62svh; width: 100%;
background: radial-gradient(70% 55% at 50% 88%, oklch(0.8 0.11 84 / 0.14), transparent 70%), radial-gradient(120% 90% at 50% 100%, var(--laca-3), var(--laca-1) 60%, var(--laca-0));
border: 1px solid var(--linea-suave);
}
@media (min-width: 1024px) { .escenario { position: sticky; top: calc(var(--cab-h) + 20px); aspect-ratio: 1 / 1; max-height: calc(100svh - var(--cab-h) - 120px); } }
.escenario .pedestal { position: absolute; left: 22%; right: 22%; bottom: 7%; height: 11%; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.8 0.11 84 / 0.55), oklch(0.5 0.08 72 / 0.35) 60%, transparent); filter: blur(1px); }
.escenario .jugo { position: absolute; left: 20%; right: 20%; bottom: 12%; height: 52%; border-radius: 50%; background: radial-gradient(closest-side, var(--jugo, oklch(0.8 0.11 84 / 0.5)), transparent); opacity: 0.35; filter: blur(18px); }
.escenario img { position: absolute; inset: 6% 10% 10%; width: 80%; height: 84%; object-fit: contain; object-position: 50% 100%; }
@media (min-width: 1024px) { .escenario img { inset: 8% 18% 10%; width: 64%; height: 82%; } .escenario .frasco-dz { inset: 12% 30% 12%; } }
.escenario .frasco-dz { position: absolute; inset: 10% 26% 11%; width: auto; height: auto; padding: 0; }
.escenario .rotulo-ilustr { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); white-space: nowrap; font-size: 0.78rem; color: var(--texto-2); }
.prod-info { display: grid; gap: 16px; align-content: start; }
.prod-info .marca { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--laton); }
.prod-info h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
.prod-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--texto-2); font-size: 0.95rem; }
.prod-meta { align-items: center; }
.prod-meta a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--laton-claro); text-decoration: underline; text-decoration-color: oklch(0.8 0.11 84 / 0.4); text-underline-offset: 4px; }
.prod-meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--laton-oscuro); margin-right: 14px; vertical-align: middle; }
.prod-sellos { display: flex; flex-wrap: wrap; gap: 6px; }
.prod-sellos .sello { position: static; }
.prod-desc { color: var(--texto-2); font-size: 1.05rem; max-width: 60ch; }
.prod-bloque { display: grid; gap: 10px; }
.prod-bloque h2 { font-size: 1.35rem; }
.prod-bloque .tamanos .tamano { min-height: 44px; min-width: 64px; font-size: 0.9rem; }
.prod-acciones { display: grid; gap: 10px; }
@media (min-width: 560px) { .prod-acciones { grid-template-columns: 1fr 1fr; } }
.prod-acciones .btn { width: 100%; }
.prod-acciones .btn[aria-pressed="true"] { background: var(--laca-3); color: var(--laton-claro); border: 1px solid var(--laton-medio); }
.prod-nota { color: var(--texto-3); font-size: 0.88rem; }
.piramide { display: grid; gap: 0; border-radius: var(--radio); border: 1px solid var(--linea-suave); overflow: hidden; }
.grada { display: grid; gap: 8px; padding: 14px 16px; background: var(--laca-1); border-bottom: 1px solid var(--linea-suave); }
.grada:last-child { border-bottom: 0; }
.grada-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.grada-cab b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; }
.grada-cab small { color: var(--texto-3); font-size: 0.78rem; }
.grada .notas { display: flex; flex-wrap: wrap; gap: 6px; }
.nota-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--laca-2); border: 1px solid var(--linea-suave); color: var(--texto); font-size: 0.85rem; }
@media (hover: hover) and (pointer: fine) { .nota-chip:hover { border-color: var(--laton-medio); color: var(--laton-claro); } }
.grada:nth-child(1) { background: linear-gradient(90deg, var(--laca-1), var(--laca-2)); }
.acordes { display: grid; gap: 8px; }
.acorde { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 0.9rem; color: var(--texto-2); }
.acorde .barra { height: 6px; border-radius: 3px; background: var(--laca-3); overflow: hidden; }
.acorde .barra span { display: block; height: 100%; border-radius: 3px; background: var(--laton-medio); transform-origin: left; transform: scaleX(var(--v)); }
.usos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.uso { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radio-s); background: var(--laca-1); border: 1px solid var(--linea-suave); }
.uso .i { color: var(--laton); width: 22px; height: 22px; }
.uso small { display: block; font-size: 0.8rem; color: var(--texto-3); }
.uso span { font-size: 0.95rem; }
.tecnica { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; border-radius: var(--radio); border: 1px solid var(--linea-suave); overflow: hidden; }
.tecnica dt, .tecnica dd { margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--linea-suave); background: var(--laca-1); }
.tecnica dt { color: var(--texto-3); font-size: 0.85rem; }
.tecnica dd { color: var(--texto); font-size: 0.95rem; }
.tecnica dt:nth-last-of-type(1), .tecnica dd:last-of-type { border-bottom: 0; }
.cruce { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: var(--radio); background: var(--laca-1); border: 1px solid var(--cristal-linea); }
.cruce--laton { border-color: var(--laton-oscuro); }
.cruce .sel-img { width: 64px; height: 72px; }
.cruce .frase { color: var(--texto-2); font-size: 0.95rem; line-height: 1.45; }
.cruce b { font-family: var(--serif); font-weight: 400; font-size: 1.08rem; color: var(--texto); }
.cruce .i { color: var(--texto-2); }
.barra-prod { position: fixed; z-index: var(--z-dock); left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: oklch(0.13 0.006 70 / 0.95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--linea-suave); transform: translateY(0); transition: transform 260ms var(--ease-out); }
.barra-prod .btn { min-height: 46px; padding: 0 12px; font-size: 0.88rem; }
.barra-prod .icono-btn { border: 1px solid var(--linea); }
body.con-barra { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
body.con-barra .dock { display: none; }
@media (min-width: 1024px) { .barra-prod { display: none; } body.con-barra { padding-bottom: 0; } }
.relacionados { padding-top: clamp(48px, 7vw, 88px); }
.nf { min-height: calc(100svh - var(--cab-h) - var(--dock-h)); display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; padding: 48px var(--gutter); }
.nf img { width: 96px; }
.nf p { color: var(--texto-2); max-width: 40ch; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}