/* =========================================================
   MARTYN STUDIO — Página web
   Paleta: blanco hueso + negro
   Tipografía: Cormorant Garamond (serif) + Inter (sans-serif)
   ========================================================= */

:root {
    --color-bg: #F5F1EA;            /* blanco hueso */
    --color-bg-warm: #EFE8DC;       /* hueso ligeramente más cálido para gradientes */
    --color-text: #1A1A1A;          /* casi negro */
    --color-text-soft: #4A4A4A;     /* gris oscuro para cuerpo */
    --color-line: #C9C0B2;          /* línea sutil */
    --color-frame: #FAF6EE;         /* papel del marco */
    --color-frame-edge: #D9CFBF;    /* borde del marco */

    --font-serif: 'Cormorant Garamond', 'Georgia', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);

    /* Textura SVG inline: grano monocromo muy fino (fractal noise).
       Se repite en un tile pequeño, con opacidad tan baja que sólo
       se percibe al pasar el ojo, como la fibra del papel. */
    --paper-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Reset --------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--color-bg);
    /* Doble capa: gradiente cálido muy suave + textura de papel encima.
       El gradiente da "respiración" al fondo plano; la textura le aporta
       fibra orgánica, como una hoja de patrón vista de cerca. */
    background-image:
        var(--paper-texture),
        radial-gradient(ellipse at top, var(--color-bg) 0%, var(--color-bg-warm) 100%);
    background-attachment: fixed, fixed;
    background-size: 220px 220px, 100% 100%;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-weight: 300;
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

/* =========================================================
   COLUMNAS LATERALES — pilastras barrocas minimalistas
   Dos pilastras verticales fijas al viewport, con capitel
   superior, fuste fino y base. Puramente decorativas.
   Se ocultan en móvil (≤ 768px) — ver media queries al final.
   ========================================================= */
.pillar {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 14px;                    /* ancho del capitel/base */
    z-index: 5;                     /* por encima del fondo, debajo de la entrada */
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(3rem, 6vh, 5rem) 0;   /* respiración con los bordes */
    opacity: 0;
    transition: opacity 1.2s ease 0.4s;
    color: var(--color-text);
}

/* Se desvanecen al entrar, a la vez que la web emerge tras el hilo */
body:not(.is-entering) .pillar {
    opacity: 0.55;
}

.pillar--left  { left:  clamp(20px, 3vw, 40px); }
.pillar--right { right: clamp(20px, 3vw, 40px); }

/* Capitel / base: pequeña forma tipo remate de imprenta antigua.
   Dos líneas horizontales separadas por un punto central.          */
.pillar__capital {
    position: relative;
    width: 14px;
    height: 16px;
    flex-shrink: 0;
}
.pillar__capital::before,
.pillar__capital::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
}
.pillar__capital::before { top: 0; }
.pillar__capital::after  { bottom: 0; }

