/* Atelier Celebra · la web de la marca.
   Papel marfil frío, tinta índigo (la del logo) y un filete de oro solo como línea.
   Cormorant Garamond para la voz (papelería fina, como el logo), Jost para leer. */
:root {
  --sc-canvas: #F3F0E9;
  --sc-surface: #FBF9F4;
  --sc-ink: #1D3150;
  --sc-ink-soft: #4C5B73;
  --sc-accent: #2B4C7E;
  --sc-accent-ink: #FBF9F4;
  --sc-font-display: "Cormorant Garamond", Georgia, serif;
  --sc-font-text: "Jost", system-ui, sans-serif;
  --sc-shadow-color: 32 44 68;
  --oro: #B39A63;
  --radio: 999px;
  --sombra: 0 18px 40px -22px rgb(29 49 80 / .45), 0 2px 6px -2px rgb(29 49 80 / .18);
  color-scheme: light;
}
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); }
::selection { background: #2B4C7E; color: #FBF9F4; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.titulo-xl { font-size: clamp(2.9rem, 1.6rem + 4.6vw, 6rem); font-weight: 500; line-height: 1; letter-spacing: -0.015em; }
.titulo-lg { font-size: clamp(2.3rem, 1.5rem + 3vw, 4.4rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; }
.etiqueta { font-family: var(--sc-font-text); font-size: .78rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; margin: 0; }

/* ---------- barra ---------- */
.barra { position: fixed; z-index: 60; top: 0; inset-inline: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(14px + env(safe-area-inset-top)) var(--sc-gutter) 14px; pointer-events: none; }
.barra > * { pointer-events: auto; }
.marca { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.02rem; letter-spacing: .34em; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; padding: 8px 0; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; text-decoration: none; cursor: pointer;
  font-family: var(--sc-font-text); font-weight: 500; letter-spacing: .06em; border-radius: var(--radio);
  background: var(--sc-accent); color: var(--sc-accent-ink); border: 1px solid var(--sc-accent);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out); }
.boton:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .boton:hover { background: #1D3150; box-shadow: var(--sombra); } }
.boton--barra { font-size: .86rem; padding: 11px 20px; box-shadow: 0 8px 20px -14px rgb(29 49 80 / .6); }
.boton--grande { font-size: 1rem; padding: 17px 32px; margin-top: var(--sc-7); }
@media (max-width: 560px) { .marca { font-size: .86rem; letter-spacing: .26em; } .boton--barra { font-size: .78rem; padding: 10px 14px; letter-spacing: .03em; } }

/* ---------- 1 · taller ---------- */
.velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.velo--taller { background: linear-gradient(270deg, rgb(243 240 233 / .82) 0%, rgb(243 240 233 / .55) 30%, transparent 56%); }
.copia-taller { inset-inline: auto; right: var(--sc-gutter); top: 50%; translate: 0 -46%; max-width: min(34rem, 44vw); }
.copia-taller .sc-body { font-size: 1.12rem; color: #2E3F5A; margin-top: var(--sc-5); max-width: 32ch; }
@media (max-width: 860px) {
  .acto-taller .sc-stage__poster, .acto-taller video { object-position: 30% 50%; }
  .velo--taller { background: linear-gradient(0deg, rgb(243 240 233 / .96) 0%, rgb(243 240 233 / .8) 34%, transparent 62%); }
  .copia-taller { inset-inline: var(--sc-gutter); top: auto; bottom: calc(5vh + env(safe-area-inset-bottom)); translate: none; max-width: none; }
  .copia-taller .titulo-xl { font-size: clamp(2.5rem, 10.5vw, 3.4rem); }
}

/* ---------- 2 · plantillas: el mazo de fotocopias ---------- */
.plantillas { background: #ECEAE6; }
.mazo { position: absolute; right: 20vw; top: 50%; width: clamp(170px, 17vw, 250px); aspect-ratio: 5 / 7; translate: 50% -50%; }
.molde { position: absolute; inset: 0; background: #F7F6F3; border-radius: 3px; box-shadow: 0 14px 28px -18px rgb(40 40 40 / .5), 0 1px 2px rgb(0 0 0 / .1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14%; text-align: center; color: #9C978F; font-family: var(--sc-font-text); font-size: clamp(8px, .7vw, 10px); letter-spacing: .08em;
  --t: clamp(0, calc((var(--sc-p, 0) - .04) * 3.2), 1);
  --fuera: clamp(0, calc((var(--sc-p, 0) - .6) * 5), 1);
  transform: translate(calc(var(--t) * var(--d) * 4.2vw), calc(var(--t) * var(--y) * .5vw + var(--fuera) * 30px)) rotate(calc(var(--t) * var(--d) * 7deg));
  opacity: calc(1 - var(--fuera)); }
.molde b { font-weight: 400; font-size: 1.5em; letter-spacing: .02em; color: #8C877F; }
.molde .m-sup, .molde .m-lugar { text-transform: uppercase; letter-spacing: .2em; font-size: .85em; }
.molde::before { content: ""; width: 38%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #D9D4CC; margin-bottom: 6px; }
.original { position: absolute; inset: 0; z-index: 10; background: #FBFAF6; border-radius: 1px; box-shadow: 0 30px 50px -24px rgb(20 28 44 / .5), 0 2px 4px rgb(20 28 44 / .12);
  opacity: clamp(0, calc((var(--sc-p, 0) - .62) * 5), 1); rotate: -4deg; }
.plantillas__copia { position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(44vw, 36rem); display: grid; }
.plantillas__copia .linea { grid-area: 1 / 1; margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.8rem); line-height: 1.06; color: #3B3F47; text-wrap: balance; }
.plantillas__copia .linea--giro { color: var(--sc-ink); font-style: italic; }
@media (max-width: 860px) {
  .mazo { right: 50%; top: 33%; width: clamp(120px, 34vw, 170px); }
  .molde { transform: translate(calc(var(--t) * var(--d) * 8vw), calc(var(--t) * var(--y) * 1vw + var(--fuera) * 24px)) rotate(calc(var(--t) * var(--d) * 7deg)); }
  .plantillas__copia { top: auto; bottom: calc(9vh + env(safe-area-inset-bottom)); translate: none; width: auto; right: var(--sc-gutter); }
  .plantillas__copia .linea { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
}
@media (prefers-reduced-motion: reduce) { .molde { --t: 1; } }

/* ---------- 3 · escucha ---------- */
.acto-escucha { padding-block: clamp(4rem, 12vh, 9rem); }
.escucha { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.escucha__foto { margin: 0; }
.escucha__foto img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: var(--sombra); }
.escucha__texto .sc-body { font-size: 1.08rem; line-height: 1.65; }
@media (max-width: 860px) { .escucha { grid-template-columns: 1fr; } }

/* ---------- 4 · PICO: las obras ---------- */
.obras { background: var(--sc-canvas); }
.mundo { position: absolute; inset: 0; display: grid; }
/* Cada mundo entra disolviéndose en trama de puntos, como tinta que empapa el papel */
.mundo[style*="--desde"] {
  --k: clamp(0, calc((var(--sc-p, 0) - var(--desde)) / .07), 1);
  --r: calc(var(--k) * 12px);
  -webkit-mask: radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + .6px)) 0 0 / 15px 15px;
          mask: radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + .6px)) 0 0 / 15px 15px;
  opacity: clamp(0, calc(var(--k) * 40), 1);
  visibility: visible;
}
.mundo--blanco { place-items: center; }
.obras__pausa { margin: 0; position: absolute; left: 50%; bottom: 12vh; translate: -50% 0; width: min(90vw, 40rem); text-align: center;
  font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); color: var(--sc-ink);
  opacity: clamp(0, calc(1 - (var(--sc-p, 0) - .1) * 20), 1); }

.mundo { grid-template-columns: 44% 1fr auto; align-items: center; column-gap: clamp(1.5rem, 3vw, 3.5rem); padding-right: var(--sc-gutter); color: var(--m-tinta); background: var(--m-fondo); }
.mundo--blanco { grid-template-columns: 1fr; padding: 0; background: transparent; }
.mundo__foto { margin: 0; height: 100%; position: relative; }
.mundo__foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.mundo__texto { max-width: 26rem; padding-left: clamp(5rem, 12vw, 13rem); }
.mundo__texto .etiqueta { color: var(--m-acento); }
.mundo__texto h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1.04; margin: 16px 0 18px; text-wrap: balance; }
.mundo__texto h3 + p { font-size: 1.06rem; line-height: 1.6; margin: 0; color: var(--m-suave); max-width: 34ch; }

.telefono { position: relative; height: min(76vh, 640px); aspect-ratio: 390 / 844; border-radius: 44px; padding: 11px; background: #17191F;
  box-shadow: 0 40px 70px -30px rgb(20 24 34 / .6), 0 0 0 1px rgb(255 255 255 / .08) inset; }
.telefono::before { content: ""; position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 26%; height: 20px; border-radius: 12px; background: #17191F; z-index: 2; }
.telefono video { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; display: block; background: #fff; }

.mundo--boda     { --m-fondo: #E7ECF3; --m-tinta: #1F3A63; --m-suave: #3E5476; --m-acento: #2B4C7E; }
.mundo--quince   { --m-fondo: #F7E4E8; --m-tinta: #6E1430; --m-suave: #7E3047; --m-acento: #B0204F; }
.mundo--comunion { --m-fondo: #FAF5EA; --m-tinta: #3B3631; --m-suave: #5A524A; --m-acento: #8A6A2C; }
.mundo--bautizo  { --m-fondo: #E9F0F6; --m-tinta: #2C4A69; --m-suave: #48637F; --m-acento: #3E6A92; }

/* La hoja: el mismo papel que se reescribe. Va encima de la costura entre foto y texto. */
.hoja { position: absolute; z-index: 5; left: 44%; top: 50%; width: clamp(150px, 15vw, 230px); aspect-ratio: 5 / 7; translate: -50% -50%; rotate: -4deg;
  box-shadow: 0 30px 50px -24px rgb(20 28 44 / .55), 0 2px 4px rgb(20 28 44 / .14);
  left: calc(50% + (44% - 50%) * min(1, var(--sc-p, 0) * 9)); }
.cara { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12%; text-align: center; background: #FBFAF6; }
.cara[style*="--desde"] {
  --k: clamp(0, calc((var(--sc-p, 0) - var(--desde)) / .07), 1);
  clip-path: circle(calc(var(--k) * 130%) at 18% 86%);
}
.cara--blanco { background: #FBFAF6; }
.trazo { width: 82%; stroke: #8796AD; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, var(--sc-p, 0) * 8)); }
.c-sup { font-family: var(--sc-font-text); font-size: clamp(7px, .62vw, 9px); letter-spacing: .2em; text-transform: uppercase; }
.c-nombre { font-family: var(--sc-font-display); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.2vw, 34px); line-height: 1; display: flex; flex-direction: column; align-items: center; }
.c-nombre i { font-size: .6em; margin: 2px 0; }
.c-fecha { font-family: var(--sc-font-text); font-size: clamp(7px, .62vw, 9px); letter-spacing: .14em; }
.cara--boda { background: #FBF8F1; color: #2B4C7E; box-shadow: inset 0 0 0 6px #FBF8F1, inset 0 0 0 7px rgb(43 76 126 / .35); }
.cara--quince { background: repeating-linear-gradient(90deg, #F6D7DF 0 12px, #FFF6F8 12px 24px); color: #B0204F; }
.cara--quince .c-nombre { font-style: normal; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: clamp(18px, 1.8vw, 28px); background: #FFF6F8; padding: 6px 8px; }
.cara--quince .c-sup, .cara--quince .c-fecha { background: #FFF6F8; padding: 2px 6px; }
.cara--comunion { background: #FBF6EC; color: #6B5323; box-shadow: inset 0 0 0 6px #FBF6EC, inset 0 0 0 7px #C9A24E, inset 0 0 0 10px #FBF6EC, inset 0 0 0 11px rgb(201 162 78 / .5); }
.cara--bautizo { background: #FFFFFF; color: #3E6A92;
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 5px, #000 5.5px) 0 0 / 14px 100% repeat-x; }
.cara--bautizo { box-shadow: inset 0 0 0 9px #fff, inset 0 0 0 10px rgb(62 106 146 / .35); }

@media (max-width: 860px) {
  .mundo { grid-template-columns: 1fr; grid-template-rows: 42% auto 1fr; align-items: start; padding: 0; row-gap: 0; }
  .mundo--blanco { grid-template-rows: 1fr; }
  .mundo__foto { grid-row: 1; height: 100%; }
  .mundo__foto img { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .mundo__texto { grid-row: 2; padding: 0 var(--sc-gutter); margin-top: -2.2rem; position: relative; max-width: 30rem; }
  .mundo__texto h3 { font-size: clamp(1.7rem, 7.4vw, 2.3rem); margin: 10px 0 8px; }
  .mundo__texto h3 + p { font-size: .98rem; line-height: 1.5; }
  .telefono { position: absolute; right: var(--sc-gutter); bottom: calc(3vh + env(safe-area-inset-bottom)); height: min(36vh, 330px); border-radius: 30px; padding: 7px; }
  .telefono::before { top: 13px; height: 12px; border-radius: 8px; }
  .telefono video { border-radius: 24px; }
  .hoja { width: clamp(108px, 30vw, 140px); top: auto; bottom: calc(6vh + env(safe-area-inset-bottom)); translate: 0 0; rotate: -6deg;
    left: calc(50% - 60px + (var(--sc-gutter) - 50% + 60px) * min(1, var(--sc-p, 0) * 9)); }
  .obras__pausa { bottom: auto; top: 22vh; }
  .c-sup, .c-fecha { font-size: 7px; }
  .c-nombre { font-size: 22px; }
}

/* ---------- 5 · funciones: el riel de pantallas reales ---------- */
.funciones { display: flex; align-items: center; }
.riel { gap: clamp(2rem, 4vw, 4.5rem); padding-inline: var(--sc-gutter) 12vw; align-items: flex-start; }
.riel__inicio { flex: 0 0 min(80vw, 30rem); align-self: center; }
.riel__inicio .etiqueta { color: var(--sc-accent); margin-bottom: 18px; }
.riel__inicio .sc-body { margin-top: var(--sc-5); font-size: 1.08rem; }
.pieza { flex: 0 0 clamp(200px, 18vw, 270px); margin: 0; }
.pieza__tel { aspect-ratio: 390 / 844; border-radius: 34px; padding: 8px; background: #17191F; box-shadow: 0 34px 60px -30px rgb(20 24 34 / .55), 0 0 0 1px rgb(255 255 255 / .06) inset; position: relative; }
.pieza__tel::before { content: ""; position: absolute; top: 15px; left: 50%; translate: -50% 0; width: 28%; height: 14px; border-radius: 10px; background: #17191F; z-index: 2; }
.pieza__tel img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 27px; display: block; background: #fff; }
.pieza h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + .8vw, 1.9rem); line-height: 1.08; margin: 22px 0 8px; }
.pieza p { margin: 0; color: var(--sc-ink-soft); line-height: 1.5; font-size: .98rem; max-width: 26ch; }
.riel__cierre { flex: 0 0 min(76vw, 24rem); align-self: center; margin: 0; font-family: var(--sc-font-display); font-style: italic; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.2; color: var(--sc-ink); }
@media (prefers-reduced-motion: no-preference) {
  .pieza { opacity: clamp(.5, calc(var(--sc-p, 0) * 15 - var(--n) + 2), 1); translate: 0 calc((1 - clamp(0, calc(var(--sc-p, 0) * 15 - var(--n) + 2), 1)) * 18px); }
}
@media (max-width: 860px) { .pieza { flex-basis: 62vw; } .pieza__tel { border-radius: 30px; } .pieza__tel img { border-radius: 23px; } }

/* ---------- 5b · la web de boda: antes, durante y después ---------- */
.web { display: grid; grid-template-rows: auto 1fr; align-content: center; gap: clamp(1.5rem, 4vh, 3rem); padding: calc(80px + 2vh) var(--sc-gutter) 4vh; background: #E7ECF3; }
.web__cabeza { max-width: 44rem; }
.web__cabeza .etiqueta { color: var(--sc-accent); margin-bottom: 14px; }
.web__cabeza .titulo-lg { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.6rem); }
.web__fases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 4vw, 4rem); align-items: start; max-width: 1100px; }
.fase { margin: 0; display: grid; grid-template-columns: clamp(130px, 13vw, 200px) 1fr; gap: 18px; align-items: end; }
.fase figcaption { font-size: .98rem; line-height: 1.5; color: var(--sc-ink-soft); padding-bottom: 8px; }
.fase figcaption b { display: block; font-family: var(--sc-font-display); font-weight: 500; font-size: 2rem; color: var(--sc-ink); margin-bottom: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .fase { --e: clamp(0, calc((var(--sc-p, 0) - .08 - var(--f) * .2) * 6), 1); opacity: var(--e); translate: 0 calc((1 - var(--e)) * 24px); }
}
@media (max-width: 1100px) { .fase { grid-template-columns: 1fr; } .fase .pieza__tel { width: min(100%, 180px); } }
@media (max-width: 860px) {
  .web { padding-top: calc(76px + 1vh); gap: 18px; }
  .web__cabeza .titulo-lg { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .web__fases { gap: 10px; }
  .fase { gap: 10px; }
  .fase .pieza__tel { width: 100%; border-radius: 18px; padding: 4px; }
  .fase .pieza__tel::before { display: none; }
  .fase .pieza__tel img { border-radius: 14px; }
  .fase figcaption { font-size: .78rem; line-height: 1.35; padding: 0; }
  .fase figcaption b { font-size: 1.35rem; margin-bottom: 2px; }
}

/* ---------- 6 · aliados ---------- */
.acto-aliados { --sc-ink: #F3F0E9; --sc-ink-soft: #C9D2E0; color: var(--sc-ink); background: #1D3150; padding-block: clamp(5rem, 16vh, 10rem); }
.aliados { max-width: 46rem; }
.aliados .sc-body { font-size: 1.12rem; line-height: 1.65; }
.enlace-claro { display: inline-block; color: #F3F0E9; font-weight: 500; letter-spacing: .04em; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 7px; text-decoration-thickness: 1px; padding: 6px 0; }
@media (hover: hover) and (pointer: fine) { .enlace-claro:hover { text-decoration-thickness: 2px; } }
.acto-aliados :focus-visible { outline-color: #F3F0E9; }

/* ---------- 7 · sello ---------- */
.sello { background: var(--sc-canvas); }
.sello__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }
.velo--sello { background: linear-gradient(270deg, rgb(243 240 233 / .9) 0%, rgb(243 240 233 / .7) 34%, transparent 60%); }
.sello__copia { position: absolute; z-index: 2; right: var(--sc-gutter); top: 50%; translate: 0 -54%; width: min(34rem, 42vw); }
.sello__copia .sc-body { margin-top: var(--sc-5); font-size: 1.1rem; color: #2E3F5A; }
.pie { position: absolute; z-index: 2; inset-inline: var(--sc-gutter); bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  font-size: .78rem; letter-spacing: .04em; color: #3A4A63; }
.pie__marca { font-family: var(--sc-font-display); letter-spacing: .3em; text-transform: uppercase; }
@media (max-width: 860px) {
  .sello__foto { object-position: 50% 50%; }
  .velo--sello { background: linear-gradient(0deg, rgb(243 240 233 / .97) 0%, rgb(243 240 233 / .86) 46%, transparent 72%); }
  .sello__copia { inset-inline: var(--sc-gutter); width: auto; top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); translate: none; }
  .sello__copia .titulo-lg { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .boton--grande { margin-top: var(--sc-5); }
  .pie { font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hoja { left: 44%; }
  .trazo { stroke-dashoffset: 0; }
}

/* Ajustes tras la primera pasada del arnés */
.copia-taller { max-width: min(40rem, 46vw); }
.copia-taller .titulo-xl { font-size: clamp(2.9rem, 1.4rem + 3.6vw, 5.2rem); }
.velo--taller { background: linear-gradient(270deg, rgb(243 240 233 / .92) 0%, rgb(243 240 233 / .74) 34%, rgb(243 240 233 / .2) 58%, transparent 70%); }
.mundo__texto { padding-left: clamp(4.5rem, 8.5vw, 9.5rem); max-width: 30rem; }
.mundo__texto h3 { font-size: clamp(1.9rem, 1.2rem + 1.7vw, 3rem); }
@media (max-width: 860px) {
  .velo--taller { background: linear-gradient(0deg, rgb(243 240 233 / .97) 0%, rgb(243 240 233 / .86) 38%, transparent 64%); }
  .copia-taller { max-width: none; }
  .mundo__texto { padding: 0 var(--sc-gutter); }
}
@media (max-width: 860px) {
  .acto-taller .sc-stage__poster, .acto-taller video { object-position: 50% 50%; }
  .velo--taller { background: linear-gradient(180deg, rgb(243 240 233 / .97) 0%, rgb(243 240 233 / .88) 30%, rgb(243 240 233 / .35) 46%, transparent 58%); }
  .copia-taller { top: calc(84px + env(safe-area-inset-top)); bottom: auto; }
}
.copia-taller .sc-body { color: var(--sc-ink); font-weight: 500; }
@media (min-width: 861px) { .velo--taller { background: linear-gradient(270deg, rgb(243 240 233 / .96) 0%, rgb(243 240 233 / .86) 38%, rgb(243 240 233 / .3) 58%, transparent 70%); } }
/* La trama se cierra antes de terminar la entrada, para que no queden puntos sobre la foto */
.mundo[style*="--desde"] { --r: calc(var(--k) * 15px); }

/* ---------- agenda (Google Calendar) ---------- */
.enlace-cita { display: block; margin-top: var(--sc-4); padding: 8px 0; background: none; border: 0; cursor: pointer; font: 500 .95rem var(--sc-font-text); letter-spacing: .03em; color: var(--sc-ink);
  text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 6px; }
.enlace-cita[hidden] { display: none; }
.agenda { width: min(94vw, 760px); height: min(88svh, 820px); padding: 0; border: 0; border-radius: 6px; background: var(--sc-surface); color: var(--sc-ink); box-shadow: 0 40px 80px -30px rgb(20 28 44 / .6); }
.agenda::backdrop { background: rgb(29 49 80 / .45); }
.agenda[open] { display: flex; flex-direction: column; }
.agenda__cabeza { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px 24px; border-bottom: 1px solid var(--sc-hairline); }
.agenda__cabeza h2 { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: 1.6rem; }
.agenda__cerrar { width: 44px; height: 44px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--sc-ink); cursor: pointer; border-radius: 50%; }
.agenda iframe { flex: 1; width: 100%; border: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sc-7); }
.opciones .boton--grande { margin-top: 0; }
.boton--claro { background: rgb(251 249 244 / .9); color: var(--sc-ink); border-color: rgb(29 49 80 / .45); }
@media (hover: hover) and (pointer: fine) { .boton--claro:hover { background: var(--sc-surface); border-color: var(--sc-ink); } }
@media (max-width: 860px) { .opciones { flex-direction: column; margin-top: var(--sc-5); } .opciones .boton { width: 100%; } .sello__copia { bottom: calc(64px + env(safe-area-inset-bottom)); } }
@media (max-width: 860px) {
  .sello__copia { bottom: calc(104px + env(safe-area-inset-bottom)); }
  .sello__copia .sc-body { font-size: 1rem; margin-top: var(--sc-4); }
  .pie { flex-direction: column; gap: 2px; }
}
@media (min-width: 861px) { .mazo { right: 30vw; } .molde { transform: translate(calc(var(--t) * var(--d) * 3.4vw), calc(var(--t) * var(--y) * .45vw + var(--fuera) * 30px)) rotate(calc(var(--t) * var(--d) * 6deg)); } }

/* El mazo: plantillas genéricas de verdad (acuarela, marco dorado, cursiva de catálogo) */
.molde { background:
    radial-gradient(28% 22% at 10% 6%, rgb(240 186 186 / .85), transparent 70%),
    radial-gradient(20% 16% at 24% 2%, rgb(246 210 180 / .9), transparent 70%),
    radial-gradient(18% 26% at 2% 22%, rgb(170 192 160 / .7), transparent 70%),
    radial-gradient(28% 22% at 92% 95%, rgb(240 186 186 / .85), transparent 70%),
    radial-gradient(20% 16% at 76% 99%, rgb(246 210 180 / .9), transparent 70%),
    radial-gradient(18% 26% at 99% 78%, rgb(170 192 160 / .7), transparent 70%),
    #FFFBF8;
  color: #9B8466; gap: 5px; }
.molde::before { content: ""; position: absolute; inset: 9%; border: 1px solid #C9A86A; border-radius: 0; width: auto; aspect-ratio: auto; margin: 0;
  box-shadow: inset 0 0 0 3px #FFFBF8, inset 0 0 0 4px rgb(201 168 106 / .6); }
.molde b { font-family: "Great Vibes", cursive; font-size: 2.3em; color: #B08D57; letter-spacing: 0; line-height: 1.1; }
.molde .m-sup, .molde .m-lugar, .molde span { position: relative; color: #9B8466; }
@media (max-width: 860px) { .molde b { font-size: 2em; } }

/* Logo de Atelier (monograma en la barra, logo completo al pie) */
.marca { display: inline-flex; align-items: center; gap: 12px; }
.marca img { height: 34px; width: auto; display: block; }
@media (max-width: 560px) { .marca img { height: 28px; } .marca span { display: none; } }
.pie { align-items: flex-end; }
.pie__logo { height: 46px; width: auto; display: block; }
@media (max-width: 860px) { .pie__logo { height: 34px; } }
/* Antes · durante · después: tres celulares grandes, centrados */
@media (min-width: 861px) {
  .web { justify-items: center; text-align: center; }
  .web__cabeza { margin-inline: auto; }
  .web__fases { display: flex; justify-content: center; gap: clamp(2rem, 5vw, 5rem); max-width: none; }
  .fase { display: flex; flex-direction: column; align-items: center; gap: 18px; width: clamp(190px, min(17vw, 27vh), 270px); }
  .fase .pieza__tel { width: 100%; }
  .fase figcaption { max-width: 24ch; padding: 0; }
}
/* La pantalla manda la proporción, el marco se adapta: nada se recorta */
.pieza__tel { aspect-ratio: auto; }
.pieza__tel img { height: auto; aspect-ratio: 390 / 844; }
@media (min-width: 861px) { .fase { width: clamp(160px, min(15vw, 21vh), 230px); } .web { gap: clamp(1rem, 3vh, 2rem); } }

/* ---------- 2 · manifiesto tipográfico (reemplaza el mazo) ---------- */
.plantillas { background: var(--sc-canvas); display: grid; place-items: center; }
.manifiesto { width: min(92vw, 70rem); text-align: center; }
.manifiesto p { margin: 0; font-family: var(--sc-font-display); font-weight: 500; line-height: 1.04; text-wrap: balance; }
.m-1 { font-size: clamp(2.6rem, 1.4rem + 4.8vw, 6.4rem); color: #6E7584; }
.m-2 { margin-top: clamp(1.2rem, 4vh, 2.6rem) !important; font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.6rem); color: var(--sc-accent); }
.m-2 em { font-style: italic; }
.tachar { position: relative; display: inline-block; }
.tachar svg { position: absolute; left: -4%; width: 108%; top: 34%; height: .5em; overflow: visible; }
.tachar path { fill: none; stroke: #2B4C7E; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--sc-p, 0) - .12) * 3.2), 1)); }
@media (prefers-reduced-motion: reduce) { .tachar path { stroke-dashoffset: 0; } }

/* ---------- 5c · planes ---------- */
.acto-planes { padding-block: clamp(5rem, 14vh, 9rem); }
.planes__cabeza { max-width: 44rem; margin: 0 auto clamp(2.5rem, 6vh, 4rem); text-align: center; }
.planes__cabeza .etiqueta { color: var(--sc-accent); }
.planes__cabeza .sc-body { margin-inline: auto; font-size: 1.08rem; }
.planes__lista { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; max-width: 1180px; margin-inline: auto; }
.plan { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px); background: var(--sc-surface); border-radius: 4px; box-shadow: 0 1px 0 rgb(29 49 80 / .08), 0 22px 44px -32px rgb(29 49 80 / .45); }
.plan h3 { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2rem, 1.5rem + 1vw, 2.6rem); line-height: 1; margin: 0; }
.plan__para { margin: 12px 0 0; color: var(--sc-ink-soft); line-height: 1.5; min-height: 3em; }
.plan__precio { margin: 22px 0 0; padding-bottom: 22px; border-bottom: 1px solid var(--sc-hairline); font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2.2rem, 1.7rem + 1.2vw, 3rem); line-height: 1; font-variant-numeric: lining-nums; }
.plan__precio span { font-family: var(--sc-font-text); font-size: .8rem; letter-spacing: .16em; color: var(--sc-ink-soft); }
.plan ul { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 11px; flex: 1; }
.plan li { position: relative; padding-left: 22px; line-height: 1.45; font-size: .98rem; color: var(--sc-ink); }
.plan li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; rotate: 45deg; border: 1px solid var(--oro); }
.plan li:has(b)::before { display: none; }
.plan li:has(b) { padding-left: 0; }
.boton--plan { align-self: stretch; padding: 14px 20px; font-size: .92rem; }
.plan--destacado { background: #1D3150; color: #F3F0E9; --sc-hairline: rgb(243 240 233 / .2); transform: translateY(-12px); box-shadow: 0 34px 60px -30px rgb(29 49 80 / .7); }
.plan--destacado .plan__para, .plan--destacado .plan__precio span { color: #C9D2E0; }
.plan--destacado li { color: #F3F0E9; }
.plan--destacado .boton--plan { background: #F3F0E9; color: #1D3150; border-color: #F3F0E9; }
@media (hover: hover) and (pointer: fine) { .plan--destacado .boton--plan:hover { background: #fff; } }
.plan--destacado :focus-visible { outline-color: #F3F0E9; }
@media (max-width: 960px) { .planes__lista { grid-template-columns: 1fr; max-width: 30rem; } .plan--destacado { transform: none; } .plan__para { min-height: 0; } }
.plan ul { align-content: start; }

/* ---------- Movimiento, segunda pasada ----------
   Curva suave (smoothstep) en todo lo que depende del scroll, entradas escalonadas dentro de cada mundo
   y un leve acercamiento en las fotos. Solo transform y opacity. */
.mundo[style*="--desde"] {
  --k: clamp(0, calc((var(--sc-p, 0) - var(--desde)) / .1), 1);
  --s: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));
  --r: calc(var(--s) * 15px);
  /* tras la trama: primero la foto, luego el texto, al final el celular */
  --t: clamp(0, calc((var(--k) - .35) * 2.2), 1);
  --c: clamp(0, calc((var(--k) - .55) * 2.4), 1);
}
@media (prefers-reduced-motion: no-preference) {
  .mundo__foto img { transform: scale(calc(1.1 - .1 * var(--s, 1))); transform-origin: 40% 50%; }
  .mundo__texto { opacity: var(--t, 1); transform: translate3d(0, calc((1 - var(--t, 1)) * 26px), 0); }
  .mundo__texto .etiqueta { opacity: var(--t, 1); }
  .telefono { opacity: var(--c, 1); transform: translate3d(0, calc((1 - var(--c, 1)) * 70px), 0) rotate(calc((1 - var(--c, 1)) * 3deg)); }
  .cara[style*="--desde"] {
    --k: clamp(0, calc((var(--sc-p, 0) - var(--desde)) / .1), 1);
    --s: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));
    clip-path: circle(calc(var(--s) * 135%) at 18% 86%);
  }
  /* La hoja respira al cambiar de mundo: se levanta un poco mientras la tinta se expande */
  .hoja { transform: translate3d(0, calc(sin(var(--sc-p, 0) * 3.1416 * 9.5) * -6px), 0); }

  /* Web de boda: los celulares suben y se asientan */
  .fase { transform: translate3d(0, calc((1 - var(--e, 1)) * 34px), 0) scale(calc(.96 + .04 * var(--e, 1))); translate: none; }

  /* Cierre: la foto del sello se acerca muy despacio mientras llega el final */
  .sello__foto { transform: scale(calc(1.07 - .07 * var(--sc-p, 0))); transform-origin: 20% 60%; }

  /* Manifiesto: la primera frase se aparta cuando entra la segunda */
  .m-1 { transform: translate3d(0, calc(clamp(0, calc((var(--sc-p, 0) - .5) * 3), 1) * -10px), 0); }
}

/* ---------- Transiciones entre escenas ----------
   La trama de puntos de papel cubre la imagen al final de un acto, así la escena siguiente
   nace del mismo papel en vez de deslizarse encima. */
.trama { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--sc-canvas);
  --r: calc(var(--s) * 15px);
  -webkit-mask: radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + .6px)) 0 0 / 15px 15px;
          mask: radial-gradient(circle, #000 var(--r), transparent calc(var(--r) + .6px)) 0 0 / 15px 15px;
  opacity: clamp(0, calc(var(--k) * 40), 1); }
.trama--taller { --k: clamp(0, calc((var(--sc-p, 0) - .7) / .3), 1); --s: calc(var(--k) * var(--k) * (3 - 2 * var(--k))); z-index: 3; }
.trama--obras  { --k: clamp(0, calc((var(--sc-p, 0) - .93) / .07), 1); --s: calc(var(--k) * var(--k) * (3 - 2 * var(--k))); }
.acto-obras .hoja { opacity: calc(1 - clamp(0, calc((var(--sc-p, 0) - .95) / .05), 1)); }
/* La copia del taller se retira antes de que llegue la trama */
.acto-taller .copia-taller { transition: none; }

/* Cierre: la foto florece en círculo desde la cera del sello */
@media (prefers-reduced-motion: no-preference) {
  .sello__foto, .velo--sello {
    --k: clamp(0, calc(var(--sc-p, 0) / .55), 1); --s: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));
    clip-path: circle(calc(8% + var(--s) * 140%) at 26% 66%); }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .sello__foto, .velo--sello { clip-path: circle(calc(8% + var(--s) * 160%) at 30% 38%); }
}
@media (prefers-reduced-motion: reduce) { .trama { display: none; } }
.m-1 { color: #5C6475; }
@media (prefers-reduced-motion: no-preference) { .velo--sello { clip-path: none; } }

/* ---------- 3 · la mesa de los recuerdos, anotada ---------- */
.acto-escucha { padding: 0; }
.mesa { position: relative; width: 100%; aspect-ratio: 2752 / 1536; max-height: 100svh; margin-inline: auto; overflow: hidden; }
.mesa__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mesa::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(270deg, rgb(243 240 233 / .78) 0%, rgb(243 240 233 / .5) 30%, transparent 48%); }
.mesa__lineas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.mesa__lineas line { stroke: #2B4C7E; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mesa__notas { position: absolute; inset: 0; z-index: 3; }
.nota__punto { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 1.5px solid #2B4C7E; background: rgb(243 240 233 / .7); opacity: 0; scale: .4; }
.nota { position: absolute; max-width: 15ch; font-family: var(--sc-font-display); font-style: italic; font-weight: 500; font-size: clamp(1rem, .6rem + .9vw, 1.45rem); line-height: 1.12; color: #1D3150;
  text-shadow: 0 0 12px rgb(243 240 233 / .95), 0 0 3px rgb(243 240 233 / .9); opacity: 0; transform: translate3d(0, 10px, 0); }
.mesa__texto { position: absolute; z-index: 4; right: var(--sc-gutter); top: 50%; translate: 0 -38%; width: min(34%, 32rem); }
.mesa__texto .titulo-xl { font-size: clamp(2.6rem, 1.4rem + 3.4vw, 5.4rem); }
.mesa__texto .sc-body { margin-top: var(--sc-5); font-size: 1.08rem; line-height: 1.6; color: #1D3150; }
.mesa__texto > * { opacity: 0; transform: translate3d(0, 18px, 0); }
.mesa__foto { transform: scale(1.08); transform-origin: 30% 45%; }

.anotada .mesa__foto { transform: scale(1); transition: transform 2400ms var(--sc-ease-out); }
.anotada .nota__punto { opacity: 1; scale: 1; transition: opacity 300ms var(--sc-ease-out), scale 420ms var(--sc-ease-out); transition-delay: calc(500ms + var(--i) * 380ms); }
.anotada .mesa__lineas line { stroke-dashoffset: 0; transition: stroke-dashoffset 650ms cubic-bezier(.77, 0, .175, 1); transition-delay: calc(650ms + var(--i) * 380ms); }
.anotada .nota { opacity: 1; transform: none; transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out); transition-delay: calc(1000ms + var(--i) * 380ms); }
.anotada .mesa__texto > * { opacity: 1; transform: none; transition: opacity 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out); }
.anotada .mesa__texto > :nth-child(1) { transition-delay: 2700ms; }
.anotada .mesa__texto > :nth-child(2) { transition-delay: 2900ms; }

@media (max-width: 860px) {
  .mesa::after { display: none; }
  .nota__punto { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
  .mesa__texto .titulo-xl { font-size: clamp(2.4rem, 10vw, 3.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mesa__foto, .nota__punto, .nota, .mesa__texto > * { opacity: 1; transform: none; scale: 1; transition: none !important; }
  .mesa__lineas line { stroke-dashoffset: 0; transition: none !important; }
}
.mesa__lineas line { stroke-dasharray: 900; stroke-dashoffset: 900; }
.anotada .mesa__lineas line { stroke-dashoffset: 0; }
/* Las notas cuelgan de su línea: la línea llega al filete de la nota, nunca cruza las letras */
.nota { translate: 0 -100%; padding: 0 0 6px; border-bottom: 1px solid #2B4C7E; white-space: normal; }
.nota--abajo { translate: 0 0; padding: 6px 0 0; border-bottom: 0; border-top: 1px solid #2B4C7E; }
/* Celular: recorte cuadrado sobre los recuerdos. Foto, líneas y notas se mueven juntas, así las coordenadas siguen valiendo */
@media (max-width: 860px) {
  .acto-escucha { padding-top: 72px; }
  .mesa { display: block; aspect-ratio: auto; max-height: none; margin-top: 0; padding-top: 100vw; overflow: clip; }
  .mesa__foto, .mesa__alzados, .mesa__lineas, .mesa__notas { inset: auto; top: 0; left: -4vw; width: 179.17vw; max-width: none; height: 100vw; aspect-ratio: auto; position: absolute; }
  .mesa__notas [style*="--i:3"], .mesa__lineas [style*="--i:3"] { display: none; }
  .nota { font-size: clamp(15px, 2.3vw, 20px); max-width: 11ch; padding-bottom: 5px; }
  .nota--abajo { padding: 5px 0 0; }
  .mesa__texto { position: relative; inset: auto; translate: none; width: auto; padding: 32px var(--sc-gutter) 56px; }
  .anotada .mesa__texto > :nth-child(1) { transition-delay: 200ms; }
  .anotada .mesa__texto > :nth-child(2) { transition-delay: 350ms; }
}
html, body { overflow-x: clip; }
@media (min-width: 861px) and (max-width: 1180px) { .velo--sello { background: linear-gradient(270deg, rgb(243 240 233 / .95) 0%, rgb(243 240 233 / .85) 45%, rgb(243 240 233 / .3) 68%, transparent 80%); } .sello__copia { width: min(40rem, 50vw); } }
/* ---------- 5d · preguntas frecuentes ---------- */
.acto-preguntas { padding-block: 0 clamp(5rem, 14vh, 9rem); }
.preguntas { max-width: 46rem; margin-inline: auto; }
.preguntas__cabeza { text-align: center; margin-bottom: clamp(2rem, 5vh, 3rem); }
.preguntas__cabeza .etiqueta { color: var(--sc-accent); }
.preguntas__cabeza .titulo-lg { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); }
.pregunta { border-bottom: 1px solid var(--sc-hairline); }
.pregunta:first-child { border-top: 1px solid var(--sc-hairline); }
.pregunta summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 2px; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); line-height: 1.25; color: var(--sc-ink); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--oro); border-bottom: 1.5px solid var(--oro); rotate: 45deg; translate: 0 -3px; transition: rotate 300ms var(--sc-ease-out), translate 300ms var(--sc-ease-out); }
.pregunta[open] summary::after { rotate: 225deg; translate: 0 3px; }
.pregunta summary:hover { color: var(--sc-accent); }
.pregunta p { margin: 0; padding: 0 2px 24px; max-width: 38rem; line-height: 1.65; color: var(--sc-ink-soft); font-size: 1.04rem; }
.pregunta[open] p { animation: pregunta-abre 360ms var(--sc-ease-out); }
@keyframes pregunta-abre { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
@media (prefers-reduced-motion: reduce) { .pregunta[open] p { animation: none; } .pregunta summary::after { transition: none; } }
/* Los recuerdos se despegan de la mesa: cada recorte está encima de sí mismo en la foto y, al levantarse,
   crece lo justo para tapar el original; luego queda flotando. */
.mesa__alzados { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.alzado { position: absolute; display: block; }
.alzado img { display: block; width: 100%; height: auto; transform-origin: 50% 55%; }
.anotada .alzado img { transform: translate3d(0, -7%, 0) scale(1.2) rotate(var(--r)); filter: drop-shadow(0 26px 24px rgb(29 49 80 / .32)) drop-shadow(0 3px 4px rgb(29 49 80 / .16));
  transition: transform 1300ms var(--sc-ease-out), filter 1300ms var(--sc-ease-out); transition-delay: calc(250ms + var(--i) * 380ms); }
.anotada .alzado { animation: alzado-flota calc(5.5s + var(--i) * .8s) ease-in-out calc(1.6s + var(--i) * .38s) infinite alternate both; }
@keyframes alzado-flota { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(0, -5px, 0) rotate(.9deg); } }
@media (prefers-reduced-motion: reduce) {
  .anotada .alzado { animation: none; }
  .anotada .alzado img { transition: none; }
}
/* ---------- idioma ES | EN ---------- */
.barra__fin { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
.idioma { display: flex; align-items: center; gap: 2px; font-size: .8rem; letter-spacing: .12em; color: var(--sc-ink-soft); }
.idioma a { color: inherit; text-decoration: none; padding: 10px 5px; }
.idioma a[aria-current="true"] { color: var(--sc-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 6px; }
@media (hover: hover) and (pointer: fine) { .idioma a:hover { color: var(--sc-ink); } }
/* Inicio: subtítulo más presente y alineación óptica (la T de Cormorant trae margen propio a tamaño grande) */
.copia-taller .titulo-xl { margin-left: -.045em; }
.copia-taller .sc-body { font-size: clamp(1.2rem, .8rem + .9vw, 1.8rem); line-height: 1.42; max-width: 25ch; text-wrap: balance; }
.copia-taller .etiqueta { color: var(--sc-accent); margin-bottom: 18px; }
.copia-taller__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sc-6); }
.copia-taller__botones .boton--grande { margin-top: 0; }
.copia-taller .boton--claro { background: rgb(251 249 244 / .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* "tuya": la palabra que la hace suya. Cursiva, azul de acento y un trazo dorado a mano que se dibuja debajo */
.suya { font-style: italic; color: #8A6A30; padding: 0 .04em .1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15C46 7 96 20 140 12S186 8 196 10' fill='none' stroke='%23C9B07A' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 0% .26em;
  animation: suya-traza 1000ms cubic-bezier(.77, 0, .175, 1) 1100ms both; }
@keyframes suya-traza { to { background-size: 100% .26em; } }
@media (prefers-reduced-motion: reduce) { .suya { animation: none; background-size: 100% .26em; } }
.obras__pausa .etiqueta { display: block; color: var(--sc-accent); margin-bottom: 14px; font-style: normal; }
.plan__ver { display: inline-block; margin-top: 4px; color: var(--sc-accent); text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 5px; font-size: .94em; }
.plan--destacado .plan__ver { color: #F3F0E9; }
/* ---------- 5b' · la sala de proyección ---------- */
.acto-sala { --sc-ink: #F3F0E9; --sc-ink-soft: #C9D2E0; background: radial-gradient(120% 80% at 50% 0%, #2A426A 0%, #1D3150 45%, #142339 100%); color: var(--sc-ink); padding-block: clamp(5rem, 14vh, 9rem); overflow: clip; }
.sala { max-width: 1180px; margin: 0 auto; padding: 0 var(--sc-gutter); }
.sala__cabeza { text-align: center; max-width: 40rem; margin: 0 auto clamp(2.5rem, 6vh, 4rem); }
.sala__cabeza .etiqueta { color: var(--oro); }
.sala__cabeza .sc-body { margin-inline: auto; color: #C9D2E0; font-size: 1.08rem; }
.sala__pantalla { position: relative; }
.sala__marco { position: relative; z-index: 1; border-radius: 10px; overflow: hidden; background: #0E1828; box-shadow: 0 50px 90px -40px rgb(0 0 0 / .7), 0 0 0 1px rgb(243 240 233 / .12); }
.sala__barra { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #F3F0E9; }
.sala__barra i { width: 10px; height: 10px; border-radius: 50%; background: #D7D2C6; }
.sala__barra span { margin: 0 auto; padding: 4px 16px; border-radius: 999px; background: #E6E1D6; font-size: .74rem; letter-spacing: .04em; color: #6C778A; }
.sala__barra span::before { content: "ateliercelebra.com/"; }
.sala__marco video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; pointer-events: none; }
/* el haz del proyector: luz suave que cae sobre la pantalla */
.sala__luz { position: absolute; z-index: 0; left: 50%; top: -38%; width: 140%; height: 90%; translate: -50% 0; background: radial-gradient(50% 50% at 50% 100%, rgb(243 240 233 / .16), transparent 70%); filter: blur(20px); pointer-events: none; }
.sala__nota { margin: 18px 0 0; text-align: center; font-size: .82rem; letter-spacing: .06em; color: #8E9BB2; }
@media (max-width: 700px) { .sala__barra { padding: 7px 10px; } .sala__barra i { width: 7px; height: 7px; } .sala__barra span { font-size: .62rem; padding: 3px 10px; } }
/* Las palabras resaltadas fuera del inicio dibujan su trazo cuando la escena aparece, no al cargar la página */
.mesa .suya { animation: none; }
.anotada .suya { animation: suya-traza 1000ms cubic-bezier(.77, 0, .175, 1) 3200ms both; }
@media (max-width: 860px) { .anotada .suya { animation-delay: 700ms; } }
/* La sala como pantalla de computador: marco, mentón con el monograma, cuello y base */
.sala__pantalla { max-width: 1000px; margin-inline: auto; }
.monitor { position: relative; z-index: 1; padding: clamp(8px, 1.4vw, 16px) clamp(8px, 1.4vw, 16px) 0; border-radius: clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px) 0 0;
  background: linear-gradient(180deg, #2A2F38, #15181E); box-shadow: 0 0 0 1px rgb(243 240 233 / .14), 0 60px 100px -40px rgb(0 0 0 / .8); }
.monitor .sala__marco { border-radius: 4px; box-shadow: none; }
.monitor .sala__marco::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgb(255 255 255 / .07) 0%, transparent 38%); }
.monitor__menton { display: grid; place-items: center; height: clamp(26px, 4vw, 48px); margin: 0 calc(-1 * clamp(8px, 1.4vw, 16px)); border-radius: 0 0 clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px);
  background: linear-gradient(180deg, #D9D4C8, #BFB9AC); }
.monitor__menton img { width: clamp(16px, 2vw, 24px); height: auto; opacity: .55; }
.monitor__cuello { position: relative; z-index: 0; width: 15%; height: clamp(34px, 6vw, 80px); margin: 0 auto; background: linear-gradient(90deg, #A9A397, #D6D1C5 45%, #B4AEA2); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
.monitor__base { position: relative; z-index: 1; width: 34%; height: clamp(8px, 1vw, 12px); margin: 0 auto; border-radius: 3px 3px 8px 8px; background: linear-gradient(180deg, #D6D1C5, #A9A397); box-shadow: 0 18px 30px -10px rgb(0 0 0 / .6); }
.monitor .sala__barra { padding: 7px 12px; }
/* Pestañas de la sala: antes, durante, después */
.sala__pestanas { display: flex; justify-content: center; gap: clamp(6px, 1.5vw, 14px); margin: 0 auto clamp(1.5rem, 4vh, 2.5rem); }
.sala__pestanas button { display: grid; gap: 2px; padding: 12px clamp(14px, 2.4vw, 26px); border-radius: 999px; border: 1px solid rgb(243 240 233 / .25); background: transparent; color: #C9D2E0; cursor: pointer; text-align: center;
  transition: background-color 200ms var(--sc-ease-out), color 200ms var(--sc-ease-out), border-color 200ms var(--sc-ease-out); }
.sala__pestanas b { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); color: #F3F0E9; }
.sala__pestanas span { font-size: .78rem; letter-spacing: .03em; }
.sala__pestanas [aria-selected="true"] { background: #F3F0E9; border-color: #F3F0E9; color: #4C5B73; }
.sala__pestanas [aria-selected="true"] b { color: #1D3150; }
@media (hover: hover) and (pointer: fine) { .sala__pestanas button:hover { border-color: rgb(243 240 233 / .6); } }
@media (max-width: 600px) { .sala__pestanas span { display: none; } .sala__pestanas button { padding: 10px 18px; } }
.sala__videos { position: relative; aspect-ratio: 16 / 9; }
.sala__videos video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--sc-ease-out); pointer-events: none; }
.sala__videos video.activo { opacity: 1; }
.sala__progreso { height: 2px; background: rgb(243 240 233 / .12); }
.sala__progreso i { display: block; height: 100%; background: var(--oro); transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .sala__videos video { transition: none; } }
.suya-punto { color: #8A6A30; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.pie__enlaces a { color: inherit; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 4px; }
/* El título del inicio se ve desde el primer pintado (es lo que mide Google como LCP); la animación toma el control al cargar */
.copia-taller[data-sc-cue] { opacity: 1; }

/* La escena de "Hay miles de invitaciones" sube encima del final del taller (los dos son del mismo crema),
   así su texto llega media pantalla antes y no queda un tramo en blanco al bajar (Yudi, 2026-10-15) */
.acto-plantillas { margin-top: -45vh; position: relative; z-index: 2; }
/* su borde de arriba llega difuminado: sin línea recta sobre la foto que se disuelve */
.acto-plantillas .plantillas { -webkit-mask: linear-gradient(to bottom, transparent 0, #000 38vh); mask: linear-gradient(to bottom, transparent 0, #000 38vh); }

/* ================= Celular, segunda pasada (Yudi, 2026-10-15: "se ve todo muy pequeño y pierde mucho") =================
   Solo celular. No se quita ningún efecto: más tamaño para leer, piezas más grandes y sin pantallas vacías. */
@media (max-width: 860px) {
  /* La barra lleva papel translúcido: no queda encima de los textos y se lee también sobre las secciones azules */
  .barra { background: rgb(243 240 233 / .9); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
    box-shadow: 0 1px 0 rgb(29 49 80 / .08); padding-block: calc(10px + env(safe-area-inset-top)) 10px; }
  /* Texto de lectura: 17 px como mínimo */
  .sc-body, .escucha__texto .sc-body, .mesa__texto .sc-body, .riel__inicio .sc-body, .planes__cabeza .sc-body,
  .sala__cabeza .sc-body, .aliados .sc-body, .sello__copia .sc-body { font-size: 1.08rem; line-height: 1.6; }
  .etiqueta { font-size: .8rem; }
  /* Los mundos: título y texto más grandes; celular y papel con presencia */
  .mundo__texto h3 { font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
  .mundo__texto h3 + p { font-size: 1.06rem; line-height: 1.55; }
  .telefono { height: min(43vh, 380px); }
  .hoja { width: clamp(124px, 35vw, 165px); }
  .c-sup, .c-fecha { font-size: 8px; }
  .c-nombre { font-size: 25px; }
  .obras__pausa { top: 24vh; font-size: clamp(1.95rem, 8.4vw, 2.5rem); line-height: 1.15; padding-inline: var(--sc-gutter); }
  /* El riel: cada pantalla más ancha y su texto legible */
  .pieza { flex-basis: 74vw; }
  .pieza h3 { font-size: 1.75rem; margin-top: 20px; }
  .pieza p { font-size: 1.04rem; max-width: 30ch; }
  .riel__cierre { flex-basis: 86vw; font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
  /* Antes · durante · después */
  .fase figcaption { font-size: .86rem; line-height: 1.4; }
  .fase figcaption b { font-size: 1.5rem; }
  /* Entre los mundos y el riel no queda pantalla vacía: el riel sube sobre el final de los mundos (mismo crema) */
  .acto-funciones { margin-top: -45vh; position: relative; z-index: 2; }
  .acto-funciones .funciones { -webkit-mask: linear-gradient(to bottom, transparent 0, #000 38vh); mask: linear-gradient(to bottom, transparent 0, #000 38vh); }
}
@media (max-width: 860px) {
  /* Mundos: la foto cede un poco de alto para que texto, papel y celular quepan sin taparse */
  .mundo { grid-template-rows: 35% auto 1fr; }
  .telefono { height: min(38vh, 340px); }
  /* Riel: pantallas que caben enteras bajo la barra */
  .pieza { flex-basis: 64vw; }
  /* Antes · durante · después: visibles desde que entra la escena, sin tramo azul vacío */
  .fase { opacity: 1; translate: none; }
}
@media (max-width: 860px) { .telefono { height: min(45vh, 410px); } }
@media (max-width: 860px) { .telefono { height: min(40vh, 370px); } }

/* ================= Celular: la grabación de cada invitación se luce a pantalla casi completa (Yudi, 2026-10-15) =================
   Cada mundo dura .21 del acto. Primero se lee (foto, título, texto); a partir de --desde+.07 el celular crece desde la
   esquina hasta el centro (≈78 % del alto) sobre un velo del color del mundo; el siguiente mundo entra con su trama. */
@media (max-width: 860px) {
  .mundo { --l: clamp(0, calc((var(--sc-p, 0) - var(--desde, 9) - .1) / .05), 1); } /* entra (.07), se lee (.03), crece (.05), luce (.06) */
  .mundo::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--m-fondo); opacity: calc(var(--l) * .96); }
  .telefono {
    --H: 78svh; --s0: .5; --g: var(--sc-gutter);
    position: absolute; z-index: 4; right: auto; bottom: auto; left: 50%; top: calc(50% + 26px);
    height: var(--H); max-height: calc((100vw - 2 * var(--g)) * 844 / 390);
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%)
               translate(calc((1 - var(--l)) * (50vw - var(--g) - var(--H) * .4621 * var(--s0) / 2)),
                         calc((1 - var(--l)) * (97svh - var(--H) * var(--s0) / 2 - 50svh - 26px)))
               scale(calc(var(--s0) + (1 - var(--s0)) * var(--l)));
    box-shadow: 0 50px 90px -40px rgb(20 24 34 / .55), 0 0 0 1px rgb(255 255 255 / .08) inset;
  }
  /* La hoja de papel se aparta mientras una grabación ocupa la pantalla */
  .acto-obras .hoja {
    --h1: calc(clamp(0, (var(--sc-p, 0) - .26) / .03, 1) - clamp(0, (var(--sc-p, 0) - .36) / .02, 1));
    --h2: calc(clamp(0, (var(--sc-p, 0) - .47) / .03, 1) - clamp(0, (var(--sc-p, 0) - .57) / .02, 1));
    --h3: calc(clamp(0, (var(--sc-p, 0) - .68) / .03, 1) - clamp(0, (var(--sc-p, 0) - .78) / .02, 1));
    --h4: clamp(0, (var(--sc-p, 0) - .89) / .03, 1);
    opacity: calc(1 - var(--h1) - var(--h2) - var(--h3) - var(--h4));
  }
}
/* Cierre en celular: el pie (logo, texto y enlaces) ocupa 100–125 px; los botones quedan por encima con aire (Yudi, 2026-10-15) */
@media (max-width: 860px) { .sello__copia { bottom: calc(166px + env(safe-area-inset-bottom)); } }
/* La grabación todavía más grande: 88 % del alto (Yudi, 2026-10-15: "más grande todavía") */
@media (max-width: 860px) {
  .telefono { --H: 88svh; --s0: .45; top: calc(50% + 28px); max-height: calc((100vw - 28px) * 844 / 390); }
}
/* "Que la persona sienta que ya está viendo su tarjeta" (Yudi, 2026-10-15): en el celular la grabación termina a pantalla
   completa, de borde a borde y sin marco. Geometría base = la pantalla entera; en la esquina es la misma pieza escalada (s0),
   con su marco: al crecer el marco, las esquinas y la muesca se desvanecen. */
@media (max-width: 860px) {
  .telefono {
    --s0: .4; --g: var(--sc-gutter);
    left: 0; top: 0; right: auto; bottom: auto; width: 100vw; height: 100svh; max-height: none; aspect-ratio: auto;
    transform-origin: 50% 50%;
    transform: translate(calc((1 - var(--l)) * (50vw - var(--g) - 50vw * var(--s0))),
                         calc((1 - var(--l)) * (47svh - 50svh * var(--s0))))
               scale(calc(var(--s0) + (1 - var(--s0)) * var(--l)));
    padding: calc((1 - var(--l)) * 17px);
    border-radius: calc((1 - var(--l)) * 72px);
    box-shadow: 0 50px 90px -40px rgb(20 24 34 / calc((1 - var(--l)) * .6));
  }
  .telefono video { border-radius: calc((1 - var(--l)) * 58px); }
  .telefono::before { top: 32px; height: 30px; border-radius: 16px; opacity: calc(1 - var(--l) * 3); }
}
/* Mesa de los recuerdos en celular: foto un poco más grande y notas a 18 px (Yudi, 2026-10-15: "no se lee") */
@media (max-width: 860px) {
  .mesa { padding-top: 110vw; }
  .mesa__foto, .mesa__alzados, .mesa__lineas, .mesa__notas { height: 110vw; width: 197.09vw; left: -5vw; }
  .nota { font-size: 18px; max-width: 10ch; line-height: 1.1; }
}
/* La trama de puntos en celular dura la mitad: se ve el diseño, no los puntos (Yudi, 2026-10-15) */
@media (max-width: 860px) {
  .mundo[style*="--desde"] { --k: clamp(0, calc((var(--sc-p, 0) - var(--desde)) / .035), 1); }
  .trama--taller { --k: clamp(0, calc((var(--sc-p, 0) - .85) / .15), 1); }
}
@media (max-width: 860px) {
  /* "Su primer zapatito" queda al borde derecho: en el celular va a la izquierda de su línea */
  .nota[style*="--i:2"] { translate: calc(-100% + 2px) -100%; text-align: right; }
}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante { position: fixed; z-index: 55; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 15px; border-radius: 999px;
  background: var(--sc-accent); color: #FBF9F4; text-decoration: none; font: 500 .95rem var(--sc-font-text); letter-spacing: .04em;
  box-shadow: 0 16px 34px -14px rgb(29 49 80 / .7), 0 2px 6px -2px rgb(29 49 80 / .3);
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.92); pointer-events: none;
  transition: opacity 260ms var(--sc-ease-out), transform 320ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.wa-flotante.visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-flotante span { padding-right: 4px; }
.wa-flotante:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .wa-flotante:hover { background: #1D3150; } }
@media (max-width: 860px) { .wa-flotante { width: 56px; padding: 0; justify-content: center; } .wa-flotante span { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-flotante { transform: none; transition: opacity 200ms linear; } }