/* DINASTÍA WINE & SPIRITS · sitio público
   Papel hueso, tinta negra cálida, una nota de tinto. Cinzel para el nombre y los títulos, Jost para el texto. */
:root {
  --bg: #f3f2ef;
  --surface: #e7e5df;
  --ink: #16130f;
  --ink-suave: #2b2621;
  --muted: #4e4840;
  --accent: #6b1020;
  --accent-fuerte: #8a1428;
  --accent-ink: #f3f2ef;
  --field-1: #0f0d0b;
  --field-1-ink: #f3f2ef;
  --field-1-surface: #1c1916;
  --field-2: #d9d6cf;
  --field-2-ink: #16130f;
  --font-display: "Cinzel", "Times New Roman", Georgia, serif;
  --font-text: "Jost", "Helvetica Neue", Arial, sans-serif;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-head: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);
  --step-display: clamp(2.5rem, 1.6rem + 2.6vw, 3.5rem);
  --margin: clamp(1rem, 2.2vw, 2rem);
  --marco: 12px;
  --hoja-pad: clamp(1.5rem, 4vw, 4.5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--ink) var(--surface); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--step-body)/1.5 var(--font-text);
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  caret-color: var(--accent);
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: 0; margin: 0; text-wrap: balance; hyphens: none; }
h1 { font-size: var(--step-display); }
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); font-weight: 600; }
h4 { font-size: var(--step-body); font-family: var(--font-text); font-weight: 500; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; }
small, .small { font-size: var(--step-small); line-height: 1.45; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
strong { font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; /* taste-skill-ignore: texto sólo para lectores de pantalla */ overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 200; }
.salto:focus { left: 8px; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 0.6em; color: inherit; }
.marca-escudo { width: 2.4em; height: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1; }
.marca-nombre { font-family: var(--font-display); font-weight: 600; font-size: 1.2em; letter-spacing: 0.04em; text-transform: uppercase; }
.marca-sub { font-size: var(--step-small); letter-spacing: 0.26em; text-transform: uppercase; margin-top: 0.35em; font-weight: 500; }
.marca-sub i { font-style: normal; margin: 0 0.1em; }

/* Botones y enlaces */
.btn, .celda, .agregar, .enlace, .fila-boton { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 52px; padding: 0 26px;
  background: var(--ink); color: var(--bg); font: 500 var(--step-body)/1 var(--font-text); text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: var(--step-small); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-claro { background: var(--bg); color: var(--ink); }
.btn-suave { background: var(--surface); color: var(--ink); }
.btn[disabled] { opacity: 0.55; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink-suave); }
  .btn-accent:hover { background: var(--accent-fuerte); }
  .btn-claro:hover { background: #fff; }
  .btn-suave:hover { background: var(--field-2); }
}
.enlace { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .enlace:hover, p a:hover { text-decoration-color: var(--accent); } }
.enlace-claro { color: var(--field-1-ink); }
.aviso { padding: 14px var(--margin); background: var(--surface); }
.aviso-ok { background: var(--surface); }
.aviso-error { background: var(--accent); color: var(--accent-ink); }

/* Navegación: marca, tres enlaces, una acción */
.nav { display: flex; align-items: center; gap: 24px; min-height: 72px; padding: 0 var(--margin); }
.nav-marca { text-decoration: none; margin-right: auto; }
.nav-enlaces { display: flex; gap: 28px; }
.nav-enlaces a { text-decoration: none; padding: 6px 0; transition: color var(--t-hover) ease; }
.nav-enlaces a[aria-current] { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 0.09em; }
@media (hover: hover) and (pointer: fine) { .nav-enlaces a:hover { color: var(--accent); } }
.nav-accion { white-space: nowrap; }
.nav-n { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.3em; background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums; transition: transform var(--t-ui) var(--ease-out); }
.nav-n.is-bump { animation: bump 420ms var(--ease-out); }
@keyframes bump { 30% { transform: scale(1.35); } }
.nav-menu { display: none; background: none; border: 0; padding: 8px; color: inherit; cursor: pointer; }
.nav-hoja { min-height: 0; padding: 0; justify-content: center; }
.nav-hoja .nav-marca { margin: 0; }
.nav-hoja .nav-enlaces { display: contents; }
.nav-hoja .nav-enlaces a:nth-child(1) { order: -1; margin-right: auto; }
.nav-hoja .nav-enlaces a:nth-child(2) { display: none; }
.nav-hoja .nav-enlaces a:nth-child(3) { display: none; }
.nav-hoja .nav-accion { margin-left: auto; }
.menu-movil { display: grid; gap: 4px; padding: 16px var(--margin) 28px; background: var(--surface); }
.menu-movil[hidden] { display: none; }
.menu-movil a { text-decoration: none; font-size: var(--step-lead); padding: 10px 0; }
@media (max-width: 900px) { .nav-hoja .nav-accion span:not(.nav-n) { display: none; } .nav-hoja .marca-sub { display: none; } }
@media (max-width: 760px) {
  .nav-enlaces, .nav-hoja .nav-enlaces a:nth-child(1) { display: none; }
  .nav-menu { display: inline-flex; }
  .nav-hoja .nav-menu { margin-left: 8px; }
}
@media (min-width: 761px) { .menu-movil { display: none !important; } }

/* El escenario partido */
.escena { display: grid; grid-template-columns: 1fr 1fr; gap: var(--marco); padding: var(--marco); align-items: start; }
.escena-fija { position: sticky; top: var(--marco); height: calc(100svh - 2 * var(--marco)); order: 2; overflow: hidden; background: var(--field-1); }
.foto-fija { margin: 0; position: absolute; inset: 0; }
.foto-fija img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1600ms var(--ease-soft); }
.foto-fija img.is-on { opacity: 1; }
.foto-fija img[data-foto="sello"] { object-position: 40% 50%; }
.foto-fija img[data-foto="vino"] { object-position: 50% 40%; }
@media (prefers-reduced-motion: no-preference) {
  .js .foto-fija img.is-on { animation: deriva 22s var(--ease-soft) both; }
  @keyframes deriva { from { transform: scale(1); } to { transform: scale(1.07); } }
}
.foto-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; padding: 0 20px; background: var(--bg); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: var(--step-small); }
.foto-barra span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .foto-barra span + span { display: none; } }
.escena-hoja { order: 1; background: var(--bg); min-width: 0; }
.escena-hoja > section { padding: 0 var(--hoja-pad); }
.escena-hoja > section + section { margin-top: clamp(96px, 11vw, 176px); }

