/* Peptimed Lab - tienda. Paleta y tipografías del PDF del cliente, en OKLCH. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/inter-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(../fonts/playfair-display-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500 700;
  font-display: swap;
  src: url(../fonts/playfair-display-italic.woff2) format('woff2');
}

:root {
  /* Marca (PDF): negro #0B0B0B, dorado #C9A24B, dorado claro #E6C877, marfil #F5F1E6, carbón #2A2A2A */
  --negro: oklch(15% 0 0);
  --negro-2: oklch(19.5% 0.004 85);
  --negro-3: oklch(24% 0.006 85);
  --oro: oklch(73.1% 0.115 85);
  --oro-claro: oklch(84.1% 0.106 89.7);
  --oro-tinta: oklch(49.3% 0.093 84.1);
  --marfil: oklch(95.8% 0.015 90.2);
  --marfil-2: oklch(92.6% 0.02 89);
  --blanco: oklch(100% 0 0);
  --carbon: oklch(28.5% 0 0);
  --suave: oklch(46.9% 0.014 84.6);
  --suave-osc: oklch(76.5% 0.024 87.2);
  --linea: oklch(89.5% 0.028 88.8);
  --linea-osc: oklch(73.1% 0.115 85 / 0.28);
  --error: oklch(50.1% 0.178 28.7);
  --foto: oklch(90.5% 0.006 290);

  --f-display: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;

  --sombra: 0 10px 28px -12px oklch(15% 0 0 / 0.35);
  --sombra-alta: 0 22px 48px -18px oklch(15% 0 0 / 0.55);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 140ms;
  --t-ui: 200ms;
  --t-panel: 280ms;

  --z-header: 20;
  --z-float: 30;
  --z-velo: 40;
  --z-panel: 50;
  --z-toast: 60;
  --z-aviso: 70;
  --z-salto: 80;

  --borde-x: clamp(16px, 4.5vw, 40px);
  --ancho: 1200px;
  --sec-y: clamp(52px, 7vw, 104px);
  --header-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 960px) {
  :root { --header-h: 74px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
html.bloqueo { overflow: hidden; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--carbon);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { flex: none; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--foco, var(--oro-tinta));
  outline-offset: 3px;
  border-radius: 4px;
}
.osc, .osc-2 { --foco: var(--oro); }

.salto {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: var(--z-salto);
  background: var(--oro);
  color: var(--negro);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-ui) var(--ease-out);
}
.salto:focus { transform: translateY(72px); }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--borde-x);
}

/* Superficies */
.osc { background: var(--negro); color: var(--marfil); }
.osc-2 { background: var(--negro-2); color: var(--marfil); }
.marfil { background: var(--marfil); color: var(--carbon); }
.blanco { background: var(--blanco); color: var(--carbon); }

.seccion { padding-block: var(--sec-y); }
.cab-sec {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(22px, 3.2vw, 36px);
}
.cab-sec h2 { font-size: clamp(1.85rem, 2.4vw + 1.1rem, 2.9rem); }
.cab-sec p { color: var(--suave); max-width: 52ch; margin-top: 10px; }
.osc .cab-sec p, .osc-2 .cab-sec p { color: var(--suave-osc); }
.enlace-sec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--oro-tinta);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.osc .enlace-sec { color: var(--oro-claro); }

/* Botones */
.btn {
  --alto: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--alto);
  padding: 0 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease, color var(--t-ui) ease, border-color var(--t-ui) ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 20px; height: 20px; }
.btn-primario { background: var(--oro); color: var(--negro); }
.btn-secundario { border-color: var(--oro-tinta); color: var(--oro-tinta); }
.osc .btn-secundario, .osc-2 .btn-secundario { border-color: var(--oro); color: var(--oro-claro); }
.btn-oscuro { background: var(--negro); color: var(--marfil); }
.btn-chico { --alto: 44px; padding: 0 16px; font-size: 0.92rem; }
.btn-ancho { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-primario:hover { background: var(--oro-claro); }
  .btn-secundario:hover { background: oklch(73.1% 0.115 85 / 0.12); }
  .btn-oscuro:hover { background: var(--negro-3); }
}

.icono { width: 22px; height: 22px; }

/* Cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--negro);
  color: var(--marfil);
  border-bottom: 1px solid var(--linea-osc);
}
.cabecera .contenedor {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
  min-height: 44px;
}
.marca img { width: 36px; height: 40px; border-radius: 8px; }
.marca span {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  color: var(--oro-claro);
}
.nav { display: none; }
.nav a {
  position: relative;
  text-decoration: none;
  color: var(--suave-osc);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 10px 2px;
  transition: color var(--t-ui) ease;
}
.nav a[aria-current='page'] { color: var(--oro-claro); }
.nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--oro);
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--marfil); } }

.cab-wa { display: none; }
.btn-icono {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  border: 1px solid var(--linea-osc);
  background: none;
  color: var(--oro-claro);
  transition: transform var(--t-press) var(--ease-out), border-color var(--t-ui) ease;
}
.btn-icono:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .btn-icono:hover { border-color: var(--oro); } }
.contador {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 11px;
  background: var(--oro);
  color: var(--negro);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: transform var(--t-ui) var(--ease-out);
}
.contador[data-vacio='true'] { display: none; }
.contador.pulso { animation: pulso 260ms var(--ease-out); }
@keyframes pulso { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

@media (min-width: 960px) {
  .nav { display: flex; gap: 26px; margin-right: 8px; }
  .cab-wa { display: inline-flex; }
  .btn-menu { display: none; }
  .marca img { width: 40px; height: 44px; }
  .marca span { font-size: 1.22rem; }
}
/* Con seis enlaces, entre 960 y 1099 px el botón de WhatsApp queda solo con el icono. */
@media (min-width: 960px) and (max-width: 1099px) {
  .nav { gap: 18px; }
  .cab-wa { padding: 0 12px; }
  .cab-wa-txt { display: none; }
}

