:root {
  color-scheme: light;
  --ink: #11110f;
  --ink-2: #24221e;
  --paper: #f6f2ea;
  --white: #fffaf2;
  --line: rgba(17, 17, 15, 0.14);
  --muted: #6f665b;
  --gold: #b89050;
  --wine: #6f1f2c;
  --shadow: 0 24px 70px rgba(17, 17, 15, 0.16);
  --max: 1180px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Sin esto, tocar "Ver trajes" o "FAQ" dejaba el título tapado por el
     encabezado fijo (auditoría 2026-09-23). */
  scroll-padding-top: 96px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--wine));
  z-index: 80;
}

.site-header {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 60;
  width: min(calc(100% - 24px), var(--max));
  min-height: 62px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 9px 10px 9px 12px;
  border: 1px solid rgba(255, 250, 242, 0.24);
  border-radius: 8px;
  background: rgba(17, 17, 15, 0.76);
  color: var(--white);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}
.site-header.is-scrolled {
  background: rgba(17, 17, 15, 0.9);
  border-color: rgba(184, 144, 80, 0.34);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--white);
}

.brand span { display: grid; gap: 1px; }
.brand strong {
  font-family: "Playfair Display", serif;
  font-size: 1.24rem;
  letter-spacing: 0.04em;
}
.brand small {
  color: rgba(255, 250, 242, 0.72);
  font-size: 0.72rem;
}

.site-nav { display: none; }

.header-cta,
.btn,
.filter-pill,
.process-tab,
.sticky-conversion a {
  border: 0;
  border-radius: 8px;
  min-height: 44px;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.header-cta:hover,
.btn:hover,
.filter-pill:hover,
.process-tab:hover {
  transform: translateY(-2px);
}

.hero {
  position: relative;
  min-height: clamp(560px, 74svh, 760px);
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: clip;
  isolation: isolate;
  background: var(--ink);
}

.hero-bg,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-bg {
  object-fit: cover;
  object-position: 58% center;
  opacity: 0.78;
  transform: scale(1.03);
}

.hero-shade {
  z-index: 1;
  background: linear-gradient(180deg, rgba(17, 17, 15, 0.34) 0%, rgba(17, 17, 15, 0.3) 45%, rgba(17, 17, 15, 0.62) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 112px 20px;
  color: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.hero .eyebrow {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 250, 242, 0.88);
}

h1, h2, h3, p { text-wrap: pretty; }
h1, h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  line-height: 0.98;
  letter-spacing: 0;
}
h1 {
  max-width: 700px;
  font-size: clamp(2.5rem, 7vw, 5.125rem);
}
.hero h1 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}
h2 {
  max-width: 780px;
  font-size: clamp(2.25rem, 7vw, 4.55rem);
}
h3 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.18;
}

.hero-copy {
  max-width: 660px;
  margin: 22px 0 0;
  color: rgba(255, 250, 242, 0.84);
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  line-height: 1.55;
}
.hero .hero-copy {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  color: rgba(255, 250, 242, 0.74);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.hero .hero-actions {
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-top: 34px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 13px 18px;
  font-weight: 800;
}

.btn-primary {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(184, 144, 80, 0.26);
}
.btn-primary:hover { background: #c79f5d; }
.btn-secondary {
  border: 1px solid rgba(17, 17, 15, 0.18);
  background: var(--white);
  color: var(--ink);
}
.hero .btn-secondary {
  border-color: rgba(255, 250, 242, 0.38);
  background: rgba(255, 250, 242, 0.14);
  color: var(--white);
}
.btn-ghost {
  min-width: 122px;
  border: 1px solid rgba(255, 250, 242, 0.26);
  background: rgba(17, 17, 15, 0.32);
  color: var(--white);
}
.btn-compact {
  min-width: auto;
  background: var(--ink);
  color: var(--white);
}

.hero .btn-primary {
  min-width: 0;
  padding: 16px 32px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hero .btn-primary:hover { background: #c8a066; transform: translateY(-1px); }

.hero-actions .btn-text {
  min-width: 0;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(255, 250, 242, 0.4);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 250, 242, 0.92);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  box-shadow: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.hero-actions .btn-text:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.hero-fineprint {
  margin-top: 30px;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(255, 250, 242, 0.52);
}

.hero-peek {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 800;
}
.hero-peek i {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 250, 242, 0.3);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 250, 242, 0.18), rgba(255, 250, 242, 0.04));
}

.section-pad {
  width: min(calc(100% - 32px), var(--max));
  margin: 0 auto;
  padding: 74px 0;
}

.section-head {
  display: grid;
  gap: 12px;
  margin-bottom: 28px;
}
.section-head p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.occasion-panel {
  width: 100%;
  max-width: none;
  padding-inline: max(16px, calc((100% - var(--max)) / 2));
  display: grid;
  gap: 18px;
  background: #181613;
  color: var(--white);
}
.occasion-panel .section-head p:not(.eyebrow) { color: rgba(255, 250, 242, 0.72); }
.occasion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.occasion-card {
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(255, 250, 242, 0.13);
  border-radius: 8px;
  background: #24211c;
  color: var(--white);
  text-align: left;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.16);
}
.occasion-card span {
  display: block;
  margin-bottom: 20px;
  color: rgba(255, 250, 242, 0.66);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}