/* Hero: hoja como carta de menú */
.hero { min-height: calc(100svh - 2 * var(--marco) - 150px); display: flex; flex-direction: column; padding-top: 10svh !important; padding-bottom: 16svh !important; }
.hero-cuerpo { margin-top: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero-sobre { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: var(--step-small); letter-spacing: 0.18em; text-transform: uppercase; }
.hero-escudo { width: 44px; height: auto; color: var(--ink); }
.hero h1 { max-width: 18ch; }
.hero .lead { max-width: 40ch; }
.hero-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 160ms); }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* Muestra: foto cuadrada, pestañas, dos celdas */
.muestra-foto { margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.muestra-foto img { width: 100%; height: 100%; object-fit: cover; }
.muestra-pestanas { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; }
.muestra-pestanas button { background: none; border: 0; padding: 8px 0; font: 500 var(--step-body)/1 var(--font-text); color: var(--muted); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; text-decoration-thickness: 0.09em; transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease; }
.muestra-pestanas button[aria-selected="true"] { color: var(--ink); text-decoration-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .muestra-pestanas button:hover { color: var(--ink); } }
.muestra-panel { margin-top: 36px; }
.muestra-panel h2 { max-width: 14ch; }
.muestra-panel p { margin-top: 20px; max-width: 34ch; }
.muestra-cats { display: flex; flex-wrap: wrap; gap: 10px 22px; max-width: 46ch !important; }
.muestra-cats a { text-decoration: none; }
.muestra-cats a span { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 0.3em; }
@media (hover: hover) and (pointer: fine) { .muestra-cats a:hover { text-decoration: underline; } }
.muestra-panel.is-entrando h2, .muestra-panel.is-entrando p { animation: entra-panel 420ms var(--ease-out) both; }
.muestra-panel.is-entrando p { animation-delay: 70ms; }
@keyframes entra-panel { from { opacity: 0; transform: translateY(10px); filter: blur(2px); } }
.muestra-acciones { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; }
.celda { display: grid; place-items: center; min-height: 72px; background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 500; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.celda-ink { background: var(--ink); color: var(--bg); }
.celda:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .celda:hover { background: var(--field-2); } .celda-ink:hover { background: var(--ink-suave); } }

/* La carta: precios como menú */
.carta-nota { margin-top: 20px; color: var(--muted); max-width: 44ch; }
.carta-grupo { margin-top: 56px; }
.carta-grupo h3 { font-family: var(--font-text); font-weight: 500; font-size: var(--step-lead); margin-bottom: 18px; }
.linea { padding: 11px 0; }
.linea-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.linea-nombre { font-size: var(--step-body); font-weight: 500; }
.linea-nombre a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .linea-nombre a:hover { text-decoration: underline; } }
.linea-etq { font-weight: 400; color: var(--muted); font-size: var(--step-small); margin-left: 0.4em; }
.linea-precio { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.linea-detalle { color: var(--muted); max-width: 40ch; margin-top: 2px; font-size: var(--step-body); }
.linea-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 6px; }
.linea-en-pedido { color: var(--accent); font-size: var(--step-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.agregar { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 2px; background: none; border: 0; color: var(--ink); font: 500 var(--step-small)/1 var(--font-text); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.agregar .ico { width: 1em; height: 1em; }
.agregar:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .agregar:hover { color: var(--accent); text-decoration-color: currentColor; } }
.agregar.is-ok { color: var(--accent); }
.agregar.is-ok .ico { animation: giro-check 360ms var(--ease-out); }
@keyframes giro-check { from { transform: rotate(-90deg) scale(0.6); } }
.carta-mayoreo { margin-top: 48px; color: var(--muted); max-width: 44ch; }
.carta-mas { margin-top: 10px; }
.carta-mas a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; font-size: var(--step-small); }
.carta-mas a .ico { width: 1em; height: 1em; }
@media (hover: hover) and (pointer: fine) { .carta-mas a:hover { text-decoration: underline; } }

/* Carta del fundador: hoja sobre campo oscuro, borde festoneado, talón */
.fundador { background: var(--field-1); color: var(--field-1-ink); padding-top: clamp(64px, 8vw, 120px) !important; padding-bottom: clamp(64px, 8vw, 120px) !important; }
.fundador-hoja { background: var(--bg); color: var(--ink); padding: clamp(28px, 4vw, 60px) clamp(24px, 4vw, 56px) clamp(44px, 5vw, 72px); max-width: 640px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 97.5% 100%, 95% calc(100% - 12px), 92.5% 100%, 90% calc(100% - 12px), 87.5% 100%, 85% calc(100% - 12px), 82.5% 100%, 80% calc(100% - 12px), 77.5% 100%, 75% calc(100% - 12px), 72.5% 100%, 70% calc(100% - 12px), 67.5% 100%, 65% calc(100% - 12px), 62.5% 100%, 60% calc(100% - 12px), 57.5% 100%, 55% calc(100% - 12px), 52.5% 100%, 50% calc(100% - 12px), 47.5% 100%, 45% calc(100% - 12px), 42.5% 100%, 40% calc(100% - 12px), 37.5% 100%, 35% calc(100% - 12px), 32.5% 100%, 30% calc(100% - 12px), 27.5% 100%, 25% calc(100% - 12px), 22.5% 100%, 20% calc(100% - 12px), 17.5% 100%, 15% calc(100% - 12px), 12.5% 100%, 10% calc(100% - 12px), 7.5% 100%, 5% calc(100% - 12px), 2.5% 100%, 0 calc(100% - 12px)); }
.fundador-hoja p { max-width: 46ch; line-height: 1.55; }
.fundador-hoja p + p { margin-top: 1em; }
.fundador-firma { margin-top: 32px !important; font-family: var(--font-text); font-style: italic; font-size: var(--step-lead); line-height: 1.2; }
.fundador-firma small { display: block; font-style: normal; color: var(--muted); font-size: var(--step-small); margin-top: 6px; }
.fundador-puntos { max-width: 640px; height: 6px; margin: 14px 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6'%3E%3Ccircle cx='3' cy='3' r='2.5' fill='%23f3f2ef'/%3E%3C/svg%3E"); background-repeat: repeat-x; opacity: 0.6; }
.fundador-talon { max-width: 640px; min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }

/* Preguntas como texto corrido */
.preguntas-texto { margin-top: 28px; }
.preguntas-texto p { max-width: 46ch; line-height: 1.55; break-inside: avoid; }
.preguntas-texto p + p { margin-top: 20px; }
.preguntas-texto strong { font-weight: 500; }

/* Barra del pedido (banda pegada al pie de la columna) */
.pedido-barra { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--hoja-pad); margin-top: 48px; background: var(--ink); color: var(--bg); z-index: 5; transition: transform var(--t-ui) var(--ease-out); }
.pedido-barra[hidden] { display: none; }
.pedido-barra strong, .pedido-barra [data-cot-subtotal] { font-variant-numeric: tabular-nums; }
.pedido-barra [data-cot-subtotal]:empty { display: none; }

/* Ubicación en filas grandes (rompe la partición) */
.ubicacion { margin-top: clamp(96px, 11vw, 176px); }
.fila { position: relative; display: block; max-width: none; margin: 0; padding: clamp(40px, 5vw, 64px) 20px 22px; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem); line-height: 1; letter-spacing: -0.01em; }
.fila:has(.fila-foto) { padding-right: clamp(100px, 12vw, 170px); }
.fila:nth-child(odd) { background: var(--surface); }
.fila a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fila a:hover { color: var(--accent); } }
.fila span, .fila a { overflow-wrap: anywhere; }
.fila-foto { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: clamp(64px, 8vw, 120px); height: clamp(64px, 8vw, 120px); border-radius: 50%; object-fit: cover; object-position: 50% 35%; }
.fila-saludo { display: flex; align-items: center; }
.fila-boton { display: inline-grid; place-items: center; width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--accent); color: var(--accent-ink); margin-left: 24px; vertical-align: middle; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.fila-boton .ico { width: 45%; height: 45%; }
.fila-boton:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .fila-boton:hover { background: var(--accent-fuerte); } }

/* Cierre: una frase, una acción */
.cierre { padding: 30svh var(--margin) 20svh; }
.cierre p { max-width: 34ch; font-size: var(--step-lead); line-height: 1.35; }
.cierre-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px !important; max-width: none !important; }

