/* Adiós Pedro · Sistema de marca tomado de la etiqueta A3
   Negro #0E0D0D · Marfil #F3ECE0 · Cormorant Garamond
   Todo lo demás es el marfil con distinta opacidad sobre el negro. */

/* Tipografía servida desde la propia web (Cormorant Garamond, licencia SIL OFL; ver fuentes/OFL.txt).
   Subconjunto latino de las fuentes variables: un archivo cubre todos los pesos. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fuentes/cormorant-garamond-v1.woff") format("woff");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("fuentes/cormorant-garamond-italica-v1.woff") format("woff");
}

:root {
  --negro: #0E0D0D;
  --marfil: #F3ECE0;
  --marfil-82: rgba(243, 236, 224, 0.82);
  --marfil-78: rgba(243, 236, 224, 0.78);
  --marfil-70: rgba(243, 236, 224, 0.70); /* mínimo para texto pequeño */
  --marfil-30: rgba(243, 236, 224, 0.30); /* marcos */
  --marfil-25: rgba(243, 236, 224, 0.25); /* líneas separadoras */
  --marfil-08: rgba(243, 236, 224, 0.08);

  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;

  --ancho: 36rem;
  --margen: clamp(1.25rem, 5vw, 2rem);
  --aire: clamp(4.5rem, 14vw, 8rem);
  --marco: clamp(0.875rem, 3vw, 1.375rem); /* el marco fino a 22 px del borde */
  color-scheme: dark;
}

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

html {
  background: var(--negro);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--negro);
  color: var(--marfil);
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: "liga", "kern", "onum";
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }

a { color: var(--marfil); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--marfil); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }

[hidden] { display: none !important; }

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

.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--marfil);
  color: var(--negro);
}
.saltar:focus { top: 1rem; }

/* ---------- Pincelada ---------- */

.pincelada { display: block; overflow: visible; }

.pincelada--portada {
  width: min(100%, 22rem);
  aspect-ratio: 540 / 60;
  margin: 0.25rem auto 1.25rem;
}

.pincelada--puerta {
  width: min(70%, 14rem);
  aspect-ratio: 540 / 60;
  margin: 0.5rem auto 2rem;
}

.pincelada--separador {
  width: 9rem;
  aspect-ratio: 540 / 60;
  margin: 0 auto;
  opacity: 0.7;
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  min-height: 3.25rem;
  padding: 0.75rem 2rem;
  border: 1px solid var(--marfil);
  border-radius: 2px;
  background: var(--marfil);
  color: var(--negro);
  font: 600 1.1875rem/1.2 var(--serif);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.boton:hover { background: transparent; color: var(--marfil); }

.boton--secundario { background: transparent; color: var(--marfil); border-color: var(--marfil-30); }
.boton--secundario:hover { border-color: var(--marfil); }

.boton--ancho { width: 100%; }

/* ---------- Botón de compra de la portada ---------- */
/* Al entrar está en su sitio. Cuando sale de la pantalla por arriba, pasa a una franja fija abajo
   (clase cta-sitio--fija, app.js) y se esconde mientras se ven la compra o el pie (cta-fija--oculta).
   El hueco del sitio original se mantiene para que el texto no salte. */

.cta-sitio { display: flex; justify-content: center; width: 100%; min-height: 3.25rem; }
.cta-sitio[hidden] { display: none; }

.cta-sitio--fija .cta-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0.75rem var(--margen) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--negro);
  border-top: 1px solid var(--marfil-25);
  animation: cta-entra 200ms ease;
  transition: transform 200ms ease, visibility 0s linear 0s;
}
.cta-sitio--fija .cta-fija .boton { width: 100%; max-width: 24rem; }
.cta-sitio--fija .cta-fija--oculta {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 200ms ease, visibility 0s linear 200ms;
}
@keyframes cta-entra { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cta-sitio--fija .cta-fija, .cta-sitio--fija .cta-fija--oculta { animation: none; transition: none; }
}

/* ---------- Puerta de mayoría de edad ---------- */

.puerta { display: none; }

.js:not(.edad-ok) .puerta {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  padding: var(--marco);
  background: var(--negro);
  overflow-y: auto;
}

.js:not(.edad-ok) body { overflow: hidden; }

.puerta__marco {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem var(--margen);
  border: 1px solid var(--marfil-30);
  text-align: center;
}

