/* ==========================================================================
   TM — Tania & Manuel · 21 de noviembre de 2026
   --------------------------------------------------------------------------
   Editorial minimalista. Nada que ver con `lj-salvia.css` (centrado, bandas,
   ilustraciones) ni con `elegante-bw.css` (blanco y negro, sobre).
   Aqui: reticula asimetrica alineada a la izquierda, secciones numeradas,
   filetes de un pixel, fotos a sangre y tipografia didone.

   OJO CON EL NOMBRE DEL ARCHIVO: nacio como "olivo" porque la primera paleta
   salia de las fotos de la pedida (olivo, mostaza, vino). El 2026-09-17 el
   cliente mando la suya — marfil, champagne, taupe, ciruela, salvia, cafe —
   y es la que manda ahora. El archivo conserva el nombre viejo para no romper
   el enlace; el contenido es la paleta nueva.

   Prefijo `tm-`. Las clases `bw-*` y `pass-*` NO se pueden renombrar:
   las escribe `assets/js/script.js` (cuenta regresiva, RSVP y pase QR).
   ========================================================================== */

:root {
    /* Paleta de la solicitud 2006 (Karina, 2026-09-29): "beige con azul claro,
       minimalista elegante, clasica". Se conservan los nombres de las
       variables de la version de Tania para no tocar el resto de la hoja.
       Contrastes medidos (WCAG pide 4.5 para texto):
         tinta azul   9.96 sobre marfil · 8.13 sobre beige
         pizarra      5.76 · 4.70
         azul acento  6.04 · 4.93
         arena y azul claro: SOLO decorativos. */
    --tm-paper: #f7f3ec;
    /* marfil calido */
    --tm-paper-2: #e7dccb;
    /* beige, para los bloques alternos */
    --tm-ink: #2e3d52;
    /* tinta azul marino: titulos y texto fuerte */
    --tm-ink-soft: #56606f;
    /* pizarra: texto corrido */
    --tm-ciruela: #435e7e;
    /* azul acento (numeros, enfasis). El nombre es de la version de Tania */
    --tm-taupe: #c4b49c;
    /* arena: filetes y bordes */
    --tm-salvia: #a9c1d9;
    /* azul claro: decorativo */

    --tm-hair: rgba(196, 180, 156, .6);
    --tm-hair-fuerte: rgba(86, 96, 111, .55);

    /* Tipografia */
    /* Cormorant Garamond: solo nombres y titulos. Las cifras y los datos van
       en Montserrat (ver --tm-dato) */
    --tm-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
    --tm-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --tm-dato: var(--tm-ui);

    /* Ritmo */
    --tm-margen: 1.75rem;
    --tm-columna: 40rem;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

.tm {
    margin: 0;
    background: var(--tm-paper);
    color: var(--tm-ink);
    font-family: var(--tm-ui);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

/* El navegador le pone margen propio a figure y blockquote: sin esto, las
   fotos a sangre quedan metidas 40px y se desbordan por la derecha. */
.tm figure,
.tm blockquote {
    margin: 0;
}

.tm a {
    color: inherit;
}

/* Contenedor: columna angosta, pegada a la izquierda. La asimetria es la
   firma de este diseño, asi que en pantalla grande NO se centra. */
.tm-in {
    width: 100%;
    max-width: var(--tm-columna);
    margin: 0;
    padding: 0 var(--tm-margen);
}

.tm-sec {
    padding: 5.5rem 0;
    position: relative;
}

.tm-sec--apretada {
    padding: 3.5rem 0;
}

.tm-sec--hueso {
    background: var(--tm-paper-2);
}

/* --------------------------------------------------------------------------
   2. Tipografia
   -------------------------------------------------------------------------- */

/* Etiqueta chica en versalitas muy espaciadas: el contrapunto de la didone */
.tm-eyebrow {
    margin: 0 0 1.5rem;
    font-family: var(--tm-ui);
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--tm-ciruela);
    display: flex;
    align-items: center;
    gap: .9rem;
}

/* El numero de seccion vive dentro del eyebrow, separado por un filete */
.tm-eyebrow::before {
    content: attr(data-num);
    font-variant-numeric: tabular-nums;
    color: var(--tm-ciruela);
}

.tm-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--tm-hair);
}

.tm-titulo {
    margin: 0 0 1.25rem;
    font-family: var(--tm-display);
    font-weight: 400;
    font-size: clamp(2rem, 8vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -.01em;
}

.tm-titulo em {
    font-style: italic;
}

.tm-texto {
    margin: 0 0 1.1rem;
    max-width: 34ch;
    color: var(--tm-ink-soft);
}

.tm-texto--ancho {
    max-width: 46ch;
}

.tm-texto:last-child {
    margin-bottom: 0;
}

/* Dato suelto: etiqueta arriba, valor abajo */
.tm-dato {
    margin: 0 0 1.75rem;
}

.tm-dato:last-child {
    margin-bottom: 0;
}

.tm-dato-lbl {
    margin: 0 0 .15rem;
    font-size: .625rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tm-ink-soft);
}

.tm-dato-val {
    margin: 0;
    font-family: var(--tm-dato);
    font-size: 1.25rem;
    line-height: 1.35;
}

.tm-filete {
    display: block;
    width: 100%;
    height: 1px;
    border: 0;
    margin: 2.5rem 0;
    background: var(--tm-hair);
}

/* --------------------------------------------------------------------------
   2b. Portada — se abre deshaciendose en hojas de otono

   Version 3. La primera fue un sello de cera (parecia boton de plastico) y la
   segunda un aro fino (no tenia presencia). Esta apuesta por el tamano: el
   monograma enorme, los nombres grandes, y hojas secas alrededor.
   Al tocar, todo se rompe en hojas que giran y caen.
   -------------------------------------------------------------------------- */

/* Mientras esta cerrada no se puede hacer scroll por detras */
html.tm-cerrada,
html.tm-cerrada body {
    overflow: hidden;
    height: 100%;
}

.tm-sobre {
    position: fixed;
    inset: 0;
    z-index: 900;
    overflow: hidden;
    /* Se abre tocando donde sea, no solo el monograma */
    cursor: pointer;
    /* Y como se toca en cualquier parte, nada de aqui se puede seleccionar:
       si no, el toque pinta de azul la fecha o el texto de abajo */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* El papel que se deshace */
.tm-sobre-fondo {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% 42%, #fbf8f2 0%, var(--tm-paper) 52%, #eae2d5 100%);
    transition: opacity .75s ease;
}

.tm-hojas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Una flor de la portada: el SVG lo pinta el script */
.tm-hoja {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    will-change: transform, opacity;
}

.tm-hoja svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tm-sobre-centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 0 var(--tm-margen);
    text-align: center;
    transition: opacity .45s ease, transform .6s cubic-bezier(.4, 0, .2, 1);
}

/* .tm-sobre-nombres se quito: la portada va solo con el monograma */

.tm-sobre-fecha {
    margin: .25rem 0 0;
    font-size: .6875rem;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--tm-ciruela);
}

.tm-sobre-pie {
    margin: 1.75rem 0 0;
    font-size: .625rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--tm-ink-soft);
    animation: tm-respira 3.4s ease-in-out infinite;
}

@keyframes tm-respira {

    0%,
    100% {
        opacity: .45;
    }

    50% {
        opacity: 1;
    }
}

/* El monograma, en grande: es lo que le faltaba a las versiones anteriores */
.tm-sello {
    display: block;
    width: clamp(210px, 62vw, 330px);
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
    /* El no-seleccionable y el no-resaltado los pone .tm-sobre, que cubre
       toda la portada */
}

/* Con dedo o raton, sin marca. Con teclado si: hace falta para saber
   donde esta uno parado. */