/* Pie: la fotografía es el pie */
.pie { position: relative; min-height: 100svh; color: var(--field-1-ink); overflow: hidden; display: flex; flex-direction: column; }
.pie-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
.pie-arriba { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; padding: 40px var(--margin) 0; }
.pie-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-style: normal; max-width: 30ch; }
.pie-col h2 { font-family: var(--font-text); font-weight: 500; font-size: var(--step-body); margin-bottom: 6px; letter-spacing: 0.08em; text-transform: uppercase; }
.pie-col a, .pie .enlace { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pie-col a:hover, .pie .enlace:hover { text-decoration: underline; } }
.pie .enlace { text-align: left; color: inherit; }
.marca-pie { color: var(--field-1-ink); }
.pie-marca p { margin-top: 10px; max-width: 28ch; opacity: 0.9; }
.pie-redes { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.pie-red { display: inline-flex; align-items: center; gap: 8px; }
.pie-red .ico { width: 1.25em; height: 1.25em; }
.pie-nombre { position: relative; margin-top: auto; padding: 0 var(--margin); height: clamp(60px, 14vw, 210px); }
.pie-nombre svg { width: 100%; height: 100%; }
.pie-legal, .pie-creditos { position: relative; padding: 0 var(--margin); font-size: var(--step-small); max-width: 72ch; }
.pie-legal { margin-top: 14px; }
.pie-creditos { margin: 10px 0 24px; opacity: 0.85; }

/* Páginas interiores */
.pagina { padding: clamp(32px, 5vw, 72px) var(--margin) clamp(96px, 11vw, 176px); }
.pagina-estrecha { max-width: 72ch; }
.pagina h1 { max-width: 18ch; }
.pagina h1 + p, .pagina h1 + .lead { margin-top: 20px; }
.pagina .btn { margin-top: 24px; }
.cabecera-pagina { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: end; }
@media (max-width: 760px) { .cabecera-pagina { grid-template-columns: 1fr; } }

/* Catálogo */
.filtros { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 36px; align-items: center; }
.filtros a { text-decoration: none; padding: 6px 0; color: var(--muted); }
.filtros a[aria-current], .filtros a.is-on { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 0.09em; }
@media (hover: hover) and (pointer: fine) { .filtros a:hover { color: var(--ink); } }
.buscar { display: flex; gap: 0; margin-top: 24px; max-width: 420px; }
.buscar input { flex: 1; min-width: 0; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 0; border-radius: 0; padding: 12px 14px; min-height: 48px; width: 100%; }
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); }
.catalogo-lista { margin-top: 40px; columns: 2; column-gap: 64px; }
.catalogo-lista .carta-grupo { break-inside: avoid; margin-top: 0; margin-bottom: 48px; }
@media (max-width: 900px) { .catalogo-lista { columns: 1; } }
.linea-con-foto { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.linea-foto { width: 64px; height: 80px; object-fit: cover; background: var(--surface); }
.linea-foto svg { width: 64px; height: 80px; }

/* Producto */
.producto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 760px) { .producto { grid-template-columns: 1fr; } }
.producto-figura { margin: 0; background: var(--surface); aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; }
.producto-figura img { width: 100%; height: 100%; object-fit: cover; }
.producto-figura svg { width: 60%; height: auto; }
.producto-datos { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; color: var(--muted); max-width: none !important; }
.producto h1 { max-width: 16ch; }
.producto-marca { font-size: var(--step-lead); margin-top: 8px; }
.producto-desc { margin-top: 28px; }
.producto-notas { margin-top: 12px !important; font-style: italic; }
.precios { width: 100%; max-width: 480px; border-collapse: collapse; margin-top: 32px; font-variant-numeric: tabular-nums; }
.precios th, .precios td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--field-2); vertical-align: baseline; }
.precios th { font-weight: 500; }
.precios td:last-child, .precios th:last-child { text-align: right; }
.precios small { display: block; color: var(--muted); }
.agregar-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.agregar-form select, .agregar-form input { width: auto; }
.agregar-form input[type="number"] { width: 92px; }
.relacionados { margin-top: clamp(64px, 8vw, 120px); }
.relacionados h2 { font-size: var(--step-lead); font-family: var(--font-text); font-weight: 500; }

/* Pedido / cotizar */
.pedido { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .pedido { grid-template-columns: 1fr; } }
.pedido-lineas { margin-top: 32px; }
.pedido-linea { display: grid; grid-template-columns: 1fr auto auto; gap: 12px 20px; align-items: center; padding: 14px 0; }
.pedido-linea-nombre { font-weight: 500; }
.pedido-linea-detalle { color: var(--muted); font-size: var(--step-small); }
.cantidad { display: inline-flex; align-items: center; background: var(--surface); }
.cantidad button { width: 40px; height: 44px; background: none; border: 0; color: inherit; cursor: pointer; display: grid; place-items: center; }
.cantidad input { width: 52px; min-height: 44px; text-align: center; padding: 0; background: none; -moz-appearance: textfield; }
.cantidad input::-webkit-inner-spin-button, .cantidad input::-webkit-outer-spin-button { -webkit-appearance: none; }
.pedido-linea-importe { font-variant-numeric: tabular-nums; text-align: right; min-width: 7ch; }
.pedido-quitar { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) { .pedido-quitar:hover { color: var(--accent); } }
.pedido-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; margin-top: 8px; font-size: var(--step-lead); font-weight: 500; background: var(--surface); padding-inline: 16px; }
.pedido-total small { font-weight: 400; color: var(--muted); }
.pedido-vacio { margin-top: 32px; padding: 40px 24px; background: var(--surface); max-width: none; }
.formulario { display: grid; gap: 18px; margin-top: 32px; }
.formulario label, .campo > span { display: block; font-weight: 500; margin-bottom: 6px; }
.campo small { display: block; color: var(--muted); margin-top: 4px; }
.formulario .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .formulario .dos { grid-template-columns: 1fr; } }
.opciones { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.opciones label, .check { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; margin: 0; cursor: pointer; }
.opciones input, .check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); margin: 0; padding: 0; }
.check { align-items: flex-start; }
.check input { margin-top: 3px; }
.vista-previa { font-family: var(--font-text); background: var(--surface); padding: 20px; white-space: pre-wrap; font-size: var(--step-small); line-height: 1.5; max-height: 320px; overflow: auto; }
.vista-previa-titulo { font-weight: 500; margin-top: 28px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; /* taste-skill-ignore: trampa anti-spam, invisible */ overflow: hidden; }
.enviada { text-align: left; }
.enviada .btn { margin-top: 24px; }
.enviada-folio { font-family: var(--font-display); font-size: var(--step-head); margin-top: 12px; }