.puerta__marca {
  font-size: clamp(2.75rem, 13vw, 4.5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.puerta__pregunta p { max-width: 20rem; color: var(--marfil-82); }

.puerta__botones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
  width: min(100%, 18rem);
  margin-inline: auto;
}

.puerta__negativa { max-width: 20rem; color: var(--marfil-82); }

/* ---------- Portada: la etiqueta frontal ---------- */

.portada {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  padding: var(--marco);
}

.portada__marco {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 10vh, 5rem) var(--margen) clamp(2.5rem, 7vh, 4rem);
  border: 1px solid var(--marfil-30);
  text-align: center;
}

.marca {
  display: flex;
  flex-direction: column;
  font-size: clamp(3.5rem, 17vw, 6.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-inline-end: -0.05em; /* compensa el espaciado final */
}

.vino-tinto {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--marfil-78);
  margin-inline-end: -0.5em;
}

.mensaje {
  margin-top: clamp(3rem, 10vh, 5rem);
  max-width: 14ch;
  font-size: clamp(2rem, 8vw, 3.25rem);
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
}

.eslogan {
  margin-top: 1rem;
  font-style: italic;
  color: var(--marfil-82);
  text-wrap: balance;
}

.portada__accion {
  margin-top: clamp(2.5rem, 8vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.portada__dato {
  font-size: 1.0625rem;
  color: var(--marfil-78);
}

.portada__contador { display: block; }

/* Un solo momento de movimiento: la pincelada se traza al entrar */
@media (prefers-reduced-motion: no-preference) {
  .edad-ok .pincelada--portada,
  .entrando .pincelada--portada {
    animation: trazo 1.4s cubic-bezier(0.6, 0, 0.2, 1) 0.2s both;
  }
  @keyframes trazo {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

/* ---------- Bloques ---------- */

.bloque { padding-block: var(--aire); }

h2 {
  font-size: clamp(2rem, 7vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

h3 {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Cita de la contraetiqueta */
.cita { text-align: center; }

.cita blockquote p {
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.cita figcaption {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: var(--marfil-70);
}

/* La caja */
.precio {
  font-size: clamp(3rem, 12vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 1rem;
  font-feature-settings: "lnum";
}

.entradilla { font-size: 1.25em; line-height: 1.45; }

.nota {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--marfil-70);
}

.foto-hueco {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  margin-block: 2.5rem;
  border: 1px dashed var(--marfil-30);
  color: var(--marfil-70);
  font-size: 1rem;
  text-align: center;
  padding: 1rem;
}

.ficha__titulo { margin-bottom: 1rem; }

/* La rejilla de cata de la contraetiqueta */
.ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--marfil-25);
  border-bottom: 1px solid var(--marfil-25);
}

.ficha > div {
  padding: 0.875rem 0.75rem 0.875rem 0;
  border-bottom: 1px solid var(--marfil-25);
}
.ficha > div:nth-last-child(-n + 2) { border-bottom: 0; }

.ficha dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marfil-70);
}

.ficha dd { font-size: 1.125rem; line-height: 1.35; }

/* Cómo funciona */
.pasos {
  list-style: none;
  padding: 0;
  counter-reset: paso;
  display: grid;
  gap: 1.5rem;
}

.pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.25rem;
}

.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  font-feature-settings: "lnum";
  color: var(--marfil-70);
}

.garantia {
  margin-top: 3rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--marfil-30);
  text-align: center;
}

.garantia h3 { margin-bottom: 0.5rem; }
.garantia p { font-size: 1.2em; line-height: 1.4; }

/* Preguntas */
.faq { border-top: 1px solid var(--marfil-25); }

.faq details { border-bottom: 1px solid var(--marfil-25); }

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.125rem;
  min-height: 3rem;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 1.125em;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--marfil-70);
  transition: transform 200ms ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
  padding-bottom: 1.25rem;
  color: var(--marfil-82);
}

/* Reserva */
.bloque--reserva { background: var(--marfil-08); }

.reserva { text-align: center; }

