/* Gabrielle Camera · Todo mide en em: script.js fija el font-size de #magazine. */

:root {
  --bg: #3b0809;
  --paper: #efe0c8;
  --ink: #600d12;
  --ink-soft: rgba(96, 13, 18, 0.72);
  --line: rgba(96, 13, 18, 0.22);
  --wine: #ad2b31;
  --placeholder: #e0e0e0;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --cover-red: #c8101a;

  --cover-title: #721e18;

  --cover-yellow: #eed6a4;
  --active-cover-color: var(--cover-yellow);
  --cover-next-light: 239, 224, 200;
  --cover-next-shade: 58, 8, 12;
  --display: "Instrument Serif", var(--serif);
  --script: "Pinyon Script", cursive;
  --typewriter: "Courier Prime", "Courier New", monospace;

  --vino: #3f0a0d;
  --carbon: #1c1816;
  --taupe: #4a403a;
}

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

html,
body {
  margin: 0;
  height: 100%;
  overflow-x: hidden;
}

body {
  background: radial-gradient(ellipse at center, #4d0f10 0%, var(--bg) 70%);
  color: var(--ink);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 16px;
  overflow-x: hidden;
}

/* ---------- Libro ---------- */

.magazine-viewport {
  display: flex;
  justify-content: center;
  width: 100%;
}

#magazine {
  font-size: 16px;
  flex: none;
}

#magazine .page {
  background-color: var(--paper);
  color: var(--ink);
  padding: 2.4em 2.4em 2.6em;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

#magazine .page.even {
  background-image: linear-gradient(to left, rgba(59, 8, 9, 0.05) 0%, rgba(59, 8, 9, 0) 3%);
}

#magazine .page.odd {
  background-image: linear-gradient(to right, rgba(59, 8, 9, 0.05) 0%, rgba(59, 8, 9, 0) 3%);
}

#magazine {
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}

/* ---------- Elementos comunes ---------- */

.page-number {
  position: absolute;
  bottom: 1em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 0.7em;
  color: var(--ink-soft);
}

/* ---------- Navegación (la inserta script.js) ---------- */

.page-nav {
  position: absolute;
  left: 2.4em;
  right: 2.4em;
  bottom: 0.5em;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.page-nav button {
  pointer-events: auto;
  background: none;
  border: 0;
  padding: 0.4em 0;
  color: inherit;
  font-family: var(--sans);
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.25s, transform 0.25s;
}

.page-nav button:hover,
.page-nav button:focus-visible {
  opacity: 1;
}

.page-nav .nav-prev:hover { transform: translateX(-0.3em); }
.page-nav .nav-next:hover { transform: translateX(0.3em); }

.page-nav .nav-next {
  margin-left: auto;
}

.page-nav button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

#magazine:not(.is-single) .page.even .nav-next,
#magazine:not(.is-single) .page.odd .nav-prev {
  display: none;
}

.page-cover .page-nav {
  display: none;
}

.kicker {
  display: block;
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 1.2em 2em;
  transition: background 0.25s, color 0.25s;
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Pág. 1 · Portada ---------- */

#magazine .page-cover {
  display: block;
  padding: 0;
  overflow: hidden;
  color: var(--cover-red);
}

.cover-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
}

.cover-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0;
  color: var(--cover-title);
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: 6.2em;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transform: scaleY(1.15);
  transform-origin: top;
}

.cover-tag {
  position: absolute;
  right: 5.5%;
  z-index: 3;
  color: var(--active-cover-color);
  font-family: var(--sans);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 0 0.3em rgba(0, 0, 0, 0.6), 0 0.05em 0.8em rgba(0, 0, 0, 0.5);
}

.cover-tag-name { top: 18%; font-size: 1.6em; font-weight: 500; }
.cover-tag-year { top: 23.5%; right: 6%; font-size: 1.15em; font-weight: 400; }

.cover-stack {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cover-stack img {
  position: absolute;
  object-fit: cover;
  border: 0.15em solid var(--active-cover-color);
  box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.35);
}

.stack-back {
  left: 5.5%;
  top: 47%;
  width: 20%;
  height: 19%;
}

.stack-front {
  left: 13%;
  top: 68.5%;
  width: 19%;
  height: 19%;
}