/* Nosotros y contacto */
.galeria-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--marco); margin-top: 48px; }
.galeria-dos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 640px) { .galeria-dos { grid-template-columns: 1fr; } }
.mapa { margin-top: 48px; aspect-ratio: 16 / 9; background: var(--surface); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.legal h2 { font-size: var(--step-lead); font-family: var(--font-text); font-weight: 500; margin-top: 40px; }
.legal p, .legal li { max-width: 72ch; }
.legal ul { padding-left: 1.2em; }

/* Verificación de edad */
.edad { position: fixed; inset: 0; z-index: 100; background: var(--field-1); color: var(--field-1-ink); display: grid; place-items: center; padding: 24px; overflow: auto; }
.edad-caja { max-width: 440px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.edad-escudo { opacity: 0.95; }
.edad-marca { font-family: var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--step-small); }
.edad-marca i { font-style: normal; }
.edad h2 { margin-top: 10px; }
.edad p { opacity: 0.9; }
.edad-botones { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 14px; }
body.edad-pendiente { overflow: hidden; }
body:not(.edad-pendiente) .edad { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .edad-caja > * { animation: rise 700ms var(--ease-out) both; }
  .js .edad-caja > :nth-child(3) { animation-delay: 60ms; } .js .edad-caja > :nth-child(4) { animation-delay: 120ms; } .js .edad-caja > :nth-child(5) { animation-delay: 180ms; } .js .edad-caja > :nth-child(6) { animation-delay: 240ms; } .js .edad-caja > :nth-child(7) { animation-delay: 300ms; }
  .edad.is-saliendo { animation: edad-sale 420ms var(--ease-in-out) forwards; }
  @keyframes edad-sale { to { opacity: 0; transform: scale(1.02); } }
}

/* Botón de WhatsApp siempre a la mano */
.wa-flotante { position: fixed; right: var(--marco); bottom: var(--marco); z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 500; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.wa-flotante .ico { width: 1.4em; height: 1.4em; }
.wa-flotante:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .wa-flotante:hover { background: var(--accent); color: var(--accent-ink); } }
body.edad-pendiente .wa-flotante { display: none; }
@media (max-width: 600px) { .wa-flotante span { display: none; } .wa-flotante { padding: 0 14px; } }
.ck { bottom: calc(var(--marco) + 64px); }

/* Cookies: banda plana al pie */
.ck { position: fixed; left: var(--marco); right: var(--marco); z-index: 90; }
.ck[hidden] { display: none; }
.ck-caja { background: var(--surface); color: var(--ink); padding: 20px 24px; max-width: 640px; margin-left: auto; }
.ck-caja h2 { font-size: var(--step-lead); font-family: var(--font-text); font-weight: 500; }
.ck-caja p { margin-top: 8px; font-size: var(--step-small); max-width: 64ch; }
.ck-botones { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: 16px; }
.ck-lista { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.ck-lista li { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.ck-lista strong { display: block; font-weight: 500; }
.ck-lista span { font-size: var(--step-small); color: var(--muted); }
.ck-siempre { white-space: nowrap; }
.sw { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw-ui { position: absolute; inset: 0; background: var(--field-2); transition: background-color var(--t-ui) ease; }
.sw-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--bg); transition: transform var(--t-ui) var(--ease-out); }
.sw input:checked + .sw-ui { background: var(--accent); }
.sw input:checked + .sw-ui::after { transform: translateX(18px); }
.sw input:focus-visible + .sw-ui { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .js .ck-caja { animation: rise 500ms var(--ease-out) both; } }

/* Entradas por sección */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal="rise"] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js [data-reveal="rise"].is-in { opacity: 1; transform: none; }
  .js [data-reveal="rows"] > * { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--k, 0) * 55ms); }
  .js [data-reveal="rows"].is-in > * { opacity: 1; transform: none; }
  .js [data-reveal="shutter"] { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js [data-reveal="shutter"] img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js [data-reveal="shutter"].is-in { clip-path: inset(0); }
  .js [data-reveal="shutter"].is-in img { transform: none; }
}

/* Teléfono: el escenario se apila, la foto queda pegada arriba */
@media (max-width: 900px) {
  .escena { grid-template-columns: 1fr; }
  .escena-fija { order: 1; position: sticky; top: 0; height: 50svh; margin: calc(-1 * var(--marco)); margin-bottom: 0; }
  .escena-hoja { order: 2; position: relative; margin: 0 calc(-1 * var(--marco)); padding-top: 8px; }
  .escena-hoja > section { padding: 0 20px; }
  .hero { min-height: 0; padding-top: 16px !important; padding-bottom: 72px !important; }
  .hero-cuerpo { margin-top: 20px; gap: 18px; }
  .hero h1 { font-size: 9vw; }
  .muestra-acciones { grid-template-columns: 1fr; }
  .celda { min-height: 60px; }
  .pedido-barra { padding-inline: 20px; }
  .fila { padding: 30px 16px 16px; font-size: clamp(2rem, 0.6rem + 6vw, 4.6rem); }
  .fila:has(.fila-foto) { padding-right: 80px; }
  .fila-foto { width: 48px; height: 48px; right: 16px; }
  .fila-saludo { background: var(--accent); color: var(--accent-ink); justify-content: space-between; }
  .fila-boton { background: var(--accent-ink); color: var(--accent); width: 56px; height: 56px; margin: 0; }
  .cierre { padding: 20svh 20px 14svh; }
  .pie { min-height: 88svh; }
  .pie-arriba { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .nav-accion span:not(.nav-n) { display: none; } .nav .btn-sm { padding: 0 12px; } }
@media (min-width: 1800px) { .escena, .pagina, .nav, .ubicacion, .cierre, .pie { max-width: 1800px; margin-inline: auto; } }

/* Catálogo: cabecera con foto y bandas por grupo */
.catalogo-cabecera { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.catalogo-cabecera h1 { font-size: clamp(3rem, 1.5rem + 5vw, 6rem); max-width: 10ch; letter-spacing: -0.01em; }
.catalogo-cabecera .lead { margin-top: 20px; }
.catalogo-foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.catalogo-foto img { width: 100%; height: 100%; object-fit: cover; }
.grupo-banda { margin: 0 0 32px; aspect-ratio: 3 / 1; overflow: hidden; background: var(--surface); }
.grupo-banda img { width: 100%; height: 100%; object-fit: cover; }
.grupo-titulo { font-family: var(--font-display); font-size: var(--step-head); margin: 0 0 20px; }
.catalogo-grupo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(64px, 8vw, 120px); }
.catalogo-grupo:first-child { margin-top: 40px; }
.grupo-figura { margin: 0; position: sticky; top: var(--marco); height: calc(100svh - 2 * var(--marco)); overflow: hidden; background: var(--surface); }
.grupo-figura img { width: 100%; height: 100%; object-fit: cover; }
.grupo-figura figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 20px; background: var(--bg); font-family: var(--font-display); font-size: var(--step-lead); }
.catalogo-grupo .catalogo-lista { columns: 1; margin-top: 0; background: var(--surface); padding: clamp(20px, 3vw, 40px); min-height: calc(100svh - 2 * var(--marco)); }
.catalogo-grupo .carta-grupo { margin-bottom: 40px; break-inside: avoid; }
.catalogo-grupo .carta-grupo:last-child { margin-bottom: 0; }
@media (min-width: 1200px) { .catalogo-grupo .catalogo-lista { columns: 2; column-gap: 48px; } }
@media (max-width: 900px) { .catalogo-grupo { grid-template-columns: 1fr; } .grupo-figura { position: static; height: auto; aspect-ratio: 2 / 1; } }
@media (max-width: 760px) { .catalogo-cabecera { grid-template-columns: 1fr; } .catalogo-foto { display: none; } .filtros { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: none; } .filtros a { white-space: nowrap; } }

