/* ═══════════════════════════════════════════════════════
   Tarjeta Día de las Madres — v3 Luxury Minimal
   Style: Luxury Minimal (Design Systems #10)
   Fonts: Cormorant Garamond + Proza Libre + Great Vibes
   Palette: ivory · blush · champagne gold · deep rose
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Proza+Libre:wght@300;400;500&family=Great+Vibes&display=swap');

/* ── Design Tokens ── */
:root {
    /* Color system */
    --c-ivory:        #FAF7F4;
    --c-cream:        #F5F0EB;
    --c-blush:        #F0E0E5;
    --c-gold:         #B8962E;
    --c-gold-light:   #D4B86A;
    --c-gold-pale:    rgba(184,150,46,.08);
    --c-rose:         #C0566A;
    --c-rose-deep:    #8A3048;
    --c-rose-pale:    rgba(192,86,106,.10);
    --c-mauve:        #8E6070;
    --c-ink:          #1C0F14;
    --c-ink-mid:      #5A3040;
    --c-ink-soft:     #A08090;
    --c-surface:      #FFFFFF;

    /* Typography */
    --f-display: 'Cormorant Garamond', 'Garamond', Georgia, serif;
    --f-body:    'Proza Libre', 'Georgia', serif;
    --f-script:  'Great Vibes', cursive;

    /* Scale */
    --text-xs:   0.6875rem;  /* 11px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.1875rem;  /* 19px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  2rem;       /* 32px */
    --text-3xl:  2.75rem;    /* 44px */
    --text-4xl:  3.5rem;     /* 56px */

    /* Spacing — 8px grid */
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* Shadows — ultra-subtle */
    --shadow-xs: 0 1px 4px rgba(28,15,20,.04);
    --shadow-sm: 0 2px 16px rgba(28,15,20,.06), 0 1px 4px rgba(28,15,20,.04);
    --shadow-md: 0 8px 32px rgba(28,15,20,.09), 0 2px 8px rgba(28,15,20,.05);
    --shadow-lg: 0 24px 64px rgba(28,15,20,.14), 0 6px 16px rgba(28,15,20,.06);

    /* Motion */
    --ease-out:    cubic-bezier(.22,1,.36,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── Reset ── */
.tdm-card *, .tdm-lightbox * {
    box-sizing: border-box; margin: 0; padding: 0;
}
.tdm-card img { display: block; max-width: 100%; }
.tdm-card button {
    cursor: pointer; background: none; border: none;
    font-family: var(--f-body);
}

/* ════════════════════════════════════════════
   PÁGINA
════════════════════════════════════════════ */
.tdm-card {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    /* Fondo: ivory cálido con sutil textura de ruido */
    background-color: var(--c-ivory);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(192,86,106,.06) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(184,150,46,.05) 0%, transparent 60%);
    color: var(--c-ink);
    font-family: var(--f-body);
}

/* ════════════════════════════════════════════
   PÉTALOS FLOTANTES — mínimos, elegantes
════════════════════════════════════════════ */
.tdm-petals {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.tdm-petal {
    position: absolute; top: -3%;
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    opacity: 0;
    animation: tdm-fall linear infinite;
}
/* Solo 8 pétalos, muy sutiles */
.tdm-p1  { width:9px; height:6px;  background:var(--c-rose);   opacity:.5; left:6%;  animation-duration:14s;  animation-delay:0s;    }
.tdm-p2  { width:6px; height:4px;  background:var(--c-gold);   opacity:.4; left:18%; animation-duration:18s;  animation-delay:2s;    }
.tdm-p3  { width:8px; height:5px;  background:var(--c-mauve);  opacity:.4; left:31%; animation-duration:13s;  animation-delay:4s;    }
.tdm-p4  { width:5px; height:3px;  background:var(--c-rose);   opacity:.4; left:44%; animation-duration:16s;  animation-delay:1s;    }
.tdm-p5  { width:7px; height:5px;  background:var(--c-gold);   opacity:.4; left:57%; animation-duration:15s;  animation-delay:6s;    }
.tdm-p6  { width:6px; height:4px;  background:var(--c-rose);   opacity:.45;left:68%; animation-duration:12s;  animation-delay:3s;    }
.tdm-p7  { width:9px; height:6px;  background:var(--c-mauve);  opacity:.35;left:79%; animation-duration:17s;  animation-delay:5s;    }
.tdm-p8  { width:5px; height:3px;  background:var(--c-gold);   opacity:.4; left:90%; animation-duration:14s;  animation-delay:8s;    }
/* Los otros 6 los ocultamos */
.tdm-p9,.tdm-p10,.tdm-p11,.tdm-p12,.tdm-p13,.tdm-p14 { display:none; }

@keyframes tdm-fall {
    0%   { opacity:0;   transform: translateY(0)     rotate(0deg)   scale(.85); }
    8%   { opacity:.55; }
    85%  { opacity:.2;  }
    100% { opacity:0;   transform: translateY(110vh) rotate(320deg) scale(1.1); }
}

/* ════════════════════════════════════════════
   REVEAL ANIMATIONS
════════════════════════════════════════════ */
.tdm-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.tdm-reveal.tdm-in       { opacity: 1; transform: translateY(0); }
.tdm-reveal-delay-1      { transition-delay: .15s; }
.tdm-reveal-delay-2      { transition-delay: .3s;  }
.tdm-reveal-delay-3      { transition-delay: .45s; }

/* ════════════════════════════════════════════
   HEADER — Luxury Minimal
   Extremo whitespace, ornamentos dorados finos
════════════════════════════════════════════ */
.tdm-header {
    position: relative; z-index: 1;
    text-align: center;
    padding: var(--sp-20) var(--sp-6) var(--sp-16);
    max-width: 640px;
    margin: 0 auto;
}

/* Línea vertical dorada de entrada */
.tdm-header::before {
    content: '';
    display: block;
    width: 1px; height: 64px;
    background: linear-gradient(to bottom, transparent 0%, var(--c-gold) 60%, var(--c-gold-light) 100%);
    margin: 0 auto var(--sp-12);
    opacity: .5;
}

/* Flores botánicas */
.tdm-flowers {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: var(--sp-12);
}
.tdm-flower { filter: drop-shadow(0 8px 20px rgba(192,86,106,.15)); }
.tdm-flower-l {
    width: 70px; height: 90px;
    animation: tdm-sway-l 6s ease-in-out infinite;
    transform-origin: 50% 100%;
}
.tdm-flower-r {
    width: 88px; height: 110px;
    animation: tdm-sway-r 6s ease-in-out infinite;
    animation-delay: .7s;
    transform-origin: 50% 100%;
}
@keyframes tdm-sway-l {
    0%,100% { transform: rotate(-4deg); }
    50%     { transform: rotate(0deg) translateY(-2px); }
}
@keyframes tdm-sway-r {
    0%,100% { transform: rotate(4deg); }
    50%     { transform: rotate(0deg) translateY(-3px); }
}

/* Eyebrow — tracking extremo, dorado */
.tdm-eyebrow {
    font-family: var(--f-body);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--c-gold);
    margin-bottom: var(--sp-6);
}

/* Nombre — Cormorant grande, itálica */
.tdm-recipient {
    font-family: var(--f-display);
    font-weight: 300;
    line-height: 1.1;
    color: var(--c-ink);
    margin-bottom: var(--sp-8);
}
.tdm-recipient .tdm-para {
    display: block;
    font-size: clamp(1rem, 2.8vw, 1.25rem);
    font-weight: 400;
    letter-spacing: .14em;
    color: var(--c-ink-soft);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
}
.tdm-recipient em {
    display: block;
    font-style: italic;
    font-size: clamp(1.9rem, 7vw, 3.25rem);
    font-weight: 300;
    color: var(--c-rose-deep);
    line-height: 1.15;
    /* sutil shimmer dorado en el color */
}

/* Divisor ornamental dorado */
.tdm-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    margin: 0 auto var(--sp-8);
    max-width: 220px;
}
.tdm-divider::before { background: linear-gradient(to right, transparent, var(--c-gold-light)); }
.tdm-divider::after  { background: linear-gradient(to left,  transparent, var(--c-gold-light)); }
.tdm-divider::before,
.tdm-divider::after {
    content: ''; flex: 1; height: 1px; opacity: .7;
}
.tdm-divider-icon {
    width: 14px; height: 14px;
    color: var(--c-gold);
    flex-shrink: 0;
    opacity: .85;
}

