/* =========================================================
   Differentissgood · Bodas
   Editorial, cálido, cinematográfico. Toda la paleta y las tipografías salen
   de ../assets/marca.css, la misma que differentissgood.com.
   ========================================================= */

:root {
  /* Los neutros y el dorado vienen de ../assets/marca.css, la hoja de marca
     común del estudio. Así bodas comparte papel, tinta y línea con los planes
     y con la web oficial, y sólo el dorado marca su carácter propio. */
  --marfil: var(--dig-papel);
  --marfil-2: var(--dig-papel-2);
  --carbon: var(--dig-tinta);
  --carbon-suave: var(--dig-tinta-suave);
  /* El acento es el naranja de la marca; el ámbar queda para los detalles
     (filetes, etiquetas), que es lo que le da a bodas su aire cálido. */
  --dorado: var(--dig-acento);
  --dorado-claro: var(--dig-oro);
  --linea: var(--dig-linea);
  --blanco: var(--dig-superficie);

  --fondo: var(--marfil);
  --fondo-2: var(--marfil-2);
  --texto: var(--carbon);
  --texto-suave: var(--carbon-suave);
  --acento: var(--dorado);
  --superficie: var(--blanco);
  --borde: var(--linea);

  --serif: var(--dig-serif);
  --sans: var(--dig-sans);

  --ancho: 1240px;
}

/* No hace falta un bloque aparte para el modo oscuro: los tokens de
   assets/marca.css ya cambian solos con el interruptor de la web oficial
   (assets/marca.js), y todo lo de arriba sale de ellos. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: var(--dig-peso-titulo); line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 28px; }

.grano {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: .03; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.etiqueta {
  display: inline-block; font-family: var(--sans); font-size: .76rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--acento);
  margin: 0 0 .9em;
}

/* ---------- Entrada al hacer scroll ---------- */
.sube { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1); }
.sube.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sube { transition: none; opacity: 1; transform: none; } }

/* ---------- Revelado de texto palabra a palabra ---------- */
/* La caja de cada palabra lleva overflow hidden para el efecto de cortina.
   Recortaba letras por dos motivos: en los titulares, las astas
   descendentes (g, y, j, q, p) no cabían con el interlineado ajustado; en
   las frases en cursiva (Anton no tiene itálica real, así que el navegador
   la simula inclinando el glifo), esa inclinación se salía de la caja por
   los lados. El padding de aquí abajo da aire en las cuatro direcciones;
   el margen negativo lo compensa para que el interlineado no cambie. */
.reveal-palabras .palabra {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: .08em .12em .26em; margin: -.08em -.12em -.26em;
}
.reveal-palabras .palabra__interior {
  display: inline-block; transform: translateY(115%); opacity: 0; filter: blur(6px);
  transition: transform 1s cubic-bezier(.16,.8,.24,1), opacity 1s cubic-bezier(.16,.8,.24,1), filter 1s cubic-bezier(.16,.8,.24,1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal-palabras.visible .palabra__interior { transform: translateY(0); opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-palabras .palabra__interior { transition: none; transform: none; opacity: 1; filter: none; }
}

/* Una vez leída, una línea discreta la marca como un momento aparte,
   no como un párrafo más. */
.reveal-palabras::after {
  content: ""; display: block; width: 0; height: 1px; background: var(--acento);
  margin: 22px auto 0; transition: width 1.1s cubic-bezier(.16,.8,.24,1) .4s;
}
.reveal-palabras.visible::after { width: 56px; }
@media (prefers-reduced-motion: reduce) { .reveal-palabras::after { transition: none; width: 56px; } }

/* ---------- Aviso de contenido provisional ---------- */
.pendiente {
  position: relative; z-index: 40; margin: 0; padding: 9px 44px 9px 18px;
  background: var(--acento); color: var(--blanco); font-size: .82rem; text-align: center;
}
.pendiente b { font-weight: 700; }
.pendiente__x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: inherit; font-size: 1.3rem; cursor: pointer; line-height: 1;
}

/* ---------- Cabecera ---------- */
.cabecera {
  /* top: justo debajo de la barra compartida del estudio */
  position: fixed; top: var(--dig-barra-h); left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 28px; transition: background .35s, box-shadow .35s, padding .35s;
  color: #fff;
}
.cabecera[data-fija="true"] {
  background: color-mix(in srgb, var(--fondo) 90%, transparent);
  backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--borde); padding: 16px 28px;
  color: var(--texto);
}
/* Home sin la barra compartida del estudio: la cabecera propia va arriba del todo */
.sin-barra-superior .cabecera { top: 0; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }

/* ---------- Logotipo Differentissgood (texto + ola) ---------- */
/* El logotipo real sale de ../assets/marca.css; aquí sólo se le da tamaño.
   En la cabecera va sobre fotografía, por eso la versión de tinta clara. */
.marca-bodas { display: block; height: 30px; width: calc(30px * var(--dig-logo-proporcion)); }
.marca-bodas--pie { height: 44px; width: calc(44px * var(--dig-logo-proporcion)); margin: 0 auto; }

.logo-dg { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: .82; }
.logo-dg__texto {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -.01em; font-size: 1.02rem; color: currentColor; white-space: nowrap;
}
.logo-dg__ola { width: 100%; height: 7px; display: block; margin-top: 1px; }
.logo-dg__ola path { fill: none; stroke: var(--dig-acento); stroke-width: 5.5; stroke-linecap: round; }
.logo-dg__lema {
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: .68rem;
  color: var(--texto-suave); margin-top: 3px; letter-spacing: .01em;
}
.logo-dg--pie { align-items: center; }
.logo-dg--pie .logo-dg__texto { font-size: 1.3rem; }
.logo-dg--pie .logo-dg__ola { width: 110px; }

.menu { display: flex; gap: 30px; font-size: .88rem; letter-spacing: .01em; }
.menu a { text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; opacity: .92; }
.menu a[aria-current="true"], .menu a:hover { border-color: currentColor; opacity: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--sans); font-size: .88rem; font-weight: 600; letter-spacing: .01em;
  padding: 12px 24px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: transform .25s ease, opacity .25s ease, background .25s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--solido { background: var(--acento); color: var(--blanco); }
.btn--solido:hover { opacity: .92; }
.btn--linea { border-color: currentColor; color: inherit; }
.btn--peque { padding: 9px 18px; font-size: .8rem; }
.btn--ancho { width: 100%; justify-content: center; }

.menu__abrir {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px;
}
.menu__abrir span { width: 22px; height: 2px; background: currentColor; }

.menu-movil { display: none; }
.menu-movil[hidden] { display: none; }
.menu-movil:not([hidden]) {
  position: fixed; inset: 0; z-index: 39; background: var(--carbon); color: var(--marfil);
  display: flex; flex-direction: column; padding: 100px 32px 32px; gap: 4px; overflow-y: auto;
}
.menu-movil a {
  text-decoration: none; padding: 16px 4px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 1.15rem;
  font-family: var(--serif);
}
.menu-movil a.destacado { color: var(--dorado-claro); }
.menu-movil__x {
  position: absolute; top: 26px; right: 28px; background: none; border: 0; color: var(--marfil);
  font-size: 1.8rem; cursor: pointer; line-height: 1;
}

/* ---------- HERO: slideshow a pantalla completa ---------- */
.hero {
  position: relative; height: calc(100svh - var(--dig-barra-h)); min-height: 560px; overflow: hidden; background: var(--carbon);
}
.sin-barra-superior .hero { height: 100svh; }
.hero__diapositiva {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease;
  transform: translate3d(var(--cursor-x, 0), var(--cursor-y, 0), 0);
}
.hero__diapositiva.activa { opacity: 1; }
.hero__diapositiva img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.hero__diapositiva.activa img { animation: deriva-lenta 9s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes deriva-lenta {
  0% { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.09) translate(-1.2%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__diapositiva { transform: none; }
  .hero__diapositiva.activa img { animation: none; transform: scale(1.02); }
}
.hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,6,.5) 0%, rgba(10,8,6,.12) 32%, rgba(10,8,6,.18) 70%, rgba(10,8,6,.65) 100%);
}
/* Firma discreta, esquina inferior izquierda — no un titular grande centrado */
.hero__contenido {
  position: absolute; left: 30px; right: 24px; bottom: 26px; z-index: 2; color: #fff;
}
.hero__nombre {
  font-size: 19px; font-weight: 400; letter-spacing: .13em; margin: 0;
  opacity: 0; transform: translateY(14px);
  animation: heroNombreEntra 1.1s cubic-bezier(.16,.8,.24,1) .3s forwards;
}
.hero__frase {
  font-size: 13.5px; max-width: 36ch; margin: 8px 0 0; font-weight: 300; letter-spacing: .01em;
  opacity: 0; transform: translateY(10px);
  animation: heroFraseEntra 1.1s cubic-bezier(.16,.8,.24,1) .55s forwards;
}
/* Entrada al cargar la página, no ligada al scroll: la portada ya está a
   la vista desde el primer fotograma, así que su texto no necesita
   IntersectionObserver — solo un fundido suave nada más cargar. */