.cover-caption {
  position: absolute;
  left: 2%;
  bottom: 1%;
  z-index: 3;
  margin: 0;
  color: var(--cover-title);
  font-family: var(--sans);
  font-size: 0.52em;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.cover-signature {
  position: absolute;
  right: 1%;
  bottom: 4%;
  width: 48%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--active-cover-color);
  text-align: center;
  text-shadow: 0 0.05em 0.5em rgba(0, 0, 0, 0.5);
}

.cover-script {
  margin: 0;
  font-family: var(--script);
  font-size: 3.4em;
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}

.cover-tagline {
  margin: 0.2em 0 0;
  font-family: var(--serif);
  font-size: 0.62em;
  line-height: 1.7;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.cover-next {
  margin-top: 1.4em;
  padding: 0.8em 1.8em;
  border: 1px solid rgba(var(--cover-next-light), 0.45);
  border-radius: 2em;
  background: rgba(var(--cover-next-shade), 0.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: inherit;
  font-family: var(--sans);
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-shadow: inherit;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
  animation:
    cover-next-entrada 1.2s ease-out 0.8s both,
    cover-next-latido 2.5s ease-in-out 2s infinite;
}

.cover-next .arrow-icon {
  display: inline-block;
  margin-left: 0.6em;
  animation: cover-next-flecha 2.5s ease-in-out 2s infinite;
}

.cover-next:hover,
.cover-next:focus-visible {
  background-color: rgba(var(--cover-next-light), 0.18);
  border-color: rgb(var(--cover-next-light));
}

.cover-next:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@keyframes cover-next-entrada {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--cover-next-light), 0); }
  40%  { transform: scale(1.08); box-shadow: 0 0 1.6em 0.3em rgba(var(--cover-next-light), 0.55); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(var(--cover-next-light), 0); }
}

@keyframes cover-next-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cover-next-light), 0); }
  50%      { box-shadow: 0 0 1em 0.1em rgba(var(--cover-next-light), 0.25); }
}

@keyframes cover-next-flecha {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(0.5em); }
}

@media (prefers-reduced-motion: reduce) {
  .cover-next,
  .cover-next .arrow-icon {
    animation: none;
  }
}

/* ---------- Págs. 2–3 · Intros ---------- */

#magazine .page-intro {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-template-rows: minmax(0, 1fr);
  column-gap: 1.6em;
  align-items: center;
}

#magazine .page-retrato {
  grid-template-columns: 1.2fr 1fr;
}

.page-retrato .intro-photo { grid-column: 1; grid-row: 1; }
.page-retrato .intro-text  { grid-column: 2; grid-row: 1; }

.intro-watermark {
  position: absolute;
  top: 0.05em;
  left: -0.04em;
  z-index: 0;
  font-family: var(--display);
  font-size: 8.5em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.07;
  pointer-events: none;
}

.page-retrato .intro-watermark {
  left: auto;
  right: -0.04em;
}

.intro-text {
  position: relative;
  z-index: 1;
}

.intro-text .kicker {
  color: var(--ink-soft);
}

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0.35em 0 0.55em;
}

.lead {
  font-family: var(--serif);
  font-size: 0.8em;
  line-height: 1.7;
  margin: 0 0 1.8em;
}

.intro-text .btn-outline {
  padding: 1em 1.6em;
  white-space: nowrap;
}

.intro-photo {
  position: relative;
  z-index: 1;
  display: block;
  align-self: stretch;
  width: 100%;
  height: calc(100% - 4.6em);
  min-height: 0;
  margin: 3.4em 0 1.2em;
  object-fit: cover;
  object-position: 50% 30%;
  background-color: var(--placeholder);
}

/* ---------- Galerías (págs. 4–33): posiciones en % de la página ---------- */

#magazine .page.bg-vino {
  background-color: var(--vino);
  color: var(--paper);
}

#magazine .page.bg-crema {
  background-color: var(--paper);
  color: var(--wine);
}

#magazine .page.bg-carbon {
  background-color: var(--carbon);
  color: var(--paper);
}

#magazine .page.bg-taupe {
  background-color: var(--taupe);
  color: var(--paper);
}

.bg-vino .page-number,
.bg-carbon .page-number,
.bg-taupe .page-number {
  color: rgba(239, 224, 200, 0.55);
}