/* Menú móvil */
.menu {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: var(--z-panel);
  background: var(--negro-2);
  color: var(--marfil);
  border-bottom: 1px solid var(--linea-osc);
  padding: 10px var(--borde-x) calc(22px + var(--safe-b));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui);
}
.menu.abierto { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.menu nav { display: grid; }
.menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid oklch(73.1% 0.115 85 / 0.16);
}
.menu nav a[aria-current='page'] { color: var(--oro-claro); }
.menu .btn { margin-top: 18px; }
.menu-datos { margin-top: 16px; color: var(--suave-osc); font-size: 0.92rem; }

.velo {
  position: fixed;
  inset: 0;
  z-index: var(--z-velo);
  background: oklch(15% 0 0 / 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-panel) ease, visibility 0s linear var(--t-panel);
}
.velo.visible { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(76svh, 700px);
  display: flex;
  align-items: flex-start;
}
.hero picture, .hero picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.hero picture img { object-fit: cover; object-position: 60% 100%; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, oklch(15% 0 0 / 0.86) 0%, oklch(15% 0 0 / 0.55) 42%, oklch(15% 0 0 / 0.05) 70%, oklch(15% 0 0 / 0.4) 100%);
}
.hero-texto { padding-block: clamp(30px, 6vw, 72px) 40px; max-width: 560px; }
.hero .btn-secundario { background: oklch(15% 0 0 / 0.62); }
.hero .hero-acciones .btn { flex: 1 1 auto; padding: 0 18px; }
@media (min-width: 480px) { .hero .hero-acciones .btn { flex: 0 0 auto; } }
.solo-ancho { display: none; }
@media (min-width: 480px) { .solo-ancho { display: inline; } }
.hero h1 { display: grid; gap: 8px; }
.h1-marca {
  font-size: clamp(2.7rem, 7.5vw + 0.8rem, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--marfil);
}
.h1-sub {
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.25rem, 2vw + 0.8rem, 2rem);
  letter-spacing: 0;
  color: var(--oro-claro);
}
.hero-lede { margin-top: 16px; font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem); color: oklch(92% 0.015 90); max-width: 40ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

@media (min-width: 760px) {
  .hero { align-items: center; min-height: min(78vh, 720px); }
  .hero picture img { object-position: 80% 50%; }
  .hero::before { background: linear-gradient(90deg, oklch(15% 0 0 / 0.94) 0%, oklch(15% 0 0 / 0.72) 38%, oklch(15% 0 0 / 0.08) 66%, transparent 100%); }
  .hero-texto { padding-block: 64px; }
}

/* Barra de confianza (dorado, PDF) */
.confianza { background: var(--oro); color: var(--negro); }
.confianza ul {
  list-style: none;
  margin: 0;
  padding: 14px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.confianza li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.confianza li > a { flex: 1; display: flex; align-items: inherit; justify-content: inherit; flex-direction: inherit; gap: inherit; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
.confianza li > a span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.confianza svg { width: 22px; height: 22px; margin-top: 1px; }
.confianza strong { display: block; font-size: 0.84rem; line-height: 1.25; }
.confianza span { display: block; font-size: 0.78rem; line-height: 1.3; color: oklch(24% 0.02 80); }
@media (max-width: 479px) {
  .confianza li { flex-direction: column; gap: 4px; }
}
@media (min-width: 760px) {
  .confianza ul { padding: 18px 0; gap: 24px; }
  .confianza li { align-items: center; justify-content: center; }
  .confianza strong { font-size: 0.98rem; }
  .confianza span { font-size: 0.9rem; }
  .confianza svg { width: 28px; height: 28px; }
}

/* Riel horizontal (móvil) que pasa a grilla */
.riel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(212px, 62%);
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--borde-x);
  padding-inline: var(--borde-x);
  margin-inline: calc(var(--borde-x) * -1);
  padding-bottom: 6px;
  scrollbar-width: none;
}
.riel::-webkit-scrollbar { display: none; }
.riel > * { scroll-snap-align: start; }
@media (min-width: 760px) {
  .riel { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .riel.combos-riel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .riel { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .riel.combos-riel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .riel .pcard h3 { font-size: 1.12rem; }
}
.riel.combos-riel { grid-auto-columns: minmax(268px, 84%); }

/* Tarjeta de producto */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid oklch(73.1% 0.115 85 / 0.45);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--carbon);
  transition: border-color var(--t-ui) ease;
}
.pcard-media {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--foto);
  overflow: hidden;
}
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms var(--ease-out); }
.pcard-cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.pcard h3 { font-size: 1.22rem; }
.pcard h3 a { text-decoration: none; }
.pcard h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pcard-meta { font-size: 0.84rem; color: var(--suave); line-height: 1.35; }
.pcard-lote { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oro-tinta); font-variant-numeric: lining-nums; }
.pcard-precio { margin-top: auto; padding-top: 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.precio { font-weight: 700; font-size: 1.12rem; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; }
.mg { font-family: var(--f-texto); font-size: 0.8rem; font-weight: 600; letter-spacing: 0; color: var(--oro-tinta); white-space: nowrap; }
.pcard .btn { position: relative; z-index: 2; margin-top: 10px; }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover { border-color: oklch(73.1% 0.115 85 / 0.7); }
  .pcard:hover .pcard-media img { transform: scale(1.035); }
}