.occasion-card strong { font-size: 1.08rem; }
.occasion-card.is-active {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.occasion-card.is-active span { color: rgba(17, 17, 15, 0.6); }

.occasion-result {
  padding: 24px;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: #24211c;
}
.occasion-result p {
  margin: 0;
  color: rgba(255, 250, 242, 0.72);
  line-height: 1.6;
}
.occasion-result h3 {
  margin: 8px 0 10px;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-family: "Playfair Display", Georgia, serif;
  line-height: 1;
  color: var(--white);
}
.text-link {
  display: inline-flex;
  margin-top: 16px;
  color: var(--wine);
  font-weight: 900;
}
.occasion-result .text-link { color: var(--gold); }

.catalog-section {
  width: 100%;
  max-width: none;
  padding-inline: max(16px, calc((100% - var(--max)) / 2));
  background: var(--paper);
  color: var(--ink);
}
.catalog-head p:not(.eyebrow) { color: var(--muted); }
.catalog-tools {
  position: relative;
  z-index: 25;
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
}
.catalog-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}
.filter-group {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  /* min-width: 0 preventivo: es un item de un grid (.catalog-tools) y sin esto
     corre el mismo riesgo que .reserve-rail mas abajo (ver ese comentario) si
     el dia de manana se agregan mas categorias/filtros. */
  min-width: 0;
}
.filter-pill {
  flex: 0 0 auto;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-2);
  font-weight: 800;
}
.filter-pill.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.catalog-group + .catalog-group {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.catalog-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.catalog-group-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  color: var(--ink);
}
.catalog-group-head .btn-compact {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.8rem;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.product-card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  display: grid;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(17, 17, 15, 0.07);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 240ms ease;
}
.product-card:hover {
  transform: perspective(1000px) translateY(-2px) rotateX(var(--rx)) rotateY(var(--ry));
  border-color: rgba(184, 144, 80, 0.64);
  box-shadow: 0 18px 46px rgba(17, 17, 15, 0.12);
}
.product-card.is-entering {
  opacity: 0;
  transform: translateY(14px);
}
.product-media {
  position: relative;
  min-height: 290px;
  background:
    linear-gradient(135deg, rgba(184, 144, 80, 0.14), rgba(111, 31, 44, 0.1)),
    linear-gradient(160deg, var(--fabric, #efe6d8), #e4d9c4);
  overflow: hidden;
}
.product-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 250, 242, 0.18), transparent 34%);
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
  z-index: 1;
}
.product-card:hover .product-media::after { opacity: 1; }
.product-media img {
  width: 100%;
  height: 100%;
  min-height: 290px;
  object-fit: cover;
  transition: transform 450ms ease;
}
/* Dos fotos por traje (modelo + colgado, 2026-09-24): se apilan una sobre
   otra y sólo se ve la que tiene .is-active - así no hace falta abrir el
   detalle para ver la segunda. Una tarjeta sin segunda foto sólo tiene la
   imagen de siempre, con is-active puesto de entrada, y se comporta igual
   que antes. */
.product-media-img {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.product-media-img.is-active { opacity: 0.96; }
.product-card:hover .product-media-img.is-active { transform: scale(1.045); }
.product-media-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 17, 15, 0.55);
  color: var(--white);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.product-media-arrow:hover { background: rgba(17, 17, 15, 0.8); }
.product-media-arrow:active { transform: translateY(-50%) scale(0.92); }
.product-media-arrow-prev { left: 10px; }
.product-media-arrow-next { right: 10px; }
.product-media-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
}
.product-media-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 250, 242, 0.55);
}
.product-media-dot.is-active { background: var(--white); }
.image-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}
.image-fallback strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2rem;
}
.product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(17, 17, 15, 0.82);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}
.product-badge-segment {
  left: auto;
  right: 12px;
  background: rgba(184, 144, 80, 0.92);
  color: var(--ink);
}
.product-body {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.product-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.product-top p, .product-body p { margin: 0; }
.product-kind {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-name {
  margin-top: 5px;
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.55rem;
}
.product-price {
  color: var(--ink);
  font-weight: 900;
  white-space: nowrap;
  text-align: right;
}
.product-price-note {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.product-meta {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.product-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-top: 4px;
}
.product-actions .btn-detail {
  grid-column: 1 / -1;
  min-height: 40px;
  border: 1px solid var(--line);
  background: rgba(17, 17, 15, 0.03);
  color: var(--ink);
}
.catalog-empty {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 17, 15, 0.03);
}
.catalog-empty p { margin: 0; color: var(--muted); }

.benefits {
  display: grid;
  gap: 24px;
}
.benefit-visual {
  display: grid;
  place-items: center;
  min-height: 320px;
  border-radius: 8px;
  background:
    linear-gradient(140deg, rgba(111, 31, 44, 0.08), rgba(184, 144, 80, 0.15)),
    var(--white);
}
.benefit-visual img {
  width: min(42vw, 180px);
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(17, 17, 15, 0.12));
}
.benefit-visual p {
  margin: 18px 0 0;
  color: var(--muted);
  font-weight: 900;
}
.benefit-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.benefit-list article {
  padding: 18px;
  border-top: 1px solid var(--line);
  background: rgba(255, 250, 242, 0.34);
}
.benefit-list span {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--wine);
  font-weight: 900;
}
.benefit-list p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.process-system {
  display: grid;
  gap: 18px;
}
.process-rail {
  display: grid;
  gap: 16px;
  align-self: start;
}
.process-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.process-status span { color: var(--wine); }
.process-track {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 17, 15, 0.12);
}
.process-track span {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--wine), var(--gold));
  transform-origin: left center;
  transition: width 520ms cubic-bezier(.2, .8, .2, 1);
}
.process-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.process-tab {
  min-height: 66px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.72);
  color: var(--muted);
  text-align: left;
  font-weight: 900;
}
.process-tab span {
  display: block;
  margin-bottom: 9px;
  color: var(--wine);
  font-size: 0.75rem;
}
.process-tab.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}
.process-tab.is-active span { color: var(--gold); }
.process-cards {
  display: grid;
  gap: 12px;
}
.process-card {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  opacity: 0.58;
  transform: scale(0.985);
  transition: opacity 360ms ease, transform 360ms ease, border-color 360ms ease, background 360ms ease, color 360ms ease;
}
.process-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 520ms cubic-bezier(.2, .8, .2, 1);
}
.process-card span {
  display: inline-flex;
  margin-bottom: 26px;
  color: var(--wine);
  font-weight: 900;
}
.process-card h3 {
  max-width: 700px;
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 8vw, 4.2rem);
  line-height: 0.98;
}
.process-card p {
  max-width: 680px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}