.tm-sello:focus {
    outline: none;
}

.tm-sello:focus-visible {
    outline: 1px solid var(--tm-ciruela);
    outline-offset: 10px;
}

.tm-sello img {
    width: 100%;
}

.tm-sello:hover,
.tm-sello:focus-visible {
    transform: scale(1.03);
}

.tm-sello:active {
    transform: scale(.98);
}

/* Al abrir: el texto se va hacia arriba y el papel se desvanece mientras
   las hojas lo tapan */
.tm-sobre.is-abriendo .tm-sobre-centro {
    opacity: 0;
    transform: translateY(-2.5rem);
    /* Ya se esta yendo: que no se pueda volver a tocar ni seleccionar */
    pointer-events: none;
}

/* El papel aguanta mientras las hojas lo cubren; si se va antes, se ve el
   hero de golpe y la rotura no se lee */
.tm-sobre.is-abriendo .tm-sobre-fondo {
    opacity: 0;
    /* .85s: primero se ve al birrete salir disparado sobre el papel */
    transition: opacity 1s ease .85s;
}

/* Mientras esta cerrada, el monograma del hero espera su turno */
html.tm-cerrada .tm-hero .tm-monograma {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

    .tm-sobre-pie {
        animation: none;
    }

    .tm-sobre-centro,
    .tm-sobre-fondo {
        transition-duration: .01ms;
    }
}

/* --------------------------------------------------------------------------
   3. Hero — foto a pantalla completa con el texto encima

   La foto es vertical y la pareja va de cuerpo entero al centro, asi que el
   texto NO le puede caer encima: el monograma se ancla arriba (cielo y pinos)
   y los nombres abajo (el musgo), con un velo denso solo en esa franja.
   -------------------------------------------------------------------------- */

.tm-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    /* Color de respaldo mientras carga la foto */
    background: var(--tm-ink);
}

.tm-hero-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Las fotos del hero se turnan: solo la activa se ve, con fundido */
.tm-hero-foto {
    opacity: 0;
    transition: opacity .6s ease;
}

.tm-hero-foto.is-activa {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tm-hero-foto {
        transition-duration: .01s;
    }
}

/* Velo de tinta: denso abajo, un soplo arriba, transparente en la franja
   donde estan ellos */
.tm-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(24, 33, 47, .93) 0%,
            rgba(24, 33, 47, .87) 18%,
            rgba(24, 33, 47, .75) 30%,
            rgba(24, 33, 47, .56) 42%,
            rgba(24, 33, 47, .32) 52%,
            rgba(24, 33, 47, .10) 62%,
            rgba(24, 33, 47, .06) 72%,
            rgba(24, 33, 47, .30) 86%,
            rgba(24, 33, 47, .66) 100%);
}

.tm-hero-capa {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.75rem 0 3rem;
    color: var(--tm-paper);
    /* Todo el hero va centrado: monograma, nombres, fecha y cuenta */
    text-align: center;
}

.tm-hero .tm-monograma {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.tm-hero .tm-portada-nombres .y {
    padding-left: 0;
}

.tm-hero .tm-portada-pie {
    justify-content: center;
    /* El letter-spacing deja aire despues de la ultima letra: se compensa
       a la izquierda para que quede centrado a ojo */
    padding-left: .3em;
}

.tm-monograma {
    width: 104px;
    height: 104px;
    margin-bottom: 3rem;
    object-fit: contain;
}

/* Encima de la foto va el PNG blanco con alfa */
.tm-hero .tm-monograma {
    width: clamp(140px, 38vw, 190px);
    height: auto;
    margin-bottom: 0;
    /* Dos sombras: una cerrada que perfila el trazo y otra abierta que
       separa el monograma del cielo claro */
    filter:
        drop-shadow(0 1px 2px rgba(20, 28, 40, .9)) drop-shadow(0 4px 26px rgba(20, 28, 40, .75));
}

/* Version con los nombres debajo: se usa solo en el cierre, donde hay sitio
   para que se lean */
.tm-monograma--lockup {
    /* Los nombres del lockup nuevo son largos ("Tania Lizbeth & Javier
       Manuel"): a 168px las letras quedaban de 4px */
    width: min(260px, 72vw);
    height: auto;
}

.tm-portada-nombres {
    margin: 0;
    font-family: var(--tm-display);
    font-weight: 400;
    font-size: clamp(2.75rem, 14.5vw, 4.75rem);
    line-height: .96;
    letter-spacing: -.02em;
    /* Sombra larga y suave: despega la didone del fondo sin que se note */
    text-shadow: 0 2px 36px rgba(20, 28, 40, .6);
}

.tm-portada-nombres .y {
    display: block;
    font-style: italic;
    font-size: .42em;
    line-height: 1.5;
    color: #e7dccb;
    padding-left: .12em;
}

.tm-portada-pie {
    margin-top: 1.5rem;
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    font-size: .6875rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(247, 243, 236, .8);
}

.tm-portada-pie span:first-child {
    color: var(--tm-paper);
}

/* El monograma se "escribe": una mascara con borde suave barre el PNG de
   izquierda a derecha, asi que el trazo va apareciendo como si lo dibujaran.
   No es un stroke-dashoffset de SVG porque el monograma es un mapa de bits
   (el original que mando el cliente es JPEG y aqui no hay con que vectorizar). */
@keyframes tm-escribir {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }

    to {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }
}

.tm-hero .tm-monograma {
    -webkit-mask-image: linear-gradient(97deg, #000 0 38%, rgba(0, 0, 0, .55) 46%, transparent 56%);
    mask-image: linear-gradient(97deg, #000 0 38%, rgba(0, 0, 0, .55) 46%, transparent 56%);
    -webkit-mask-size: 260% 100%;
    mask-size: 260% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    animation: tm-escribir 2.6s cubic-bezier(.32, .06, .28, 1) .45s forwards;
}

/* Sin animacion: el monograma simplemente esta ahi */
@media (prefers-reduced-motion: reduce) {
    .tm-hero .tm-monograma {
        -webkit-mask-image: none;
        mask-image: none;
        animation: none;
    }
}

/* Cuenta regresiva dentro del hero: cierra el bloque de texto.
   Va en claro, porque aqui el fondo es la foto y no el papel hueso. */
.tm-hero .tm-clock {
    margin-top: 1.9rem;
    border-top-color: rgba(247, 243, 236, .3);
    border-bottom-color: rgba(247, 243, 236, .3);
}

.tm-hero .tm-clock .bw-count-item {
    padding: .95rem .2rem;
    border-right-color: rgba(247, 243, 236, .22);
}

.tm-hero .tm-clock .bw-count-num {
    font-size: 1.5rem;
    color: var(--tm-paper);
    text-shadow: 0 2px 22px rgba(20, 28, 40, .55);
}

.tm-hero .tm-clock .bw-count-label {
    margin-top: .35rem;
    color: rgba(247, 243, 236, .68);
}

/* --------------------------------------------------------------------------
   4. Cuenta regresiva  (las clases bw-* las escribe script.js)
   -------------------------------------------------------------------------- */

.tm-clock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--tm-hair);
    border-bottom: 1px solid var(--tm-hair);
}

.tm-clock .bw-count-item {
    padding: 1.4rem .25rem;
    text-align: center;
    border-right: 1px solid var(--tm-hair);
}

.tm-clock .bw-count-item:last-child {
    border-right: 0;
}

.tm-clock .bw-count-num {
    display: block;
    font-family: var(--tm-dato);
    font-size: 1.85rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tm-clock .bw-count-label {
    display: block;
    margin-top: .5rem;
    font-size: .5625rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--tm-ink-soft);
}