/* Tarjeta de combo */
.ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid oklch(73.1% 0.115 85 / 0.45);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--carbon);
}
.ccard-media { aspect-ratio: 760 / 660; background: var(--foto); }
.ccard-media img { width: 100%; height: 100%; object-fit: cover; }
.ccard-cuerpo { display: grid; gap: 4px; padding: 14px 16px 16px; }
.ccard h3 { font-size: 1.2rem; }
.ccard-mg { font-size: 0.84rem; color: var(--suave); }
.ccard-precios { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 8px; }
.ccard-precios .precio { font-size: 1.35rem; }
.tachado { color: var(--suave); text-decoration: line-through; text-decoration-color: oklch(46.9% 0.014 84.6 / 0.6); font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.ahorro {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--oro-claro);
  color: var(--negro);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ccard .btn { margin-top: 12px; }

/* Calculadora */
.calc { display: grid; gap: 22px; }
.calc-pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  counter-reset: paso;
}
.calc-pasos li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--suave-osc); line-height: 1.35; }
.calc-pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--oro);
  color: var(--oro-claro);
  font-size: 0.8rem;
  font-weight: 700;
}
.calc-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-osc); }
.calc-fila {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea-osc);
}
.calc-fila img { width: 52px; height: 65px; object-fit: cover; border-radius: var(--r-sm); background: var(--foto); }
.calc-nombre { font-weight: 600; color: var(--marfil); }
.calc-nombre small { display: block; font-weight: 500; color: var(--suave-osc); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.paso-cant {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linea-osc);
  border-radius: var(--r-md);
}
.paso-cant button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--oro-claro);
  border-radius: var(--r-md);
  transition: transform var(--t-press) var(--ease-out);
}
.paso-cant button:active { transform: scale(0.92); }
.paso-cant button[disabled] { color: oklch(76.5% 0.024 87.2 / 0.35); cursor: not-allowed; transform: none; }
.paso-cant output { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.claro .paso-cant, .marfil .paso-cant, .blanco .paso-cant, .panel .paso-cant { border-color: var(--linea); }
.marfil .paso-cant button, .blanco .paso-cant button, .panel .paso-cant button { color: var(--oro-tinta); }
.marfil .paso-cant button[disabled], .blanco .paso-cant button[disabled], .panel .paso-cant button[disabled] { color: oklch(46.9% 0.014 84.6 / 0.35); }

.resumen {
  border: 1px solid var(--linea-osc);
  border-radius: var(--r-lg);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
  background: var(--negro-2);
}
.resumen-lineas { display: grid; gap: 10px; }
.resumen-linea { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; color: var(--suave-osc); }
.resumen-linea.descuento { color: var(--oro-claro); font-weight: 600; }
.resumen-linea.total { color: var(--marfil); font-size: 1.15rem; font-weight: 700; padding-top: 10px; border-top: 1px solid var(--linea-osc); }
.resumen-linea.total strong { font-family: var(--f-display); font-size: 1.7rem; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
.resumen-nota { font-size: 0.86rem; color: var(--suave-osc); }
.pista {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px dashed var(--linea-osc);
  color: var(--oro-claro);
}
.pista svg { width: 20px; height: 20px; margin-top: 1px; }
.desbloqueo { animation: desbloqueo 280ms var(--ease-out); }
@keyframes desbloqueo {
  0% { opacity: 0; transform: translateY(6px); background-color: oklch(73.1% 0.115 85 / 0.3); }
  100% { opacity: 1; transform: none; background-color: transparent; }
}
@media (min-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr); gap: 40px; align-items: start; }
  .calc-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1 / -1; }
  .resumen { position: sticky; top: calc(var(--header-h) + 20px); padding: 24px; }
}