@keyframes heroNombreEntra { to { opacity: 1; transform: none; } }
@keyframes heroFraseEntra { to { opacity: .88; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__nombre, .hero__frase { animation: none; opacity: 1; transform: none; }
  .hero__frase { opacity: .88; }
}
.hero__bajar {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 40px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 20px;
}
.hero__bajar::before {
  content: ""; position: absolute; top: 7px; left: 50%; width: 3px; height: 7px; margin-left: -1.5px;
  background: #fff; border-radius: 3px; animation: bajar 1.8s infinite;
}
@keyframes bajar { 0% { opacity: 1; transform: translateY(0); } 70% { opacity: 0; transform: translateY(12px); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__bajar::before { animation: none; } }

/* ---------- Marcos de foto pendiente ---------- */
.hueco {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; background: var(--fondo-2); color: var(--texto-suave);
  text-align: center; padding: 24px; border-radius: inherit;
}
.hueco[hidden] { display: none; }
.hueco svg { width: 34px; height: 34px; stroke: var(--acento); stroke-width: 2; fill: none; }
.hueco p { margin: 0; font-weight: 600; color: var(--texto); font-size: .95rem; }
.hueco small { font-size: .76rem; }
.hueco code { background: var(--borde); padding: 1px 5px; border-radius: 4px; }
.hero__diapositiva .hueco p { color: #fff; }
.hero__diapositiva .hueco small { color: rgba(255,255,255,.7); }

/* ---------- Secciones genéricas ---------- */
.seccion { padding: 120px 0; }
.seccion--compacta { padding: 90px 0; }
.seccion__cab { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.seccion__cab h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.seccion__cab__intro { color: var(--texto-suave); font-size: .95rem; margin-top: 10px; }

/* ---------- Prefacio: una sola línea reflexiva, mucho aire (uso suelto,
   fuera de las transiciones con foto — ver .experiencia__transicion) ---------- */
.prefacio__linea {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--texto);
  font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.4; margin: 0; padding: 0 28px;
}

/* ==========================================================================
   TRANSICIÓN CON FOTO — la foto anterior se oscurece sin llegar a un negro
   sólido, una frase se queda su momento, y solo entonces entra la siguiente
   foto. Se scrubea con el scroll: .transicion__pista marca cuánto dura,
   .transicion__stage se queda fija (position:sticky) mientras tanto.
   ========================================================================== */
.transicion__pista { position: relative; height: 320vh; }
.transicion__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #0a0a0a; }
/* Degradado fijo en la base, independiente del scroll: el rótulo/frase
   final vive ahí y para cuando aparece, el oscurecimiento por scroll ya se
   ha desvanecido casi del todo — sin esto, el texto queda sobre la foto a
   brillo pleno y se lee mal. */
.transicion__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 22%, transparent 48%);
}
.transicion__capa {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Oscurecimiento de la foto: color fijo, no var(--carbon) — ese token se
   invierte con el tema (blanco en modo oscuro) y aquí necesitamos que la
   capa siempre oscurezca, sin importar el tema activo. */
/* z-index:2 — tiene que quedar SIEMPRE por encima de las dos fotos (desde
   y hacia), da igual el orden en el DOM: si no, en las pistas donde el
   negro vuelve a subir después de revelar la foto siguiente (las
   "dobles"), la foto ya revelada tapa el oscurecimiento y no se ve nada. */
.transicion__negro { position: absolute; inset: 0; z-index: 2; background: #0a0a0a; opacity: 0; }

.transicion__logo {
  position: absolute; top: 26px; left: 30px; z-index: 5; height: 22px; width: calc(22px * var(--dig-logo-proporcion));
  opacity: 0;
}
.transicion__logo img { height: 100%; width: 100%; object-fit: contain; display: block; }

.transicion__frase {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 12%; pointer-events: none; opacity: 0;
}
.transicion__frase p {
  font-family: var(--serif); font-style: italic; font-weight: 400; color: #fff;
  font-size: clamp(1.2rem, 3.2vw, 2.1rem); line-height: 1.35; margin: 0; text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}

.transicion__rotulo { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 4; text-align: center; padding: 0 8%; color: #fff; opacity: 0; }
.transicion__rotulo .etiqueta { color: var(--dorado-claro); margin-bottom: 12px; }
.transicion__rotulo h2 {
  font-size: clamp(1.3rem, 3.4vw, 2.4rem); line-height: 1.15; margin: 0 0 10px; text-wrap: balance; max-width: none;
  text-shadow: 0 2px 22px rgba(0,0,0,.55);
}
.transicion__rotulo p.detalle {
  font-family: var(--sans); font-weight: 300; font-size: clamp(.82rem, 1.4vw, .95rem);
  color: rgba(255,255,255,.9); max-width: 56ch; margin: 0 auto;
  text-shadow: 0 1px 16px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce) {
  .transicion__pista { height: auto; }
  .transicion__stage { position: relative; height: 70svh; }
}

/* ---------- Antes / Durante / Después: la misma estructura en tres actos ---------- */
.acto { padding: 90px 0; }
/* Colores fijos, no var(--carbon)/var(--marfil): esos tokens se invierten
   con el tema (blanco de fondo y texto casi negro en modo oscuro, que es
   el tema por defecto), y estos actos son oscuros a propósito siempre. */
.acto--oscuro { background: #0a0a0a; color: #f2ebe1; padding: 110px 0; }
.acto--oscuro .etiqueta { color: var(--dorado-claro); }

.acto__grid {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: center;
}
.acto__grid--invertida .acto__foto { order: 2; }
.acto__foto {
  position: relative; aspect-ratio: 5/6; border-radius: 2px; overflow: hidden; background: var(--fondo-2);
}
.acto__foto img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--parallax-y, 0)) scale(1.12); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .acto__foto img { transform: none; } }

.acto__texto h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 14ch; }
.acto__reflexion { color: var(--texto-suave); font-size: 1.02rem; max-width: 44ch; }
.acto--oscuro .acto__reflexion { color: #f2ebe1; opacity: .78; }
.acto__lista { list-style: none; margin: 26px 0 30px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.acto__lista li {
  position: relative; padding-left: 24px; font-size: .96rem; color: var(--texto-suave); line-height: 1.5;
}
.acto--oscuro .acto__lista li { color: #f2ebe1; opacity: .72; }
.acto__lista li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 1px; background: var(--acento);
}

/* ---------- Grupos de qué incluye cada acto (Durante: Fotografía / Vídeo
   / Dron, en tres columnas; Antes y Después reutilizan el mismo bloque
   dentro de su propia columna de texto) ---------- */
.acto__grupo-titulo {
  font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto); opacity: .55; margin: 0 0 14px;
}
.acto--oscuro .acto__grupo-titulo { color: #f2ebe1; }
.acto__grupos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: left;
  max-width: var(--ancho); margin: 0 auto 64px; padding: 0 28px;
}
.acto__grupo .acto__lista { margin-top: 0; }
.acto__enlace {
  display: inline-flex; align-items: center; text-decoration: none; color: var(--texto); font-weight: 600;
  font-size: .96rem; border-bottom: 1px solid var(--borde); padding-bottom: 6px; transition: border-color .3s var(--dig-curva), gap .3s var(--dig-curva);
  gap: 4px;
}
.acto__enlace:hover { border-color: var(--acento); }
.acto__enlace span { display: inline-block; transition: transform .3s var(--dig-curva); }
.acto__enlace:hover span { transform: translateX(5px); }
.acto--oscuro .acto__enlace { color: #f2ebe1; border-bottom-color: rgba(242,235,225,.3); }

/* ---------- Antes / Después a pantalla completa: la foto ocupa todo el
   alto de la primera pantalla, como la portada; el contenido práctico
   (qué incluye, enlace de contacto) va debajo, sobre el mismo fondo oscuro. ---------- */
.acto--pantalla-completa { padding: 0; }
.acto__foto-fondo {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
}
.acto__foto-fondo::before {
  content: ""; position: absolute; inset: 0;
  /* Degradado oscuro fijo (no var(--carbon), que se invierte con el tema). */
  background: linear-gradient(0deg, #0a0a0a 0%, rgba(13,13,13,.5) 42%, rgba(13,13,13,.08) 75%, transparent 100%);
}
.acto__cuerpo { position: relative; z-index: 1; width: 100%; padding: 90px 24px 64px; text-align: center; }
.acto__cuerpo .acto__lista { align-items: center; }
.acto__cuerpo .acto__lista li { padding-left: 0; }
.acto__cuerpo .acto__lista li::before { display: none; }

.acto__cab { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.acto__cab h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.acto__cita {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  text-align: center; max-width: 720px; margin: 76px auto; padding: 0 28px; color: var(--marfil);
}

/* ---------- Galería editorial de "Durante": rejilla simétrica, tipo
   puzzle — piezas justas unas con otras (sin marco redondeado), en un
   orden fijo y ordenado en vez de un collage con piezas sueltas. Una
   pieza grande (2×2) equilibrada por siete piezas de 1×1 y la llamada a
   "Descubrir las historias", que completa la rejilla de 4×3. ---------- */
.galeria-editorial {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr);
  aspect-ratio: 4/3; gap: 6px;
  max-width: var(--ancho); margin: 0 auto; padding: 0 28px;
}
.galeria-editorial__pieza {
  position: relative; overflow: hidden; background: var(--fondo-2);
}
.galeria-editorial__pieza:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.galeria-editorial__pieza:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
.galeria-editorial__pieza:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
.galeria-editorial__pieza:nth-child(4) { grid-column: 3 / 4; grid-row: 2 / 3; }
.galeria-editorial__pieza:nth-child(5) { grid-column: 4 / 5; grid-row: 2 / 3; }
.galeria-editorial__pieza:nth-child(6) { grid-column: 1 / 2; grid-row: 3 / 4; }
.galeria-editorial__pieza:nth-child(7) { grid-column: 2 / 3; grid-row: 3 / 4; }
.galeria-editorial__pieza:nth-child(8) { grid-column: 3 / 4; grid-row: 3 / 4; }
.galeria-editorial__pieza img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translateY(var(--parallax-y, 0)) scale(1.1); transition: transform .7s var(--dig-curva);
  will-change: transform;
}
.galeria-editorial__pieza:hover img { transform: translateY(var(--parallax-y, 0)) scale(1.15); }
@media (prefers-reduced-motion: reduce) { .galeria-editorial__pieza img { transform: none !important; transition: none; } }

/* Mismo formato que .acto__enlace ("Hablemos de vuestro álbum"...): texto
   + raya debajo, sin caja ni fondo — solo que aquí ocupa una celda entera
   del puzzle, así que la raya va en el span interior, no en todo el hueco. */
.galeria-editorial__cta {
  grid-column: 4 / 5; grid-row: 3 / 4; display: flex; align-items: center; justify-content: center; text-align: center;
  text-decoration: none; color: #f2ebe1; font-weight: 600;
  font-size: .96rem; padding: 24px;
}
.galeria-editorial__cta span {
  display: inline-flex; align-items: center; gap: 4px;
  border-bottom: 1px solid rgba(242,235,225,.3); padding-bottom: 6px;
  transition: border-color .3s var(--dig-curva);
}
.galeria-editorial__cta:hover span { border-color: var(--dorado-claro); }
.galeria-editorial__cta span span { border-bottom: none; padding-bottom: 0; transition: transform .3s var(--dig-curva); }
.galeria-editorial__cta:hover span span { transform: translateX(5px); }

/* ---------- Portfolio completo (cuadrícula 3 columnas) ---------- */
.cuadricula-completa {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--ancho); margin: 0 auto; padding: 0 28px;
}
.cuadricula-completa figure {
  position: relative; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; background: var(--fondo-2);
  transition: opacity .35s, transform .35s;
}
.cuadricula-completa figure.oculta { display: none; }
.cuadricula-completa img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,.8,.24,1);
}
.cuadricula-completa figure:hover img { transform: scale(1.05); }
.volver-portfolio { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 40px; text-decoration: none; color: var(--acento); font-weight: 600; font-size: .9rem; }
.volver-portfolio--fin { margin: 48px 0 0; }