.bd-photo {
  position: absolute;
  z-index: 1;
  display: block;
  margin: 0;
  object-fit: cover;
  background-color: #2a0608;
  box-shadow: 0 0.35em 1em rgba(0, 0, 0, 0.35);
}

.bd-word {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: var(--typewriter);
  font-size: 2em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bd-down,
.bd-up {
  writing-mode: vertical-rl;
}

.bd-up {
  transform: rotate(180deg);
}

/* Pág. 4 — Dulce y suave */
.bd-01 .bd-t1 { left: 4%; width: 42%; top: 17%; text-align: center; font-size: 2.4em; line-height: 1.4; }
.bd-01 .bd-p1 { left: 55.5%; top: 4%; width: 40.5%; height: 48%; }
.bd-01 .bd-p2 { left: 4%; top: 57%; width: 73.5%; height: 35%; }

/* Pág. 5 — Perma / nente */
.bd-02 .bd-p1 { left: 18.5%; top: 6%; width: 63.5%; height: 74%; }
.bd-02 .bd-t1 { left: 0; right: 0; top: 82.5%; text-align: center; font-size: 1.6em; line-height: 1.25; }

/* Pág. 8 — Impaciente */
.bd-03 .bd-p1 { left: 8%; top: 16%; width: auto; height: 64%; }
.bd-03 .bd-t1 { left: 88%; top: 48%; font-size: 1.5em; transform: translateY(-50%) rotate(180deg); }

/* Pág. 10 — Deleite */
.bd-04 .bd-p1 { left: 15.5%; top: 7%; width: 67%; height: 77%; }
.bd-04 .bd-t1 { left: 0; right: 0; top: 87%; text-align: center; font-size: 1.8em; }

/* Pág. 11 — Sutil / Tierno */
.bd-05::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--paper);
  clip-path: polygon(100% 8%, 100% 100%, 21% 100%);
}

.bd-05 .bd-p1 { left: 6.5%; top: 6.5%; width: 50%; height: 59%; }
.bd-05 .bd-p2 { left: 63%; top: 55%; width: 34%; height: 37%; }
.bd-05 .bd-t1 { left: 71%; top: 29%; font-size: 2.2em; transform: translate(-50%, -50%) rotate(-57deg); }
.bd-05 .bd-t2 { left: 44%; top: 79%; font-size: 2.2em; color: var(--vino); transform: translate(-50%, -50%) rotate(-57deg); }

.bd-05 .page-number,
.bd-05 .nav-next {
  color: var(--vino);
}

/* Pág. 12 — Seductor / En vol vente */
.bd-06 .bd-t1 { left: 0; right: 0; top: 4%; text-align: center; font-size: 2.2em; }
.bd-06 .bd-p1 { left: 10.5%; top: 14%; width: 32%; height: 38%; }
.bd-06 .bd-p2 { left: 55.5%; top: 17%; width: 31.5%; height: 37.5%; }
.bd-06 .bd-p3 { left: 33.5%; top: 58%; width: 33%; height: 34%; }
.bd-06 .bd-t2 { left: 4.5%; top: 61%; font-size: 1.4em; line-height: 2.5; }
.bd-06 .bd-t2 span { display: block; }
.bd-06 .bd-t2 span + span { padding-left: 0.6em; }

/* Pág. 13 — vulnerable */
.bd-07 .bd-p1 { left: 5.5%; top: 30%; width: 89%; height: 47.5%; }
.bd-07 .bd-t1 { left: 0; right: 0; top: 86%; text-align: center; font-size: 1.9em; letter-spacing: 0.15em; text-transform: none; }

/* Pág. 14 — Envolvente */
.bd-08 .bd-p1 { left: 15.5%; top: 6.5%; width: 67%; height: 78%; }
.bd-08 .bd-t1 { left: 0; right: 0; top: 88%; text-align: center; font-size: 1.5em; }

/* Pág. 15 — Deseo */
.bd-09 .bd-t1 { left: 0; right: 0; top: 11%; text-align: center; font-size: 2em; }
.bd-09 .bd-p1 { left: 9%; top: 28%; width: 82%; height: 44%; }

