/* ==========================================================
   Diseño "Revista" · XV años · cover girl
   set de fotos (flash + tira de contactos) → portada de revista ficticia → doble página 3D
   ========================================================== */

/* Bodoni Moda (redonda e itálica) no está declarada en base.css: archivos locales OFL */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/bodoni-moda-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/bodoni-moda-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(../fonts/bodoni-moda-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(../fonts/bodoni-moda-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --rosa: #e2347f;
  --rosa-viva: #ff4f9f;
  --rosa-claro: #f8c9d9;
  --champan: #f3e3c7;
  --oro: #c9a14a;
  --oro-claro: #f2dc9e;
  --negro: #141014;
  --tinta: #2a1620;
  --suave: #8c6b78;
  --papel: #fbf6f0;
  --bodoni: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --s-fondo: transparent;
  --s-tinta: var(--tinta);
  --s-suave: var(--suave);
  --s-acento: var(--rosa);
  --s-acento-tinta: #fff;
  --s-tarjeta: rgba(255, 255, 255, .86);
  --s-borde: rgba(20, 16, 20, .14);
  --s-radio: 4px;
  --s-sombra: 0 22px 36px -26px rgba(60, 10, 30, .55);
  --s-fuente: var(--sans);
  --s-titulo: var(--bodoni);
  --s-titulo-tam: clamp(2.3rem, 10vw, 3.1rem);
  --s-etiqueta: var(--sans);
  --s-num: var(--bodoni);
  --s-titulo-color: var(--negro);
}

body {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .7), transparent 60%),
    linear-gradient(180deg, #f9e6ea 0%, #f6ece2 50%, #f9e3ea 100%);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: var(--sans);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ======================================================
   Set de fotografía (hero)
   ====================================================== */
.estudio {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(330px, 1fr) auto;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 46px);
  overflow: hidden;
  isolation: isolate;
  color: var(--tinta);
}

/* Ciclorama: fondo continuo de estudio rosa → champán con piso curvo */
.ciclorama {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 42% at 50% 40%, rgba(255, 248, 240, .95), rgba(255, 248, 240, 0) 70%),
    linear-gradient(180deg, #efb9c9 0%, #f5d2da 34%, #f6e2d5 62%, #efd2c4 100%);
}
.ciclorama__luz {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 40% at 50% 42%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%);
  opacity: .35;
  transition: opacity .5s ease;
}
.ciclorama__piso {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 34%;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  background: linear-gradient(180deg, rgba(255, 244, 236, .85), rgba(240, 200, 196, .6) 60%, rgba(214, 160, 165, .55));
  box-shadow: 0 -18px 40px -20px rgba(255, 255, 255, .9) inset;
}
.estudio.disparo .ciclorama__luz { opacity: 1; transition-duration: .05s; }