/* Pequeña marca central (el "ornamento" mínimo) */
.pillar__capital {
    background-image: radial-gradient(circle at center,
        currentColor 0 1.5px, transparent 1.5px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* Fuste: la línea vertical que conecta capitel y base.
   Un hilo de 1px, como el del nudo de la entrada.                 */
.pillar__shaft {
    flex: 1;
    width: 1px;
    background-color: currentColor;
    margin: 4px 0;
}

a {
    color: inherit;
    text-decoration: none;
}

/* =========================================================
   0. PANTALLA DE ENTRADA — "el primer hilo"
   ========================================================= */

/* Mientras la entrada está activa, bloqueamos el scroll.
   En iOS, position: fixed en el body evita el rebote y garantiza que
   la pantalla de entrada cubra todo el alto visible. */
body.is-entering {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    position: fixed;
    width: 100%;
    touch-action: none;
    overscroll-behavior: none;
}

/* Cuando el usuario entra, liberamos las animaciones pausadas del wordmark */
body:not(.is-entering) .wordmark__letter,
body:not(.is-entering) .wordmark__band,
body:not(.is-entering) .wordmark__band-text,
body:not(.is-entering) .wordmark__divider,
body:not(.is-entering) .opening__tagline,
body:not(.is-entering) .opening__scroll-hint {
    animation-play-state: running;
}

.entry {
    position: fixed;
    inset: 0;
    /* En iOS, inset: 0 + position: fixed deja un hueco por la barra dinámica.
       height: 100dvh garantiza que la entrada cubra la altura visible real. */
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    z-index: 1000;
    background-color: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    transition: opacity 1.6s var(--ease-soft);
    /* Evita selección de texto y gestos no deseados mientras se arrastra */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* touch-action: none a nivel de capa evita que iOS capture el gesto
       como scroll en zonas que no son directamente el nudo. */
    touch-action: none;
    overscroll-behavior: contain;
}

/* Frase inicial — pequeña, serif, casi un murmullo */
.entry__phrase {
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    letter-spacing: 0.02em;
    color: var(--color-text);
    text-align: center;
    max-width: 80%;
    margin-bottom: clamp(2rem, 4vw, 3rem);

    opacity: 0;
    transform: translateY(12px);
    animation: entryPhraseIn 2.2s var(--ease-soft) 0.4s forwards;
}

/* Hilo vertical — se traza desde arriba hacia el nudo inicial,
   luego se extiende hacia abajo siguiendo al nudo arrastrado */
.entry__thread {
    width: 1px;
    /* La altura inicial es fija; se extiende con --drag-y */
    height: calc(clamp(140px, 22vh, 220px) + var(--drag-y, 0px));
    color: var(--color-text);
    overflow: visible;
    display: block;
    transition: height 0.4s var(--ease-soft);
}

/* Mientras se arrastra, la extensión responde al puntero sin transición */
.entry.is-dragging .entry__thread {
    transition: none;
}

.entry__thread-line {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: threadDraw 2.6s var(--ease-soft) 1.2s forwards;
}

/* Nudo — ahora es un manillar de arrastre, no un botón */
.entry__knot {
    position: relative;
    width: 22px;
    height: 22px;
    background: none;
    border: none;
    padding: 0;
    margin-top: -1px;  /* une con el hilo sin costura */
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;  /* imprescindible para arrastre táctil fluido */

    /* Sigue al puntero en eje Y mediante variable CSS */
    transform: translateY(var(--drag-y, 0px));

    opacity: 0;
    animation: entryPhraseIn 1.2s var(--ease-soft) 3.6s forwards;
}

.entry__knot:active,
.entry.is-dragging .entry__knot {
    cursor: grabbing;
}

/* Durante el arrastre, el nudo ya no pulsa — el gesto lo ha reemplazado */
.entry.is-dragging .entry__knot-pulse {
    opacity: 0;
    animation: none;
}

.entry.is-dragging .entry__phrase,
.entry.is-dragging .entry__hint {
    opacity: 0;
    transition: opacity 0.4s var(--ease-soft);
}

/* Transición elástica al soltar sin cruzar el umbral */
.entry.is-releasing .entry__knot {
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.entry.is-releasing .entry__thread {
    transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.entry__knot-dot {
    width: 10px;
    height: 10px;
    background-color: var(--color-text);
    border-radius: 50%;
    display: block;
    position: relative;
    z-index: 2;
    transition: transform 0.4s var(--ease-soft);
}

/* Pulso suave — el nudo respira */
.entry__knot-pulse {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-text);
    opacity: 0.15;
    animation: knotPulse 2.8s var(--ease-soft) 3.8s infinite;
}

.entry__knot:hover .entry__knot-dot {
    transform: scale(1.25);
}

.entry__knot:hover ~ .entry__hint {
    opacity: 1;
}

/* Hint "tira del hilo" — aparece al pasar por encima del nudo */
.entry__hint {
    position: absolute;
    bottom: clamp(2.5rem, 6vh, 4rem);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    opacity: 0;
    transition: opacity 0.6s var(--ease-soft);
    animation: entryHintIn 1s var(--ease-soft) 4.4s forwards;
}

/* Estado "salida" — cuando se clica el nudo */
.entry.is-leaving {
    pointer-events: none;
}

.entry.is-leaving .entry__thread-line {
    /* El hilo se tensa y continúa hacia abajo */
    animation: threadSnap 1.2s var(--ease-soft) forwards;
}

.entry.is-leaving .entry__knot {
    animation: knotRelease 1.2s var(--ease-soft) forwards;
}

.entry.is-leaving .entry__phrase,
.entry.is-leaving .entry__hint {
    opacity: 0 !important;
    transition: opacity 0.6s var(--ease-soft);
}

.entry.is-gone {
    opacity: 0;
    pointer-events: none;
}

/* Keyframes de entrada ------------------------------------ */

@keyframes entryPhraseIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes entryHintIn {
    to { opacity: 1; }
}

@keyframes threadDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes knotPulse {
    0%   { transform: scale(1);   opacity: 0.15; }
    50%  { transform: scale(1.8); opacity: 0;    }
    100% { transform: scale(1.8); opacity: 0;    }
}

/* Keyframes de salida ------------------------------------- */

@keyframes threadSnap {
    /* Hilo se tensa y se alarga hacia abajo */
    0%   { transform: scaleY(1);   transform-origin: top; }
    40%  { transform: scaleY(1.05); transform-origin: top; }
    100% { transform: scaleY(3);    transform-origin: top; opacity: 0; }
}

@keyframes knotRelease {
    0%   { transform: translateY(0)    scale(1);   opacity: 1; }
    40%  { transform: translateY(-4px) scale(1.3); opacity: 1; }
    100% { transform: translateY(60vh) scale(0.4); opacity: 0; }
}

/* Escenas (sin bordes, el scroll las funde) --------------- */
.scene {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 6vw, 5rem);
}

/* =========================================================
   1. APERTURA — logo tipográfico integrado
   ========================================================= */
.scene--opening {
    flex-direction: column;
    min-height: 100vh;
    gap: clamp(2rem, 5vw, 4rem);
}

.opening {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

/* Wordmark: M | S compuesto tipográficamente — fiel al logo original */
.wordmark {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.2vw, 1rem);  /* más apretado, como en el PDF */
    font-family: var(--font-serif);
    color: var(--color-text);
    line-height: 1;
}

.wordmark__letter {
    position: relative;
    font-size: clamp(7rem, 18vw, 15rem);
    font-weight: 500;
    line-height: 0.85;
    letter-spacing: -0.04em;
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: wordmarkFadeIn 1.8s var(--ease-soft) 0.3s forwards;
    animation-play-state: paused;
}

.wordmark__letter--s {
    animation-delay: 0.5s;
}

.wordmark__glyph {
    display: inline-block;
}

/* Banda blanca horizontal que corta la letra por la mitad.
   Se revela expandiéndose desde el centro hacia fuera (ancho 0 → completo). */
.wordmark__band {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-bg);  /* blanco hueso: mismo color que el fondo */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.22em;  /* altura proporcional a la letra */
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    animation: bandReveal 1.1s var(--ease-soft) 1.4s forwards;
    animation-play-state: paused;
}

.wordmark__letter--s .wordmark__band {
    animation-delay: 1.6s;  /* ligeramente después que la M */
}

.wordmark__band-text {
    font-family: var(--font-sans);
    font-size: clamp(0.75rem, 1.3vw, 1.1rem);
    font-weight: 400;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--color-text);
    line-height: 1;
    padding: 0 0.6em;
    opacity: 0;
    animation: bandTextIn 0.8s var(--ease-soft) 2.2s forwards;
    animation-play-state: paused;
}