/* ---------- Vídeo (dentro del acto "Durante", fondo oscuro heredado) ---------- */
.video-especial__grid {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center;
  max-width: var(--ancho); margin: 120px auto 0; padding: 0 28px;
}
.video-especial__grid h2 { color: var(--marfil); font-size: clamp(1.9rem, 4.2vw, 3rem); }
.video-especial__grid p { color: rgba(242,235,225,.78); font-size: 1.06rem; max-width: 56ch; }
.video-especial__marco {
  position: relative; aspect-ratio: 16/10; border-radius: 2px; overflow: hidden; background: #000;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.video-especial__marco iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  transform: translateY(var(--parallax-y, 0)); will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .video-especial__marco iframe { transform: none; } }
.video-especial__enlace {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  border: 0; padding: 0; background: none; cursor: pointer; font: inherit;
}
.video-especial__enlace img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: translateY(var(--parallax-y, 0)) scale(1.06); will-change: transform;
  transition: transform .5s ease;
}
@media (prefers-reduced-motion: reduce) { .video-especial__enlace img { transform: scale(1.06); } }
.video-especial__velo { position: absolute; inset: 0; background: rgba(0,0,0,.22); transition: background .3s ease; }
.video-especial__enlace:hover .video-especial__velo { background: rgba(0,0,0,.34); }
.video-especial__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-especial__play svg {
  width: 62px; height: 62px; fill: #fff;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
  transition: transform .3s ease;
}
.video-especial__enlace:hover .video-especial__play svg { transform: scale(1.1); }
/* Por si el vídeo no se puede incrustar (privado, restringido...): enlace
   directo, siempre visible, para verlo en YouTube. */