/* --------------------------------------------------------------------------
   5. Cita
   -------------------------------------------------------------------------- */

.tm-cita {
    margin: 0;
    font-family: var(--tm-display);
    font-style: italic;
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    line-height: 1.4;
    max-width: 22ch;
}

.tm-cita-fuente {
    margin: 1.5rem 0 0;
    font-size: .625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--tm-ciruela);
}

/* --------------------------------------------------------------------------
   6. Foto a sangre — rompe el margen a proposito
   -------------------------------------------------------------------------- */

.tm-sangre {
    width: 100%;
    display: block;
}

.tm-sangre img {
    width: 100%;
    height: 72vh;
    min-height: 380px;
    object-fit: cover;
}

.tm-sangre--baja img {
    height: 52vh;
    min-height: 280px;
}

.tm-sangre figcaption {
    padding: .85rem var(--tm-margen) 0;
    font-size: .625rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--tm-ink-soft);
}

/* --------------------------------------------------------------------------
   7. Itinerario
   -------------------------------------------------------------------------- */

.tm-momento {
    padding: 2.25rem 0;
    border-top: 1px solid var(--tm-hair);
}

.tm-momento:last-of-type {
    border-bottom: 1px solid var(--tm-hair);
}

.tm-momento-hora {
    margin: 0 0 .5rem;
    font-family: var(--tm-dato);
    font-size: 2.25rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tm-momento-hora small {
    font-family: var(--tm-ui);
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tm-ink-soft);
    margin-left: .5rem;
    vertical-align: .55em;
}

.tm-momento-que {
    margin: 0 0 .35rem;
    font-size: .625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--tm-ciruela);
}

.tm-momento-lugar {
    margin: 0 0 1.25rem;
    font-family: var(--tm-dato);
    font-size: 1.2rem;
    line-height: 1.4;
    max-width: 26ch;
}

/* Enlace con subrayado de un pixel que se engrosa al tocarlo */
.tm-link {
    display: inline-block;
    font-size: .6875rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tm-ink);
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--tm-hair-fuerte);
    transition: border-color .25s ease, color .25s ease;
}

.tm-link:hover,
.tm-link:focus-visible {
    color: var(--tm-ciruela);
    border-bottom-color: var(--tm-ciruela);
}

/* Nota del hueco entre ceremonia y recepcion */
.tm-nota {
    margin: 1.75rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid var(--tm-ciruela);
    font-size: .8125rem;
    line-height: 1.7;
    color: var(--tm-ink-soft);
    max-width: 38ch;
}

/* --------------------------------------------------------------------------
   7b. Linea de tiempo — un ano, una foto
   -------------------------------------------------------------------------- */

.tm-linea {
    list-style: none;
    margin: 2.75rem 0 0;
    padding: 0 0 0 1.75rem;
    border-left: 1px solid var(--tm-hair);
}

.tm-anio {
    position: relative;
    padding-bottom: 3rem;
}

.tm-anio:last-child {
    padding-bottom: 0;
}

/* El punto que marca el ano sobre el filete */
.tm-anio::before {
    content: "";
    position: absolute;
    left: -1.75rem;
    top: .55rem;
    width: 7px;
    height: 7px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--tm-ciruela);
}

.tm-anio-num {
    margin: 0 0 1rem;
    font-family: var(--tm-dato);
    font-size: 1.65rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Las fotos vienen de celular y mezclan vertical con horizontal: un mismo
   recorte las pone a todas en la misma proporcion */
.tm-anio img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* 2026 lleva dos fotos: la pedida y el registro civil, lado a lado */
.tm-anio-par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
}

/* --------------------------------------------------------------------------
   8. Galeria — tira horizontal, sin flechas ni puntos
   -------------------------------------------------------------------------- */

.tm-tira {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding: 0 var(--tm-margen) 1rem;
    scroll-snap-type: x mandatory;
    /* Sin esto el snap pega la primera foto al borde y anula el padding */
    scroll-padding-left: var(--tm-margen);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tm-tira::-webkit-scrollbar {
    display: none;
}

.tm-tira img {
    flex: 0 0 auto;
    width: 74vw;
    max-width: 340px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    scroll-snap-align: start;
}

.tm-tira-hint {
    margin: 0;
    padding: 0 var(--tm-margen);
    font-size: .5625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--tm-ink-soft);
}

/* --------------------------------------------------------------------------
   9. Vestimenta
   -------------------------------------------------------------------------- */

.tm-muestras {
    display: flex;
    gap: .5rem;
    margin: 2rem 0 .75rem;
}

.tm-muestra {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    /* El marfil y el champagne son casi el fondo: el aro es lo unico que
       dibuja esos dos circulos, asi que va firme */
    border: 1px solid rgba(122, 106, 96, .5);
    box-shadow: inset 0 -2px 6px rgba(46, 61, 82, .07);
}

.tm-muestra-pie {
    margin: 0;
    font-size: .5625rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--tm-ink-soft);
}

/* Aviso fuerte: el blanco es de la novia */
.tm-veto {
    margin: 2rem 0 0;
    padding: 1.1rem 1.25rem;
    background: var(--tm-paper);
    border: 1px solid var(--tm-hair);
    font-size: .8125rem;
    line-height: 1.65;
    max-width: 38ch;
}

.tm-sec--hueso .tm-veto {
    background: #fff;
}

.tm-veto strong {
    font-weight: 400;
    color: var(--tm-ciruela);
}

/* --------------------------------------------------------------------------
   10. Regalos
   -------------------------------------------------------------------------- */

.tm-regalo {
    display: block;
    padding: 1.5rem 0;
    border-top: 1px solid var(--tm-hair);
    border-bottom: 1px solid var(--tm-hair);
    text-decoration: none;
    transition: background .25s ease;
}

.tm-regalo:hover {
    background: rgba(110, 90, 102, .06);
}

.tm-regalo-marca {
    margin: 0 0 .35rem;
    font-size: .625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--tm-ciruela);
}