.wordmark__letter--s .wordmark__band-text {
    animation-delay: 2.4s;
}

/* Divisor vertical con remates tipo aguja/soporte de costura */
.wordmark__divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: clamp(4rem, 10vw, 8rem);
    opacity: 0;
    animation: wordmarkFadeIn 1.4s var(--ease-soft) 1s forwards;
    animation-play-state: paused;
}

.wordmark__divider-cap {
    width: 14px;
    height: 1.5px;
    background-color: var(--color-text);
}

.wordmark__divider-line {
    flex: 1;
    width: 1.5px;
    background-color: var(--color-text);
    margin: 2px 0;
}

.opening__tagline {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    opacity: 0;
    animation: wordmarkFadeIn 1.2s var(--ease-soft) 2s forwards;
    animation-play-state: paused;
}

@keyframes wordmarkFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bandReveal {
    0%   { width: 0; }
    100% { width: 115%; }   /* se extiende un poco más allá del ancho de la letra */
}

@keyframes bandTextIn {
    to { opacity: 1; }
}

.opening__scroll-hint {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    animation: openingFadeIn 1.5s var(--ease-soft) 2.5s forwards;
    animation-play-state: paused;
}

.opening__scroll-hint span {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-soft);
}

.opening__scroll-hint .line {
    width: 1px;
    height: 40px;
    background-color: var(--color-text-soft);
    animation: scrollLine 2.5s var(--ease-soft) infinite;
}