.video-especial__respaldo { text-align: center; margin-top: 18px; font-size: .84rem; }
.video-especial__respaldo a { color: var(--dorado-claro); }
.acto--oscuro .hueco { background: #1c1712; color: #cdbfab; }
.acto--oscuro .hueco p { color: #f2ebe1; }

/* ---------- Blog ---------- */
.blog__fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: var(--ancho); margin: 0 auto; padding: 0 28px; }
.tarjeta-post { text-decoration: none; color: inherit; display: block; }
.tarjeta-post__foto { position: relative; aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; background: var(--fondo-2); margin-bottom: 18px; }
.tarjeta-post__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tarjeta-post:hover .tarjeta-post__foto img { transform: scale(1.04); }
.tarjeta-post__fecha { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.tarjeta-post h3 { font-size: 1.2rem; margin: .4em 0 .3em; }
.tarjeta-post__resumen { color: var(--texto-suave); font-size: .92rem; margin: 0; }

/* ---------- Opiniones (carrusel, una en una) ---------- */
.opiniones { background: var(--fondo-2); }
.opiniones__carrusel { max-width: 720px; margin: 0 auto; text-align: center; position: relative; min-height: 230px; }
.opinion-slide {
  position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.opinion-slide.activa { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.opinion-slide blockquote { font-family: var(--serif); font-size: 1.3rem; font-style: italic; margin: 0 0 18px; line-height: 1.45; }
.opinion-slide figcaption { font-size: .86rem; color: var(--texto-suave); }
.opiniones__puntos { display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
.opiniones__puntos button {
  width: 7px; height: 7px; border-radius: 50%; background: var(--borde); border: 0; padding: 0; cursor: pointer;
}
.opiniones__puntos button[aria-current="true"] { background: var(--acento); }

/* ---------- La experiencia (antes "Precios y presupuestos"): lista
   continua, sin tarjetas ni cajas. El nombre es lo grande; el precio va
   discreto al lado, como en una carta, no como un folleto. ---------- */
.experiencia__grupo-titulo {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--texto); margin: 0 0 4px; text-align: center;
}
.experiencia__grupo-titulo::after {
  content: ""; display: block; width: 0; height: 1px; background: var(--acento);
  margin: 16px auto 0; transition: width .8s cubic-bezier(.16,.8,.24,1) .1s;
}
.experiencia__grupo-titulo.visible::after { width: 34px; }
@media (prefers-reduced-motion: reduce) { .experiencia__grupo-titulo::after { transition: none; width: 34px; } }
.experiencia__lista { list-style: none; margin: 30px auto 0; padding: 0; max-width: 860px; }
.experiencia__item {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  padding: 32px 0; border-bottom: 1px solid var(--borde);
}
.experiencia__item:first-child { border-top: 1px solid var(--borde); }
.experiencia__item::before {
  content: ""; position: absolute; left: -16px; top: 50%; width: 2px; height: 0; background: var(--acento);
  transform: translateY(-50%); transition: height .6s cubic-bezier(.16,.8,.24,1);
}
.experiencia__item.visible::before { height: 38%; }
.experiencia__item:hover::before, .experiencia__item:focus-within::before { height: 64%; }
.experiencia__texto, .experiencia__precio { transition: transform .45s cubic-bezier(.16,.8,.24,1); }
.experiencia__item:hover .experiencia__texto, .experiencia__item:focus-within .experiencia__texto { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .experiencia__item::before { transition: none; }
  .experiencia__item.visible::before { height: 38%; }
  .experiencia__texto, .experiencia__precio { transition: none; }
  .experiencia__item:hover .experiencia__texto, .experiencia__item:focus-within .experiencia__texto { transform: none; }
}
.experiencia__marca { position: relative; display: flex; align-items: center; cursor: pointer; }
.experiencia__marca input { position: absolute; inset: -10px; opacity: 0; margin: 0; cursor: pointer; }
.experiencia__marca-caja {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--borde);
  display: flex; align-items: center; justify-content: center; transition: border-color .25s var(--dig-curva);
}
.experiencia__marca-caja::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acento);
  transform: scale(0); transition: transform .2s var(--dig-curva);
}
.experiencia__marca input:checked + .experiencia__marca-caja { border-color: var(--acento); }
.experiencia__marca input:checked + .experiencia__marca-caja::after { transform: scale(1); }
.experiencia__marca input:focus-visible + .experiencia__marca-caja { outline: 2px solid var(--acento); outline-offset: 3px; }
.experiencia__texto { min-width: 0; }
.experiencia__nombre { font-family: var(--serif); font-weight: var(--dig-peso-titulo); font-size: 1.3rem; margin: 0 0 6px; transition: color .25s; }
.experiencia__item:has(input:checked) .experiencia__nombre { color: var(--acento); }
.experiencia__destacada-nota { font-family: var(--sans); font-style: normal; font-size: .76rem; letter-spacing: .03em; color: var(--texto-suave); margin-left: 8px; }
.experiencia__detalle { color: var(--texto-suave); font-size: .92rem; line-height: 1.5; margin: 0; max-width: 48ch; }
.experiencia__enlace { color: var(--texto-suave); font-size: .92rem; text-decoration: underline; text-underline-offset: 3px; transition: color .25s; }
.experiencia__enlace:hover { color: var(--acento); }
.experiencia__precio { font-size: .92rem; color: var(--texto-suave); white-space: nowrap; text-align: right; }
.experiencia__transicion { max-width: 680px; margin: 110px auto 0; text-align: center; }

/* Franja propia para las experiencias completas: un cambio de tono de
   fondo a todo lo ancho basta para distinguirlas de los servicios sueltos
   sin volver a las tarjetas con borde. */
.experiencia__banda-packs { background: var(--fondo-2); margin-top: 100px; padding: 90px 0; }
.experiencia__banda-packs .experiencia__grupo-titulo { margin-top: 0; }
.experiencia__banda-packs .experiencia__item:last-child { border-bottom: none; }

/* ---------- Precios + Contacto: mismo bloque, sin salto entre uno y otro ---------- */
.precios__contacto { margin-top: 130px; }
.contacto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.contacto__zona-texto { color: var(--texto-suave); font-size: .94rem; line-height: 1.65; margin: 10px 0 0; max-width: 46ch; }
.contacto__ciudad { color: var(--texto); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--borde); transition: border-color .25s; }
.contacto__ciudad:hover { border-color: var(--acento); }
.redes { display: flex; gap: 22px; margin-top: 30px; }
.redes a { color: var(--texto-suave); text-decoration: none; transition: color .25s; display: inline-flex; }
.redes a:hover { color: var(--acento); }
.redes svg { width: 20px; height: 20px; fill: currentColor; }