.process-card small {
  display: inline-flex;
  margin-top: 28px;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}
.process-card.is-active {
  border-color: rgba(17, 17, 15, 0.4);
  background: var(--ink);
  color: var(--white);
  opacity: 1;
  transform: scale(1);
  box-shadow: var(--shadow);
}
.process-card.is-active::before { transform: scaleY(1); }
.process-card.is-active span,
.process-card.is-active small { color: var(--gold); }
.process-card.is-active p { color: rgba(255, 250, 242, 0.74); }

.trust {
  display: grid;
  gap: 18px;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.trust-strip strong,
.trust-strip span {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
.trust blockquote {
  margin: 0;
  max-width: 920px;
  color: var(--ink-2);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1.03;
}

.faq-list { display: grid; gap: 10px; }
details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
}
summary {
  cursor: pointer;
  padding: 18px;
  font-weight: 900;
}
details p {
  margin: 0;
  padding: 0 18px 18px;
  color: var(--muted);
  line-height: 1.65;
}

.final-cta {
  width: 100%;
  max-width: none;
  margin-top: 18px;
  padding: 76px max(18px, calc((100% - var(--max)) / 2));
  background: var(--wine);
  color: var(--white);
}
.final-cta p:not(.eyebrow) {
  max-width: 660px;
  color: rgba(255, 250, 242, 0.82);
  line-height: 1.65;
}

.sticky-conversion {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: calc(100% - 24px);
  padding: 8px;
  border: 1px solid rgba(255, 250, 242, 0.18);
  border-radius: 8px;
  background: rgba(17, 17, 15, 0.78);
  backdrop-filter: blur(16px);
}
.sticky-conversion a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 900;
}
.sticky-conversion a + a { background: var(--white); }

.look-dialog {
  width: min(94vw, 860px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
}
.look-dialog::backdrop {
  background: rgba(17, 17, 15, 0.72);
  backdrop-filter: blur(6px);
}
.dialog-shell {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(255, 250, 242, 0.18);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.dialog-shell h2 { font-size: clamp(2rem, 8vw, 3.2rem); }
.dialog-shell p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 1.45rem;
  line-height: 1;
}
.look-shell { grid-template-columns: 1fr; }
.product-facts {
  display: grid;
  gap: 8px;
}
.product-fact {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.product-fact span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.product-fact strong {
  color: var(--ink);
  font-weight: 800;
}
.look-shell {
  max-height: min(92vh, 900px);
  overflow: auto;
}
.detail-product {
  display: grid;
  gap: 18px;
}
.detail-product-media {
  overflow: hidden;
  min-height: 280px;
  border-radius: 8px;
  background: #ece8df;
}
.detail-product-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: contain;
}
.detail-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.detail-gallery button {
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.detail-gallery img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
}
.detail-product-copy {
  display: grid;
  align-content: start;
  gap: 10px;
}
.detail-facts {
  display: grid;
  gap: 10px;
  margin: 8px 0 0;
}
.detail-facts div {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.detail-facts dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.detail-facts dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.45;
}
.dialog-actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.social-float-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  display: grid;
  gap: 10px;
}
.social-float {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 250, 242, 0.28);
  color: var(--white);
  box-shadow: 0 14px 34px rgba(17, 17, 15, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.social-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(17, 17, 15, 0.3);
}
.social-whatsapp { background: #168b4d; }
.social-instagram { background: #6f1f2c; }
.social-float-icon {
  display: block;
  width: 21px;
  height: 21px;
  fill: currentColor;
  flex: 0 0 auto;
}

/* Reserva premium */
.reserve-page {
  background: #11110f;
}
.reserve-page .social-float-stack {
  bottom: 22px;
}
.reserve-experience {
  --reserve-dark-end: clamp(300px, 38svh, 430px);
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 12%, rgba(184, 144, 80, 0.2), transparent 28%),
    linear-gradient(
      180deg,
      #11110f 0,
      #1a1713 var(--reserve-dark-end),
      var(--paper) var(--reserve-dark-end),
      var(--paper) 100%
    );
}
.reserve-intro {
  position: relative;
  min-height: 70svh;
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
  color: var(--white);
}
.reserve-bg,
.reserve-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.reserve-bg {
  object-fit: cover;
  object-position: 58% center;
  opacity: 0.52;
  transform: scale(1.04);
}
.reserve-shade {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(17, 17, 15, 0.22), rgba(17, 17, 15, 0.94)),
    linear-gradient(90deg, rgba(17, 17, 15, 0.96), rgba(17, 17, 15, 0.44));
}
.reserve-intro-content {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 136px 18px 124px;
}
.reserve-intro h1 {
  max-width: 920px;
  font-size: clamp(3rem, 11vw, 7rem);
}
.reserve-intro p:not(.eyebrow) {
  max-width: 680px;
  margin: 22px 0 0;
  color: rgba(255, 250, 242, 0.78);
  font-size: clamp(1.04rem, 3vw, 1.28rem);
  line-height: 1.58;
}
.reserve-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.reserve-proof span {
  padding: 9px 11px;
  border: 1px solid rgba(255, 250, 242, 0.2);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.08);
  color: rgba(255, 250, 242, 0.8);
  font-size: 0.84rem;
  font-weight: 800;
}
.reserve-workspace {
  position: relative;
  z-index: 5;
  width: min(calc(100% - 28px), var(--max));
  margin: -74px auto 0;
  display: grid;
  gap: 14px;
  padding-bottom: 84px;
}
.reserve-rail,
.reserve-panel {
  /* min-width: 0 es necesario porque son items de un grid (.reserve-workspace):
     sin esto, un hijo mas angosto que quiere hacer scroll horizontal propio
     (el listado de pasos .reserve-step-list en mobile) empuja a toda la
     columna del grid a ensancharse para "entrar" - y como el sitio tambien
     fuerza overflow-x:clip en <body> en mobile (mas abajo, @media max-width:767px),
     ese sobrante no se veia como una barra para deslizar: quedaba directamente
     cortado y inalcanzable (botones de "Elegir dia de visita" / "Continuar"
     con la mitad afuera de la pantalla en un iPhone o Android comun).
  */
  min-width: 0;
  border: 1px solid rgba(255, 250, 242, 0.16);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.95);
  box-shadow: var(--shadow);
}
.reserve-rail {
  padding: 16px;
}
.reserve-track {
  margin-bottom: 14px;
  background: rgba(17, 17, 15, 0.1);
}
.reserve-step-list {
  display: grid;
  gap: 8px;
}
.reserve-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.reserve-step:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(184, 144, 80, 0.55);
}
.reserve-step:disabled {
  cursor: default;
  opacity: 0.58;
}
.reserve-step span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(17, 17, 15, 0.08);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}
.reserve-step strong {
  font-size: 0.94rem;
}
.reserve-step small {
  color: var(--muted);
  font-size: 0.78rem;
}
.reserve-step.is-active {
  border-color: rgba(184, 144, 80, 0.65);
  background: var(--ink);
  color: var(--white);
}
.reserve-step.is-active span,
.reserve-step.is-complete span {
  background: var(--gold);
  color: var(--ink);
}
.reserve-step.is-active small {
  color: rgba(255, 250, 242, 0.68);
}
.reserve-step.is-complete {
  border-color: rgba(184, 144, 80, 0.35);
}
.reserve-live-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(17, 17, 15, 0.1);
  border-radius: 8px;
  background: #fff7eb;
}
.reserve-live-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
.reserve-live-card div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(17, 17, 15, 0.08);
}
.reserve-live-card dt,
.reserve-live-card dd {
  margin: 0;
  font-size: 0.86rem;
}
.reserve-live-card dt { color: var(--muted); }
.reserve-live-card dd {
  color: var(--ink);
  font-weight: 900;
  text-align: right;
}
.reserve-panel {
  overflow: hidden;
  background: #fffaf2;
}
.reserve-panel-head {
  padding: 22px 22px 0;
}
.reserve-panel-head h2 {
  max-width: 760px;
  font-size: clamp(2rem, 6vw, 4.3rem);
}
.reserve-panel-head p:not(.eyebrow) {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.65;
}
.reserve-flow {
  padding: 22px;
}
.reserve-panel-step {
  animation: reserveStepIn 260ms ease both;
}
@keyframes reserveStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.reserve-field-grid {
  display: grid;
  gap: 14px;
}
.reserve-field-grid-three {
  grid-template-columns: 1fr;
}
.reserve-page .form-group {
  gap: 9px;
}
.reserve-page .form-group label {
  color: var(--ink);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}