/* Softboxes */
.softbox { position: absolute; top: 12%; z-index: -1; width: clamp(70px, 20vw, 130px); height: 62%; pointer-events: none; }
.softbox--izq { left: -4%; transform: perspective(500px) rotateY(28deg); }
.softbox--der { right: -4%; transform: perspective(500px) rotateY(-28deg); }
.softbox__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 3 / 4;
  border: 5px solid #2b2228;
  border-radius: 4px;
  background: radial-gradient(70% 70% at 50% 50%, #fffaf6, #fbe4e9 70%, #f0c4cf);
  box-shadow: 0 0 30px rgba(255, 240, 245, .7);
  transition: box-shadow .5s ease, background .5s ease;
}
.softbox__brazo { position: absolute; left: 50%; top: 40%; bottom: 8%; width: 3px; margin-left: -1.5px; background: linear-gradient(#3a2d33, #1d161a); }
.softbox__pie {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60%;
  height: 9%;
  transform: translateX(-50%);
  border-left: 2px solid #2b2228;
  border-right: 2px solid #2b2228;
  border-top: 2px solid transparent;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, transparent 47%, #2b2228 47% 53%, transparent 53%);
}
.estudio.disparo .softbox__panel { background: #fff; box-shadow: 0 0 70px 30px rgba(255, 255, 255, .95); transition-duration: .04s; }

/* Barra superior */
.estudio__barra { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; max-width: 860px; justify-self: center; }
.estudio__rec, .estudio__contador {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20, 16, 20, .82);
  color: #fff;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.estudio__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--rosa-viva); box-shadow: 0 0 8px var(--rosa-viva); animation: rec 1.4s ease-in-out infinite; }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.estudio__contador b { color: var(--oro-claro); font-weight: 700; }
.estudio.portada-on .estudio__barra { opacity: 0; transition: opacity .6s ease; }

/* Escenario: visor + tira de contactos (y la revista encima) */
.escenario {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  min-height: 0;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 10px;
}

/* ---------- Visor ---------- */
.visor {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #2a1a22;
  box-shadow: 0 24px 40px -24px rgba(60, 10, 30, .7), 0 0 0 1px rgba(255, 255, 255, .5);
  cursor: crosshair;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .6s ease, transform .6s ease, visibility 0s;
}
.visor:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
.visor__modelo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  opacity: 0;
  filter: blur(7px) saturate(.9) brightness(1.04);
  transform: scale(1.06);
  transition: opacity .45s ease, filter .14s ease, transform .6s ease;
}
.visor__modelo img.activa { opacity: 1; }
.visor.enfoca .visor__modelo img.activa { filter: none; transform: scale(1.02); }
.visor::after {                            /* viñeta del visor */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90% 80% at 50% 45%, transparent 55%, rgba(30, 6, 18, .45));
}
.visor__marcas i { position: absolute; z-index: 1; width: 22px; height: 22px; border: 0 solid rgba(255, 255, 255, .9); }
.visor__marcas i:nth-child(1) { left: 12px; top: 12px; border-left-width: 2px; border-top-width: 2px; }
.visor__marcas i:nth-child(2) { right: 12px; top: 12px; border-right-width: 2px; border-top-width: 2px; }
.visor__marcas i:nth-child(3) { left: 12px; bottom: 12px; border-left-width: 2px; border-bottom-width: 2px; }
.visor__marcas i:nth-child(4) { right: 12px; bottom: 12px; border-right-width: 2px; border-bottom-width: 2px; }
.visor__foco {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 36%;
  width: 26%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 3px;
  transition: transform .12s ease, border-color .12s ease;
}
.visor.enfoca .visor__foco { transform: translate(-50%, -50%) scale(.82); border-color: var(--oro-claro); box-shadow: 0 0 10px rgba(242, 220, 158, .8); }
.visor__hud {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: .6rem;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.visor__voz {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 9%;
  max-width: 86%;
  padding: 7px 16px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 20px -10px rgba(60, 10, 30, .7);
  font-family: var(--bodoni);
  font-style: italic;
  font-size: clamp(1rem, 4.6vw, 1.25rem);
  line-height: 1.15;
  color: var(--rosa);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px) scale(.85);
  transition: opacity .25s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.visor__voz.ver { opacity: 1; transform: translate(-50%, 0) scale(1); }
.visor__toca {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(20, 16, 20, .72);
  color: #fff;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: latido 1.8s ease-in-out infinite;
  transition: opacity .4s ease;
}
.visor__toca svg { width: 16px; height: 16px; fill: var(--oro-claro); }
@keyframes latido { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
.visor.usado .visor__toca { opacity: 0; animation: none; }
.visor:disabled { cursor: default; }

/* ---------- Tira de contactos ---------- */
.tira {
  position: relative;
  margin: 0;
  padding: 8px 9px;
  list-style: none;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 7px;
  border-radius: 6px;
  background: #1b1317;
  box-shadow: 0 18px 30px -20px rgba(30, 6, 18, .8);
  transition: opacity .6s ease, visibility 0s;
}
.tira::before, .tira::after {              /* perforaciones de la película */
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: repeating-linear-gradient(180deg, rgba(255, 236, 220, .55) 0 5px, transparent 5px 11px);
  border-radius: 1px;
}
.tira::before { left: 2px; }
.tira::after { right: 2px; }
.toma { position: relative; min-height: 0; border-radius: 2px; background: rgba(255, 255, 255, .06); }
.toma img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  border: 1.5px solid #fff;
  border-radius: 2px;
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 50%;
}
.toma.tomada img { opacity: 1; visibility: visible; }
.toma--bn img { filter: grayscale(1) contrast(1.12); }
.toma--calido img { filter: sepia(.28) saturate(1.25) brightness(1.03); }
.toma__num {
  position: absolute;
  z-index: 3;
  left: 2px;
  bottom: 1px;
  font-family: var(--mono);
  font-size: .5rem;
  line-height: 1;
  color: #f2a05a;
  text-shadow: 0 0 2px #000;
  pointer-events: none;
}
.toma.elegida::after {                     /* círculo de plumón rosa del editor */
  content: "";
  position: absolute;
  z-index: 4;
  inset: -6px -5px;
  border: 2.5px solid var(--rosa-viva);
  border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
  transform: rotate(-7deg);
  animation: plumon .45s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes plumon { from { opacity: 0; transform: rotate(-30deg) scale(1.5); } to { opacity: 1; transform: rotate(-7deg) scale(1); } }
.elegida {
  position: absolute;
  z-index: 4;
  right: 64px;
  bottom: 2%;
  margin: 0;
  font-family: "Caveat", cursive;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rosa-viva);
  text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255, 255, 255, .9);
  transform: rotate(-8deg) scale(.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.5, .5, 1);
}
.estudio.elegida-on .elegida { opacity: 1; transform: rotate(-8deg) scale(1); }
.estudio.portada-on .elegida { opacity: 0; transition-delay: 0s; }
.estudio.volando .tira { background: transparent; box-shadow: none; }
.estudio.volando .tira::before, .estudio.volando .tira::after, .estudio.volando .toma__num { opacity: 0; transition: opacity .3s; }
.estudio.portada-on .visor, .estudio.portada-on .tira { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, visibility 0s .6s; }
.estudio.armando .visor { opacity: .35; transform: scale(.97); }

/* ======================================================
   Revista: portada + doble página
   ====================================================== */
.libro-esc {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease, visibility 0s .7s;
}
.estudio.portada-on .libro-esc { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .7s ease, visibility 0s; }

.libro {
  --pw: max(220px, min(calc(100vw - 32px), 380px, calc((100vh - 210px) * .75)));
  position: relative;
  width: var(--pw);
  height: calc(var(--pw) / .75);
  container-type: inline-size;
  perspective: 2200px;
  transition: transform .9s cubic-bezier(.6, .05, .25, 1);
}
@supports (height: 100svh) {
  .libro { --pw: max(220px, min(calc(100vw - 32px), 380px, calc((100svh - 210px) * .75))); }
}
.libro.abierta { transform: translateX(100%); }
.libro.abierta.ver-agenda { transform: translateX(0); }

.hoja {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.45, .05, .25, 1);
}
.libro.abierta .hoja { transform: rotateY(-180deg); }
.hoja.arrastrando { transition: none; }
.cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cara--dorso { transform: rotateY(180deg); }
.libro.abierta .cara--frente { pointer-events: none; }
.libro:not(.abierta) .cara--dorso { pointer-events: none; }