.formulario { text-align: left; animation: aparecer .5s var(--dig-curva); }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .formulario { animation: none; } }

/* Lo elegido en "Vuestra experiencia", visible también dentro del
   formulario — antes del envío, para que se vea qué va a llegar. */
.formulario__resumen { margin: 0 0 26px; padding: 16px 18px; border-radius: 8px; background: var(--fondo-2); }
.formulario__resumen-titulo {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .95rem; color: var(--texto); margin: 0 0 10px;
}
.formulario__resumen-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.formulario__resumen-lista li {
  font-size: .84rem; color: var(--texto-suave); border-bottom: 1px solid var(--borde); padding: 0 0 3px;
}
.formulario__sin-elegir { margin: 0 0 26px; font-size: .9rem; }
.formulario__sin-elegir a { color: var(--acento); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.formulario__sin-elegir a:hover { color: var(--dorado-claro); }

/* ---------- Antes del formulario: lo elegido + un único paso para
   empezar. El formulario en sí no se ve hasta que se pulsa. ---------- */
.experiencia__cta-panel { text-align: left; }
.experiencia__cta-panel .btn { margin-top: 18px; }
.carrito__titulo { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--texto); margin: 0 0 12px; }
.carrito__lista { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 8px; }
.carrito__lista li {
  display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--texto-suave);
  border-bottom: 1px solid var(--borde); padding: 0 0 3px;
}
.carrito__quitar { background: none; border: 0; color: var(--texto-suave); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; transition: color .2s; }
.carrito__quitar:hover { color: var(--acento); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo input, .campo select, .campo textarea {
  font: inherit; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.campo [aria-invalid="true"] { border-color: #c0392b; }
.consentimiento { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; margin: 16px 0; color: var(--texto-suave); }
.consentimiento[data-invalido="true"] { color: #c0392b; }
.aviso { min-height: 1.3em; font-size: .85rem; margin: 6px 0 14px; }
.aviso[data-estado="error"] { color: #c0392b; }
.aviso[data-estado="ok"] { color: var(--acento); }

/* ---------- Volver arriba ---------- */
.volver-arriba {
  position: fixed; right: 22px; bottom: 22px; z-index: 25; width: 44px; height: 44px; border-radius: 50%;
  background: var(--superficie); border: 1px solid var(--borde); color: var(--texto);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px -8px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .3s, background .25s;
}
.volver-arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
.volver-arriba:hover { background: var(--acento); color: #fff; border-color: var(--acento); }
.volver-arriba svg { width: 18px; height: 18px; }

/* ---------- Pie (único: incluye lo que antes se repartía con el pie
   compartido del estudio, para no mostrar dos veces el logo) ---------- */
.pie { padding: 60px 0 40px; text-align: center; border-top: 1px solid var(--borde); }
.pie__marca { display: flex; justify-content: center; gap: 8px; font-family: var(--serif); margin-bottom: 8px; text-decoration: none; transition: opacity .3s var(--dig-curva); }
.pie__marca:hover { opacity: .72; }
.pie__lema { color: var(--texto-suave); font-style: italic; }
.pie__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 18px 0; font-size: .88rem; }
.pie__menu a { text-decoration: none; }
.pie__contacto { font-size: .84rem; color: var(--texto-suave); margin: 0; }
.pie__contacto a { text-decoration: none; transition: color .25s; }
.pie__contacto a:hover { color: var(--acento); }
.pie__redes { justify-content: center; margin: 16px 0 22px; }
.pie__legal { font-size: .82rem; color: var(--texto-suave); }
.pie__legal a { text-decoration: underline; }
.pie__firma { font-size: .78rem; color: var(--texto-suave); margin-top: 18px; }

/* ---------- Páginas legales / blog artículo ---------- */
.legal, .articulo { max-width: 760px; margin: 0 auto; padding: 60px 28px 100px; }
.articulo { padding-top: 140px; }
.legal h1, .articulo h1 { margin-top: 20px; }
.legal h2 { margin-top: 2em; font-size: 1.2rem; }
.legal p, .articulo p { color: var(--texto-suave); }
.legal__fecha, .articulo__fecha { color: var(--texto-suave); font-size: .85rem; }
.legal__volver { text-decoration: none; color: var(--acento); font-weight: 600; font-size: .9rem; }
.legal__nav { margin: 40px 0; font-size: .88rem; color: var(--texto-suave); }
.legal__nav a { color: var(--acento); text-decoration: none; }
.datos-legales dt { font-weight: 700; margin-top: 10px; }
.datos-legales dd { margin: 0 0 4px; color: var(--texto-suave); }
.todo { background: var(--acento); color: #fff; padding: 12px 16px; border-radius: 8px; font-size: .88rem; }
.articulo__foto { width: 100%; border-radius: 6px; overflow: hidden; margin: 30px 0; aspect-ratio: 16/9; background: var(--fondo-2); position: relative; }
.articulo__foto img { width: 100%; height: 100%; object-fit: cover; }
.articulo__cuerpo p { color: var(--texto); font-size: 1.05rem; }

/* ---------- Listado de blog ---------- */
.blog-pagina { padding: 150px 0 100px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .menu, .cabecera .btn { display: none; }
  .menu__abrir { display: flex; }
  .acto__grid, .video-especial__grid, .contacto__grid { grid-template-columns: 1fr; gap: 40px; }
  .acto__grid--invertida .acto__foto { order: -1; }
  .acto__foto { order: -1; aspect-ratio: 16/9; }
  .acto__texto h2, .acto__reflexion { max-width: none; }
  .acto__grupos { grid-template-columns: 1fr; gap: 36px; }
  .galeria-editorial { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; aspect-ratio: auto; gap: 8px; }
  .galeria-editorial__pieza,
  .galeria-editorial__pieza:nth-child(1),
  .galeria-editorial__pieza:nth-child(2),
  .galeria-editorial__pieza:nth-child(3),
  .galeria-editorial__pieza:nth-child(4),
  .galeria-editorial__pieza:nth-child(5),
  .galeria-editorial__pieza:nth-child(6),
  .galeria-editorial__pieza:nth-child(7),
  .galeria-editorial__pieza:nth-child(8) { grid-column: span 1; grid-row: auto; aspect-ratio: 1/1; }
  .galeria-editorial__pieza:nth-child(1) { grid-column: span 2; aspect-ratio: 16/10; }
  .galeria-editorial__cta { grid-column: span 2; grid-row: auto; }
  .cuadricula-completa { grid-template-columns: repeat(2, 1fr); }
  .blog__fila { grid-template-columns: 1fr; max-width: 520px; }
  .campos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .seccion { padding: 84px 0; }
  .acto, .prefacio { padding: 64px 0; }
  .acto--oscuro { padding: 76px 0; }
  .acto__cita { margin: 56px auto; }
  .video-especial__grid { margin-top: 76px; }
  .galeria-editorial { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cuadricula-completa { grid-template-columns: 1fr; }
  .experiencia__item { grid-template-columns: auto 1fr; row-gap: 10px; }
  .experiencia__precio { grid-column: 2; text-align: left; }
}