/* Producto: escenario partido con la botella sobre papel */
.escena-producto .escena-fija { display: grid; place-items: center; }
.producto-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.producto-placa { position: relative; width: min(62%, 420px); aspect-ratio: 4 / 5; background: var(--bg); color: var(--ink); display: grid; place-items: center; padding: 8%; }
.producto-placa svg { width: 100%; height: 100%; }
.producto-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.producto-hoja { padding-top: 22px !important; min-height: calc(100svh - 2 * var(--marco)); }
.producto-hoja h1 { margin-top: 48px; max-width: 16ch; }
.producto-mas { padding-bottom: 64px !important; }
.producto-banda { margin: 0 0 32px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.producto-banda img { width: 100%; height: 100%; object-fit: cover; }
.producto-tienda { display: grid; grid-template-columns: minmax(140px, 2fr) 3fr; gap: 24px; align-items: center; margin-top: 48px; }
.producto-tienda img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.producto-tienda p { max-width: 40ch; }
.producto-mas h2 { font-size: var(--step-lead); font-family: var(--font-text); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .js .dibujar path, .js .dibujar rect { stroke-dasharray: 700; stroke-dashoffset: 700; animation: trazo 1700ms var(--ease-in-out) forwards; }
  .js .dibujar rect { animation-delay: 500ms; }
  .js .dibujar text { opacity: 0; animation: aparece 600ms var(--ease-out) 1300ms forwards; }
  @keyframes trazo { to { stroke-dashoffset: 0; } }
  @keyframes aparece { to { opacity: 1; } }
}


/* ===== Cabecera global: anuncio, marca + buscador + utilidades, fila de categorías ===== */
.anuncio { margin: 0; padding: 9px var(--margin); background: var(--ink); color: var(--bg); text-align: center; font-size: var(--step-small); max-width: none; }
.cabecera { background: var(--bg); }
.cab-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(16px, 3vw, 48px); min-height: 80px; padding: 0 var(--margin); }
.cab-utiles { display: flex; align-items: center; gap: 20px; }
.cab-ayuda { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; padding: 6px 0; transition: color var(--t-hover) ease; }
.cab-ayuda .ico { width: 1.3em; height: 1.3em; }
@media (hover: hover) and (pointer: fine) { .cab-ayuda:hover { color: var(--accent); } }
.cab-cats { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 32px; padding: 0 var(--margin); min-height: 46px; align-items: center; background: var(--surface); }
.cab-cats a { text-decoration: none; padding: 10px 0; font-weight: 500; transition: color var(--t-hover) ease; }
.cab-cats a[aria-current] { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 0.09em; }
@media (hover: hover) and (pointer: fine) { .cab-cats a:hover { color: var(--accent); } }
.buscador { position: relative; display: flex; max-width: 640px; width: 100%; justify-self: center; }
.buscador input { min-height: 48px; padding-right: 12px; }
.buscador button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; background: var(--ink); color: var(--bg); border: 0; font: 500 var(--step-small)/1 var(--font-text); cursor: pointer; transition: background-color var(--t-hover) ease; }
.buscador button .ico { width: 1.25em; height: 1.25em; }
@media (hover: hover) and (pointer: fine) { .buscador button:hover { background: var(--accent); color: var(--accent-ink); } }
.buscador-sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 80; background: var(--surface); max-height: 70vh; overflow: auto; }
.buscador-sug[hidden] { display: none; }
.buscador-sug p { padding: 10px 14px 4px; font-size: var(--step-small); color: var(--muted); max-width: none; }
.buscador-sug a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 10px 14px; text-decoration: none; }
.buscador-sug a span { font-weight: 500; }
.buscador-sug a small { grid-column: 1; color: var(--muted); }
.buscador-sug a em { grid-row: 1 / 3; align-self: center; font-style: normal; font-variant-numeric: tabular-nums; }
.buscador-sug a.is-activa, .buscador-sug a:focus { background: var(--field-2); outline: none; }
.buscador-sug .sug-todo { display: block; padding: 12px 14px; background: var(--ink); color: var(--bg); font-weight: 500; }
@media (max-width: 900px) {
  .cab-fila { grid-template-columns: auto auto; min-height: 68px; }
  .buscador { grid-column: 1 / -1; grid-row: 2; padding-bottom: 12px; max-width: none; }
  .cab-fila .nav-marca .marca-sub { display: none; }
  .cab-ayuda span { display: none; }
}
@media (max-width: 760px) { .cab-cats { display: none; } .cab-ayuda { display: none; } }

/* ===== Secciones de la hoja del inicio ===== */
.seccion-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 24px; flex-wrap: wrap; }
.seccion-cabeza a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; white-space: nowrap; }
.seccion-cabeza a .ico { width: 1em; height: 1em; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .seccion-cabeza a:hover { text-decoration: underline; } .seccion-cabeza a:hover .ico { transform: translateX(3px); } }

.banners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--marco); }
.banner { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--field-1); color: var(--field-1-ink); text-decoration: none; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); transition: transform 1200ms var(--ease-soft), filter var(--t-ui) ease; }
.banner-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.banner-texto strong { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); line-height: 1.1; text-wrap: balance; }
.banner-texto > span { font-size: var(--step-small); opacity: 0.92; max-width: 30ch; }
.banner-texto em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 500; font-size: var(--step-small); margin-top: 6px; }
.banner-texto em .ico { width: 1em; height: 1em; }
@media (hover: hover) and (pointer: fine) { .banner:hover img { transform: scale(1.04); filter: brightness(0.62); } }
@media (max-width: 560px) { .banners { grid-template-columns: 1fr; } .banner { aspect-ratio: 3 / 2; } }

.pasos-nota { margin-top: 16px; color: var(--muted); max-width: 44ch; }
.pasos-lista { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--marco); counter-reset: paso; }
.pasos-lista li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; background: var(--surface); min-height: 190px; }
.pasos-lista li:nth-child(2n) { background: var(--field-2); }
.paso-num { font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1; color: var(--accent); }
.paso-ico { position: absolute; right: 20px; top: 22px; width: 1.6em; height: 1.6em; color: var(--muted); }
.pasos-lista strong { font-weight: 500; font-size: var(--step-body); }
.pasos-lista li > span:last-child { color: var(--muted); font-size: var(--step-small); max-width: 30ch; }
@media (max-width: 560px) { .pasos-lista { grid-template-columns: 1fr; } .pasos-lista li { min-height: 0; } }

/* Tarjetas de producto */
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--marco); margin-top: 28px; }
.rejilla-tarjetas-3 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.tarjeta { display: flex; flex-direction: column; gap: 6px; background: var(--surface); padding: 0 0 16px; min-width: 0; }
.tarjeta-figura { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--field-2); overflow: hidden; }
.tarjeta-figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-soft); }
.tarjeta-botella { width: 56%; height: auto; color: var(--ink); }
.tarjeta-etq { position: absolute; left: 0; top: 12px; padding: 4px 10px; background: var(--ink); color: var(--bg); font-size: var(--step-small); }
@media (hover: hover) and (pointer: fine) { .tarjeta-figura:hover img { transform: scale(1.04); } }
.tarjeta-cat, .tarjeta-nombre, .tarjeta-detalle, .tarjeta-precios, .tarjeta-acciones { padding-inline: 14px; }
.tarjeta-cat { margin-top: 12px; font-size: var(--step-small); color: var(--muted); max-width: none; }
.tarjeta-cat a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .tarjeta-cat a:hover { text-decoration: underline; } }
.tarjeta-nombre { font-family: var(--font-text); font-weight: 500; font-size: var(--step-body); line-height: 1.25; }
.tarjeta-nombre a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .tarjeta-nombre a:hover { text-decoration: underline; } }
.tarjeta-detalle { color: var(--muted); font-size: var(--step-small); max-width: none; }
.tarjeta-precios { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: none; font-variant-numeric: tabular-nums; }
.tarjeta-precio { font-weight: 500; font-size: var(--step-lead); line-height: 1.1; }
.tarjeta-unidad { color: var(--muted); font-size: var(--step-small); }
.tarjeta-precios small { flex-basis: 100%; color: var(--muted); }
.tarjeta-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-top: auto; padding-top: 6px; }

/* Por qué Dinastía */
.porque-lista { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.porque-lista li { padding: 18px 20px; background: var(--surface); max-width: 60ch; line-height: 1.5; }
.porque-lista strong { font-weight: 500; }
.porque-nota { margin-top: 24px !important; color: var(--muted); max-width: 44ch; }

/* Rejilla de categorías (a todo lo ancho) */
.categorias { margin-top: clamp(96px, 11vw, 176px); padding: 0 var(--margin); }
.categorias-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--marco); margin-top: 32px; }
.categoria-ficha { display: flex; flex-direction: column; gap: 10px; background: var(--surface); padding-bottom: 20px; min-width: 0; }
.categoria-foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--field-2); }
.categoria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .categoria-foto:hover img { transform: scale(1.05); } }
.categoria-ficha h3 { padding: 10px 18px 0; font-family: var(--font-display); font-size: var(--step-lead); }
.categoria-ficha h3 a { text-decoration: none; }
.categoria-ficha > p { padding: 0 18px; color: var(--muted); font-size: var(--step-small); max-width: none; }
.categoria-cats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px !important; }
.categoria-cats a { text-decoration: none; color: var(--ink); font-size: var(--step-small); font-weight: 500; }
.categoria-cats a span { color: var(--muted); font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .categoria-cats a:hover { text-decoration: underline; } }
@media (max-width: 900px) { .categorias-rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .categorias-rejilla { grid-template-columns: 1fr; } .categoria-foto { aspect-ratio: 3 / 2; } }