/* Pág. 16 — Con-pla / cer */
.bd-10 .bd-p1 { left: 5%; top: 4%; width: 46%; height: 55.5%; }
.bd-10 .bd-t1 { right: 9%; top: 6%; font-size: 3.2em; line-height: 1.25; }
.bd-10 .bd-t2 { left: 14%; top: 64%; font-size: 1.7em; }
.bd-10 .bd-p2 { left: 35.5%; top: 64%; width: 61%; height: 28%; }

/* Pág. 17 — Intachable */
.bd-11 .bd-t1 { left: 0; right: 0; top: 4.5%; text-align: center; font-size: 2.2em; }
.bd-11 .bd-p1 { left: 20.5%; top: 17.5%; width: 58.5%; height: 70%; }

/* Pág. 18 — EX + otico / tasis */
.bd-12 .bd-t1,
.bd-12 .bd-t2 { font-size: 2em; letter-spacing: 0.15em; text-transform: none; }
.bd-12 .bd-t1 { left: 10%; top: 13.5%; }
.bd-12 .bd-p1 { left: 3.7%; top: 22%; width: 46%; height: 55%; }
.bd-12 .bd-t2 { left: 59%; top: 19.5%; }
.bd-12 .bd-p2 { left: 56.3%; top: 29%; width: 37.2%; height: 44.5%; }
.bd-12 .bd-t3 { left: 8.5%; top: 79%; font-size: 5.2em; letter-spacing: 0.1em; }

/* Pág. 19 — Sabor / Tropical */
.bd-13 .bd-t1 { left: 7%; top: 3.5%; font-size: 2.2em; }
.bd-13 .bd-p1 { left: 21.5%; top: 13.5%; width: 57%; height: 68%; }
.bd-13 .bd-t2 { right: 4%; top: 85%; font-size: 2em; }

/* Págs. 6, 7 y 9 — sin boceto */

/* Pág. 6 — Hipnótica */
.bd-14 .bd-p1 { left: 50%; top: 6%; width: auto; height: 76%; transform: translateX(-50%); }
.bd-14 .bd-t1 { left: 0; right: 0; top: 87%; text-align: center; font-size: 1.8em; }

/* Pág. 7 — Natural */
.bd-15 .bd-p1 { left: 7%; top: 8%; width: auto; height: 80%; }
.bd-15 .bd-t1 { left: 84%; top: 50%; font-size: 2.6em; transform: translateY(-50%); }

/* Pág. 9 — Húmedo */
.bd-16 .bd-t1 { left: 0; right: 0; top: 4.5%; text-align: center; font-size: 2.2em; }
.bd-16 .bd-p1 { left: 50%; top: 15%; width: auto; height: 76%; transform: translateX(-50%); }

/* ---------- Retrato femenino (págs. 20–26) ---------- */

/* Pág. 21 — Magnética / Atracción */
.rt-01 .bd-p1 { left: 2.6%; top: 5.4%; width: 50.4%; height: 54%; }
.rt-01 .bd-t1 { left: 77%; top: 27%; font-size: 1.5em; transform: translate(-50%, -50%); }
.rt-01 .bd-t2 { left: 28%; top: 77%; font-size: 1.6em; line-height: 1.5; text-align: center; transform: translate(-50%, -50%); }
.rt-01 .bd-p2 { left: 57.4%; top: 54%; width: 39.8%; height: 39%; }

/* Pág. 20 — Resiliente */
.rt-02 .bd-t1 { left: 0; right: 0; top: 7.5%; text-align: center; font-size: 2.3em; }
.rt-02 .hm-cap { left: 0; right: 0; top: 14.5%; text-align: center; padding-left: 0.3em; opacity: 0.85; }
.rt-02 .bd-p1 { left: 19.7%; top: 20%; width: 61.3%; height: 72%; }

/* Pág. 22 — Imparable */
.rt-03 .bd-p1 { left: 3.9%; top: 7%; width: 71.7%; height: 85%; }
.rt-03 .bd-t1 { left: 84%; top: 50%; font-size: 3.2em; transform: translateY(-50%); }

/* Pág. 23 — Auténtica */
.rt-04 .bd-p1 { left: 27%; top: 7.2%; width: 60.6%; height: 72.6%; }
.rt-04 .bd-t1 { left: 4.5%; top: 84%; font-size: 2.2em; }