/* ---------- Portada ---------- */
.portada {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px 6px 6px 2px;
  background: #f3d3dc;
  box-shadow: 0 30px 60px -26px rgba(60, 10, 30, .7), 0 0 0 1px rgba(255, 255, 255, .4) inset;
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform .5s ease-out;
  scale: .9;
  opacity: 0;
}
.estudio.portada-on .portada { scale: 1; opacity: 1; transition: transform .5s ease-out, scale .9s cubic-bezier(.2, .9, .3, 1.15), opacity .6s ease; }
.estudio.portada-on .portada.siguiendo { transition: transform .08s linear, scale .9s cubic-bezier(.2, .9, .3, 1.15), opacity .6s ease; }
.portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.portada__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 240, 236, .4) 0%, rgba(255, 240, 236, 0) 24%),
    linear-gradient(90deg, rgba(255, 244, 240, .8) 0%, rgba(255, 244, 240, .5) 26%, rgba(255, 244, 240, 0) 48%),
    linear-gradient(0deg, rgba(25, 6, 16, .84) 0%, rgba(25, 6, 16, .5) 22%, rgba(25, 6, 16, 0) 44%);
}
.portada p { margin: 0; }
.portada__numero {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  top: 2.6cqw;
  font-family: var(--sans);
  font-size: max(7px, 2.3cqw);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--negro);
}
.portada__cabecera {
  position: absolute;
  left: 0;
  right: 0;
  top: 5.4cqw;
  text-align: center;
  font-family: var(--bodoni);
  font-weight: 900;
  font-size: 19cqw;
  line-height: .92;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--rosa);
  text-shadow: 0 .5cqw 0 rgba(255, 255, 255, .55), 0 1cqw 3cqw rgba(120, 20, 60, .25);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .9s cubic-bezier(.7, 0, .2, 1);
}
.portada__cabecera.ver { clip-path: inset(-10% -5% -10% -5%); }
.portada__sub {
  position: absolute;
  left: 5cqw;
  right: 5cqw;
  top: 25cqw;
  text-align: center;
  font-family: var(--bodoni);
  font-style: italic;
  font-size: max(9px, 3.3cqw);
  color: var(--negro);
}
.portada__col { position: absolute; left: 5cqw; top: 32cqw; width: 41cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 2.2cqw; }
.tit { font-family: var(--sans); font-size: max(9px, 3.1cqw); line-height: 1.2; color: #1a0e14; }
.tit--pill {
  padding: .9cqw 2.2cqw;
  background: var(--rosa);
  color: #fff;
  font-size: max(8px, 2.6cqw);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: .8cqw .8cqw 0 var(--negro);
}
.tit--dress span { display: block; font-size: max(8px, 2.5cqw); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.tit--dress b { display: block; font-family: var(--bodoni); font-style: italic; font-weight: 400; font-size: 7cqw; line-height: .95; color: var(--rosa); }
.tit--vip .tit__pre { display: block; font-size: max(8px, 2.5cqw); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rosa); }
.tit--vip b { font-family: var(--bodoni); font-weight: 900; font-size: 4.6cqw; line-height: 1.02; color: var(--negro); overflow-wrap: anywhere; }
.tit--pag { padding-top: 1.4cqw; border-top: 1px solid rgba(20, 16, 20, .45); font-size: max(8px, 2.4cqw); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.sticker {
  position: absolute;
  right: 4.5cqw;
  top: 39cqw;
  width: 21cqw;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  color: var(--negro);
  background: radial-gradient(circle at 35% 30%, #fff6d8, var(--oro-claro) 40%, var(--oro) 85%);
  clip-path: polygon(50% 0%, 58.6% 6.8%, 69.1% 3.8%, 74.4% 13.4%, 85.4% 14.6%, 86.6% 25.6%, 96.2% 30.9%, 93.2% 41.4%, 100% 50%, 93.2% 58.6%, 96.2% 69.1%, 86.6% 74.4%, 85.4% 85.4%, 74.4% 86.6%, 69.1% 96.2%, 58.6% 93.2%, 50% 100%, 41.4% 93.2%, 30.9% 96.2%, 25.6% 86.6%, 14.6% 85.4%, 13.4% 74.4%, 3.8% 69.1%, 6.8% 58.6%, 0% 50%, 6.8% 41.4%, 3.8% 30.9%, 13.4% 25.6%, 14.6% 14.6%, 25.6% 13.4%, 30.9% 3.8%, 41.4% 6.8%);
  rotate: 12deg;
}
.sticker b { font-family: var(--bodoni); font-weight: 900; font-size: 8cqw; line-height: .9; }
.sticker span { max-width: 15cqw; font-family: var(--sans); font-size: max(7px, 2.1cqw); font-weight: 700; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
.sticker.linea { transform: scale(.3); }
.sticker.linea.ver { transform: none; transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1); }

.portada__pie { position: absolute; left: 4cqw; right: 4cqw; bottom: 13.5cqw; text-align: center; color: #fff; }
.portada__nombre {
  font-family: var(--bodoni);
  font-style: italic;
  font-weight: 400;
  font-size: 22cqw;
  line-height: .9;
  white-space: nowrap;
  text-shadow: 0 1cqw 4cqw rgba(30, 0, 15, .45);
}
.portada__cita { margin-top: .6cqw !important; font-family: var(--bodoni); font-style: italic; font-size: 5cqw; line-height: 1.1; color: var(--oro-claro); }
.portada__fecha { margin-top: 1.6cqw !important; font-size: max(8px, 2.7cqw); font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.portada__fecha b { display: inline-block; font-family: var(--bodoni); font-weight: 900; font-size: 5.2cqw; letter-spacing: .04em; color: #ff9fca; }

.barras { position: absolute; left: 4cqw; bottom: 3cqw; width: 19cqw; padding: 1cqw 1.2cqw .6cqw; background: #fff; }
.barras__svg { display: block; width: 100%; height: 6cqw; fill: #111; }
.barras span { display: block; font-family: var(--mono); font-size: max(5px, 1.8cqw); line-height: 1.3; text-align: center; color: #111; white-space: nowrap; }

/* Aparición de titulares (uno por uno, la activa revista.js) */
.linea { opacity: 0; transform: translateY(1.8cqw); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.linea.ver { opacity: 1; transform: none; }

/* Brillo holográfico de papel couché (sigue el dedo) */
.portada__holo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: var(--holo, 0);
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 34%),
    linear-gradient(115deg, transparent 18%, rgba(255, 110, 190, .38) 32%, rgba(120, 220, 255, .32) 44%, rgba(255, 240, 140, .36) 56%, rgba(200, 140, 255, .3) 66%, transparent 80%);
  background-size: 100% 100%, 240% 240%;
  background-position: center, var(--bx, 50%) var(--by, 50%);
  transition: opacity .4s ease;
}
.portada__brillo {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%);
  transform: translateX(-120%);
}
.estudio.portada-on .portada__brillo { animation: barrido 7s 2.6s ease-in-out infinite; }
@keyframes barrido { 0% { transform: translateX(-120%); } 22% { transform: translateX(120%); } 100% { transform: translateX(120%); } }

/* Esquina doblada: invita a pasar la página */
.portada__esquina {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11cqw;
  height: 11cqw;
  background: linear-gradient(to top left, #efe2d4 0 49%, rgba(0, 0, 0, .28) 49.5%, #fffaf4 51%, #e8d5c3 78%, #fff8ef 100%);
  box-shadow: -2px -2px 6px -2px rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity .5s ease;
}
.estudio.portada-on:not(.abierta) .portada__esquina.listo { opacity: 1; animation: doblez 1.6s ease-in-out infinite alternate; }
@keyframes doblez { from { width: 9cqw; height: 9cqw; } to { width: 14cqw; height: 14cqw; } }

.portada__abrir {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.portada__abrir:disabled { cursor: default; }
.portada__abrir:focus-visible { outline: 3px solid var(--rosa); outline-offset: 4px; }

/* ---------- Doble página ---------- */
.pag {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 7cqw 7cqw 11cqw;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 7%),
    var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  text-align: left;
  touch-action: pan-y;
  box-shadow: 0 30px 60px -26px rgba(60, 10, 30, .6);
}
.pag--der { border-radius: 0 6px 6px 0; }
.pag--izq {
  border-radius: 6px 0 0 6px;
  background:
    linear-gradient(270deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0) 8%),
    var(--papel);
}
.pag p, .pag h2, .pag dl, .pag dd { margin: 0; }
.pag__kicker {
  padding-bottom: 1.6cqw;
  margin-bottom: 2.6cqw !important;
  border-bottom: 1px solid var(--negro);
  font-size: max(8px, 2.5cqw);
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rosa);
}
.pag__folio {
  position: absolute;
  left: 7cqw;
  right: 7cqw;
  bottom: 4cqw;
  display: flex;
  justify-content: space-between;
  padding-top: 1.4cqw;
  border-top: 1px solid rgba(20, 16, 20, .14);
  font-family: var(--mono);
  font-size: max(7px, 2.1cqw);
  color: #9b8890;
}

.ent__titulo { margin-bottom: 2.6cqw !important; font-family: var(--bodoni); font-style: italic; font-weight: 400; font-size: 8.6cqw; line-height: 1; color: var(--negro); }
.ent__foto {
  float: right;
  width: 25cqw;
  height: 31cqw;
  margin: 0 0 1.6cqw 3cqw;
  object-fit: cover;
  object-position: 50% 20%;
  border: .8cqw solid #fff;
  border-radius: 50% 50% 2px 2px / 32% 32% 2px 2px;
  box-shadow: 0 2cqw 4cqw -2cqw rgba(60, 10, 30, .5);
}
.ent__intro { font-size: max(9px, 3.2cqw); line-height: 1.4; color: #4a3440; }
.ent__intro::first-letter { float: left; margin: .4cqw 1cqw 0 0; font-family: var(--bodoni); font-weight: 900; font-size: 9.4cqw; line-height: .8; color: var(--rosa); }
.ent__qa { clear: both; padding-top: .6cqw; }
.ent__qa dt { margin-top: 2.4cqw; font-family: var(--bodoni); font-weight: 700; font-size: max(9px, 3.4cqw); line-height: 1.2; color: var(--negro); }
.ent__qa dt::before { content: "— "; color: var(--rosa); }
.ent__qa dd { margin-top: .6cqw !important; font-size: max(9px, 3.25cqw); line-height: 1.38; color: #4a3440; }

.agenda__fecha { display: grid; font-weight: 400; line-height: 1; }
.agenda__fecha span { font-size: max(8px, 2.8cqw); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--negro); }
.agenda__fecha b { font-family: var(--bodoni); font-weight: 900; font-size: 17cqw; line-height: .9; color: var(--rosa); }
.agenda { margin: 2.4cqw 0 0; padding: 0; list-style: none; }
.agenda__item { display: grid; grid-template-columns: 13cqw 6cqw minmax(0, 1fr); gap: 2cqw; align-items: start; padding: 2.4cqw 0; border-top: 1px dashed rgba(20, 16, 20, .22); }
.agenda__hora { font-family: var(--bodoni); font-weight: 900; font-size: 4.4cqw; line-height: 1.1; color: var(--negro); }
.agenda__ico { color: var(--rosa); }
.agenda__ico svg { display: block; width: 6cqw; height: 6cqw; }
.agenda__txt { display: flex; flex-direction: column; gap: .4cqw; min-width: 0; }
.agenda__txt b { font-size: max(8px, 2.9cqw); letter-spacing: .06em; text-transform: uppercase; color: var(--negro); }
.agenda__txt span { font-size: max(9px, 3cqw); line-height: 1.3; color: var(--suave); }
.agenda__txt a { align-self: flex-start; padding: .6cqw 0; font-size: max(8px, 2.5cqw); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); }
.agenda__txt a:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.agenda__dress { margin-top: 2.4cqw !important; padding: 2cqw 3cqw; background: var(--negro); color: #fff; font-size: max(8px, 2.6cqw); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.agenda__dress b { font-family: var(--bodoni); font-style: italic; font-weight: 400; font-size: 5cqw; letter-spacing: 0; text-transform: none; color: var(--oro-claro); }
.agenda__nota { margin-top: 2cqw !important; font-family: var(--bodoni); font-style: italic; font-size: max(9px, 3.1cqw); color: var(--suave); }

/* Sombra que cruza la página derecha mientras se voltea la hoja */
.pag--der::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(40, 10, 25, .45), rgba(40, 10, 25, 0) 70%);
  opacity: 0;
  transition: opacity 1s ease;
}
.libro.volteando .pag--der::after { opacity: 1; transition-duration: .3s; }

/* ---------- Pie del set ---------- */
.estudio__pie { position: relative; z-index: 6; display: grid; justify-items: center; align-content: start; min-height: 88px; }
.estudio__pie > * {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s .5s;
}
.estudio.sesion .pista,
.estudio.armando .estudio__armando,
.estudio.portada-on:not(.abierta) .estudio__pasa,
.estudio.abierta .paginador { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .5s ease .1s, transform .5s ease .1s, visibility 0s; }

.pista { display: grid; justify-items: center; gap: 10px; }
.pista__texto, .estudio__pasa, .estudio__armando {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta);
  text-align: center;
}
.pista__texto svg { width: 18px; height: 18px; color: var(--rosa); }
.estudio__pasa svg { width: 14px; height: 14px; fill: var(--oro); animation: girar 4s linear infinite; }
@keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.estudio__armando { font-family: var(--bodoni); font-style: italic; font-size: 1.15rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--rosa); }
.btn-sesion, .pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--negro);
  color: #fff;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 22px -14px rgba(30, 6, 18, .9);
  transition: transform .2s ease, background-color .3s, color .3s;
}
.btn-sesion svg { width: 16px; height: 16px; fill: var(--oro-claro); }
.btn-sesion:active, .pag-btn:active { transform: scale(.96); }
.btn-sesion:focus-visible, .pag-btn:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
.btn-sesion:disabled { opacity: .5; cursor: default; }
.paginador { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pag-btn { min-height: 44px; padding: 0 16px; font-size: .64rem; background: rgba(255, 255, 255, .85); color: var(--negro); box-shadow: 0 0 0 1px rgba(20, 16, 20, .2); }
.pag-btn.is-activo { background: var(--rosa); color: #fff; box-shadow: none; }
#btnCerrar { background: var(--negro); color: #fff; }

/* Flash de paparazzi (dura ~0.2 s; nunca más de 3 por segundo) */
.flash { position: fixed; inset: 0; z-index: 70; background: #fff; opacity: 0; pointer-events: none; }
.flash.disparo { animation: flash .22s ease-out; }
@keyframes flash { from { opacity: .92; } to { opacity: 0; } }

.estudio .desliza-c { color: var(--tinta); }

/* Pantallas anchas: la doble página completa, lado a lado */
@media (min-width: 760px) {
  .escenario { max-width: 860px; grid-template-columns: minmax(0, 430px) 70px; justify-content: center; }
  .libro.abierta, .libro.abierta.ver-agenda { transform: translateX(50%); }
  .pag-btn--movil { display: none; }
  .softbox { width: clamp(110px, 12vw, 170px); }
  .softbox--izq { left: 4%; }
  .softbox--der { right: 4%; }
}

/* ======================================================
   Secciones (estilo editorial)
   ====================================================== */
.s-titulo { font-style: italic; letter-spacing: -.01em; }
.s-titulo::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 0 auto 16px;
  background: var(--rosa);
}

.editora { padding-top: 84px; }
.editora__kicker { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--rosa); }
.editora__mono {
  margin: 18px 0 0;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--negro);
  color: var(--oro-claro);
  font-family: var(--bodoni);
  font-weight: 900;
  font-size: 3.2rem;
  line-height: 1;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--oro), var(--s-sombra);
}
.editora__texto { margin: 26px 0 0; max-width: 21em; font-family: var(--bodoni); font-style: italic; font-size: clamp(1.15rem, 4.8vw, 1.35rem); line-height: 1.6; color: var(--tinta); }
.editora__firma { margin: 14px 0 0; font-family: "Caveat", cursive; font-size: 1.9rem; line-height: 1.1; color: var(--rosa); }
.staff { margin-top: 30px; width: min(100%, 360px); padding: 20px 22px; border: 1px solid var(--negro); background: rgba(255, 255, 255, .7); }
.staff p { margin: 0; }
.staff__t { padding-bottom: 10px; margin-bottom: 4px !important; border-bottom: 1px solid var(--negro); font-family: var(--bodoni); font-weight: 900; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; }
.staff__rol { margin-top: 12px !important; font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rosa); }
.staff__n { margin-top: 2px !important; font-family: var(--bodoni); font-style: italic; font-size: 1.15rem; }