/* Corazones minimalistas */
.tdm-hearts {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sp-3);
    color: var(--c-rose);
}
.tdm-hearts span:nth-child(1),
.tdm-hearts span:nth-child(3) {
    font-size: .65rem; opacity: .4;
}
.tdm-hearts span:nth-child(2) {
    font-size: 1.1rem;
    animation: tdm-heartbeat 2s ease-in-out infinite;
}
@keyframes tdm-heartbeat {
    0%,100% { transform: scale(1); }
    20%     { transform: scale(1.28); }
    40%     { transform: scale(1); }
    60%     { transform: scale(1.12); }
    80%     { transform: scale(1); }
}

/* ════════════════════════════════════════════
   MENSAJE — tarjeta ivory con borde dorado
════════════════════════════════════════════ */
.tdm-message-wrap {
    position: relative; z-index: 1;
    padding: 0 var(--sp-4) var(--sp-16);
    max-width: 580px;
    margin: 0 auto;
}

.tdm-message-card {
    background: var(--c-surface);
    /* Sin border-radius para máxima elegancia */
    border-radius: 2px;
    padding: var(--sp-12) var(--sp-8) var(--sp-8);
    box-shadow: var(--shadow-sm);
    position: relative;
    /* Borde dorado ultra-fino */
    outline: 1px solid rgba(184,150,46,.18);
    outline-offset: -1px;
}