.tm-regalo-txt {
    margin: 0;
    font-family: var(--tm-dato);
    font-size: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Solo la flecha: antes era `span:last-child` y se comia la tipografia del
   bloque de sobres, que lleva un unico span */
.tm-regalo-flecha {
    font-family: var(--tm-ui);
    font-size: 1.1rem;
    color: var(--tm-ciruela);
}

/* Dos filas seguidas comparten filete, si no se ve de dos pixeles */
.tm-regalo + .tm-regalo {
    border-top: 0;
}

/* La lluvia de sobres no es un enlace: no lleva flecha ni cambia al pasar */
.tm-regalo--sobres {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.tm-regalo--sobres:hover {
    background: none;
}

.tm-ico-sobre {
    flex: 0 0 auto;
    width: 34px;
    height: 26px;
    fill: none;
    stroke: var(--tm-ciruela);
    stroke-width: 1.1;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   11. RSVP  (ids y clases bw-* atadas a script.js)
   -------------------------------------------------------------------------- */

.tm-rsvp {
    background: var(--tm-ink);
    color: var(--tm-paper);
}

.tm-rsvp .tm-titulo,
.tm-rsvp .tm-momento-hora {
    color: var(--tm-paper);
}

.tm-rsvp .tm-texto {
    color: rgba(247, 243, 236, .68);
}

.tm-rsvp .tm-eyebrow {
    color: #e7dccb;
}

.tm-rsvp .tm-eyebrow::before {
    color: rgba(247, 243, 236, .6);
}

.tm-rsvp .tm-eyebrow::after {
    background: rgba(247, 243, 236, .22);
}

.tm-form {
    margin-top: 2.5rem;
    max-width: 26rem;
}

/* Banner del invitado (llega con ?id_invitado=) */
.bw-guest-banner {
    padding: 1.25rem 0;
    border-top: 1px solid rgba(247, 243, 236, .22);
    border-bottom: 1px solid rgba(247, 243, 236, .22);
    margin-bottom: 2rem;
}

.bw-guest-banner .hello {
    margin: 0 0 .3rem;
    font-size: .5625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #e7dccb;
}

.bw-guest-banner .gname {
    margin: 0;
    font-family: var(--tm-display);
    font-size: 1.5rem;
    line-height: 1.25;
}

.bw-guest-banner .gcount {
    margin: .35rem 0 0;
    font-size: .8125rem;
    color: rgba(247, 243, 236, .68);
}

/* Caja de "no te reconocimos" — script.js la prende con .show */
.bw-search-box {
    display: none;
    padding: 1.1rem 1.25rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(247, 243, 236, .22);
    font-size: .8125rem;
}

.bw-search-box.show {
    display: block;
}

.bw-search-box p {
    margin: 0;
}

.bw-search-box .hint {
    margin-top: .3rem;
    color: rgba(247, 243, 236, .55);
}

.tm-rsvp .bw-field {
    margin-bottom: 1.75rem;
}

.tm-rsvp .bw-field-lbl {
    display: block;
    margin-bottom: .6rem;
    font-size: .5625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #e7dccb;
}

.tm-rsvp .bw-field input[type="text"],
.tm-rsvp .bw-field select {
    width: 100%;
    padding: .75rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(247, 243, 236, .3);
    border-radius: 0;
    color: var(--tm-paper);
    font-family: var(--tm-dato);
    font-size: 1.1rem;
    outline: none;
    transition: border-color .25s ease;
}

.tm-rsvp .bw-field input[type="text"]:focus,
.tm-rsvp .bw-field select:focus {
    border-bottom-color: #e7dccb;
}

.tm-rsvp .bw-field input[readonly] {
    color: rgba(247, 243, 236, .8);
}

.tm-rsvp .bw-field select option {
    color: var(--tm-ink);
}

/* Las dos tarjetas de si/no */
.bw-radio-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.bw-radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: 1rem;
    border: 1px solid rgba(247, 243, 236, .3);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.bw-radio-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bw-radio-card .ico {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(247, 243, 236, .5);
    border-radius: 50%;
    transition: background .2s ease, border-color .2s ease;
}

.bw-radio-card .txt {
    font-size: .8125rem;
    line-height: 1.3;
}

.bw-radio-card:has(input:checked),
.bw-radio-card.is-active {
    border-color: #e7dccb;
    background: rgba(231, 220, 203, .14);
}

.bw-radio-card:has(input:checked) .ico,
.bw-radio-card.is-active .ico {
    background: #e7dccb;
    border-color: #e7dccb;
}

.bw-rsvp-submit {
    width: 100%;
    padding: 1.05rem;
    margin-top: .5rem;
    background: var(--tm-paper);
    color: var(--tm-ink);
    border: 0;
    font-family: var(--tm-ui);
    font-size: .6875rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.bw-rsvp-submit:hover {
    background: #e7dccb;
}

.bw-rsvp-submit:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* script.js los prende con .show()/.hide(), asi que arrancan ocultos */
#loader,
#success,
#error {
    display: none;
    margin-top: 1.25rem;
    font-size: .8125rem;
}

#success {
    color: #e7dccb;
}

#error {
    color: #a86a6a;
}

.bw-pase-cta {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(247, 243, 236, .22);
}

.bw-pase-btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.5rem;
    background: transparent;
    color: var(--tm-paper);
    border: 1px solid rgba(247, 243, 236, .4);
    font-family: var(--tm-ui);
    font-size: .6875rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease;
}

.bw-pase-btn:hover {
    border-color: #e7dccb;
    color: #e7dccb;
}

.bw-pase-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
}

.bw-pase-hint {
    margin: .9rem 0 0;
    font-size: .6875rem;
    color: rgba(247, 243, 236, .55);
}

/* --------------------------------------------------------------------------
   11b. Libro de firmas

   Mismo contrato que la invitacion de Lizbeth & Jassiel (Apps Script sobre una
   hoja de Google), pero con clases `tm-` y sobre papel claro: los campos
   `bw-*` de arriba son blancos sobre oscuro y aqui no servirian.
   -------------------------------------------------------------------------- */

.tm-libro {
    margin-top: 2.5rem;
    max-width: 26rem;
}

.tm-campo {
    margin-bottom: 1.75rem;
}

.tm-campo-lbl {
    display: block;
    margin-bottom: .6rem;
    font-size: .5625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--tm-ciruela);
}

.tm-campo input,
.tm-campo textarea {
    width: 100%;
    padding: .7rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tm-hair-fuerte);
    border-radius: 0;
    color: var(--tm-ink);
    font-family: var(--tm-dato);
    font-size: 1.1rem;
    outline: none;
    transition: border-color .25s ease;
}

.tm-campo textarea {
    font-family: var(--tm-ui);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 5.5rem;
}

.tm-campo input:focus,
.tm-campo textarea:focus {
    border-bottom-color: var(--tm-ciruela);
}

.tm-campo input::placeholder,
.tm-campo textarea::placeholder {
    color: var(--tm-taupe);
}

.tm-libro-contador {
    margin: .5rem 0 1.5rem;
    text-align: right;
    font-size: .625rem;
    letter-spacing: .1em;
    color: var(--tm-ink-soft);
}

.tm-libro-contador.near {
    color: var(--tm-ciruela);
}

.tm-libro-contador.full {
    color: #a86a6a;
}

.tm-libro-btn {
    width: 100%;
    padding: 1.05rem;
    background: var(--tm-ink);
    color: var(--tm-paper);
    border: 0;
    font-family: var(--tm-ui);
    font-size: .6875rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease;
}

.tm-libro-btn:hover {
    background: var(--tm-ciruela);
}

.tm-libro-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* El aviso ocupa su renglon desde el principio: si apareciera de la nada
   empujaria los mensajes hacia abajo */
.tm-libro-aviso {
    min-height: 1.5rem;
    margin-top: .9rem;
    font-size: .8125rem;
    color: var(--tm-ciruela);
    opacity: 0;
    transition: opacity .3s ease;
}

.tm-libro-aviso.is-visible {
    opacity: 1;
}

.tm-libro-aviso.is-error {
    color: #a86a6a;
}

/* Sin enlace personalizado no se puede firmar */
.tm-libro-bloqueo {
    display: none;
    margin-top: 2.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--tm-hair);
    font-size: .8125rem;
    color: var(--tm-ink-soft);
    max-width: 26rem;
}

.tm-libro-bloqueo.is-visible {
    display: block;
}

.tm-libro-bloqueo p {
    margin: 0;
}

.tm-libro-mensajes {
    margin-top: 3rem;
}

.tm-libro-msg {
    padding: 1.5rem 0;
    border-top: 1px solid var(--tm-hair);
}

.tm-libro-msg-text {
    margin: 0 0 .6rem;
    font-family: var(--tm-dato);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.5;
}

.tm-libro-msg-author {
    margin: 0;
    font-size: .625rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--tm-ciruela);
}

.tm-libro-vacio {
    padding: 1.5rem 0;
    border-top: 1px solid var(--tm-hair);
    font-size: .875rem;
    color: var(--tm-ink-soft);
}

/* --------------------------------------------------------------------------
   12. Cierre
   -------------------------------------------------------------------------- */

.tm-cierre {
    padding: 6rem 0 4rem;
    text-align: left;
}

.tm-cierre .tm-monograma {
    margin-bottom: 2rem;
}