/* Recorrido en video */
.recorrido { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin: clamp(96px, 11vw, 176px) var(--margin) 0; }
.recorrido-pagina { margin: 64px 0 0; }
.recorrido-texto p { margin-top: 20px; max-width: 40ch; }
.recorrido-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px !important; }
.recorrido-video { margin: 0; background: var(--field-1); }
.recorrido-video video { display: block; width: 100%; height: auto; aspect-ratio: 8 / 7; background: var(--field-1); }
.recorrido-video figcaption { padding: 12px 16px; background: var(--surface); font-size: var(--step-small); color: var(--muted); }
@media (max-width: 760px) { .recorrido { grid-template-columns: 1fr; } }
.galeria-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--marco); margin-top: 64px; }
.galeria-tres img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 640px) { .galeria-tres { grid-template-columns: 1fr; } }

/* Video en la columna fija del inicio */
.foto-fija video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1600ms var(--ease-soft); background: var(--field-1); }
.foto-fija video.is-on { opacity: 1; }

/* Migas */
.migas { font-size: var(--step-small); color: var(--muted); margin-bottom: 14px; max-width: none; }
.migas a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .migas a:hover { text-decoration: underline; } }

/* ===== Catálogo y búsqueda: barra de orden, filtros laterales, rejilla ===== */
.catalogo-cuerpo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 40px; }
.catalogo-lado { position: sticky; top: var(--marco); }
.barra-orden { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 10px 16px; background: var(--surface); }
.barra-orden p { color: var(--muted); max-width: none; }
.orden { display: inline-flex; align-items: center; gap: 10px; }
.orden span { font-size: var(--step-small); color: var(--muted); white-space: nowrap; }
.orden select { width: auto; min-height: 44px; padding: 8px 36px 8px 12px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316130f' stroke-width='1.75'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.abrir-filtros { display: none; }
.filtros-lado { display: grid; gap: 22px; }
.filtro-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 500; }
.filtro-cabeza a { font-weight: 400; font-size: var(--step-small); color: var(--muted); }
.filtro { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.filtro legend, .filtro-leyenda { font-weight: 500; margin-bottom: 8px; padding: 0; font-size: var(--step-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); max-width: none; }
.filtro label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.filtro input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); }
.filtro-rango { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtro-rango input { min-height: 44px; padding: 8px 10px; }
.filtro select { min-height: 44px; padding: 8px 12px; }
.filtro-cats { display: grid; gap: 4px; }
.filtro-cats a { text-decoration: none; display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.filtro-cats a span { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .filtro-cats a:hover { text-decoration: underline; } }
.js .filtro-aplicar { display: none; }
.catalogo-seccion + .catalogo-seccion { margin-top: clamp(48px, 6vw, 80px); }
.catalogo-seccion h2 { font-size: var(--step-head); }
.catalogo-principal .carta-mayoreo { margin-top: 56px; }
@media (max-width: 900px) {
  .catalogo-cuerpo { grid-template-columns: 1fr; }
  .catalogo-lado { position: static; }
  .abrir-filtros { display: inline-flex; }
  .js .filtros-lado { display: none; }
  .js .filtros-lado.is-abierto { display: grid; padding: 20px; background: var(--surface); }
  .js .filtros-lado.is-abierto .filtro-aplicar { display: inline-flex; }
  .filtro-cats { display: none; }
}

/* Buscar un producto */
.buscar-portada h1 { max-width: 14ch; }
.buscar-grande { max-width: 640px; margin-top: 28px; }
.buscar-grande input { min-height: 56px; font-size: var(--step-lead); }
.buscar-grande .btn { min-height: 56px; }
.buscar-sugeridas { margin-top: 16px; color: var(--muted); font-size: var(--step-small); max-width: none; }
.buscar-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--marco); margin-top: 48px; }
.buscar-cats .celda { min-height: 64px; gap: 8px; grid-auto-flow: column; }
.buscar-cats .celda span { color: var(--muted); font-weight: 400; }
.buscar-cats-linea { margin-top: 16px; color: var(--muted); max-width: none; }
.pagina h1 strong { font-weight: 600; color: var(--accent); }

/* ===== Centro de ayuda ===== */
.ayuda-cabecera { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.ayuda-cabecera h1 { max-width: 12ch; }
.ayuda-foto { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.ayuda-foto img { width: 100%; height: 100%; object-fit: cover; }
.ayuda-conteo { margin-top: 10px; color: var(--muted); min-height: 1.4em; max-width: none; }
.atajos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--marco); margin-top: clamp(40px, 6vw, 72px); }
.atajo { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 24px; background: var(--surface); text-decoration: none; min-height: 150px; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.atajo:active { transform: scale(0.98); }
.atajo-ico { width: 1.7em; height: 1.7em; color: var(--accent); margin-bottom: 4px; }
.atajo strong { font-weight: 500; }
.atajo span { font-size: var(--step-small); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .atajo:hover { background: var(--field-2); } }
.ayuda-cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(56px, 8vw, 104px); }
.ayuda-indice { position: sticky; top: var(--marco); display: grid; gap: 4px; }
.ayuda-indice a { text-decoration: none; display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; }
.ayuda-indice a span { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .ayuda-indice a:hover { text-decoration: underline; } }
.ayuda-tema + .ayuda-tema { margin-top: clamp(40px, 5vw, 64px); }
.ayuda-tema h2 { font-size: var(--step-head); margin-bottom: 18px; scroll-margin-top: 24px; }
.pregunta { background: var(--surface); margin-top: 6px; }
.pregunta[open] { background: var(--field-2); }
.pregunta summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; font-weight: 500; cursor: pointer; list-style: none; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta-ico { width: 1.1em; height: 1.1em; flex: none; color: var(--muted); transition: transform var(--t-ui) var(--ease-out); }
.pregunta[open] .pregunta-ico { transform: rotate(45deg); color: var(--accent); }
.pregunta-resp { padding: 0 18px 20px; max-width: 62ch; }
.pregunta-resp p { color: var(--ink); line-height: 1.55; }
.pregunta[hidden] { display: none; }
.hablar { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; margin-top: clamp(64px, 8vw, 120px); padding: clamp(28px, 4vw, 48px); background: var(--field-1); color: var(--field-1-ink); }
.hablar h2 { font-size: var(--step-head); }
.hablar p { margin-top: 10px; max-width: 44ch; opacity: 0.9; }
.hablar-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hablar .enlace { color: var(--field-1-ink); flex-basis: 100%; }
.hablar .btn-suave { background: var(--field-1-surface); color: var(--field-1-ink); }
@media (max-width: 900px) { .ayuda-cuerpo { grid-template-columns: 1fr; } .ayuda-indice { position: static; display: flex; flex-wrap: wrap; gap: 6px 18px; } .ayuda-indice .filtro-leyenda { flex-basis: 100%; } }
@media (max-width: 760px) { .ayuda-cabecera { grid-template-columns: 1fr; } .ayuda-foto { display: none; } }