/* Esquinas decorativas doradas */
.tdm-corner {
    position: absolute;
    width: 22px; height: 22px;
    pointer-events: none;
}
.tdm-corner-tl { top: 10px; left: 10px;  border-top: 1px solid var(--c-gold); border-left:  1px solid var(--c-gold); opacity:.4; }
.tdm-corner-tr { top: 10px; right: 10px; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); opacity:.4; }
.tdm-corner-bl { bottom: 10px; left: 10px;  border-bottom: 1px solid var(--c-gold); border-left:  1px solid var(--c-gold); opacity:.4; }
.tdm-corner-br { bottom: 10px; right: 10px; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); opacity:.4; }

/* Comilla decorativa */
.tdm-quote {
    font-family: var(--f-display);
    font-size: 10rem;
    line-height: .6;
    color: var(--c-rose-pale);
    position: absolute;
    top: 20px; left: 20px;
    pointer-events: none; user-select: none;
    font-style: italic;
    /* Hace la comilla visible solo sutilmente */
    filter: blur(.5px);
}

/* Texto */
.tdm-message-body {
    font-family: var(--f-display);
    font-size: clamp(1.125rem, 4vw, 1.3125rem);
    font-style: italic;
    font-weight: 300;
    line-height: 2;
    color: var(--c-ink);
    position: relative; z-index: 1;
    margin-bottom: var(--sp-8);
    /* Sangría decorativa */
    padding-left: var(--sp-3);
}

/* Separador interno */
.tdm-sender-sep {
    width: 40px; height: 1px;
    background: var(--c-gold);
    margin: 0 0 var(--sp-6) auto;
    opacity: .4;
}

/* Firma */
.tdm-sender {
    font-family: var(--f-body);
    font-size: var(--text-sm);
    font-weight: 300;
    letter-spacing: .04em;
    color: var(--c-ink-soft);
    text-align: right;
    line-height: 1.6;
}
.tdm-sender strong {
    display: block;
    font-family: var(--f-script);
    font-size: 2.25rem;
    font-weight: 400;
    color: var(--c-rose);
    margin-top: var(--sp-2);
    line-height: 1.1;
}

/* ════════════════════════════════════════════
   GALERÍA — polaroids sin caption, elegantes
════════════════════════════════════════════ */
.tdm-gallery {
    position: relative; z-index: 1;
    padding: 0 var(--sp-4) var(--sp-20);
    max-width: 600px;
    margin: 0 auto;
}

/* Título con ornamentos */
.tdm-gallery-heading {
    font-family: var(--f-display);
    font-size: clamp(1.25rem, 4vw, 1.625rem);
    font-weight: 300;
    font-style: italic;
    color: var(--c-ink);
    text-align: center;
    margin-bottom: var(--sp-8);
    letter-spacing: .02em;
}
.tdm-gallery-heading::before,
.tdm-gallery-heading::after {
    content: '—';
    margin: 0 .6em;
    color: var(--c-gold);
    opacity: .55;
    font-style: normal;
    font-size: .85em;
}

/* Grid */
.tdm-photos { display: grid; gap: 14px; }
.tdm-layout-one   { grid-template-columns: 1fr; max-width: 270px; margin: 0 auto; }
.tdm-layout-two   { grid-template-columns: 1fr 1fr; }
.tdm-layout-three { grid-template-columns: 1fr 1fr; }
.tdm-layout-three .tdm-photo:first-child {
    grid-column: 1 / -1; max-width: 290px; margin: 0 auto;
}
.tdm-layout-four  { grid-template-columns: 1fr 1fr; }
.tdm-layout-many  { grid-template-columns: 1fr 1fr; }

/* Polaroid — solo marco, sin caption */
.tdm-photo {
    /* Marco clásico: papel blanco, borde ligero */
    background: #FEFEFE;
    padding: 8px 8px 8px 8px;
    border-radius: 1px;
    box-shadow:
        0 1px 3px rgba(28,15,20,.12),
        0 4px 16px rgba(28,15,20,.08),
        0 0 0 .5px rgba(28,15,20,.06);
    cursor: pointer;
    transform: rotate(var(--rot, 0deg));
    transition:
        transform .45s var(--ease-spring),
        box-shadow .3s ease;
    opacity: 0;
    animation: tdm-polaroid-in .65s var(--ease-spring)
               calc(var(--i,0) * .1s + .2s) forwards;
    position: relative;
}
.tdm-photo:hover,
.tdm-photo:focus {
    transform: rotate(0deg) scale(1.07) !important;
    box-shadow: var(--shadow-lg);
    z-index: 20;
    outline: none;
}
.tdm-photo:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 4px;
}