.reserva__contador {
  font-size: clamp(1.5rem, 5vw, 1.875rem);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.reserva__resumen { color: var(--marfil-82); margin-bottom: 2rem; }

.reserva__form,
.espera {
  display: grid;
  gap: 1rem;
  max-width: 24rem;
  margin-inline: auto;
  text-align: left;
}

.casilla {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: 1.0625rem;
  line-height: 1.4;
  cursor: pointer;
}

.casilla input {
  appearance: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.05rem 0 0;
  border: 1px solid var(--marfil-70);
  border-radius: 2px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.casilla input::after {
  content: "";
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
}
.casilla input:checked { background: var(--marfil); border-color: var(--marfil); }
.casilla input:checked::after { opacity: 1; }

.campo { display: grid; gap: 0.375rem; font-size: 1.0625rem; }

.campo input {
  min-height: 3.25rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--marfil-70);
  border-radius: 2px;
  background: transparent;
  color: var(--marfil);
  font: 400 1.1875rem var(--serif);
}
.campo input:focus-visible { outline-offset: 2px; }

.reserva__form .boton,
.espera .boton { margin-top: 0.5rem; }

.aviso {
  min-height: 1.5em;
  font-size: 1rem;
  color: var(--marfil-82);
  text-align: center;
}

.reserva__garantia {
  margin-top: 1.25rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--marfil-78);
}

/* ---------- Pie ---------- */

.pie {
  padding-block: 4rem 3rem;
  border-top: 1px solid var(--marfil-25);
  text-align: center;
}

.pie__frase { font-size: 1.375rem; font-style: italic; color: var(--marfil-82); }

.pie__marca {
  margin-top: 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-inline-end: -0.2em;
}

.pie__legal { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--marfil-70); }
.pie__social { margin-top: 0.75rem; font-size: 1rem; letter-spacing: 0.06em; }
.pie__social a { color: var(--marfil); text-underline-offset: 0.25em; }
.pie__usuario { color: var(--marfil-70); }

.pie__enlaces {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  font-size: 0.9375rem;
}
.pie__secciones { margin-top: 2rem; font-size: 1.0625rem; }
.pie__secciones + nav .pie__enlaces { margin-top: 0.5rem; }
.pie__enlaces a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--marfil-82);
}

/* ---------- Páginas legales ---------- */

.legal { padding-block: 3rem 5rem; }

.legal__volver {
  display: inline-block;
  margin-bottom: 3rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1rem;
  padding-block: 0.5rem;
}

.legal h1 {
  font-size: clamp(2.25rem, 8vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.legal__fecha { color: var(--marfil-70); font-size: 1rem; margin-bottom: 2.5rem; }

.legal h2 { font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 0.75rem; }

.legal p,
.legal li { color: var(--marfil-82); }
.legal p + p { margin-top: 1rem; }
.legal ul { padding-left: 1.25rem; margin-top: 0.75rem; display: grid; gap: 0.5rem; }

@media (min-width: 48rem) {
  .puerta__botones { flex-direction: row; width: auto; }
  .portada__contador { display: inline; }
  .portada__contador::before { content: " · "; }
}

/* =========================================================
   Versión completa: piezas añadidas
   ========================================================= */

.contenedor--ancho { max-width: 68rem; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Textos pendientes de cifra: solo se señalan en modo prueba */
.modo-prueba .revisar {
  background: rgba(243, 236, 224, 0.12);
  text-decoration: underline dashed var(--marfil-70) 1px;
  text-underline-offset: 0.2em;
}

/* Nombre + pincelada: la pincelada mide lo mismo que el nombre, como en la etiqueta */
.firma {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.875rem;
  width: max-content;
  max-width: 100%;
}
.trazo { display: block; width: 100%; height: clamp(14px, 4vw, 20px); overflow: visible; }
/* Sin esto el SVG impone 300 px de ancho y la pincelada sobresale del nombre */
.firma .trazo { width: 0; min-width: 100%; }

.portada .firma { margin-bottom: 1.5rem; }
.firma--puerta { margin-bottom: 2rem; gap: 0.625rem; }
.firma--puerta .trazo { height: 14px; }

.trazo--separador { width: 9rem; height: 12px; margin: 0 auto; opacity: 0.7; }

@media (prefers-reduced-motion: no-preference) {
  .edad-ok .trazo--portada { animation: trazo 1.4s cubic-bezier(0.6, 0, 0.2, 1) 0.2s both; }
}

.puerta__letra { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--marfil-70); }

.portada__bajar {
  margin-top: 2.5rem;
  font-size: 1rem;
  color: var(--marfil-70);
  padding-block: 0.5rem;
}

/* Lema entre portada y relato */
.lema {
  padding: var(--aire) var(--margen) 0;
  text-align: center;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

/* Relato */
.relato p { font-size: 1.12em; line-height: 1.7; color: var(--marfil-82); }
.relato p + p { margin-top: 1.25em; }
.relato__nombre {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marfil) !important;
  font-size: 1em !important;
}
.relato__cierre {
  font-style: italic;
  font-size: 1.35em !important;
  line-height: 1.4 !important;
  color: var(--marfil) !important;
  text-wrap: balance;
}

/* Dos columnas en escritorio */
.dos-columnas { display: grid; gap: 3.5rem; }
@media (min-width: 56rem) {
  .dos-columnas { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
  .dos-columnas--caja { align-items: start; }
}

/* ---------- La etiqueta A3 que se gira ---------- */

.botella {
  padding: clamp(1.5rem, 6vw, 3rem);
  background: var(--marfil-08);
  perspective: 1800px;
  text-align: center;
}

.etiqueta {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  aspect-ratio: 2 / 3; /* 90 × 135 mm */
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.5, 0, 0.2, 1);
  text-align: center;
}
.etiqueta.girada { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .etiqueta { transition: none; }
}

.etiqueta__cara {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--negro);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.55);
}
.etiqueta__dorso { transform: rotateY(180deg); }
/* Las etiquetas definitivas (90 × 135 mm) son imágenes sacadas de los PDF de arte */
.etiqueta__imagen { display: block; width: 100%; height: 100%; object-fit: cover; }