/* ===== Términos y condiciones ===== */
.legal-terminos { max-width: none; }
.legal-cabecera h1 { max-width: 16ch; }
.legal-cuerpo { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(40px, 6vw, 72px); }
.legal-indice { position: sticky; top: var(--marco); display: grid; gap: 2px; }
.legal-indice a { text-decoration: none; padding: 5px 0; font-size: var(--step-small); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .legal-indice a:hover { color: var(--ink); text-decoration: underline; } }
.legal-texto h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--step-lead); margin-top: 44px; scroll-margin-top: 24px; }
.legal-texto h2:first-child { margin-top: 0; }
.legal-texto p { margin-top: 14px; line-height: 1.55; }
.legal-contacto { margin-top: 40px !important; padding: 16px 20px; background: var(--surface); }
@media (max-width: 900px) { .legal-cuerpo { grid-template-columns: 1fr; } .legal-indice { position: static; display: flex; flex-wrap: wrap; gap: 4px 16px; } .legal-indice .filtro-leyenda { flex-basis: 100%; } }

/* Edad: nota legal */
.edad-legal { font-size: var(--step-small); opacity: 0.75; margin-top: 10px; max-width: 40ch; }
.edad-legal a { color: inherit; }

/* Producto: nota de entrega */
.producto-garantia { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; color: var(--muted); max-width: 48ch; }
.producto-garantia .ico { flex: none; margin-top: 2px; }


/* ===== Tienda (estructura tipo Bodegas Alianza con la identidad de Dinastía) ===== */
:root { --animate-duration: 600ms; --animate-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .animate__animated { animation: none !important; opacity: 1 !important; } }

/* Mega-menú de 4 columnas */
.cab-cats { position: relative; }
.cab-oferta { color: var(--accent); }
.mega { position: static; }
.mega > a { display: inline-flex; align-items: center; gap: 4px; }
.mega-caret { width: 0.9em; height: 0.9em; transition: transform var(--t-ui) var(--ease-out); }
.mega.is-abierto > a .mega-caret { transform: rotate(180deg); }
.mega.is-abierto > a { color: var(--accent); }
.mega-panel { position: absolute; left: var(--margin); right: var(--margin); top: 100%; z-index: 70; background: var(--bg); padding: 28px clamp(20px, 3vw, 40px) 24px; display: grid; gap: 20px; max-width: 1100px; margin-inline: auto; }
.mega-panel[hidden] { display: none; }
.js .mega-panel { animation: mega-entra 220ms var(--ease-out) both; }
@keyframes mega-entra { from { opacity: 0; transform: translateY(-6px); } }
.mega-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.mega-col { display: grid; gap: 6px; align-content: start; }
.mega-titulo { font-family: var(--font-display); font-weight: 600; font-size: var(--step-body); margin-bottom: 6px; max-width: none; }
.mega-col a { text-decoration: none; color: var(--muted); padding: 2px 0; transition: color var(--t-hover) ease, transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mega-col a:hover { color: var(--accent); transform: translateX(3px); } }
.mega-todos { justify-self: end; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; }
.mega-todos .ico { width: 1em; height: 1em; }
.menu-movil-grupo summary { font-size: var(--step-lead); padding: 10px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.menu-movil-grupo summary::-webkit-details-marker { display: none; }
.menu-movil-grupo summary::after { content: "+"; color: var(--muted); }
.menu-movil-grupo[open] summary::after { content: "–"; }
.menu-movil-grupo a { font-size: var(--step-body); padding: 6px 0 6px 16px; }

/* Hero de categoría + oferta destacada / producto del mes */
.pagina-categoria { padding-top: clamp(20px, 3vw, 36px); }
.cat-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; margin-top: 16px; }
.cat-hero-texto { display: flex; flex-direction: column; justify-content: center; }
.cat-hero h1 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem); max-width: 12ch; }
.cat-hero .lead { margin-top: 18px; max-width: 46ch; font-size: var(--step-body); line-height: 1.5; color: var(--muted); }
.cat-hijas { margin-top: 22px; }
.cat-hijas a span { color: var(--muted); font-size: var(--step-small); margin-left: 0.3em; }
.cat-destacados { display: grid; gap: var(--marco); align-content: center; }
.cat-destacado { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 14px; background: var(--surface); text-decoration: none; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.cat-destacado:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .cat-destacado:hover { background: var(--field-2); } }
.cat-destacado-figura { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--bg); overflow: hidden; }
.cat-destacado-figura img { width: 100%; height: 100%; object-fit: cover; }
.cat-destacado-figura svg { width: 60%; height: auto; color: var(--ink); }
.cat-destacado-texto { display: grid; gap: 4px; min-width: 0; }
.cat-destacado-texto small { color: var(--accent); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--step-small); }
.cat-destacado-texto strong { font-weight: 500; line-height: 1.25; }
.cat-destacado-precio { font-variant-numeric: tabular-nums; font-weight: 500; }
.cat-destacado-precio s { color: var(--muted); font-weight: 400; margin-right: 6px; }
.cat-destacado-texto em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: var(--step-small); font-weight: 500; color: var(--accent); }
.cat-destacado-texto em .ico { width: 1em; height: 1em; }
.cat-hero-foto { margin: 0; overflow: hidden; background: var(--surface); min-height: 260px; }
.cat-hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.cat-hero > * { min-width: 0; }
@media (max-width: 1100px) { .cat-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cat-hero-foto { display: none; } }
@media (max-width: 760px) { .cat-hero { grid-template-columns: minmax(0, 1fr); } .cat-hero h1 { max-width: none; } .cat-hijas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .cat-hijas a { white-space: nowrap; } }

/* Facetas (acordeones) y chips */
.faceta { background: var(--surface); }
.faceta summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; font-weight: 500; cursor: pointer; list-style: none; }
.faceta summary::-webkit-details-marker { display: none; }
.faceta-caret { width: 1em; height: 1em; color: var(--muted); transition: transform var(--t-ui) var(--ease-out); }
.faceta[open] .faceta-caret { transform: rotate(180deg); }
.faceta-lista { display: grid; gap: 4px; padding: 0 14px 14px; }
.faceta-lista label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--step-small); }
.faceta-lista label span { flex: 1; }
.faceta-lista label em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.faceta-lista input[type="checkbox"], .faceta-lista input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--accent); flex: none; }
.faceta-lista.filtro-rango { grid-template-columns: 1fr 1fr; gap: 8px; }
.faceta-mas { justify-self: start; font-size: var(--step-small); color: var(--muted); margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; max-width: none; }
.chip { display: inline-flex; align-items: center; padding: 6px 12px; background: var(--ink); color: var(--bg); font-size: var(--step-small); }