.reserve-page .reserve-input,
.reserve-page .form-group input,
.reserve-page .form-group select {
  min-height: 54px;
  border-color: rgba(17, 17, 15, 0.16);
  background: #fffdf8;
  color: var(--ink);
  font-weight: 700;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.reserve-page .reserve-input:focus,
.reserve-page .form-group input:focus,
.reserve-page .form-group select:focus {
  border-color: rgba(184, 144, 80, 0.7);
  box-shadow: 0 0 0 4px rgba(184, 144, 80, 0.14);
}
.reserve-note-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.reserve-note-grid article,
.reserve-tip-box,
.reserve-page .reserve-summary,
.reserve-page .preference-card,
.reserve-system-errors,
.step-inline-message {
  border: 1px solid rgba(17, 17, 15, 0.1);
  border-radius: 8px;
  background: #fff7eb;
}
.reserve-note-grid article {
  padding: 15px;
}
.reserve-note-grid span,
.preference-title {
  display: block;
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.reserve-note-grid strong {
  display: block;
  font-size: 1.02rem;
}
.reserve-note-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}
.reserve-tip-box,
.reserve-system-errors,
.step-inline-message {
  padding: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.step-inline-message,
.reserve-system-errors,
.reserve-page .form-errors {
  border-color: rgba(139, 31, 47, 0.28);
  background: #fff0f0;
  color: #8b1f2f;
  font-weight: 800;
}
.reserve-page .detail-actions {
  margin-top: 18px;
}
.reserve-actions .btn {
  min-width: 0;
}
.time-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.time-slot {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 13px;
  border: 1px solid rgba(17, 17, 15, 0.13);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.time-slot:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 144, 80, 0.55);
}
.time-slot strong {
  font-size: 1.3rem;
  font-weight: 900;
}
.time-slot small {
  color: var(--muted);
  font-weight: 800;
}
.time-slot.is-active {
  border-color: rgba(184, 144, 80, 0.75);
  background: var(--ink);
  color: var(--white);
}
.time-slot.is-active small {
  color: rgba(255, 250, 242, 0.66);
}
.horarios-empty {
  margin: 0;
  color: var(--muted);
}
.catalog-choice-grid {
  display: grid;
  gap: 10px;
}
.catalog-choice {
  display: grid;
  gap: 6px;
  padding: 15px;
  border: 1px solid rgba(17, 17, 15, 0.14);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.catalog-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(184, 144, 80, 0.55);
}
.catalog-choice span {
  font-weight: 900;
}
.catalog-choice small {
  color: var(--muted);
  line-height: 1.45;
}
.catalog-choice.is-active {
  border-color: rgba(184, 144, 80, 0.72);
  background: var(--ink);
  color: var(--white);
}
.catalog-choice.is-active small {
  color: rgba(255, 250, 242, 0.68);
}
.reserve-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.reserve-page .preferences-stack {
  gap: 12px;
  margin-top: 14px;
  padding-right: 4px;
}
.reserve-page .preference-card {
  display: grid;
  gap: 12px;
  padding: 15px;
}
.reserve-page .reserve-summary {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
}
.reserve-page .reserve-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(17, 17, 15, 0.08);
}
.reserve-page .reserve-summary div:last-child {
  border-bottom: 0;
}
.reserve-page .reserve-summary strong {
  color: var(--muted);
}
.reserve-page .reserve-summary span {
  color: var(--ink);
  font-weight: 900;
  text-align: right;
}
.summary-ambos p {
  margin: 0;
}
.summary-preference-item {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font-weight: 800;
}
.confirm-experience {
  min-height: 100vh;
}
.confirm-intro {
  min-height: 58svh;
}
.confirm-intro .reserve-intro-content {
  padding-bottom: 108px;
}
.confirm-shell {
  width: min(calc(100% - 28px), 900px);
  margin: -70px auto 0;
  padding-bottom: 86px;
  position: relative;
  z-index: 5;
}
.confirm-card-premium {
  display: grid;
  gap: 20px;
  padding: 22px;
  border: 1px solid rgba(255, 250, 242, 0.18);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.96);
  box-shadow: var(--shadow);
}
.confirm-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 1.8rem;
  font-weight: 900;
}
.confirm-card-premium h2 {
  max-width: 700px;
  font-size: clamp(2.1rem, 7vw, 4.2rem);
}
.confirm-card-premium .confirm-message {
  max-width: 650px;
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.65;
}
.confirm-detail-grid {
  display: grid;
  gap: 10px;
}
.confirm-detail-grid div {
  padding: 14px;
  border: 1px solid rgba(17, 17, 15, 0.1);
  border-radius: 8px;
  background: #fffdf8;
}
.confirm-detail-grid span,
.address-label {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.confirm-detail-grid strong {
  color: var(--ink);
}
.confirm-preferences,
.confirm-address-card {
  padding: 15px;
  border: 1px solid rgba(17, 17, 15, 0.1);
  border-radius: 8px;
  background: #fff7eb;
}
.confirm-address-card {
  margin: 0;
}
.address-value {
  margin: 0;
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 900;
  line-height: 1.45;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
}

.product-gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  object-fit: cover;
}