/* Qué es cada péptido (pestañas) */
.pestanas {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-inline: calc(var(--borde-x) * -1);
  padding-inline: var(--borde-x);
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--blanco);
  color: var(--carbon);
  font-weight: 600;
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, border-color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.pestanas button:active { transform: scale(0.97); }
.pestanas button[aria-selected='true'] { background: var(--negro); color: var(--oro-claro); border-color: var(--negro); }
.ficha-pep {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-areas: 'foto cab' 'txt txt';
  gap: 16px 16px;
  align-items: center;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-xl);
  padding: 16px;
}
.ficha-pep-foto { grid-area: foto; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--foto); }
.ficha-pep-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-pep-cab { grid-area: cab; }
.ficha-pep-txt { grid-area: txt; }
.ficha-pep h3 { font-size: clamp(1.55rem, 2vw + 1rem, 2.3rem); }
.ficha-pep .clase { margin-top: 6px; color: var(--oro-tinta); font-weight: 600; line-height: 1.35; }
.ficha-pep .resumen-txt { max-width: 62ch; }
.investiga { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.investiga li { display: flex; gap: 10px; align-items: flex-start; }
.investiga svg { width: 20px; height: 20px; color: var(--oro-tinta); margin-top: 2px; }
.ficha-pep-pie { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
@media (min-width: 760px) {
  .ficha-pep { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: 'foto cab' 'foto txt'; grid-template-rows: auto 1fr; padding: 26px; gap: 14px 36px; align-items: start; }
  .ficha-pep-foto { border-radius: var(--r-lg); }
}
.titulo-chico { font-family: var(--f-texto); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); margin-top: 18px; }

/* Placa tipo etiqueta de lote */
.placa {
  border: 1px solid oklch(49.3% 0.093 84.1 / 0.55);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--blanco);
}
.placa-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
.placa-cab strong { font-family: var(--f-display); font-size: 1.25rem; }
.placa-cab span { font-weight: 700; color: var(--oro-tinta); font-variant-numeric: tabular-nums; }
.placa dl { margin: 0; display: grid; }
.placa dl div { display: grid; grid-template-columns: minmax(0, 9rem) 1fr; column-gap: 16px; padding: 11px 16px; border-bottom: 1px solid var(--linea); }
.placa dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--suave); padding-top: 2px; }
.placa dd { margin: 0; font-size: 0.95rem; }
.placa-pie {
  background: var(--negro);
  color: var(--oro-claro);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 12px;
}

/* Sobre */
.sobre {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-areas: 'foto cab' 'txt txt';
  gap: 20px 18px;
  align-items: center;
}
.sobre-foto { grid-area: foto; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 372 / 520; background: var(--marfil-2); }
.sobre-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.sobre-cab { grid-area: cab; }
.sobre-txt { grid-area: txt; }
.sobre h2 { font-size: clamp(1.75rem, 2.4vw + 1.1rem, 2.9rem); }
.sobre .cita { margin-top: 8px; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--oro-tinta); }
.sobre-txt p { max-width: 58ch; }
.sobre-txt p + p { margin-top: 12px; }
.sobre .enlace-sec { margin-top: 20px; }
@media (min-width: 760px) {
  .sobre { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); grid-template-areas: 'foto cab' 'foto txt'; grid-template-rows: auto 1fr; gap: 18px 64px; align-items: start; }
  .sobre-foto { border-radius: var(--r-xl); max-height: 480px; }
  .sobre-cab { align-self: end; }
}

/* Testimonios (solo si hay reales) */
.testimonios { display: grid; gap: 14px; }
.testimonio { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 20px; }
.testimonio blockquote { margin: 0; font-size: 1.02rem; }
.testimonio figcaption { margin-top: 12px; font-weight: 600; color: var(--suave); font-size: 0.9rem; }
@media (min-width: 760px) { .testimonios { grid-template-columns: repeat(3, 1fr); } }

/* Preguntas frecuentes */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq details:first-of-type { border-top: 1px solid var(--linea); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 12px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; color: var(--oro-tinta); transition: transform var(--t-ui) var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; max-width: 64ch; color: var(--carbon); }

/* Llamado final */
.final { text-align: left; }
.final-caja { display: grid; gap: 18px; align-items: center; }
.final h2 { font-size: clamp(2rem, 3vw + 1.1rem, 3.3rem); color: var(--marfil); }
.final p { color: var(--suave-osc); max-width: 52ch; margin-top: 12px; }
.final .hero-acciones { margin-top: 6px; }
@media (min-width: 900px) { .final-caja { grid-template-columns: 1.2fr auto; gap: 40px; } }

/* Pie */
.pie { background: var(--negro); color: var(--suave-osc); border-top: 1px solid var(--linea-osc); padding-block: 48px calc(32px + var(--safe-b)); font-size: 0.93rem; }
.pie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.pie-marca, .pie-contacto { grid-column: 1 / -1; }
.pie-marca img { width: 52px; height: 57px; border-radius: 10px; }
.pie-marca strong { display: block; margin-top: 12px; font-family: var(--f-display); font-size: 1.35rem; color: var(--oro-claro); }
.pie-marca p { margin-top: 6px; }
.pie h2 { font-family: var(--f-texto); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oro); margin-bottom: 12px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pie a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--marfil); }
.pie a svg { width: 18px; height: 18px; color: var(--oro); }
@media (hover: hover) and (pointer: fine) { .pie a:hover { color: var(--oro-claro); } }
.pie-legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--linea-osc); display: grid; gap: 8px; font-size: 0.84rem; }
@media (min-width: 760px) {
  .pie-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 36px; }
  .pie-marca, .pie-contacto { grid-column: auto; }
}