@keyframes openingFadeIn {
    to { opacity: 1; }
}

@keyframes scrollLine {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =========================================================
   2. MANIFESTO
   ========================================================= */
.scene--manifesto {
    min-height: 120vh;
}

.manifesto__text {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(2.5rem, 7vw, 6.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
    max-width: 18ch;
    font-style: italic;
}

.manifesto__text .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    margin-right: 0.25em;
}

/* =========================================================
   3. PROCESO
   ========================================================= */
.scene--process {
    min-height: 120vh;
}

.process__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
}

.process__word {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(2.2rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(20px);
}

/* =========================================================
   4. GALERÍA
   ========================================================= */
.scene--gallery {
    min-height: 200vh;
    padding: clamp(6rem, 15vw, 12rem) clamp(1.5rem, 6vw, 5rem);
}

.gallery {
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    position: relative;
}

.gallery__item {
    overflow: hidden;
    margin: 0;
    padding: 10px 10px 0 10px;     /* reservamos el borde inferior para el caption */
    background-color: var(--color-frame);
    box-shadow:
        0 0 0 1px var(--color-frame-edge),    /* filo fino beige */
        0 14px 30px -12px rgba(70, 55, 30, 0.18),
        0 4px 10px -4px rgba(70, 55, 30, 0.10);
    position: relative;
    transition: box-shadow 0.6s ease, transform 0.6s ease;
    display: flex;
    flex-direction: column;
}

/* Bisel alrededor de la imagen — no incluimos el caption */
.gallery__item > img {
    outline: 1px solid rgba(120, 100, 70, 0.10);
    outline-offset: -1px;
}

.gallery__item:hover {
    box-shadow:
        0 0 0 1px var(--color-frame-edge),
        0 22px 40px -14px rgba(70, 55, 30, 0.24),
        0 6px 14px -4px rgba(70, 55, 30, 0.12);
    transform: translateY(-2px);
}

/* Pie de foto: dentro del marco, como la tira inferior
   de una lámina montada. Tipografía sans serif muy pequeña,
   letterspacing abierto, color texto suave. */
.gallery__caption {
    display: block;
    flex-shrink: 0;
    text-align: center;
    padding: 0.9rem 0.5rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.64rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    color: var(--color-text-soft);
    opacity: 0.78;
    background-color: var(--color-frame);
}

/* En los detalles el caption va después del detail__text,
   en flujo normal, como ficha bajo la descripción. */
.detail__caption {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: lowercase;
    color: var(--color-text-soft);
    opacity: 0.62;
    text-align: center;
    margin-top: -0.25rem;
}

.gallery__item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    will-change: transform;
}

/* Los aspect-ratio los aplicamos al <img>, no al figure.
   Así la foto respeta su proporción y el caption se añade
   en flujo natural por debajo, dentro del marco. */
.gallery__item--1 { grid-column: 1 / span 5; }
.gallery__item--2 { grid-column: 8 / span 5; margin-top: 8vh; }
.gallery__item--3 { grid-column: 2 / span 4; margin-top: 4vh; }
.gallery__item--4 { grid-column: 7 / span 5; margin-top: 10vh; }
.gallery__item--5 { grid-column: 1 / span 5; margin-top: 6vh; }
.gallery__item--6 { grid-column: 7 / span 5; margin-top: 4vh; }
.gallery__item--7 { grid-column: 3 / span 7; margin-top: 6vh; }

.gallery__item--1 img { aspect-ratio: 3/4; }
.gallery__item--2 img { aspect-ratio: 4/5; }
.gallery__item--3 img { aspect-ratio: 1/1; }
.gallery__item--4 img { aspect-ratio: 3/4; }
.gallery__item--5 img { aspect-ratio: 3/4; }
.gallery__item--6 img { aspect-ratio: 4/5; }
.gallery__item--7 img { aspect-ratio: 16/9; }