.site-header[data-reveal] {
  transform: translate(-50%, 18px);
}

.site-header[data-reveal].is-visible {
  transform: translate(-50%, 0);
}

/* Reserva existente */
.hero-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.hero-card {
  width: min(1380px, 100%);
  min-height: 860px;
  background: var(--white);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
}
.hero-left {
  padding: 58px 56px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.brand-top, .brand-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.brand-name {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.3rem, 3vw, 3.5rem);
  line-height: 1;
}
.brand-location {
  margin: 10px 0 0;
  color: var(--muted);
}
.hero-copy {
  max-width: 620px;
  width: 100%;
}
.hero-card .hero-copy {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}
.hero-title,
.reserve-title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.08;
}
.hero-title-small { font-size: clamp(2.2rem, 4vw, 3.5rem); }
.catalog-label {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-right {
  position: relative;
  min-height: 860px;
}
.hero-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-fade {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  background: linear-gradient(90deg, rgba(255,250,242,.96), rgba(255,250,242,0));
}
.reserve-card,
.confirm-card {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
.steps-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}
.step-pill {
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(17,17,15,.08);
  color: var(--muted);
  font-weight: 800;
  font-size: .82rem;
}
.step-pill.active {
  background: var(--ink);
  color: var(--white);
}
.reserve-sub,
.hero-note,
.confirm-message {
  color: var(--muted);
  line-height: 1.6;
}
.reserve-form,
.preferences-stack {
  display: grid;
  gap: 16px;
}
.form-group {
  display: grid;
  gap: 7px;
}
.form-group label {
  font-weight: 800;
}
.reserve-input,
.form-group input,
.form-group select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fffdf8;
}
.reserve-summary,
.reserve-tip-box,
.form-errors,
.step-inline-message,
.address-card,
.preference-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff7eb;
}
.detail-actions,
.reserve-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.btn-dark {
  background: var(--ink);
  color: var(--white);
}
.btn-light {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}
.btn-reset {
  border: 0;
}
.horarios-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.horario-btn {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  font-weight: 800;
}
.horario-btn.is-selected {
  background: var(--ink);
  color: var(--white);
}
.preference-size-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.field-error,
.form-errors {
  color: #8b1f2f;
}

@media (min-width: 720px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    padding-inline: 12px;
  }
  .site-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .site-nav a {
    padding: 10px 12px;
    border-radius: 8px;
    color: rgba(255, 250, 242, 0.76);
    font-weight: 800;
  }
  .site-nav a:hover {
    background: rgba(255, 250, 242, 0.09);
    color: var(--white);
  }
  .hero-peek { display: inline-flex; }
  .section-pad { padding-block: 96px; }
  .occasion-grid { grid-template-columns: repeat(4, 1fr); }
  .catalog-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-actions,
  .dialog-actions,
  .preference-size-grid { grid-template-columns: 1fr 1fr; }
  .reserve-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .reserve-field-grid-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .reserve-note-grid,
  .catalog-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .time-slot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .confirm-card-premium {
    padding: 30px;
  }
  .confirm-detail-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .detail-product {
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
    align-items: start;
  }
  .detail-gallery { grid-column: 1; }
  .detail-product-copy {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .benefits {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
  }
  .process-system {
    grid-template-columns: 290px 1fr;
    align-items: start;
    gap: 28px;
  }
  .process-rail {
    position: sticky;
    top: 98px;
  }
  .process-nav { grid-template-columns: 1fr; }
  .process-card {
    min-height: 330px;
    padding: 34px;
  }
  .sticky-conversion {
    width: auto;
    grid-template-columns: 1fr;
    right: 18px;
    bottom: 18px;
  }
  .sticky-conversion a {
    min-width: 116px;
    padding-inline: 14px;
  }
}