/* Pág. 24 — Revelador */
.rt-05 .bd-p1 { left: 17.3%; top: 9%; width: 60.3%; height: 72.4%; }
.rt-05 .bd-t1 { left: 0; right: 0; top: 86%; text-align: center; font-size: 2.1em; padding-left: 0.4em; }

/* Pág. 25 — Desafiante */
.rt-06 .bd-p1 { left: 18.5%; top: 9%; width: 64.2%; height: 76%; }
.rt-06 .bd-t1 { left: 0; right: 0; top: 88%; text-align: center; font-size: 1.9em; }

/* Pág. 30 — Esperanza */
.rt-07 .bd-p1 { left: 32%; top: 1.8%; width: 65.6%; height: 66%; }
.rt-07 .bd-p2 { left: 5.4%; top: 69%; width: 36.6%; height: 24%; overflow: hidden; }
.rt-07 .bd-t1 { left: 48%; top: 81%; font-size: 2.1em; }

.rt-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  transform: scale(2.2);
  transform-origin: 50% 98%;
}

/* Pág. 26 — Umbral */
.rt-08 .bd-p1 { left: 21.4%; top: 8%; width: 61.1%; height: 73.3%; }
.rt-08 .bd-t1 { left: 0; right: 0; top: 86%; text-align: center; font-size: 1.6em; }

/* ---------- Retrato masculino (págs. 27–33) ---------- */

.hm-title {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: var(--display);
  font-size: 3.6em;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hm-cap {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: var(--typewriter);
  font-size: 0.7em;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.7;
}

.bg-carbon .bd-photo { box-shadow: 0 0 0 0.3em var(--carbon), 0 0.6em 1.4em rgba(0, 0, 0, 0.5); }
.bg-taupe .bd-photo { box-shadow: 0 0 0 0.3em var(--taupe), 0 0.6em 1.4em rgba(0, 0, 0, 0.4); }

/* Pág. 28 — Esencia */
.hm-01 .bd-p1 { left: 50%; top: 6%; width: auto; height: 74%; transform: translateX(-50%); }
.hm-01 .hm-title { left: 0; right: 0; top: 84%; text-align: center; }

/* Pág. 27 — Tinta & humo */
.hm-02 .hm-title { left: 7%; top: 6%; }
.hm-02 .hm-cap { left: 7.5%; top: 25%; }
.hm-02 .bd-p1 { left: 7%; top: 32%; width: 41%; height: 48%; }
.hm-02 .bd-p2 { left: 52%; top: 41%; width: 41%; height: 48%; }

/* Pág. 29 — Temple */
.hm-03 .bd-p1 { left: 6%; top: 6%; width: 38%; height: 43%; }
.hm-03 .bd-p2 { left: 50%; top: 6%; width: 44%; height: 62%; }
.hm-03 .bd-p3 { left: 16%; top: 46%; width: 30%; height: 42%; z-index: 2; }
.hm-03 .hm-title { left: 52%; top: 73%; }
.hm-03 .hm-cap { left: 52.5%; top: 84%; }

/* Pág. 31 — Escalinata */
.hm-04 .bd-p1 { left: 50%; top: 7%; width: auto; height: 84%; transform: translateX(-50%); }

/* Pág. 33 — Presencia */
.hm-05 .hm-title { left: 6%; top: 5%; font-size: 3.4em; }
.hm-05 .bd-photo { box-shadow: 0 0.6em 1.4em rgba(0, 0, 0, 0.5); }
.hm-05 .bd-p1 { left: 5%; top: 29%; width: 29%; height: 39%; }
.hm-05 .bd-p2 { left: 35.5%; top: 39%; width: 29%; height: 39%; }
.hm-05 .bd-p3 { left: 66%; top: 29%; width: 29%; height: 39%; }

/* Pág. 32 — Auténtico */
.hm-06 .bd-p1 { right: 5%; top: 7%; width: auto; height: 78%; }
.hm-06 .hm-title {
  left: 7%;
  top: 47%;
  font-size: 3.8em;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
}

/* ---------- Págs. 34–35 · Precios ---------- */

.prices-header {
  text-align: center;
  margin-bottom: 1.1em;
}

.prices-header h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0.35em 0 0.3em;
}

.prices-category {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9em;
  margin: 0;
}