/* Flotantes: WhatsApp y barra de pedido (móvil) */
.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: calc(16px + var(--safe-b));
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--oro);
  color: var(--negro);
  box-shadow: var(--sombra-alta);
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) var(--ease-out), visibility 0s linear 0s;
}
.wa-flotante svg { width: 28px; height: 28px; }
.wa-flotante:active { transform: scale(0.94); }
body.con-toast .wa-flotante,
.wa-flotante.en-hero { opacity: 0; transform: translateY(14px) scale(0.96); visibility: hidden; pointer-events: none; transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui); }
.barra-pedido {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-float);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--borde-x) calc(10px + var(--safe-b));
  background: var(--negro);
  color: var(--marfil);
  border-top: 1px solid var(--linea-osc);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--t-panel) var(--ease-drawer), visibility 0s linear var(--t-panel);
}
.barra-pedido.visible { transform: none; visibility: visible; transition-delay: 0s; }
.barra-pedido-info { min-width: 0; flex: 1; line-height: 1.25; }
.barra-pedido-info small { display: block; color: var(--suave-osc); font-size: 0.8rem; }
.barra-pedido-info strong { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
body.con-barra .wa-flotante { bottom: calc(84px + var(--safe-b)); }
body.con-barra { padding-bottom: calc(70px + var(--safe-b)); }
@media (min-width: 960px) {
  .barra-pedido { display: none; }
  body.con-barra { padding-bottom: 0; }
  body.con-barra .wa-flotante { bottom: calc(24px + var(--safe-b)); }
  .wa-flotante { right: 24px; bottom: calc(24px + var(--safe-b)); }
}

/* Panel del carrito */
.panel {
  position: fixed;
  z-index: var(--z-panel);
  left: 0;
  right: 0;
  bottom: 0;
  height: min(92dvh, 820px);
  display: flex;
  flex-direction: column;
  background: var(--marfil);
  color: var(--carbon);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sombra-alta);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--t-panel) var(--ease-drawer), visibility 0s linear var(--t-panel);
}
.panel.abierto { transform: none; visibility: visible; transition-delay: 0s; }
.panel-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px var(--borde-x) 14px;
  border-bottom: 1px solid var(--linea);
}
.panel-cab h2 { font-size: 1.45rem; margin-right: auto; }
.panel-cab .btn-icono { color: var(--carbon); border-color: var(--linea); }
.panel-agarre { position: absolute; top: 7px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 4px; background: oklch(46.9% 0.014 84.6 / 0.3); }
.panel-paso { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px var(--borde-x) 18px; }
.panel .vacio h3 { font-size: 1.5rem; }
.panel-pie { border-top: 1px solid var(--linea); padding: 14px var(--borde-x) calc(14px + var(--safe-b)); background: var(--blanco); display: grid; gap: 10px; }
.panel .resumen { background: none; border: 0; padding: 0; gap: 6px; }
.panel .resumen-linea { color: var(--suave); }
.panel .resumen-linea.descuento { color: var(--oro-tinta); }
.panel .resumen-linea.total { color: var(--carbon); border-top-color: var(--linea); }
.panel .resumen-nota { color: var(--suave); }
.panel .pista { color: var(--oro-tinta); border-color: oklch(49.3% 0.093 84.1 / 0.4); }
.pasos-panel { display: flex; gap: 6px; padding: 0 var(--borde-x) 12px; font-size: 0.78rem; font-weight: 600; color: var(--suave); }
.pasos-panel span { flex: 1; padding-top: 8px; border-top: 2px solid var(--linea); }
.pasos-panel span[aria-current='step'] { color: var(--carbon); border-top-color: var(--oro); }

.item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea);
}
.item img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--r-sm); background: var(--foto); }
.item-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.item-nombre { font-weight: 600; }
.item-nombre small { display: block; font-weight: 500; color: var(--suave); font-size: 0.84rem; }
.item-acciones { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.quitar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--suave); font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .quitar:hover { color: var(--error); } }

.vacio { text-align: center; padding: 40px 10px; display: grid; gap: 14px; justify-items: center; }
.vacio > svg { width: 48px; height: 48px; color: var(--oro-tinta); }
.vacio p { color: var(--suave); max-width: 32ch; }

@media (min-width: 720px) {
  .panel {
    left: auto;
    top: 0;
    width: min(460px, 100vw);
    height: 100dvh;
    border-radius: 0;
    transform: translateX(100%);
  }
  .panel-agarre { display: none; }
}

/* Formularios */
.campos { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo label, .campo .etiqueta { font-weight: 600; font-size: 0.93rem; }
.campo label .opcional { font-weight: 500; color: var(--suave); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid oklch(46.9% 0.014 84.6 / 0.45);
  background: var(--blanco);
  color: var(--carbon);
  font-size: 16px;
  transition: border-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: oklch(46.9% 0.014 84.6 / 0.85); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--oro-tinta); box-shadow: 0 0 0 3px oklch(73.1% 0.115 85 / 0.35); }