/* Tarjetas v2: badge de descuento, precio tachado, botón Agregar */
.rejilla-tienda { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tarjeta { background: var(--bg); transition: transform var(--t-ui) var(--ease-out), background-color var(--t-hover) ease; }
.rejilla-tienda .tarjeta { background: var(--surface); }
@media (hover: hover) and (pointer: fine) { .rejilla-tienda .tarjeta:hover { transform: translateY(-4px); background: var(--field-2); } }
.tarjeta-figura { background: var(--bg); }
.rejilla-tienda .tarjeta-figura { background: var(--bg); }
.tarjeta-badge { position: absolute; left: 12px; top: 12px; min-width: 44px; padding: 4px 8px; background: var(--accent); color: var(--accent-ink); font-weight: 500; font-size: var(--step-small); text-align: center; font-variant-numeric: tabular-nums; }
.tarjeta-etq { left: auto; right: 0; top: 12px; }
.tarjeta-etq-dest { background: var(--field-1); }
.tarjeta-lista { flex-basis: 100%; color: var(--muted); font-size: var(--step-small); }
.tarjeta-precio-oferta { color: var(--accent); }
.tarjeta-agregar { min-height: 40px; padding: 0 14px; }
.tarjeta-pedido .tarjeta-figura { opacity: 0.85; }
.cargar-mas { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 40px; }
.cargar-mas p { color: var(--muted); }
.cargar-mas .btn[disabled] { opacity: 0.6; }
.tarjeta.is-nueva { animation: fadeInUp 600ms var(--ease-out) both; }

/* Ficha de producto en dos columnas */
.ficha { padding-top: clamp(20px, 3vw, 36px); }
.ficha-cuerpo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: 16px; }
.galeria { position: sticky; top: var(--marco); display: grid; gap: var(--marco); }
.galeria-principal { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t-ui) ease; }
.galeria-principal img.galeria-fondo { position: absolute; inset: 0; filter: brightness(0.7); }
.galeria-principal .producto-placa { position: relative; width: min(62%, 380px); }
.galeria-badge { left: 16px; top: 16px; font-size: var(--step-body); }
.galeria-miniaturas { display: flex; gap: 8px; flex-wrap: wrap; }
.galeria-miniaturas button { width: 72px; height: 90px; padding: 0; background: var(--surface); border: 0; cursor: pointer; opacity: 0.7; transition: opacity var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.galeria-miniaturas button img { width: 100%; height: 100%; object-fit: cover; }
.galeria-miniaturas button[aria-selected="true"] { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.galeria-miniaturas button:active { transform: scale(0.96); }
.ficha-arriba { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ficha-marca { color: var(--muted); max-width: none; }
.ficha-marca a { font-weight: 500; }
.ficha-ico { width: 40px; height: 40px; display: grid; place-items: center; background: var(--surface); border: 0; color: var(--ink); cursor: pointer; transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .ficha-ico:hover { background: var(--field-2); } }
.ficha h1 { margin-top: 12px; font-size: var(--step-head); max-width: 22ch; }
.ficha-sku { margin-top: 10px; color: var(--muted); font-size: var(--step-small); }
.ficha-oferta-etq { margin-top: 14px; }
.ficha-oferta-etq span { display: inline-block; padding: 6px 12px; background: var(--accent); color: var(--accent-ink); font-weight: 500; font-size: var(--step-small); letter-spacing: 0.06em; }
.ficha-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin-top: 18px; padding: 18px 0; font-variant-numeric: tabular-nums; }
.ficha-precio-actual { font-family: var(--font-display); font-weight: 600; font-size: var(--step-display); line-height: 1; }
.ficha-precio-actual.is-oferta { color: var(--accent); }
.ficha-precio-antes { display: inline-flex; flex-direction: column; color: var(--muted); font-size: var(--step-small); }
.ficha-precio-antes s { font-size: var(--step-body); }
.ficha-ahorro { font-size: var(--step-small); color: var(--muted); }
.ficha-ahorro strong { color: var(--accent); font-weight: 500; }
.ficha-precio-nota { flex-basis: 100%; color: var(--muted); font-size: var(--step-small); }
.ficha-disp { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); font-size: var(--step-small); max-width: none; }
.ficha-disp i { width: 10px; height: 10px; border-radius: 50%; background: #1f5f3a; }
.ficha-disp.is-pedido i { background: var(--accent); }
.ficha-agregar { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; margin-top: 22px; align-items: center; }
.ficha-agregar select { width: auto; min-height: 48px; }
.stepper { display: inline-flex; align-items: center; background: var(--surface); }
.stepper button { width: 44px; height: 48px; background: none; border: 0; color: inherit; cursor: pointer; display: grid; place-items: center; }
.stepper input { width: 56px; min-height: 48px; text-align: center; padding: 0; background: none; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ficha-btn { width: 100%; }
.ficha-wa { margin-top: 10px; }
.ficha-enlaces { margin-top: 14px; color: var(--muted); max-width: none; }
.ficha .precios { margin-top: 28px; max-width: none; }
.ficha .precios caption { text-align: left; font-weight: 500; padding-bottom: 8px; }
.ficha-promo { margin-top: 20px; padding: 16px 18px; background: var(--surface); }
.ficha-promo p { max-width: none; font-size: var(--step-small); }
.ficha-abajo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 6vw, 96px); align-items: start; }
.ficha-abajo h2 { font-size: var(--step-lead); margin-bottom: 16px; }
.ficha-desc-texto p + p { margin-top: 0.9em; }
.ficha-desc-texto.is-colapsado, .specs.is-colapsado { max-height: 190px; overflow: hidden; }
.specs { width: 100%; border-collapse: collapse; font-size: var(--step-small); }
.specs th, .specs td { text-align: left; padding: 9px 12px; vertical-align: top; }
.specs tr:nth-child(odd) th, .specs tr:nth-child(odd) td { background: var(--surface); }
.specs th { font-weight: 500; width: 42%; }
.specs td { color: var(--muted); }
[data-colapsar-boton] { margin-top: 12px; font-size: var(--step-small); }
.ficha-relacionados { margin-top: clamp(48px, 6vw, 96px); }
@media (max-width: 900px) { .ficha-cuerpo { grid-template-columns: 1fr; } .galeria { position: static; } .ficha-abajo { grid-template-columns: 1fr; } .ficha-agregar { grid-template-columns: auto 1fr; } .ficha-agregar .ficha-btn { grid-column: 1 / -1; } }

/* Fila de ofertas del inicio */
.ofertas-fila { margin-top: clamp(96px, 11vw, 176px); padding: 0 var(--margin); }
.ofertas-fila .rejilla-tarjetas { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.linea-antes { color: var(--muted); font-weight: 400; font-size: var(--step-small); margin-right: 4px; }

/* Mapa con consentimiento */
.mapa-consentimiento { display: grid; place-items: center; }
.mapa-aviso { max-width: 48ch; padding: 24px; display: grid; gap: 16px; justify-items: start; }
.mapa-aviso p { max-width: none; }


/* ===== Inicio centrado en productos ===== */
.promo { padding: var(--marco) var(--margin) 0; }
.promo-banda { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: clamp(18px, 2.5vw, 28px) clamp(20px, 3vw, 40px); background: var(--accent); color: var(--accent-ink); text-decoration: none; transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .promo-banda:hover { background: var(--accent-fuerte); } }
.promo-texto { display: grid; gap: 4px; }
.promo-texto strong { font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1.05; }
.promo-texto span { font-size: var(--step-body); opacity: 0.92; max-width: 60ch; }
.promo-vigencia { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; padding: 10px 16px; background: var(--accent-ink); color: var(--accent); }
.promo-vigencia .ico { width: 1em; height: 1em; }
.promo-legal { margin-top: 8px; font-size: var(--step-small); color: var(--muted); max-width: none; }
.inicio-tienda { padding-top: clamp(16px, 2.5vw, 28px); }
.inicio-h1 { font-family: var(--font-text); font-weight: 400; font-size: var(--step-body); color: var(--muted); max-width: none !important; letter-spacing: 0.04em; line-height: 1.4; }
.inicio-bloque { margin-top: clamp(40px, 5vw, 72px); }
.inicio-bloque h2 { font-size: var(--step-head); }
.conteo-suave { color: var(--muted); font-family: var(--font-text); font-weight: 400; font-size: var(--step-body); }
.inicio-tienda .categorias-rejilla { margin-top: 24px; }
.pasos-banda .pasos-lista { margin-top: 24px; }
.pasos-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pasos-cuatro li { min-height: 0; }
@media (max-width: 900px) { .pasos-cuatro { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pasos-cuatro { grid-template-columns: 1fr; } }
.conoce { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--marco); background: var(--surface); align-items: center; }
.conoce-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.conoce-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .conoce-foto:hover img { transform: scale(1.04); } }
.conoce-texto { padding: clamp(24px, 4vw, 48px); }
.conoce-texto p { margin-top: 14px; max-width: 46ch; }
.conoce-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px !important; }
@media (max-width: 760px) { .conoce { grid-template-columns: 1fr; } }