.prices-category::before,
.prices-category::after {
  content: "";
  display: inline-block;
  width: 2em;
  height: 1px;
  background: var(--ink);
  vertical-align: middle;
  margin: 0 0.8em;
}

.page-prices .accordion {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.accordion > details {
  margin: 0;
}

.prices-body {
  display: flex;
  align-items: flex-start;
  gap: 1.2em;
  flex: 0 1 auto;
  min-height: 0;
}

.prices-body .accordion {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
}

.prices-media {
  flex: 0 0 42%;
  width: 42%;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.prices-photo {
  display: block;
  width: 100%;
  height: 17em;
  object-fit: cover;
  object-position: center 25%;
}

.btn-continue {
  border: 1.5px solid var(--wine);
  color: var(--wine);
  padding: 1em 0.8em;
  font-size: 0.5em;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-align: center;
}

.btn-continue:hover {
  background: var(--wine);
  color: var(--paper);
}

.prices-body .accordion > details > summary {
  flex-wrap: wrap;
  gap: 0.2em 0.6em;
  letter-spacing: 0.1em;
}

.prices-body .accordion > details > summary > span:first-child {
  flex: 1 0 100%;
}

.prices-body .accordion > details > summary .price {
  margin-left: 0;
  flex: 1;
}

.prices-body .accordion ul {
  columns: 1;
  line-height: 2;
}

.prices-body .btn-reserve {
  padding: 1.1em 1em;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.prices-body .info-box summary {
  padding: 0.75em 0.8em;
  letter-spacing: 0.14em;
}

.accordion > details > summary {
  display: flex;
  align-items: baseline;
  gap: 1em;
  list-style: none;
  cursor: pointer;
  padding: 0.95em 0.3em 0.8em;
  border-bottom: 1px solid var(--wine);
  font-family: var(--serif);
  font-size: 0.92em;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.25s, padding 0.25s;
  -webkit-user-select: none;
  user-select: none;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion summary::marker {
  content: "";
}

.accordion > details > summary:hover {
  color: var(--wine);
  padding-left: 0.6em;
}

.accordion summary:focus-visible {
  outline: 1px solid var(--wine);
  outline-offset: 2px;
}

.accordion > details > summary .price {
  margin-left: auto;
  font-style: italic;
  font-size: 0.95em;
  letter-spacing: 0.04em;
  text-transform: none;
}

.accordion > details > summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.1em;
  line-height: 1;
  color: var(--wine);
  transition: transform 0.3s ease;
}

.accordion > details[open] > summary::after {
  transform: rotate(45deg);
}

.accordion ul {
  list-style: none;
  margin: 0;
  padding: 0.9em 0.3em 1em;
  columns: 2;
  column-gap: 2em;
  font-family: var(--sans);
  font-size: 0.62em;
  font-weight: 300;
  line-height: 2.3;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.accordion > details[open] .package-body {
  animation: accordion-in 0.35s ease;
}

.accordion li {
  break-inside: avoid;
}

.accordion li::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 1px;
  background: var(--wine);
  vertical-align: middle;
  margin-right: 0.8em;
}

@keyframes accordion-in {
  from { opacity: 0; transform: translateY(-0.3em); }
  to   { opacity: 1; transform: none; }
}

.package-body {
  display: flex;
  flex-direction: column;
  padding-bottom: 1em;
}

.page-prices .btn-reserve {
  align-self: center;
  margin-top: 1em;
}

.info-box {
  border: 1px solid var(--wine);
  border-left-width: 3px;
  background: rgba(173, 43, 49, 0.07);
}

.info-box summary {
  list-style: none;
  cursor: pointer;
  padding: 0.75em 1em;
  font-family: var(--sans);
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wine);
  -webkit-user-select: none;
  user-select: none;
}

.info-box summary::after {
  content: "\203A";
  float: right;
  font-size: 1.4em;
  line-height: 0.7;
  transition: transform 0.3s ease;
}

.info-box[open] summary::after {
  transform: rotate(90deg);
}

.info-box summary:hover {
  background: rgba(173, 43, 49, 0.08);
}

.info-body {
  padding: 0 1em 0.8em;
  animation: accordion-in 0.3s ease;
}

.info-body h3 {
  font-size: 0.52em;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0.9em 0 0.4em;
}

.info-body h3:first-child {
  margin-top: 0.2em;
}

.info-body p {
  font-size: 0.58em;
  line-height: 1.6;
  margin: 0;
  color: var(--ink-soft);
}

.btn-reserve i {
  font-size: 1.4em;
}

.fine-print {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9em 1.2em;
  padding-top: 0.9em;
  margin-bottom: 0.4em;
}

.fine-print .fine-print-full {
  grid-column: 1 / -1;
}

.fine-print h3 {
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin: 0 0 0.6em;
}

.fine-print p {
  font-size: 0.6em;
  line-height: 1.6;
  margin: 0;
  color: var(--ink-soft);
}

/* ---------- Pág. 36 · Contraportada ---------- */

#magazine .page-back {
  background-color: var(--ink);
  color: var(--paper);
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.back-brand {
  font-family: var(--serif);
  font-size: 1.1em;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin: 1.5em 0 0;
}

.back-actions {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  width: 100%;
  max-width: 20em;
}

.btn-outline.btn-large {
  border-color: var(--paper);
  color: var(--paper);
  font-size: 0.68em;
  letter-spacing: 0.18em;
  line-height: 1.6;
  padding: 1.6em 1.8em;
}

.btn-outline.btn-large i {
  font-size: 1.5em;
}

.btn-outline.btn-large strong {
  font-weight: 600;
}

.btn-outline.btn-large:hover {
  background: var(--paper);
  color: var(--ink);
}

.back-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9em;
}

.back-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.62em;
  letter-spacing: 0.12em;
  opacity: 0.8;
  transition: opacity 0.25s;
}