.tm-cierre-fecha {
    margin: 2rem 0 0;
    font-family: var(--tm-dato);
    font-size: 1.5rem;
    letter-spacing: .12em;
}

.tm-credito {
    padding: 2rem var(--tm-margen) 3rem;
    border-top: 1px solid var(--tm-hair);
    font-size: .625rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tm-ink-soft);
}

.tm-credito a {
    text-decoration: none;
    border-bottom: 1px solid var(--tm-hair-fuerte);
}

/* --------------------------------------------------------------------------
   13. Aparicion al hacer scroll
   -------------------------------------------------------------------------- */

[data-rev] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s ease, transform .8s ease;
}

[data-rev].visto {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    [data-rev],
    [data-rev].visto {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   14. Pase QR  (clases pass-* / qr-* atadas a script.js)
   -------------------------------------------------------------------------- */

.qr-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(46, 61, 82, .88);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
}

.qr-modal-overlay.is-open {
    display: flex;
}

.qr-modal-wrapper {
    width: 100%;
    max-width: 22rem;
    margin: auto;
    position: relative;
}

.qr-modal-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 0;
    color: var(--tm-paper);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.pass-card {
    background: var(--tm-paper);
    color: var(--tm-ink);
}

.pass-header {
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--tm-ink);
    color: var(--tm-paper);
    text-align: center;
}

.pass-event {
    margin: 0 0 .4rem;
    font-size: .5625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #e7dccb;
}

.pass-title {
    margin: 0;
    font-family: var(--tm-display);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.2;
}

.pass-date-header {
    margin: .4rem 0 0;
    font-size: .6875rem;
    letter-spacing: .2em;
    color: rgba(247, 243, 236, .6);
}

.pass-body {
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.pass-guest-name {
    margin: 0;
    font-family: var(--tm-display);
    font-size: 1.35rem;
}

.pass-guest-count,
.pass-guest-mesa {
    margin: .3rem 0 0;
    font-size: .75rem;
    color: var(--tm-ink-soft);
}

.pass-qr {
    margin: 1.5rem auto 0;
    display: flex;
    justify-content: center;
}

.pass-qr img,
.pass-qr canvas {
    display: block;
}

.pass-divider {
    height: 1px;
    border: 0;
    margin: 0 1.5rem;
    background: var(--tm-hair);
}

.pass-footer {
    padding: 1.25rem 1.5rem 1.75rem;
}

.pass-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    text-align: center;
}

.pass-detail-label {
    margin: 0 0 .2rem;
    font-size: .5625rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--tm-ink-soft);
}

.pass-detail-value {
    margin: 0;
    font-family: var(--tm-dato);
    font-size: 1.05rem;
}

.qr-modal-actions {
    display: grid;
    gap: .5rem;
    margin-top: 1rem;
}

.qr-btn {
    padding: .85rem;
    background: transparent;
    color: var(--tm-paper);
    border: 1px solid rgba(247, 243, 236, .35);
    font-family: var(--tm-ui);
    font-size: .625rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease;
}

.qr-btn:hover {
    border-color: #e7dccb;
    color: #e7dccb;
}

.qr-modal-hint {
    margin: .9rem 0 0;
    font-size: .6875rem;
    text-align: center;
    color: rgba(247, 243, 236, .6);
}

/* --------------------------------------------------------------------------
   15. Pantallas grandes
   La columna se queda a la izquierda y las fotos ocupan la derecha: en un
   monitor la invitacion se lee como una revista, no como una tarjeta centrada.
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
    :root {
        --tm-margen: 4.5rem;
    }

    .tm {
        font-size: 17px;
    }

    .tm-sec {
        padding: 7.5rem 0;
    }

    .tm-in {
        max-width: 46rem;
    }

    .tm-hero,
    .tm-hero-capa {
        min-height: 100vh;
    }

    .tm-hero-capa {
        padding: 3.5rem 0 4.5rem;
    }

    /* En monitor la foto es apaisada: el velo se concentra abajo a la
       izquierda, donde vive el texto */
    .tm-hero::after {
        background:
            linear-gradient(to top,
                rgba(24, 33, 47, .88) 0%,
                rgba(24, 33, 47, .55) 26%,
                rgba(24, 33, 47, .18) 55%,
                rgba(24, 33, 47, .08) 75%,
                rgba(24, 33, 47, .28) 100%);
    }

    .tm-clock {
        max-width: 30rem;
    }

    .tm-sangre img {
        height: 82vh;
    }

    .tm-tira img {
        width: 26vw;
        max-width: 420px;
    }

    .tm-linea {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
    }

    .tm-anio {
        padding-bottom: 2.5rem;
    }
}

/* --------------------------------------------------------------------------
   16. Todo centrado (2026-09-26, lo pidio Gabriel)
   El diseño original era una columna pegada a la izquierda. Aqui se centra
   todo: la columna, los textos, los titulos y los bloques. Va al final para
   ganarle a lo de arriba; si se quisiera volver a la version asimetrica,
   basta con borrar esta seccion.
   -------------------------------------------------------------------------- */

.tm {
    text-align: center;
}

.tm-in {
    margin-left: auto;
    margin-right: auto;
}

/* Bloques con ancho maximo: sin esto quedan centrados por dentro pero
   pegados a la izquierda */
.tm-texto,
.tm-cita,
.tm-momento-lugar,
.tm-nota,
.tm-veto,
.tm-form,
.tm-libro,
.tm-libro-bloqueo,
.tm-clock {
    margin-left: auto;
    margin-right: auto;
}

/* Eyebrow: numero y titulo al centro, sin el filete que corria a la derecha.
   El padding compensa el aire que deja el letter-spacing al final */
.tm-eyebrow {
    justify-content: center;
    padding-left: .34em;
}

.tm-eyebrow::after {
    display: none;
}

/* La nota del itinerario: el filete pasa de la izquierda a arriba */
.tm-nota {
    padding: 1rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--tm-ciruela);
}

/* Linea de tiempo: sin el filete vertical; el punto queda encima del ano */
.tm-linea {
    padding-left: 0;
    border-left: 0;
}

.tm-anio::before {
    position: static;
    display: block;
    margin: 0 auto .8rem;
}

.tm-tira {
    scroll-padding-left: 0;
}

.tm-tira img {
    scroll-snap-align: center;
}

.tm-muestras {
    justify-content: center;
}

.tm-regalo-txt,
.tm-regalo--sobres {
    justify-content: center;
}

.tm-libro-contador {
    text-align: center;
}

.tm-campo input,
.tm-campo textarea,
.tm-rsvp .bw-field input[type="text"],
.tm-rsvp .bw-field select {
    text-align: center;
    text-align-last: center;
}

.bw-radio-card {
    align-items: center;
}

.tm-cierre {
    text-align: center;
}

.tm-cierre .tm-monograma {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Sin numeros de seccion (01, 02...): lo pidio Gabriel. El data-num se
   queda en el HTML por si se quieren de vuelta; basta con borrar esto */
.tm-eyebrow::before {
    display: none;
}

/* Itinerario (fecha, lugar y hora) con un champagne mas clarito que el de
   los otros bloques alternos: a medio camino entre el champagne y el marfil */
#itinerario.tm-sec--hueso,
#vestimenta.tm-sec--hueso {
    background: #f0e8dc;
}