.campo [aria-invalid='true'] { border-color: var(--error); }
.campo .ayuda { font-size: 0.82rem; color: var(--suave); }
.campo .error-txt { display: flex; gap: 6px; align-items: flex-start; font-size: 0.85rem; color: var(--error); font-weight: 500; }
.campo .error-txt svg { width: 16px; height: 16px; margin-top: 2px; }
.dos-col { display: grid; gap: 14px; }
@media (min-width: 560px) { .dos-col { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; line-height: 1.45; }
fieldset.campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.pago legend { padding: 0; margin-bottom: 8px; }
.pago-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pago-opcion {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--blanco);
  cursor: pointer;
  transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease;
}
.pago-opcion input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--oro-tinta); flex: none; }
.pago-opcion strong { display: block; font-size: 0.95rem; }
.pago-opcion small { display: block; margin-top: 2px; font-size: 0.82rem; line-height: 1.35; color: var(--suave); }
.pago-opcion:has(input:checked) { border-color: var(--oro-tinta); background: oklch(84.1% 0.106 89.7 / 0.25); }
.pago:has([aria-invalid='true']) .pago-opcion { border-color: var(--error); }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--oro-tinta); flex: none; }
.check a { color: var(--oro-tinta); }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + var(--safe-b));
  z-index: var(--z-toast);
  width: min(420px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-radius: var(--r-lg);
  background: var(--negro-2);
  color: var(--marfil);
  border: 1px solid var(--linea-osc);
  box-shadow: var(--sombra-alta);
  transform: translate(-50%, 16px);
  opacity: 0;
  visibility: hidden;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out), visibility 0s linear 220ms;
}
.toast.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.toast svg { width: 22px; height: 22px; color: var(--oro); }
.toast p { flex: 1; font-size: 0.93rem; line-height: 1.35; }
.toast .btn { --alto: 40px; padding: 0 14px; }
body.con-barra .toast { bottom: calc(84px + var(--safe-b)); }
@media (max-width: 959px) { body.con-barra .toast .btn { display: none; } }

/* Aviso al entrar */
.aviso {
  position: fixed;
  inset: 0;
  z-index: var(--z-aviso);
  display: grid;
  place-items: center;
  padding: 16px;
  background: oklch(15% 0 0 / 0.86);
}
.aviso-caja {
  width: min(480px, 100%);
  background: var(--negro-2);
  color: var(--marfil);
  border: 1px solid var(--linea-osc);
  border-radius: var(--r-xl);
  padding: 26px 22px 22px;
  display: grid;
  gap: 14px;
  box-shadow: var(--sombra-alta);
  animation: aparecer 260ms var(--ease-out);
}
.aviso-caja img { width: 56px; height: 56px; border-radius: 12px; }
.aviso-caja h2 { font-size: 1.7rem; color: var(--oro-claro); }
.aviso-caja p { color: oklch(90% 0.015 90); font-size: 0.97rem; }
.aviso-caja .btn { margin-top: 6px; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Páginas internas */
.cab-pagina { padding-block: clamp(30px, 5vw, 64px) clamp(26px, 4vw, 48px); border-bottom: 1px solid var(--linea-osc); }
.cab-pagina h1 { font-size: clamp(2.3rem, 4vw + 1.2rem, 4rem); color: var(--marfil); }
.cab-pagina p { margin-top: 12px; color: var(--suave-osc); max-width: 58ch; font-size: 1.05rem; }
.migas { font-size: 0.86rem; color: var(--suave-osc); margin-bottom: 14px; }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.migas li + li::before { content: '/'; margin-right: 6px; color: oklch(76.5% 0.024 87.2 / 0.5); }
.migas a { color: var(--oro-claro); text-decoration: none; }
.migas.claro { color: var(--suave); }
.migas.claro a { color: var(--oro-tinta); }

/* Catálogo */
.herramientas { display: grid; gap: 14px; margin-bottom: 24px; }
.buscador { position: relative; }
.buscador svg { position: absolute; left: 14px; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: var(--suave); pointer-events: none; }
.buscador input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px 0 44px;
  border-radius: var(--r-md);
  border: 1px solid oklch(46.9% 0.014 84.6 / 0.45);
  background: var(--blanco);
  font-size: 16px;
}
.buscador input:focus-visible { outline: none; border-color: var(--oro-tinta); box-shadow: 0 0 0 3px oklch(73.1% 0.115 85 / 0.35); }
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.buscador input { padding-right: 48px; }
.limpiar {
  position: absolute;
  right: 3px;
  top: 50%;
  margin-top: -22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--oro-tinta);
}
.limpiar svg { position: static; margin: 0; width: 18px; height: 18px; color: currentColor; }
.filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--borde-x) * -1); padding-inline: var(--borde-x); }
.filtros::-webkit-scrollbar { display: none; }
.filtros button {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--blanco);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out);
}
.filtros button:active { transform: scale(0.97); }
.filtros button[aria-pressed='true'] { background: var(--negro); color: var(--oro-claro); border-color: var(--negro); }
@media (min-width: 760px) { .herramientas { grid-template-columns: minmax(260px, 380px) 1fr; align-items: center; } .filtros { margin: 0; padding: 0; } }