.girar {
  margin-top: 1.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 0;
  background: none;
  color: var(--marfil);
  font: 500 1.0625rem var(--serif);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.girar:hover { text-decoration-thickness: 2px; }

.vino__texto .entradilla { margin-bottom: 2rem; }
.ficha > .ficha__ancha { grid-column: 1 / -1; }
.ficha > div:nth-last-child(-n + 2) { border-bottom: 0; }

/* La caja */
.oferta {
  margin-top: 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px dashed var(--marfil-30);
  font-size: 1.0625rem;
  color: var(--marfil-82);
}
.condiciones-caja {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  display: grid;
  gap: 0.375rem;
  font-size: 1rem;
  color: var(--marfil-70);
}
.apertura__titulo { font-size: clamp(1.625rem, 5vw, 2rem); font-weight: 500; margin-bottom: 1.5rem; }
.apertura {
  list-style: none;
  padding: 0;
  counter-reset: paso;
  display: grid;
  gap: 1.125rem;
  border-top: 1px solid var(--marfil-25);
  padding-top: 1.5rem;
}
.apertura li {
  counter-increment: paso;
  position: relative;
  padding-left: 2.25rem;
  color: var(--marfil-82);
}
.apertura li strong { color: var(--marfil); font-weight: 600; }
.apertura li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  font-feature-settings: "lnum";
  color: var(--marfil-70);
}

/* Cómo funciona */
.plazo { color: var(--marfil-82); margin-bottom: 2rem; }
.cierre {
  margin-top: 3.5rem;
  text-align: center;
  font-style: italic;
  font-size: 1.3em;
  line-height: 1.4;
  color: var(--marfil-82);
  text-wrap: balance;
}

/* Contador de las 100 primeras cajas: una casilla por caja */
.cajas {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  width: min(100%, 16rem);
  margin: 0.5rem auto 2rem;
}
.cajas span {
  aspect-ratio: 1;
  border: 1px solid var(--marfil-30);
}
.cajas span.reservada { background: var(--marfil); border-color: var(--marfil); }

/* Formulario completo */
.reserva__form--completo { max-width: 28rem; gap: 0.5rem; }
.reserva__form--completo fieldset {
  border: 0;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.reserva__form--completo legend {
  padding: 0;
  margin-bottom: 1rem;
  font-size: 1.375rem;
  font-weight: 600;
}
.campos-fila { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.campos-fila .campo { min-width: 0; }
.campo input { width: 100%; }

/* Quiénes somos */
.bloque--nosotros { padding-bottom: calc(var(--aire) * 0.75); }
.nosotros { font-size: 1.1em; line-height: 1.65; color: var(--marfil-82); }

/* ---------- Fecha de corte, cuenta atrás y cantidad ---------- */

.portada__corte { margin-top: 0.25rem; font-size: 1.0625rem; font-style: italic; color: var(--marfil-82); text-wrap: balance; }

.cuenta-atras {
  max-width: 24rem;
  margin: 0 auto 1.75rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--marfil-25);
  border-bottom: 1px solid var(--marfil-25);
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--marfil-82);
  font-feature-settings: "lnum";
  text-align: center;
}