/* Fotos de los anos mas chicas: que no se coman la pantalla */
.tm-anio img {
    display: block;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

.tm-anio-par {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.tm-anio-par img {
    max-width: none;
}

/* Ultima foto (de espaldas caminando): en celular se baja el encuadre para
   que salgan los pies; en monitor la franja es apaisada y no caben enteros,
   asi que se sube para no cortarles la cabeza */
.tm-sangre .tm-foto-caminando {
    object-position: center 62%;
}

@media (min-width: 62rem) {
    .tm-sangre .tm-foto-caminando {
        object-position: center 42%;
    }
}

/* Regalos: tarjeta para deposito o transferencia */
.tm-regalo--cuenta:hover {
    background: none;
}

.tm-cuenta-num {
    margin: .2rem 0 .15rem;
    font-family: var(--tm-dato);
    font-size: 1.45rem;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
    /* Que el numero se pueda seleccionar a mano aunque falle el boton */
    user-select: all;
}

.tm-cuenta-titular {
    margin: 0 0 1rem;
    font-size: .8125rem;
    color: var(--tm-ink-soft);
}

.tm-cuenta-btn {
    padding: .7rem 1.4rem;
    background: transparent;
    color: var(--tm-ink);
    border: 1px solid var(--tm-hair-fuerte);
    font-family: var(--tm-ui);
    font-size: .625rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease, background .25s ease;
}

.tm-cuenta-btn:hover,
.tm-cuenta-btn:focus-visible {
    border-color: var(--tm-ciruela);
    color: var(--tm-ciruela);
}

.tm-cuenta-btn.is-copiado {
    background: var(--tm-ink);
    border-color: var(--tm-ink);
    color: var(--tm-paper);
}

/* --------------------------------------------------------------------------
   17. Tipografia Cormorant Garamond + Montserrat (2026-09-30)
   Karina pidio "minimalista elegante, clasica" (solicitud 2006): la manuscrita
   Great Vibes se leia a boda. Cormorant solo en nombres y titulos; es de ojo
   chico, asi que va un poco mas grande que una serif normal, y trae italica
   de verdad para los <em>. Los datos y las cifras van en Montserrat, un punto
   mas chicos porque es ancha.
   -------------------------------------------------------------------------- */

.tm-titulo {
    font-weight: 500;
    font-size: clamp(2.3rem, 9.5vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: 0;
}

.tm-titulo em {
    font-weight: 400;
}

.tm-portada-nombres {
    font-weight: 500;
    font-size: clamp(2.6rem, 12vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: .01em;
}

.tm-portada-nombres .y {
    font-size: .5em;
    line-height: 1.3;
    padding-left: 0;
}

/* La frase es larga: mas ancha, si no se vuelve una columna de diez renglones */
.tm-cita {
    font-size: clamp(1.45rem, 5.8vw, 1.85rem);
    line-height: 1.4;
    max-width: 30ch;
}

/* Centrada: el reset ".tm blockquote { margin: 0 }" le gana a .tm-cita por
   especificidad y la dejaba pegada a la izquierda */
.tm blockquote.tm-cita {
    margin-left: auto;
    margin-right: auto;
}

.bw-guest-banner .gname {
    font-weight: 500;
    font-size: 1.75rem;
}

.pass-title {
    font-weight: 500;
    font-size: 1.9rem;
}

.pass-guest-name {
    font-weight: 500;
    font-size: 1.6rem;
}

.tm-dato-val,
.tm-momento-lugar,
.tm-regalo-txt {
    font-size: 1.02rem;
    font-weight: 400;
}

.tm-momento-hora {
    font-size: 2rem;
    font-weight: 300;
}

.tm-anio-num {
    font-size: 1.35rem;
    font-weight: 400;
}

.tm-cuenta-num {
    font-size: 1.2rem;
    font-weight: 400;
}

.tm-cierre-fecha {
    font-size: 1.2rem;
    font-weight: 400;
}

.tm-clock .bw-count-num {
    font-weight: 400;
}

.tm-rsvp .bw-field select {
    font-size: 1rem;
}

/* Invitacion formal despues de padres y padrinos */
.tm-invitan {
    color: var(--tm-ink);
    font-size: 1.02rem;
    line-height: 1.8;
}

.tm-invitan-fecha {
    margin: 1rem 0 0;
    font-family: var(--tm-display);
    font-style: italic;
    font-size: clamp(1.9rem, 7.5vw, 2.4rem);
    line-height: 1.2;
    color: var(--tm-ink);
}

/* Padres y padrinos sin etiquetas: cada pareja separada por un "&" */
.tm-y {
    margin: .35rem 0;
    font-family: var(--tm-display);
    font-style: italic;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--tm-ciruela);
}

.tm-eyebrow--segunda {
    margin-top: 2.75rem;
}

/* Ceremonia y recepcion: dos tarjetas lado a lado, como en el boceto */
.tm-momentos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 2.25rem;
}

.tm-momento-tarjeta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem .75rem 1.35rem;
    background: #f0e8dc;
    border: 1px solid var(--tm-hair);
}

.tm-momento-tarjeta .tm-momento-hora {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
    white-space: nowrap;
}

.tm-momento-tarjeta .tm-momento-hora small {
    margin-left: .3rem;
}

.tm-momento-tarjeta .tm-momento-lugar {
    flex: 1;
    font-size: .9rem;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   18. Ajustes que pidio Tania (2026-09-29)
   -------------------------------------------------------------------------- */

/* Portada: papel liso, del mismo marfil que el resto de la invitacion */
.tm-sobre-fondo {
    background: var(--tm-paper);
}

/* Todo el fondo de un solo color. Los bloques que llevaban champagne
   (vestimenta y regalos) quedan apenas un pelo mas oscuros que el marfil,
   para que se note el cambio de seccion sin que se vea otro color */
.tm-sec--hueso,
#vestimenta.tm-sec--hueso {
    background: #f3eee6;
}

/* Ceremonia y recepcion: tarjetas mas claras que el fondo, casi blancas */
.tm-momento-tarjeta {
    background: #fdfbf8;
}

/* ── Hero: la foto arriba con la cuenta regresiva encima, sin recuadro; la
      foto se deshace en el marfil y ahi se monta el monograma en tinta, con
      los nombres debajo (como en la captura que mando Tania) ── */
.tm-hero,
.tm-hero .tm-hero-capa {
    min-height: 0;
}

/* Todo el hero (foto, monograma, nombres y fecha) cabe en una pantalla: la
   foto se queda con lo que sobre despues del pie. Con 78svh fijos para la
   foto, los nombres quedaban cortados abajo. El min-height evita que en un
   celular muy bajito la foto se quede en nada. */
.tm-hero {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: 36rem;
    overflow: visible;
    background: var(--tm-paper);
}

.tm-hero::after {
    display: none;
}

.tm-hero-media {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--tm-ink);
}

/* Arriba un velo para leer la cuenta; abajo la foto se funde con el papel */
.tm-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Negro, no ciruela: con el tono de la paleta la cuenta se perdia
           sobre las fotos claras (lo pidio Gabriel, 2026-09-29) */
        linear-gradient(to bottom,
            rgba(0, 0, 0, .68) 0%,
            rgba(0, 0, 0, .45) 22%,
            rgba(0, 0, 0, .15) 36%,
            rgba(0, 0, 0, 0) 48%),
        linear-gradient(to top,
            var(--tm-paper) 0%,
            rgba(247, 243, 236, .85) 9%,
            rgba(247, 243, 236, 0) 26%);
}

.tm-hero .tm-hero-capa {
    display: block;
    padding: 2.25rem 0 0;
}

.tm-faltan {
    margin: 0 0 .35rem;
    padding-left: .42em;
    font-size: .75rem;
    letter-spacing: .42em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--tm-paper);
    text-shadow: 0 1px 12px rgba(20, 28, 40, .7);
}

.tm-hero .tm-clock {
    margin: 0 auto;
    max-width: 22rem;
    border: 0;
}

.tm-hero .tm-clock .bw-count-item {
    padding: 0 .1rem;
    border-right: 0;
}