.gallery__placeholder {
    width: 100%;
    height: 100%;
    background-color: #E8E2D5;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 12px,
            rgba(0,0,0,0.02) 12px,
            rgba(0,0,0,0.02) 24px
        );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-soft);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* =========================================================
   5. DETALLES
   ========================================================= */
.scene--details {
    flex-direction: column;
    gap: clamp(4rem, 10vw, 8rem);
    min-height: 140vh;
}

.details__intro {
    max-width: 700px;
    text-align: center;
}

.details__lead {
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.3;
    color: var(--color-text);
}

.details__grid {
    width: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
}

.detail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail__image {
    aspect-ratio: 3/4;
    overflow: hidden;
    padding: 8px;
    background-color: var(--color-frame);
    box-shadow:
        0 0 0 1px var(--color-frame-edge),
        0 12px 26px -10px rgba(70, 55, 30, 0.16),
        0 3px 8px -2px rgba(70, 55, 30, 0.08);
    position: relative;
    transition: box-shadow 0.6s ease, transform 0.6s ease;
}

.detail__image::before {
    content: "";
    position: absolute;
    inset: 8px;
    box-shadow: inset 0 0 0 1px rgba(120, 100, 70, 0.10);
    pointer-events: none;
    z-index: 2;
}

.detail__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.2s ease;
}

.detail:hover .detail__image {
    box-shadow:
        0 0 0 1px var(--color-frame-edge),
        0 18px 32px -10px rgba(70, 55, 30, 0.22),
        0 5px 12px -2px rgba(70, 55, 30, 0.10);
    transform: translateY(-2px);
}

.detail:hover .detail__image img {
    transform: scale(1.03);
}

.detail__text {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--color-text-soft);
    letter-spacing: 0.02em;
    text-align: center;
}

/* =========================================================
   6. ACOMPAÑAMIENTO
   ========================================================= */
.scene--accompany {
    min-height: 130vh;
}

.accompany__text {
    max-width: 800px;
    text-align: center;
    padding: 0 1rem;
}

.accompany__line {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    line-height: 1.5;
    color: var(--color-text);
    margin: 0.3rem 0;
}

.accompany__line--pause {
    margin: 1.5rem 0;
}

.accompany__line em {
    font-style: italic;
    color: var(--color-text);
}

/* =========================================================
   7. CONTACTO
   ========================================================= */
.scene--contact {
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
    min-height: 100vh;
    padding-bottom: 4rem;
}

.contact {
    max-width: 640px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.contact__invitation {
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
}

.contact__subtext {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 1rem;
    color: var(--color-text-soft);
    max-width: 40ch;
    line-height: 1.6;
}

.contact__links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}

.contact__link {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.02em;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--color-text);
    transition: opacity 0.3s var(--ease-soft);
}

.contact__link:hover {
    opacity: 0.6;
}

.contact__monogram {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-text);
    opacity: 0.85;
}

.contact__letter {
    letter-spacing: -0.04em;
}

.contact__divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 2rem;
}

.contact__divider-cap {
    width: 8px;
    height: 1px;
    background-color: var(--color-text);
}

.contact__divider-line {
    flex: 1;
    width: 1px;
    background-color: var(--color-text);
    margin: 2px 0;
}

.contact__footer {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-soft);
    margin-top: 2rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .gallery {
        gap: 1rem;
    }
    .gallery__item--1 { grid-column: 1 / span 8; }
    .gallery__item--2 { grid-column: 5 / span 8; }
    .gallery__item--3 { grid-column: 1 / span 7; }
    .gallery__item--4 { grid-column: 5 / span 8; }
    .gallery__item--5 { grid-column: 1 / span 8; }
    .gallery__item--6 { grid-column: 5 / span 8; }
    .gallery__item--7 { grid-column: 1 / span 12; }

    .details__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Las pilastras se ocultan en móvil: en pantallas estrechas
       restarían espacio al contenido y no aportan al ritmo */
    .pillar {
        display: none;
    }
}

/* Respeta preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}