.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 400px) {
  .grilla .pcard-cuerpo { padding: 10px 10px 12px; }
  .grilla .pcard h3 { font-size: 1.08rem; }
  .grilla .precio { font-size: 1.02rem; }
}
.grilla-combos { display: grid; gap: 14px; }
@media (min-width: 640px) { .grilla-combos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grilla-combos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.sin-resultados { padding: 30px 0; color: var(--suave); }
.subtitulo { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem); margin: 44px 0 8px; }
.subtitulo + p { color: var(--suave); margin-bottom: 20px; max-width: 58ch; }

/* Ficha de producto */
.producto { display: grid; gap: 26px; }
.producto-foto {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  /* mismo degradado vertical del fondo de las fotos, para que el vial no quede en una franja */
  background: linear-gradient(180deg, oklch(74.5% 0.006 280) 0%, oklch(81.5% 0.005 260) 25%, oklch(87.2% 0.005 290) 50%, oklch(90.3% 0.004 290) 75%, oklch(88.5% 0.004 290) 100%);
  max-width: 520px;
  width: 100%;
  justify-self: center;
}
.producto-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 27%, #000 73%, transparent 80%);
  mask-image: linear-gradient(90deg, transparent 20%, #000 27%, #000 73%, transparent 80%);
}
@media (min-width: 900px) {
  .producto-foto { aspect-ratio: 4 / 5; background: var(--foto); }
  .producto-foto img { object-fit: cover; -webkit-mask-image: none; mask-image: none; }
}
.producto h1 { font-size: clamp(2.3rem, 3.4vw + 1.3rem, 3.8rem); }
.producto .clase { margin-top: 8px; color: var(--oro-tinta); font-weight: 600; font-size: 1.02rem; }
.producto .resumen-txt { margin-top: 14px; max-width: 58ch; font-size: 1.04rem; }
.producto-compra { margin-top: 20px; padding: 18px; border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--blanco); display: grid; gap: 16px; }
.presentaciones { border: 0; margin: 0; padding: 0; }
.presentaciones legend { font-weight: 600; font-size: 0.93rem; margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--linea);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease;
}
.chips input:checked + span { border-color: var(--oro-tinta); background: oklch(84.1% 0.106 89.7 / 0.35); }
.chips input:focus-visible + span { outline: 2px solid var(--oro-tinta); outline-offset: 2px; }
.producto-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.producto-precio .precio { font-family: var(--f-display); font-size: 2.3rem; }
.producto-precio small { color: var(--suave); }
.compra-fila { display: flex; gap: 10px; align-items: center; }
.compra-fila .btn { flex: 1; min-width: 0; white-space: normal; line-height: 1.2; text-align: center; padding: 0 14px; }
.producto > *, .producto-detalle > *, .calc > *, .dos-bloques > *, .final-caja > *, .pie-grid > * { min-width: 0; }
.envio-nota { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--carbon); }
.envio-nota svg { width: 22px; height: 22px; color: var(--oro-tinta); }
.envio-nota small { display: block; color: var(--suave); font-size: 0.86rem; }
.producto-detalle { display: grid; gap: 26px; margin-top: 36px; }
.producto-detalle h2 { font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem); margin-bottom: 12px; }
.lista-simple { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
@media (min-width: 900px) {
  .producto { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
  .producto-foto { position: sticky; top: calc(var(--header-h) + 24px); }
  .producto-detalle { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Texto largo (calidad, nosotros, legal) */
.prosa { max-width: 70ch; }
.prosa h2 { font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem); margin: 42px 0 12px; }
.prosa h2:first-child { margin-top: 0; }
.prosa p + p { margin-top: 12px; }
.prosa ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.dos-bloques { display: grid; gap: 32px; }
@media (min-width: 900px) { .dos-bloques { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; align-items: start; } }
.lateral { display: grid; gap: 18px; }
.lateral img { border-radius: var(--r-lg); border: 1px solid var(--linea); }
.datos-contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.datos-contacto a, .datos-contacto li > span { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; }
.datos-contacto svg { width: 22px; height: 22px; color: var(--oro-tinta); }
.caja { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-lg); padding: 20px; }
.caja h2 { font-size: 1.4rem; margin-bottom: 10px; }
.horario { margin: 0; display: grid; gap: 6px; }
.horario div { display: flex; justify-content: space-between; gap: 12px; }
.horario dt { font-weight: 600; }
.horario dd { margin: 0; color: var(--suave); text-align: right; }
.posts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 64%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--borde-x) * -1); padding-inline: var(--borde-x); }
.posts::-webkit-scrollbar { display: none; }
.posts a { scroll-snap-align: start; display: block; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--linea); background: var(--blanco); }
.posts img { width: 100%; aspect-ratio: 413 / 621; object-fit: cover; }
@media (min-width: 900px) { .posts { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } }

/* Certificados COA */
.riel.coa-riel { grid-auto-columns: minmax(150px, 44%); }
@media (min-width: 760px) { .riel.coa-riel { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .riel.coa-riel { gap: 28px; } }
.coa-mini { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.coa-mini-doc {
  aspect-ratio: 480 / 679;
  margin-bottom: 10px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid oklch(73.1% 0.115 85 / 0.45);
  background: var(--blanco);
  transition: transform var(--t-ui) var(--ease-out), border-color var(--t-ui) ease;
}
.coa-mini-doc img { width: 100%; height: 100%; object-fit: cover; }
.coa-mini h3 { font-size: 1.12rem; }
.coa-mini h3 a { text-decoration: none; }
.coa-mini h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.coa-mini h3 a:focus-visible { outline: none; }
.coa-mini:has(h3 a:focus-visible) .coa-mini-doc { outline: 2px solid var(--oro-tinta); outline-offset: 3px; }
.coa-mini-pureza { font-size: 0.86rem; color: var(--suave); }
.coa-mini-pureza strong { color: var(--negro); font-variant-numeric: lining-nums tabular-nums; }
.coa-mini-pdf { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; color: var(--oro-tinta); }
.coa-mini-pdf svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .coa-mini:hover .coa-mini-doc { transform: translateY(-3px); border-color: oklch(73.1% 0.115 85 / 0.8); }
}
.coa-todos-enlace { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 18px; }
.coa-todos-enlace svg { width: 20px; height: 20px; color: var(--oro-tinta); }
.coa-todos-enlace a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--oro-tinta); text-underline-offset: 3px; }
.coa-todos-enlace span { color: var(--suave); font-size: 0.86rem; }

.coa-todos {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 16px 18px;
  padding: 18px;
  margin-bottom: clamp(22px, 3vw, 32px);
  border: 1px solid var(--linea-osc);
  border-radius: var(--r-xl);
}
.coa-todos img { border-radius: var(--r-sm); border: 1px solid oklch(73.1% 0.115 85 / 0.5); }
.coa-todos h2 { font-size: clamp(1.3rem, 1.1vw + 1rem, 1.8rem); color: var(--marfil); }
.coa-todos p { margin-top: 6px; font-size: 0.92rem; color: var(--suave-osc); max-width: 62ch; }
.coa-todos-acciones { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 760px) {
  .coa-todos { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 24px; padding: 22px 26px; }
  .coa-todos-acciones { grid-column: auto; display: flex; }
}

.coa-grilla { display: grid; gap: 16px; }
@media (min-width: 760px) { .coa-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .coa-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.coa-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-content: start;
  gap: 14px 16px;
  padding: 16px;
  background: var(--blanco);
  border: 1px solid oklch(73.1% 0.115 85 / 0.45);
  border-radius: var(--r-lg);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.coa-card-doc { display: block; align-self: start; aspect-ratio: 480 / 679; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--linea); background: var(--blanco); }
.coa-card-doc img { width: 100%; height: 100%; object-fit: cover; }
.coa-card h2 { font-size: 1.35rem; }
.coa-card-sub { margin-top: 4px; font-size: 0.84rem; line-height: 1.35; color: var(--suave); }
.coa-card-pureza { margin-top: 10px; font-size: 0.84rem; color: var(--suave); }
.coa-card-pureza strong { display: block; font-family: var(--f-display); font-size: 1.55rem; line-height: 1.1; color: var(--negro); font-variant-numeric: lining-nums tabular-nums; }
.coa-card-datos { margin: 10px 0 0; display: grid; gap: 2px; font-size: 0.84rem; }
.coa-card-datos div { display: flex; flex-wrap: wrap; gap: 0 6px; }
.coa-card-datos dt { color: var(--suave); }
.coa-card-datos dt::after { content: ':'; }
.coa-card-datos dd { margin: 0; font-weight: 600; color: var(--carbon); }
.coa-card-nota { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; font-size: 0.86rem; background: var(--marfil); border: 1px solid oklch(73.1% 0.115 85 / 0.45); border-radius: var(--r-sm); }
.coa-card-nota svg { width: 18px; height: 18px; margin-top: 1px; color: var(--oro-tinta); }
.coa-card-acciones { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coa-card-acciones .btn { padding: 0 12px; }
.coa-card-verificar {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: -6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--oro-tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.coa-card-verificar svg { width: 16px; height: 16px; }

.placa dd a { font-weight: 600; color: var(--oro-tinta); text-underline-offset: 3px; }
.coa-nota { text-decoration: none; min-height: 44px; }
.coa-nota-tit { text-decoration: underline; text-decoration-color: oklch(73.1% 0.115 85 / 0.7); text-underline-offset: 3px; }

.no-encontrado { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.no-encontrado h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4rem); color: var(--marfil); }
.no-encontrado p { color: var(--suave-osc); margin: 12px 0 22px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .menu, .panel, .toast, .barra-pedido { transition-property: opacity, visibility !important; transition-duration: 120ms !important; }
  .salto:focus { transform: none; top: 12px; }
}