@keyframes tdm-polaroid-in {
    from {
        opacity: 0;
        transform: rotate(var(--rot,0deg)) scale(.88) translateY(16px);
    }
    to {
        opacity: 1;
        transform: rotate(var(--rot,0deg)) scale(1) translateY(0);
    }
}

.tdm-photo-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--c-blush);
}
.tdm-photo-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease-out);
    display: block;
}
.tdm-photo:hover .tdm-photo-frame img { transform: scale(1.06); }

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.tdm-footer {
    position: relative; z-index: 1;
    text-align: center;
    padding: var(--sp-4) var(--sp-6) var(--sp-20);
}
/* Línea final */
.tdm-footer::before {
    content: '';
    display: block;
    width: 1px; height: 48px;
    background: linear-gradient(to bottom, var(--c-gold), transparent);
    margin: 0 auto var(--sp-6);
    opacity: .4;
}
.tdm-footer-deco {
    font-family: var(--f-display);
    font-size: var(--text-lg);
    letter-spacing: .3em;
    color: var(--c-gold);
    margin-bottom: var(--sp-4);
    opacity: .6;
    font-style: italic;
}
.tdm-footer-date {
    font-family: var(--f-body);
    font-size: var(--text-xs);
    font-weight: 300;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
    opacity: .7;
}

/* ════════════════════════════════════════════
   LIGHTBOX
════════════════════════════════════════════ */
.tdm-lightbox {
    position: fixed; inset: 0;
    z-index: 99999;
    background: rgba(12,4,8,.96);
    backdrop-filter: blur(10px) saturate(.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    animation: tdm-lb-in .2s ease;
}
.tdm-lightbox[hidden] { display: none; }
@keyframes tdm-lb-in { from { opacity:0; } to { opacity:1; } }

.tdm-lb-stage {
    max-width: min(90vw, 640px);
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tdm-lb-stage img {
    max-width: 100%; max-height: 82vh;
    object-fit: contain;
    /* Marco polaroid blanco en lightbox */
    padding: 10px;
    background: #fff;
    box-shadow: 0 48px 120px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.4);
    animation: tdm-lb-img-in .3s var(--ease-spring);
}
@keyframes tdm-lb-img-in {
    from { opacity:0; transform:scale(.9); }
    to   { opacity:1; transform:scale(1); }
}

/* Botones del lightbox — círculos de cristal */
.tdm-lb-btn {
    position: absolute;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, transform .2s;
    -webkit-tap-highlight-color: transparent;
}
.tdm-lb-btn svg { width: 18px; height: 18px; }
.tdm-lb-btn:hover { background: rgba(255,255,255,.16); }

.tdm-lb-close { top: 20px; right: 20px; }
.tdm-lb-close:hover { transform: rotate(90deg); }
.tdm-lb-prev  { left: 14px; top: 50%; transform: translateY(-50%); }
.tdm-lb-next  { right: 14px; top: 50%; transform: translateY(-50%); }
.tdm-lb-prev:hover { transform: translateY(-50%) scale(1.1); }
.tdm-lb-next:hover { transform: translateY(-50%) scale(1.1); }

.tdm-lb-counter {
    position: absolute;
    bottom: 20px; left: 50%; transform: translateX(-50%);
    font-family: var(--f-body);
    font-size: var(--text-xs);
    font-weight: 300;
    letter-spacing: .12em;
    color: rgba(255,255,255,.35);
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (min-width: 480px) {
    .tdm-layout-many { grid-template-columns: repeat(3, 1fr); }
    .tdm-photos      { gap: 18px; }
}
@media (min-width: 600px) {
    .tdm-header       { padding: var(--sp-24) var(--sp-12) var(--sp-20); }
    .tdm-message-wrap { padding: 0 var(--sp-8) var(--sp-20); }
    .tdm-message-card { padding: var(--sp-16) var(--sp-12) var(--sp-12); }
    .tdm-gallery      { padding: 0 var(--sp-8) var(--sp-24); }
    .tdm-lb-prev      { left: 28px; }
    .tdm-lb-next      { right: 28px; }
}

/* ════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .tdm-petal, .tdm-flower-l, .tdm-flower-r,
    .tdm-hearts span, .tdm-photo { animation: none !important; }
    .tdm-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
    .tdm-photo  { opacity:1 !important; }
}