.cantidad { display: grid; gap: 0.5rem; justify-items: start; margin-bottom: 0.75rem; }
.cantidad__etiqueta { font-size: 1.0625rem; }
.cantidad__control { display: inline-flex; align-items: stretch; border: 1px solid var(--marfil-70); border-radius: 2px; }
.cantidad__boton {
  width: 3rem; min-height: 3rem;
  border: 0; background: transparent; color: var(--marfil);
  font: 500 1.5rem/1 var(--serif); cursor: pointer;
}
.cantidad__boton:hover { background: var(--marfil-08); }
.cantidad__boton:disabled { color: var(--marfil-30); cursor: default; background: transparent; }
.cantidad__control input {
  width: 3.5rem; min-height: 3rem;
  border: 0; border-inline: 1px solid var(--marfil-30); border-radius: 0;
  background: transparent; color: var(--marfil);
  font: 500 1.375rem var(--serif); text-align: center;
  font-feature-settings: "lnum";
  -moz-appearance: textfield;
}
.cantidad__control input::-webkit-inner-spin-button,
.cantidad__control input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad__nota { font-size: 1rem; font-style: italic; color: var(--marfil-78); }

/* El botón lleva texto y cifras en línea: sin hueco extra entre ellos */
.boton { gap: 0; }

/* Aviso de un pedido que cruza la caja 100 */
.cantidad__tramo {
  max-width: 24rem;
  margin-top: 0.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--marfil-30);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--marfil);
  font-feature-settings: "lnum";
}

/* Código postal de entrega */
.campo--cp input { max-width: 9rem; font-feature-settings: "lnum"; letter-spacing: 0.08em; }
.campo__nota { margin-top: -0.5rem; font-size: 0.9375rem; color: var(--marfil-78); }