.back-social a:hover,
.back-social a:focus-visible {
  opacity: 1;
}

.back-social i {
  font-size: 1.4em;
}

.back-footer {
  font-size: 0.6em;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 1em;
}

/* ---------- Móvil (< 768px, BREAKPOINT de script.js) ---------- */

@media (max-width: 767px) {
  body {
    padding: 8px;
    gap: 0;
  }

  #magazine .page {
    padding: 1.8em 1.5em 2.6em;
  }

  .page-nav {
    left: 1.5em;
    right: 1.5em;
  }

  .page-nav button {
    font-size: 0.8em;
    letter-spacing: 0.2em;
    opacity: 0.75;
  }

  .page-number {
    font-size: 0.8em;
  }

  .kicker,
  .btn-outline {
    font-size: 0.8em;
    letter-spacing: 0.2em;
  }

  .intro-text .btn-outline {
    padding: 0.9em 1em;
    letter-spacing: 0.15em;
  }

  .lead {
    font-size: 1.02em;
    line-height: 1.55;
  }

  .prices-header {
    margin-bottom: 0.8em;
  }

  .prices-body {
    gap: 1em;
  }

  .prices-media {
    flex-basis: 36%;
    width: 36%;
  }

  .prices-photo {
    height: 15em;
  }

  .prices-media .btn-continue {
    padding: 0.9em 0.4em;
    font-size: 0.62em;
    letter-spacing: 0.08em;
  }

  .prices-body .btn-reserve {
    gap: 0.5em;
    padding: 1em 0.6em;
    letter-spacing: 0.05em;
    white-space: normal;
  }

  .accordion > details > summary {
    padding: 0.8em 0.3em 0.65em;
  }

  .accordion ul {
    font-size: 0.88em;
    line-height: 1.75;
    padding: 0.7em 0.3em 0.8em;
  }

  .fine-print {
    gap: 0.9em;
  }

  .fine-print h3 {
    font-size: 0.72em;
    letter-spacing: 0.2em;
  }

  .fine-print p {
    font-size: 0.8em;
    line-height: 1.45;
  }

  .info-box summary {
    font-size: 0.75em;
    letter-spacing: 0.16em;
  }

  .info-body h3 {
    font-size: 0.72em;
    letter-spacing: 0.2em;
  }

  .info-body p {
    font-size: 0.8em;
    line-height: 1.45;
  }

  .btn-outline.btn-large {
    font-size: 0.8em;
    letter-spacing: 0.14em;
  }

  .back-social a {
    font-size: 0.85em;
    letter-spacing: 0.08em;
  }

  .back-footer {
    font-size: 0.8em;
  }
}