.tm-hero .tm-clock .bw-count-num {
    font-size: clamp(2.3rem, 11.5vw, 3.1rem);
    /* 400 y no 300: el trazo fino se perdia sobre la foto */
    font-weight: 400;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
}

.tm-hero .tm-clock .bw-count-label {
    margin-top: .45rem;
    font-size: .5625rem;
    font-weight: 500;
    color: var(--tm-paper);
    text-shadow: 0 1px 10px rgba(20, 28, 40, .8);
}

.tm-hero-pie {
    position: relative;
    z-index: 1;
    /* El monograma sube a montarse en el borde de la foto */
    margin-top: calc(-1 * clamp(70px, 20vw, 110px));
    padding-bottom: 2rem;
    color: var(--tm-ink);
}

.tm-hero .tm-monograma {
    width: clamp(160px, 46vw, 230px);
    margin-bottom: .6rem;
    filter: none;
}

.tm-hero .tm-portada-nombres {
    font-size: clamp(2.1rem, 9.5vw, 3.4rem);
    text-shadow: none;
}

.tm-hero .tm-portada-nombres .y {
    color: var(--tm-ciruela);
}

.tm-hero .tm-portada-pie {
    margin-top: 1.1rem;
    color: var(--tm-ink-soft);
}

.tm-hero .tm-portada-pie span:first-child {
    color: var(--tm-ink);
}

@media (min-width: 62rem) {
    .tm-hero {
        height: 100vh;
    }

    /* En monitor la foto es apaisada y le toca menos alto: pie mas compacto
       y encuadre hacia arriba, para no cortar las caras */
    .tm-hero-foto {
        object-position: center 40%;
    }

    .tm-hero .tm-monograma {
        width: 170px;
    }

    .tm-hero .tm-portada-nombres {
        font-size: 2.9rem;
    }

    .tm-hero .tm-hero-capa {
        padding-top: 3rem;
    }
}

/* ── Linea de tiempo: fotos mas chicas, de dos en dos ── */
.tm-linea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 2rem;
    max-width: 24rem;
    margin: 2.5rem auto 0;
}

.tm-anio {
    padding-bottom: 0;
}

.tm-anio::before {
    margin-bottom: .6rem;
}

.tm-anio-num {
    margin-bottom: .7rem;
    font-size: 1.1rem;
}

.tm-anio img {
    max-width: none;
}

/* 2026 trae dos fotos: ocupa el renglon entero y cada foto queda del mismo
   tamano que las de arriba */
.tm-anio:last-child {
    grid-column: 1 / -1;
}

.tm-anio-par {
    max-width: none;
    gap: 1rem;
}

/* ── Vestimenta: paleta sugerida ── */
.tm-muestras {
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.75rem auto .5rem;
    padding: 0;
    list-style: none;
}

.tm-muestra {
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .18);
}

/* ── Confirmacion: el ciruela empolvado de la paleta en vez de la tinta,
      mas suave. Los grises translucidos suben para seguir leyendose ── */
.tm-rsvp {
    background: var(--tm-ciruela);
}

.tm-rsvp .tm-texto,
.bw-guest-banner .gcount {
    color: rgba(247, 243, 236, .88);
}

.bw-search-box .hint,
.bw-pase-hint {
    color: rgba(247, 243, 236, .78);
}

.bw-guest-banner,
.bw-search-box,
.bw-pase-cta {
    border-color: rgba(247, 243, 236, .32);
}

.tm-rsvp #error {
    color: #f6d3cb;
}

/* ── Hero: la pareja al centro en celular ──
   En las tres fotos la pareja esta cargada a la izquierda, y en celular la
   foto casi no se recorta de los lados, asi que con object-position no
   alcanza. Se acerca 1.2x desde un punto calculado para que el centro de la
   pareja (C, en fraccion del ancho) caiga en medio de la pantalla:
   origen = (0.5 - 1.2 * C) / (1 - 1.2) = 6C - 2.5. Con origen entre 0 y
   ~40% ninguna orilla de la foto se despega del marco.
     mano  (sesion-2)  C = .425  ->  5%
     baile (sesion-1)  C = .45   ->  20%
     beso  (sesion-3)  C = .42   ->  2%   (entre el vestido y las caras) */
@media (max-width: 61.99rem) {
    .tm-hero-foto--mano,
    .tm-hero-foto--baile,
    .tm-hero-foto--beso {
        transform: scale(1.2);
    }

    .tm-hero-foto--mano {
        transform-origin: 5% 40%;
    }

    .tm-hero-foto--baile {
        transform-origin: 20% 40%;
    }

    .tm-hero-foto--beso {
        transform-origin: 2% 40%;
    }
}

/* --------------------------------------------------------------------------
   19. Visor de fotos (2026-09-29)
   Al tocar una foto de la linea de tiempo o de la pedida se abre en grande.
   -------------------------------------------------------------------------- */

.tm-anio img,
.tm-tira img {
    cursor: zoom-in;
}

.tm-anio img:focus-visible,
.tm-tira img:focus-visible {
    outline: 1px solid var(--tm-ciruela);
    outline-offset: 3px;
}

.tm-visor {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1rem;
    background: rgba(20, 28, 40, .94);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease-out, visibility 0s linear .22s;
    touch-action: none;
}

.tm-visor.is-abierto {
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease-out, visibility 0s;
}

.tm-visor-foto {
    max-width: 100%;
    /* Deja lugar abajo para el nombre */
    max-height: calc(100% - 4.5rem);
    object-fit: contain;
    transform: scale(.96);
    transition: transform .22s ease-out, opacity .16s ease-out;
    user-select: none;
    -webkit-user-drag: none;
}

.tm-visor.is-abierto .tm-visor-foto {
    transform: scale(1);
}

/* Mientras llega la siguiente foto */
.tm-visor-foto.is-cambiando {
    opacity: 0;
}

/* El nombre del graduado, debajo de la foto */
.tm-visor-nombre {
    margin: 1rem 0 0;
    max-width: 24ch;
    font-family: var(--tm-display);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.15;
    text-align: center;
    color: var(--tm-paper);
}

.tm-visor-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tm-paper);
    font-family: var(--tm-ui);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
    /* En celular las flechas quedan encima de la foto */
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
    transition: opacity .15s ease-out;
}

.tm-visor-btn:hover,
.tm-visor-btn:focus-visible {
    opacity: 1;
}

.tm-visor-btn:focus-visible {
    outline: 1px solid var(--tm-paper);
    outline-offset: -4px;
}

.tm-visor-cerrar {
    top: .5rem;
    right: .5rem;
    font-size: 1.75rem;
}

.tm-visor-ant {
    left: .25rem;
    top: 50%;
    transform: translateY(-50%);
}

.tm-visor-sig {
    right: .25rem;
    top: 50%;
    transform: translateY(-50%);
}