/* ---------- Factura completa (opcional) ---------- */
.factura { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }
.reserva__form .factura legend:not(.visualmente-oculto) { padding: 0; margin-bottom: 1rem; font-size: 1.375rem; font-weight: 600; }
.factura__datos,
.factura__direccion { display: grid; gap: 1rem; }
.factura__datos[hidden],
.factura__direccion[hidden] { display: none; }
.factura__datos { padding: 1.25rem 0 0.25rem 1.25rem; border-left: 1px solid var(--marfil-30); margin-left: 0.6875rem; }
.factura__fila { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.factura__fila .campo { min-width: 0; }
.factura .campo input { width: 100%; }
.campo--nif input { max-width: 12rem; letter-spacing: 0.06em; text-transform: uppercase; font-feature-settings: "lnum"; }
.factura__nota { margin-top: 0; }
.campo input[aria-invalid="true"] { border-color: var(--marfil); box-shadow: inset 0 0 0 1px var(--marfil); }
@media (max-width: 22rem) { .factura__fila { grid-template-columns: 1fr; } }
/* Al pedir factura, los campos aparecen con un fundido corto (respuesta a la acción) */
.mov .factura__datos:not([hidden]),
.mov .factura__direccion:not([hidden]) { animation: ap-despliega 500ms var(--salida) both; }
.mov-suave .factura__datos:not([hidden]),
.mov-suave .factura__direccion:not([hidden]) { animation: ap-aparece 400ms ease both; }

/* =====================================================================
   Movimiento
   Un solo momento orquestado (la portada al entrar) y, al bajar, gestos
   que acompañan la lectura: el relato se va encendiendo, la pincelada se
   pinta, la etiqueta se posa y las casillas se cuentan. Nada rebota.

   El script del <head> pone en <html> una de estas dos clases:
   .mov        animación completa (opacidad, posición, escala, recorte)
   .mov-suave  si el sistema pide reducir el movimiento: solo fundidos,
               sin desplazamientos ni inclinaciones
   Sin JavaScript no hay ninguna de las dos y todo se ve quieto.
   En pruebas, ?movimiento=completo fuerza la animación completa.
   ===================================================================== */

:root {
  --salida: cubic-bezier(0.16, 1, 0.3, 1);   /* sale rápido y se posa despacio */
  --pincel: cubic-bezier(0.6, 0, 0.2, 1);
}

.boton { transition: background-color 160ms ease, color 160ms ease, scale 140ms ease; }
.mov .boton:active { scale: 0.98; }

/* ---------- Salida de la puerta de edad ---------- */
.mov:not(.edad-ok) .puerta,
.mov-suave:not(.edad-ok) .puerta { transition: opacity 480ms ease; }
.mov:not(.edad-ok) .puerta .puerta__marco { transition: scale 600ms var(--salida); }
.mov:not(.edad-ok) .puerta.puerta--sale,
.mov-suave:not(.edad-ok) .puerta.puerta--sale { opacity: 0; pointer-events: none; }
.mov:not(.edad-ok) .puerta.puerta--sale .puerta__marco { scale: 1.03; }

/* ---------- Portada: la secuencia de entrada ---------- */
:is(.mov, .mov-suave):not(.edad-ok) .portada :is(.marca span, .vino-tinto, .mensaje, .eslogan, .portada__accion, .portada__bajar) { opacity: 0; }

/* El nombre sube línea a línea, como si saliera de detrás del marco */
.mov.edad-ok .portada .marca span { animation: ap-linea 1.2s var(--salida) 0.1s both; }
.mov.edad-ok .portada .marca span + span { animation-delay: 0.26s; }
/* La pincelada se pinta cuando el nombre ya está */
.mov.edad-ok .portada .trazo--portada { animation: trazo 1.4s var(--pincel) 0.62s both; }
/* «Vino tinto» se recoge hasta su espaciado */
.mov.edad-ok .portada .vino-tinto { animation: ap-recoge 1.6s var(--salida) 1s both; }
/* El mensaje se enfoca */
.mov.edad-ok .portada .mensaje { animation: ap-enfoca 1.3s var(--salida) 1.3s both; }
.mov.edad-ok .portada .eslogan { animation: ap-sube 1.1s var(--salida) 1.6s both; }
.mov.edad-ok .portada .portada__accion { animation: ap-aparece 1s ease 1.9s both; }
.mov.edad-ok .portada .portada__bajar { animation: ap-sube 1s var(--salida) 2.3s both; }

/* Movimiento reducido: el mismo orden, solo fundidos */
.mov-suave.edad-ok .portada :is(.marca span, .vino-tinto, .mensaje, .eslogan, .portada__accion, .portada__bajar) { animation: ap-aparece 1s ease both; }
.mov-suave.edad-ok .portada .marca span + span { animation-delay: 0.2s; }
.mov-suave:not(.edad-ok) .portada .trazo--portada { opacity: 0; }
.mov-suave.edad-ok .portada .trazo--portada { animation: ap-aparece 1s ease 0.4s both; }
.mov-suave.edad-ok .portada .vino-tinto { animation-delay: 0.6s; }
.mov-suave.edad-ok .portada .mensaje { animation-delay: 0.9s; }
.mov-suave.edad-ok .portada .eslogan { animation-delay: 1.15s; }
.mov-suave.edad-ok .portada .portada__accion { animation-delay: 1.4s; }
.mov-suave.edad-ok .portada .portada__bajar { animation-delay: 1.7s; }

@keyframes trazo {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes ap-linea {
  from { opacity: 0; translate: 0 0.5em; clip-path: inset(-25% 0 100% 0); }
  40% { opacity: 1; }
  to { opacity: 1; translate: none; clip-path: inset(-25% 0 -25% 0); }
}
@keyframes ap-recoge { from { opacity: 0; letter-spacing: 1.1em; } }
@keyframes ap-enfoca {
  from { opacity: 0; translate: 0 0.4em; filter: blur(6px); }
  to { opacity: 1; translate: none; filter: none; }
}
@keyframes ap-sube {
  from { opacity: 0; translate: 0 0.6em; }
  to { opacity: 1; translate: none; }
}
/* Solo opacidad: dentro va el botón que luego se fija abajo, y un desplazamiento lo descolocaría */
@keyframes ap-aparece { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Al bajar (app.js añade .anima al documento y .visto a cada pieza) ---------- */
.anima .revelar {
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 900ms var(--salida), translate 900ms var(--salida);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.anima .revelar.visto { opacity: 1; translate: none; }

/* El precio se asienta con un leve cambio de escala */
.anima .precio.revelar { scale: 0.94; transform-origin: left bottom; transition-property: opacity, translate, scale; transition-duration: 1.1s; }
.anima .precio.revelar.visto { scale: 1; }

/* El relato se va encendiendo a medida que se lee */
.anima .relato p.revelar { opacity: 0.16; translate: 0 0.5rem; transition-duration: 1.2s; }
.anima .relato p.revelar.visto { opacity: 1; translate: none; }

/* La contraetiqueta citada: frase a frase */
.anima .cita .frase { opacity: 0.14; transition: opacity 1.1s ease; transition-delay: calc(var(--i, 0) * 520ms); }
.anima .cita.visto .frase { opacity: 1; }
.anima .cita.revelar { opacity: 1; translate: none; }
.anima .cita figcaption { opacity: 0; transition: opacity 900ms ease 2.4s; }
.anima .cita.visto figcaption { opacity: 1; }

/* La pincelada que separa bloques se pinta al aparecer */
.anima .trazo--separador.revelar { opacity: 0.7; translate: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--pincel); }
.anima .trazo--separador.revelar.visto { clip-path: inset(0 0 0 0); }

/* La etiqueta se posa: sube, se endereza y gana tamaño */
.anima .etiqueta-marco.revelar {
  translate: 0 2.5rem;
  scale: 0.95;
  rotate: -1.5deg;
  transition: opacity 1.2s var(--salida), translate 1.4s var(--salida), scale 1.4s var(--salida), rotate 1.6s var(--salida), transform 700ms var(--salida);
}
.anima .etiqueta-marco.revelar.visto { translate: none; scale: 1; rotate: none; }

/* Las 100 casillas aparecen en ola y las vendidas se rellenan después */
.anima .cajas.revelar { opacity: 1; translate: none; }
.anima .cajas.revelar span { opacity: 0; scale: 0.4; transition: opacity 500ms ease, scale 700ms var(--salida), background-color 450ms ease, border-color 450ms ease; transition-delay: calc(var(--i, 0) * 9ms); }
.anima .cajas.revelar span.reservada { background-color: transparent; border-color: var(--marfil-30); }
.anima .cajas.revelar.visto span { opacity: 1; scale: 1; }
.anima .cajas.revelar.visto span.reservada {
  background-color: var(--marfil);
  border-color: var(--marfil);
  transition-delay: calc(var(--i, 0) * 9ms), calc(var(--i, 0) * 9ms), calc(0.9s + var(--i, 0) * 14ms), calc(0.9s + var(--i, 0) * 14ms);
}

/* Movimiento reducido: lo mismo, sin desplazar, escalar, girar ni recortar */
.mov-suave.anima :is(.revelar, .precio.revelar, .relato p.revelar, .etiqueta-marco.revelar, .cajas.revelar span) { translate: none; scale: none; rotate: none; }
.mov-suave.anima .trazo--separador.revelar { clip-path: none; opacity: 0; transition: opacity 1s ease; }
.mov-suave.anima .trazo--separador.revelar.visto { opacity: 0.7; }

/* ---------- Respuestas a lo que hace la persona ---------- */

/* Preguntas: la respuesta baja al abrir */
.mov .faq details[open] > :not(summary) { animation: ap-despliega 600ms var(--salida) both; }
.mov-suave .faq details[open] > :not(summary) { animation: ap-aparece 400ms ease both; }
@keyframes ap-despliega { from { opacity: 0; translate: 0 -0.5rem; } to { opacity: 1; translate: none; } }

/* El total del botón de pago cambia con un pequeño relevo */
.mov .cambia { display: inline-block; animation: ap-relevo 420ms var(--salida); }
@keyframes ap-relevo { from { opacity: 0.2; translate: 0 0.35em; } to { opacity: 1; translate: none; } }

/* ---------- Etiqueta: se inclina con el ratón y refleja la luz (solo con ratón) ---------- */
.etiqueta-marco { position: relative; transform-style: preserve-3d; }
.etiqueta-marco::after {
  content: "";
  position: absolute;
  inset: 0;
  max-width: 24rem;
  margin-inline: auto;
  pointer-events: none;
  background: radial-gradient(circle at var(--luz-x, 30%) var(--luz-y, 20%), rgba(243, 236, 224, 0.13), transparent 55%);
  opacity: 0;
  transition: opacity 500ms ease;
  transform: translateZ(1px);
}
@media (hover: hover) and (pointer: fine) {
  .mov .etiqueta-marco.inclinada::after { opacity: 1; }
}