.s-cuenta__caja { background: #fff; border-color: var(--negro); box-shadow: 4px 4px 0 var(--negro); }
.s-cuenta__num { font-weight: 900; color: var(--rosa); }
.s-evento { border-color: var(--negro); box-shadow: 6px 6px 0 var(--rosa-claro); }
.s-evento__icono { color: var(--rosa); border-color: var(--negro); background: #fff; }
.s-evento__hora { font-weight: 900; color: var(--negro); }
.s-foto { border: 5px solid #fff; border-radius: 2px; }
.s-vestimenta__tipo { font-style: italic; font-size: 2.2rem; color: var(--rosa); }
.s-paleta li { border-color: var(--negro); }

.banda { position: relative; margin: 10px 24px; overflow: hidden; border: 5px solid #fff; box-shadow: var(--s-sombra); }
.banda img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.banda figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 60px 24px 24px;
  background: linear-gradient(180deg, transparent, rgba(20, 6, 14, .82));
  font-family: var(--bodoni);
  font-style: italic;
  font-size: clamp(1.3rem, 5.6vw, 1.6rem);
  line-height: 1.25;
  text-align: center;
  color: #fff;
}
.banda__vip { padding: 4px 12px; background: var(--rosa); font-family: var(--sans); font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .3em; }

.s-rsvp {
  --s-tinta: #fff;
  --s-suave: #d9c7b5;
  --s-titulo-color: #fff;
  margin: 34px 18px 0;
  border-radius: 6px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(226, 52, 127, .35), transparent 70%),
    var(--negro);
  box-shadow: var(--s-sombra), 0 0 0 1px var(--oro) inset;
}
.s-rsvp__saludo { font-style: italic; color: var(--oro-claro); }
.s-btn--lleno { background: linear-gradient(120deg, var(--rosa), var(--rosa-viva)); padding-left: 16px; }
.pase { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--negro); }
.pase svg { width: 16px; height: 16px; fill: var(--oro-claro); }
.s-btn.confirmado .pase { animation: pase .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pase { from { transform: scale(2) rotate(-90deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } }
.vip-aviso { margin: 14px 0 0; min-height: 1.4em; text-align: center; font-family: var(--bodoni); font-style: italic; font-size: 1.4rem; color: var(--rosa); opacity: 0; transition: opacity .6s ease; }
.vip-aviso.ver { opacity: 1; }

.s-pie__n { font-style: italic; color: var(--negro); }
.btn-musica { background: var(--negro); color: var(--oro-claro); box-shadow: var(--s-sombra); }

/* Pantallas bajas: compacta el pie del set */
@media (max-height: 640px) {
  .estudio { gap: 6px; padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }
  .estudio__pie { min-height: 80px; }
  .pista { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .flash { display: none; }
  .estudio__rec i, .visor__toca, .estudio__pasa svg, .portada__brillo, .portada__esquina.listo { animation: none !important; }
  .hoja, .libro, .portada, .visor__modelo img, .linea, .portada__cabecera { transition-duration: .3s !important; }
  .toma.elegida::after { animation: none; }
  .estudio.disparo .softbox__panel, .estudio.disparo .ciclorama__luz { transition-duration: .3s; }
}