.tm-visor-cuenta {
    position: absolute;
    bottom: 1.25rem;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-family: var(--tm-dato);
    font-size: .625rem;
    letter-spacing: .3em;
    color: var(--tm-paper);
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

/* Con una sola foto no hay a donde moverse */
.tm-visor.is-sola .tm-visor-ant,
.tm-visor.is-sola .tm-visor-sig,
.tm-visor.is-sola .tm-visor-cuenta {
    display: none;
}

@media (min-width: 62rem) {
    .tm-visor {
        padding: 4rem 5rem;
    }

    .tm-visor-ant {
        left: 1.5rem;
    }

    .tm-visor-sig {
        right: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tm-visor,
    .tm-visor.is-abierto,
    .tm-visor-foto {
        transition: none;
    }

    .tm-visor-foto {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   20. Graduacion de Karina (solicitud 2006, 2026-09-29)
   -------------------------------------------------------------------------- */

/* Hero sin foto (Karina todavia no manda): un cielo de la tinta azul al
   azul claro, que abajo se funde con el marfil. Un bloque marino liso se
   veia vacio. Cuando lleguen las fotos, las <img class="tm-hero-foto">
   quedan encima y esto ya no se ve. */
.tm-hero-media {
    background: linear-gradient(to bottom,
            var(--tm-ink) 0%,
            #435e7e 38%,
            #7f9dbd 68%,
            var(--tm-salvia) 100%);
}

/* El titulo es una frase, no dos nombres: en una linea mientras quepa */
.tm-hero .tm-portada-nombres {
    font-size: clamp(2.3rem, 11vw, 3.6rem);
}

/* Los 20 graduados, cada quien con su foto: dos por fila en celular, cuatro
   en pantalla grande. Las fotos vienen de estudio y de exteriores, en
   vertical casi todas; un mismo recorte 4:5 las empareja. */
.tm-graduados {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem .9rem;
    margin: 2rem auto 0;
    padding: 0;
    max-width: 52rem;
}

.tm-graduados li {
    margin: 0;
}

.tm-graduados img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* Casi todos son de cuerpo entero: el recorte se carga arriba para no
       cortar caras */
    object-position: 50% 22%;
    background: var(--tm-paper-2);
    cursor: zoom-in;
}

.tm-graduados img:focus-visible {
    outline: 1px solid var(--tm-ciruela);
    outline-offset: 3px;
}

.tm-graduados span {
    display: block;
    margin-top: .6rem;
    font-family: var(--tm-dato);
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--tm-ink);
}

@media (min-width: 48rem) {
    .tm-graduados {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2rem 1.25rem;
    }
}

/* El monograma del cierre es un SVG: sin esto el alto lo fija el HTML */
.tm-cierre .tm-monograma {
    height: auto;
}

/* --------------------------------------------------------------------------
   21. Hero en collage (2026-09-30, lo pidio Gabriel)
   Las fotos de los 20 en una reticula de celdas altas (son de cuerpo
   entero, verticales) separadas por una linea de tinta. Un filtro azul las
   unifica: la foto va en blanco y negro y encima una capa azul en
   multiply, asi 20 sesiones distintas se leen como una sola pieza. El velo
   de arriba (cuenta) y el fundido al papel de abajo siguen en
   .tm-hero-media::after, que se pinta encima de todo esto.
   -------------------------------------------------------------------------- */

.tm-collage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3px;
    background: var(--tm-ink);
}

.tm-collage-celda {
    position: relative;
    overflow: hidden;
    background: var(--tm-ink);
}

/* En celular solo 6 celdas */
.tm-collage-celda:nth-child(n+7) {
    display: none;
}

.tm-collage-celda img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Las caras quedan en el tercio de arriba */
    object-position: center 22%;
    filter: grayscale(1) contrast(1.08) brightness(1.08);
}

/* La que entra se funde encima de la anterior */
.tm-collage-celda img + img {
    opacity: 0;
    transition: opacity .8s ease;
}

.tm-collage-celda img.is-in {
    opacity: 1;
}

/* El filtro azul */
.tm-collage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #5a7ba3 0%, #7f9fc4 55%, #a9c1d9 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

@media (min-width: 48rem) {
    .tm-collage {
        grid-template-columns: repeat(5, 1fr);
    }

    .tm-collage-celda:nth-child(n+7) {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   22. La carrera, grande (2026-09-30, lo pidio Gabriel)
   "Licenciatura en" chico en versalitas y "Fisioterapia" en Cormorant
   italica azul, con el simbolo de la carrera, entre dos filetes cortos.
   -------------------------------------------------------------------------- */

.tm-carrera {
    margin: 1.75rem auto 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tm-carrera::before,
.tm-carrera::after {
    content: "";
    width: 3.5rem;
    height: 1px;
    background: var(--tm-taupe);
}

.tm-carrera-grado {
    margin-top: 1.25rem;
    padding-left: .38em;
    font-family: var(--tm-ui);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--tm-ink-soft);
}

.tm-carrera-nombre {
    margin: .15rem 0 1.1rem;
    font-family: var(--tm-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.8rem, 13vw, 4rem);
    line-height: 1.1;
    color: var(--tm-ciruela);
}

/* El simbolo de la fisioterapia (rayo y serpientes; el diseno lo mando
   Gabriel, 2026-09-30, pasado al azul acero), debajo del nombre como
   en el letrero de la generacion */
.tm-carrera-simbolo {
    display: block;
    width: clamp(104px, 30vw, 130px);
    height: auto;
    margin: 1rem 0 2rem;
}

/* --------------------------------------------------------------------------
   23. Mini mapa en las tarjetas de ceremonia y recepcion (2026-09-30, lo
   pidio Gabriel). Embebido de Google Maps sin llave; el iframe no recibe
   toques y el enlace que lo envuelve abre el mapa completo.
   -------------------------------------------------------------------------- */

.tm-mapa {
    display: block;
    align-self: stretch;
    position: relative;
    margin: .9rem 0 1.1rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--tm-hair);
    background: #eef1f4;
}

.tm-mapa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    /* Un poco apagado, para que no grite junto al marfil */
    filter: saturate(.6) contrast(.95);
}

/* Con mapa, las tarjetas van una arriba de la otra, a todo lo ancho (lo
   pidio Gabriel): lado a lado el mapa quedaba de estampilla */
.tm-momentos {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}

.tm-momento-tarjeta {
    padding: 1.6rem 1.25rem 1.4rem;
}

/* --------------------------------------------------------------------------
   24. Mini zoom en las fotos de los graduados (2026-09-30, lo pidio Gabriel)
   Acercamiento que va y viene (15% en 6 s; con 8% en 9 s no se notaba). El marco recorta la foto para que no
   se salga al crecer; cada foto con su propio retraso (13 valores que se
   repiten con 20 fotos) para que no respiren todas al mismo tiempo.
   -------------------------------------------------------------------------- */

.tm-graduado-foto {
    overflow: hidden;
}

.tm-graduados .tm-graduado-foto img {
    animation: tm-mini-zoom 6s ease-in-out infinite alternate;
    /* Se acerca hacia la cara (tercio de arriba), no al centro */
    transform-origin: 50% 25%;
    will-change: transform;
}

/* El marco recorta el contorno de foco de la foto: se pinta en el marco */
.tm-graduado-foto:has(img:focus-visible) {
    outline: 1px solid var(--tm-ciruela);
    outline-offset: 3px;
}

.tm-graduados li:nth-child(13n+2) img { animation-delay: -1.4s; }
.tm-graduados li:nth-child(13n+3) img { animation-delay: -5.2s; }
.tm-graduados li:nth-child(13n+4) img { animation-delay: -2.7s; }
.tm-graduados li:nth-child(13n+5) img { animation-delay: -7.9s; }
.tm-graduados li:nth-child(13n+6) img { animation-delay: -3.8s; }
.tm-graduados li:nth-child(13n+7) img { animation-delay: -6.5s; }
.tm-graduados li:nth-child(13n+8) img { animation-delay: -.6s; }
.tm-graduados li:nth-child(13n+9) img { animation-delay: -8.6s; }
.tm-graduados li:nth-child(13n+10) img { animation-delay: -4.4s; }
.tm-graduados li:nth-child(13n+11) img { animation-delay: -2.1s; }
.tm-graduados li:nth-child(13n+12) img { animation-delay: -7.2s; }
.tm-graduados li:nth-child(13n+13) img { animation-delay: -5.9s; }

@keyframes tm-mini-zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-graduados .tm-graduado-foto img {
        animation: none;
    }
}