@media (min-width: 1020px) {
  .hero { min-height: clamp(600px, 74svh, 760px); }
  .hero-content {
    padding-top: 140px;
    padding-bottom: 92px;
  }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reserve-workspace {
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }
  .reserve-rail {
    position: sticky;
    top: 96px;
  }
  .reserve-panel-head,
  .reserve-flow {
    padding-inline: 30px;
  }
  .reserve-panel-head {
    padding-top: 30px;
  }
  .reserve-flow {
    padding-bottom: 30px;
  }
}

@media (max-width: 900px) {
  .reserve-header .site-nav {
    display: none;
  }
  .reserve-intro {
    min-height: 62svh;
  }
  .reserve-experience {
    --reserve-dark-end: clamp(260px, 36svh, 340px);
  }
  .confirm-intro {
    min-height: 54svh;
  }
  .reserve-intro-content {
    padding: 112px 18px 92px;
  }
  .reserve-workspace {
    margin-top: -48px;
    padding-bottom: 92px;
  }
  .confirm-shell {
    margin-top: -48px;
  }
  .reserve-rail {
    order: 2;
  }
  .reserve-panel {
    order: 1;
  }
  .reserve-step-list {
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .reserve-step {
    min-width: 76px;
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .reserve-step span {
    grid-row: auto;
  }
  .reserve-step small {
    display: none;
  }
  .hero-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-left {
    padding: 32px 22px;
  }
  .hero-right {
    min-height: 340px;
  }
  .social-float-stack {
    right: 14px;
    bottom: 14px;
  }
  .social-float {
    width: 44px;
    height: 44px;
  }
  .social-float-icon {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 540px) {
  .reserve-workspace {
    width: min(calc(100% - 20px), var(--max));
  }
  .reserve-panel-head,
  .reserve-flow,
  .reserve-rail {
    padding: 16px;
  }
  .reserve-panel-head {
    padding-bottom: 0;
  }
  .reserve-intro h1 {
    font-size: clamp(2.75rem, 14vw, 4.6rem);
  }
  .reserve-actions {
    display: grid;
  }
  .reserve-actions .btn {
    width: 100%;
  }
  .time-slot-grid {
    grid-template-columns: 1fr;
  }
  .confirm-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
.abito-location {
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(91, 101, 75, 0.2);
  border-radius: 22px;
  background: #f6f5ef;
}

/* Reserva: el formulario empieza en el primer viewport. */
.reserve-intro { min-height: 0; padding-top: 92px; }
.reserve-intro-content { padding: 28px 18px 22px; }
.reserve-intro h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
.reserve-experience { --reserve-dark-end: 250px; }

@media (max-width: 719px) {
  body:not(.reserve-page) { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .sticky-conversion {
    display: none;
    grid-template-columns: 1fr;
    bottom: 0;
    right: 0;
    width: 100%;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-radius: 0;
  }
  .sticky-conversion.is-visible { display: grid; }
  .sticky-conversion a + a { display: none; }
  .social-float-stack { display: none; }
}

/* Reserva pública directa: cabecera funcional y formulario protagonista. */
.reserve-page { background: var(--paper); }
.reserve-page .reserve-experience {
  min-height: 100svh;
  padding-top: 86px;
  background: var(--paper);
}
/* OJO: `:not(.confirm-page)`. Estas reglas son para el FORMULARIO de reserva
   (fondo claro). La pantalla de confirmación usa las mismas clases pero sobre
   la foto oscura: sin el :not, el título "Tu visita quedó" salía gris oscuro
   sobre fondo oscuro y la tarjeta blanca se le montaba encima (auditoría del
   2026-09-23). */
.reserve-page:not(.confirm-page) .reserve-intro {
  min-height: 0;
  display: block;
  padding: 0;
  overflow: visible;
  color: var(--ink);
}
.reserve-page:not(.confirm-page) .reserve-intro-content {
  width: min(calc(100% - 28px), var(--max));
  padding: 16px 0 18px;
}
.reserve-page:not(.confirm-page) .reserve-intro h1 {
  max-width: none;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.08;
}
.reserve-page:not(.confirm-page) .reserve-intro p:not(.eyebrow) {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.45;
}
.reserve-utility-actions,
.reserve-utility-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.reserve-utility-actions { margin-top: 13px; }
.reserve-utility-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  font-size: .84rem;
  font-weight: 800;
}
.reserve-utility-actions a:hover { border-color: var(--gold); }
.reserve-utility-facts { margin-top: 8px; }
.reserve-utility-facts span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(17, 17, 15, .06);
  color: var(--muted);
  font-size: .73rem;
  font-weight: 700;
}
.reserve-page .reserve-workspace {
  width: min(calc(100% - 28px), var(--max));
  margin: 0 auto;
  padding-bottom: 64px;
}
.reserve-page .reserve-rail,
.reserve-page .reserve-panel {
  border-color: var(--line);
  background: var(--white);
  box-shadow: 0 12px 36px rgba(17, 17, 15, .08);
}
.reserve-page .reserve-panel-head h2 {
  font-size: clamp(1.75rem, 3.3vw, 2.65rem);
}

@media (max-width: 900px) {
  .reserve-page .reserve-experience { padding-top: 78px; }
  .reserve-page .reserve-intro-content { padding: 12px 0 14px; }
  .reserve-page .reserve-workspace { margin-top: 0; }
}

@media (max-width: 540px) {
  .reserve-page .reserve-experience { padding-top: 72px; }
  .reserve-page .reserve-intro-content,
  .reserve-page .reserve-workspace { width: calc(100% - 20px); }
  .reserve-page .reserve-intro h1 { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .reserve-page .reserve-intro p:not(.eyebrow) { font-size: .94rem; }
  .reserve-utility-actions { margin-top: 10px; }
  .reserve-utility-facts { gap: 5px; }
  .reserve-page .reserve-panel-head h2 { font-size: clamp(1.65rem, 8vw, 2.15rem); }
}

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  img,
  video,
  iframe,
  svg {
    max-width: 100%;
    height: auto;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
    font-size: 16px;
  }

  .reserve-panel-head,
  .reserve-flow {
    padding-left: 15px;
    padding-right: 15px;
  }

  .reserve-panel-head h2 {
    font-size: clamp(1.8rem, 10vw, 2.7rem);
  }

  .detail-actions,
  .reserve-actions,
  .hero-actions {
    flex-wrap: wrap;
  }

  .detail-actions > *,
  .reserve-actions > *,
  .hero-actions > * {
    flex: 1 1 150px;
    min-width: 0;
  }
}

@media (max-width: 479px) {
  .time-slot-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-actions > *,
  .reserve-actions > *,
  .hero-actions > * {
    flex-basis: 100%;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .site-header {
    gap: 8px;
    padding-inline: 8px;
  }

  .brand {
    gap: 8px;
  }

  .brand small {
    display: none;
  }

  .brand strong {
    font-size: 1.05rem;
  }

  .header-cta {
    padding-inline: 10px;
    font-size: 0.88rem;
  }
}

.abito-location-copy h3 {
  margin: 4px 0 6px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

.abito-location-copy p:last-child {
  margin: 0;
  line-height: 1.65;
}

.abito-location-map {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 280px;
  border-radius: 16px;
  background: #e4e4dc;
}

.abito-location-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
  pointer-events: none;
}

.abito-map-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: default;
}

@media (max-width: 640px) {
  .abito-location-map,
  .abito-location-map iframe {
    min-height: 230px;
  }
}

/* Jerarquia del hero: titulo primero, acciones livianas debajo. */
.hero-content > h1 {
  max-width: 640px;
}
.hero-content > .hero-copy {
  max-width: 520px;
}

/* En reserva, debajo de la navegación comienza el formulario. */
.reserve-page .reserve-experience {
  padding-top: 94px;
  background: var(--paper);
}
.reserve-page .reserve-workspace {
  margin: 0 auto;
  padding-bottom: 64px;
}

@media (max-width: 719px) {
  .hero-content { padding: 88px 20px; }
  .hero .hero-actions { gap: 14px 22px; }
  .hero .btn-primary { width: 100%; max-width: 280px; }
  .hero-content > h1 {
    max-width: 360px;
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .hero-content > .hero-copy { max-width: 320px; }
  .reserve-page .reserve-experience { padding-top: 86px; }
}

/* ------------------------------------------------------------------ */
/* Confirmación de visita: la persona tiene que ver de un vistazo que  */
/* quedó confirmada, cuándo es y dónde queda. Antes el título era      */
/* chico ("Tu reserva quedó registrada") y la dirección aparecía al    */
/* final de todo, lo que generaba dudas de si había quedado o no.      */
/* ------------------------------------------------------------------ */
.confirm-title-xl {
  font-size: clamp(2.4rem, 9vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.confirm-title-xl span {
  display: inline-block;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.confirm-when {
  margin-top: 14px;
  font-size: clamp(1.05rem, 3.4vw, 1.5rem);
  font-weight: 800;
  text-transform: capitalize;
}
.confirm-where {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 2px solid var(--gold);
  border-radius: 10px;
  background: #fff7eb;
}
.confirm-where-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.confirm-where-item strong {
  display: block;
  color: var(--ink);
  font-size: clamp(1.1rem, 3.6vw, 1.45rem);
  font-weight: 900;
  line-height: 1.35;
  text-transform: capitalize;
}
.confirm-where-item span + strong {
  text-transform: capitalize;
}
.confirm-where-cta {
  margin-top: 12px;
  text-transform: none;
}
@media (min-width: 720px) {
  .confirm-where {
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    padding: 24px;
  }
}

/* Pastilla "El más alquilado de <mes>". Va abajo a la izquierda de la foto:
   arriba ya están la línea (izquierda) y el segmento (derecha), y una tercera
   arriba las amontonaba. */
.product-badge-destacado {
  top: auto;
  bottom: 12px;
  left: 12px;
  right: auto;
  background: rgba(13, 143, 128, 0.94);
  color: var(--white);
  text-transform: none;
  font-weight: 800;
  letter-spacing: 0.01em;
  max-width: calc(100% - 24px);
}

/* Aviso de "catálogo filtrado por ocasión" (2026-09-23). */
.occasion-filter-note {
  margin: 8px 0 0;
  font-size: .86rem;
  color: var(--muted);
}
/* El botón de WhatsApp vuelve a la barra fija del celular: es el canal más
   usado del negocio y se escondía justo en el dispositivo donde más se mira. */
@media (max-width: 720px) {
  .sticky-conversion { grid-template-columns: 1fr auto; }
  .sticky-conversion a + a { display: inline-flex; }
}
/* Datos del local (horarios, teléfono, qué incluye). */
.local-info { display: grid; gap: 10px; }
.local-info li { display: flex; gap: 8px; align-items: flex-start; }

/* Burbuja de FAQ con IA en la web pública (2026-09-23): responde sólo
   sobre el procedimiento de alquilar y cómo funcionan los precios en
   general, nunca disponibilidad real ni datos de un cliente puntual (ver
   core/faq_publica.py). bottom:84px para no superponerse con
   .sticky-conversion (z-index:50, fija abajo) en home.html. */
.faq-bubble {
  position: fixed;
  /* Abajo a la izquierda (2026-09-24): a la derecha tapaba los íconos de
     Instagram/WhatsApp del pie de página. */
  left: 12px;
  bottom: 84px;
  z-index: 55;
}
.faq-bubble-launcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 180ms ease;
}
.faq-bubble-launcher:hover { transform: translateY(-2px); }
.faq-bubble-launcher-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.85rem;
  flex: none;
}
.faq-bubble-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: min(92vw, 340px);
  max-height: min(70vh, 480px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.faq-bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
.faq-bubble-close {
  border: 0;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}
.faq-bubble-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-bubble-msg {
  font-size: 0.92rem;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 8px;
  max-width: 88%;
}
.faq-bubble-msg-bot {
  background: var(--paper);
  color: var(--ink);
  align-self: flex-start;
}
.faq-bubble-msg-yo {
  background: var(--ink);
  color: var(--white);
  align-self: flex-end;
}
/* Preguntas sugeridas de la burbuja (2026-09-24): para que la persona elija
   una de las que el chat sabe responder de verdad, en vez de escribir algo
   libre que se le puede quedar sin respuesta. Desaparecen con el primer
   mensaje (ver _faq_bubble.html). */
.faq-bubble-sugerencias {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 14px 12px;
}
.faq-bubble-chip {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.86rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.faq-bubble-chip:hover {
  background: var(--white);
  border-color: var(--gold);
}
.faq-bubble-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
}
.faq-bubble-form input {
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 0.92rem;
  font-family: inherit;
}
.faq-bubble-form button {
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}
@media (max-width: 480px) {
  .faq-bubble-panel { width: 92vw; }
}
.local-info li::before { content: "·"; color: var(--gold, #b08d57); font-weight: 900; }

/* ===================================================================
   Alquiler desde la web ("Alquilar desde tu casa"), 2026-09.
   Botón en la portada, aviso y botón en las tarjetas, ventana para elegir
   talles, pastilla "Mi pedido" y la página del pedido (pedidos/).
   =================================================================== */
.hero .hero-actions .btn-secondary {
  min-width: 0;
  padding: 16px 32px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.product-tip {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--gold);
  background: rgba(184, 144, 80, 0.1);
  color: var(--ink-2);
  font-size: 0.8rem;
  line-height: 1.4;
}

.pedido-pastilla {
  position: fixed;
  top: 84px;
  right: 16px;
  z-index: 80;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  font-size: 0.86rem;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(17, 17, 15, 0.28);
}
.pedido-pastilla[hidden] { display: none; }
.pedido-pastilla:hover { background: var(--ink-2); }

.pedido-dialogo {
  width: min(94vw, 880px);
  max-height: 92vh;
  border: 0;
  padding: 0;
  background: transparent;
}
.pedido-dialogo::backdrop {
  background: rgba(17, 17, 15, 0.72);
  backdrop-filter: blur(6px);
}
.pedido-dialogo-caja {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: auto;
  max-height: 92vh;
}
.pedido-cerrar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.pedido-form {
  display: grid;
  gap: 10px;
}
.pedido-form h2,
.pedido-seccion h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2rem);
}
.pedido-form label,
.pedido-seccion label {
  font-size: 0.84rem;
  font-weight: 600;
}
.pedido-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 17, 15, 0.16);
  border-radius: 6px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}
.pedido-input:focus {
  outline: none;
  border-color: rgba(184, 144, 80, 0.7);
  box-shadow: 0 0 0 4px rgba(184, 144, 80, 0.14);
}
.pedido-input[hidden] { display: none; }
.pedido-ayuda {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.pedido-aviso {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--gold);
  background: rgba(184, 144, 80, 0.12);
  font-size: 0.88rem;
}
.pedido-error {
  margin: 0;
  color: var(--wine);
  font-weight: 700;
  font-size: 0.9rem;
}
.pedido-error:empty { display: none; }
.pedido-precio {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}
.pedido-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--wine);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  justify-self: start;
}
.pedido-fila {
  display: flex;
  gap: 8px;
}
.btn-chico { min-width: 0; padding: 10px 14px; }
.pedido-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pedido-form-talles {
  grid-template-columns: 1fr;
}
.pedido-columna {
  display: grid;
  gap: 10px;
  align-content: start;
}
.pedido-tabla-talles:empty { display: none; }
.pedido-tabla-talles img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.pedido-bloque-previos {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(17, 17, 15, 0.02);
}
.pedido-bloque-previos summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
}
.pedido-bloque-previos .pedido-fila { margin-top: 10px; }
.pedido-previos { margin-top: 8px; font-size: 0.88rem; color: var(--ink-2); }
.pedido-previos ul { margin: 6px 0 0; padding-left: 18px; }
@media (min-width: 760px) {
  .pedido-form-talles {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 22px;
  }
}

/* Página "Mi pedido" */
.pedido-page { background: var(--paper); }
.pedido-main {
  display: grid;
  gap: 16px;
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: 110px 0 60px;
}
.pedido-encabezado h1 {
  margin: 4px 0 8px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 7vw, 3rem);
}
.pedido-seccion {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
[data-pedido-contenido] { display: grid; gap: 16px; }
[data-pedido-contenido][hidden],
.pedido-seccion[hidden] { display: none; }
.pedido-alerta {
  margin: 0;
  padding: 12px 14px;
  border-radius: 6px;
  background: rgba(111, 31, 44, 0.08);
  color: var(--wine);
  font-weight: 600;
}
.pedido-alerta[hidden] { display: none; }
.pedido-alerta p { margin: 0; }
.pedido-persona {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.pedido-persona h3 { margin: 0; font-size: 1.05rem; }
.pedido-linea {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.pedido-linea.es-combo strong::after {
  content: " · combo";
  color: var(--gold);
  font-weight: 800;
}
.pedido-linea-detalle {
  display: grid;
  color: var(--muted);
  font-size: 0.88rem;
}
.pedido-linea small { color: var(--muted); font-size: 0.8rem; }
.pedido-linea-precio { font-weight: 800; white-space: nowrap; }
.pedido-total {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
  font-size: 1.15rem;
}
.pedido-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.pedido-pasos { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
@media (max-width: 719px) {
  .pedido-pastilla { top: auto; bottom: 150px; right: 14px; }
  .pedido-main { padding-top: 96px; }
}
.reserve-page .pedido-pastilla { background: var(--gold); color: var(--ink); }