/* ════════════════════════════════════════════════════════════════
   BROCHURE / LANDING — Invitaciones Digitales
   Estética boutique: navy + dorado, tipografías serif elegantes
   ════════════════════════════════════════════════════════════════ */

:root {
    --navy:        #1e3a5f;
    --navy-deep:   #142a47;
    --gold:        #c9a84c;
    --gold-soft:   #e3cf94;
    --cream:       #f8f5ef;
    --paper:       #ffffff;
    --ink:         #2c2c2c;
    --ink-soft:    #5b5b5b;
    --line:        rgba(30, 58, 95, 0.12);
    --shadow:      0 18px 50px -20px rgba(20, 42, 71, 0.45);
    --font-display: 'Playfair Display', serif;
    --font-script:  'Cormorant Garamond', serif;
    --font-body:    'Lato', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── Adornos decorativos ───────────────────────────────────── */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px auto;
    color: var(--gold);
}
.divider::before,
.divider::after {
    content: "";
    height: 1px;
    width: 60px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.divider::after { background: linear-gradient(90deg, var(--gold), transparent); }
.divider span { font-size: 1.1rem; letter-spacing: 2px; }

.eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold);
}

/* ─── HERO ──────────────────────────────────────────────────── */
.hero {
    position: relative;
    background:
        radial-gradient(circle at 20% 10%, rgba(201, 168, 76, 0.12), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(201, 168, 76, 0.10), transparent 40%),
        linear-gradient(160deg, #fcf9f3 0%, #f1ebdf 100%);
    color: var(--ink);
    text-align: center;
    padding: 88px 24px 96px;
    overflow: hidden;
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(201, 168, 76, 0.25);
    border-radius: 50%;
    opacity: 0.5;
}
.hero::before { top: -140px; left: -120px; }
.hero::after  { bottom: -160px; right: -120px; }

.hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }

.hero .eyebrow { color: var(--gold); }

.hero h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.1rem, 5.2vw, 3.6rem);
    line-height: 1.12;
    margin: 18px 0 10px;
    color: var(--navy);
}
.hero h1 .accent { color: var(--gold); font-style: italic; }

.hero .subtitle {
    font-family: var(--font-script);
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    color: #9c7d2f;
    font-weight: 500;
}

.hero .greeting {
    margin: 26px auto 0;
    max-width: 620px;
    font-size: 1.02rem;
    color: var(--ink-soft);
}

.hero-cta {
    margin-top: 34px;
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ─── Sobre abierto con video (intro del hero) ──────────────── */
.intro-envelope-section {
    margin: 2px auto 26px;
}

.intro-envelope {
    position: relative;
    width: min(92%, 380px);
    height: 460px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    perspective: 1000px;
}

/* Cuerpo interior del sobre (papel kraft que resalta sobre el navy) */
.intro-env-body {
    position: relative;
    width: 100%;
    height: 340px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(160deg, #24456e 0%, #1a3252 100%);
    box-shadow: 0 26px 54px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(201, 168, 76, 0.30);
    overflow: visible;
}
.intro-env-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.10);
    border-radius: 0 0 10px 10px;
    z-index: 0;
    pointer-events: none;
}

/* Solapa abierta (triángulo con punta arriba, inclinada en 3D) */
.intro-opened-flap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92px;
    background: linear-gradient(180deg, #2b4d77 0%, #1f3c61 100%);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    transform-origin: top center;
    transform: translateY(-100%) rotateX(22deg);
    z-index: 1;
    filter: drop-shadow(0 -3px 4px rgba(0, 0, 0, 0.15));
}
.intro-opened-flap::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    background: var(--navy-deep);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    z-index: -1;
}

/* Sombras diagonales interiores */
.intro-corner-l,
.intro-corner-r {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: rgba(0, 0, 0, 0.14);
    pointer-events: none;
    z-index: 2;
}
.intro-corner-l { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.intro-corner-r { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Video tipo polaroid que emerge del sobre */
.intro-photo {
    position: absolute;
    bottom: 22px;
    left: 8px;
    width: calc(100% - 16px);
    z-index: 3;
    animation: introReveal 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes introReveal {
    0%   { transform: translateY(60px);  opacity: 0; }
    100% { transform: translateY(-52px); opacity: 1; }
}
.intro-polaroid {
    background: #fff;
    padding: 12px 12px 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    transform: rotate(-1.5deg);
    border-radius: 2px;
    position: relative;
    z-index: 2;
}
.intro-polaroid video {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Cara frontal del sobre con V-notch (efecto bolsillo) */
.intro-front-flaps {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 74%;
    z-index: 4;
    pointer-events: none;
    border-radius: 0 0 10px 10px;
}
.intro-front-flaps::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #1d3a5c 0%, #15273e 100%);
    clip-path: polygon(0% 0%, 50% 55%, 100% 0%, 100% 100%, 0% 100%);
    border-radius: 0 0 10px 10px;
}
.intro-front-flaps::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: rgba(0, 0, 0, 0.10);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

/* Imagen floral decorativa del sobre (sube desde el panel) */
.intro-flowers {
    position: absolute;
    left: -22%;
    top: -16%;
    width: 64%;
    pointer-events: none;
    z-index: 5;
    opacity: 0.96;
}
.intro-flowers img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Texto bajo el sobre */
.intro-caption {
    margin-top: 4px;
    text-align: center;
    font-family: var(--font-script);
    color: #9c7d2f;
    font-size: 1.5rem;
    line-height: 1.2;
}

/* ─── Botones ───────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 28px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    cursor: pointer;
    border: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold  { background: var(--gold); color: var(--navy-deep); box-shadow: 0 10px 24px -10px rgba(201,168,76,.8); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }

/* ─── SECCIÓN PAQUETES ──────────────────────────────────────── */
.packages {
    padding: 84px 0 90px;
    background:
        radial-gradient(circle at 15% 8%, rgba(201, 168, 76, 0.10), transparent 42%),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: #fff;
    margin: 12px 0 10px;
}
.section-head p { color: rgba(255, 255, 255, 0.8); font-size: 1.02rem; }

.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 26px;
    align-items: stretch;
}

.package-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 34px 28px 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px -22px rgba(20, 42, 71, 0.5);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.package-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: var(--gold-soft);
}

.package-card.featured {
    border: 1.5px solid var(--gold);
    box-shadow: 0 24px 60px -26px rgba(201, 168, 76, 0.7);
    background:
        linear-gradient(180deg, rgba(201,168,76,0.06), transparent 30%),
        var(--paper);
}

.package-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--navy-deep);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 8px 18px -8px rgba(201,168,76,.9);
}

/* Iconos en oro monocromático (silueta + tinte dorado) */
.icon-gold {
    display: inline-block;
    filter: brightness(0) saturate(100%) invert(67%) sepia(64%) saturate(394%) hue-rotate(3deg) brightness(91%) contrast(88%);
}

/* Medallón dorado del icono principal de cada paquete */
.package-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--gold-soft);
    background: radial-gradient(circle at 50% 32%, rgba(201, 168, 76, 0.14), transparent 72%);
    font-size: 1.55rem;
    line-height: 1;
    margin-bottom: 8px;
}
.package-icon svg { width: 30px; height: 30px; color: var(--gold); }
.featured .package-icon {
    border-color: var(--gold);
    background: radial-gradient(circle at 50% 32%, rgba(201, 168, 76, 0.22), transparent 72%);
}

.package-name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: var(--navy);
    margin: 12px 0 4px;
}

.package-tagline {
    color: var(--ink-soft);
    font-size: 0.92rem;
    min-height: 2.6em;
    margin-bottom: 18px;
}

.package-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--line);
}
.package-price .currency { font-size: 1.05rem; color: var(--gold); font-weight: 700; align-self: flex-start; margin-top: 4px; }
.package-price .amount   { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--navy); line-height: 1; }
.package-price .note     { font-size: 0.78rem; color: var(--ink-soft); margin-left: auto; text-align: right; }

.package-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
    margin-bottom: 24px;
}
.package-features li {
    position: relative;
    padding-left: 28px;
    font-size: 0.9rem;
    color: var(--ink);
}
.package-features li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--gold);
    font-size: 0.8rem;
}
/* Si la característica trae su propio icono, este reemplaza al bullet ✦ */
.package-features li.has-icon::before { content: none; }
.feat-icon {
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.5;
}
/* Iconos vectoriales de línea fina en oro */
.line-icon {
    color: var(--gold);
    display: block;
    margin: 0 auto;
}
.feat-icon svg { width: 17px; height: 17px; }

/* Icono dorado intercalado dentro del texto de una característica */
.inline-icon { display: inline-block; }
.inline-icon svg {
    width: 1.05em;
    height: 1.05em;
    display: inline-block;
    vertical-align: -0.16em;
    margin: 0 1px;
}
.inline-icon .icon-gold { margin: 0 1px; }

/* Estrella ✦ dorada dentro de textos (saludo, cierre) */
.gold-star { color: var(--gold); font-style: normal; }

.package-card .btn { width: 100%; justify-content: center; margin-top: auto; }

/* ─── CIERRE / CTA ──────────────────────────────────────────── */
.closing {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: #fff;
    text-align: center;
    padding: 76px 24px;
    position: relative;
}
.closing h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    margin-bottom: 14px;
}
.closing p { color: rgba(255,255,255,.82); max-width: 560px; margin: 0 auto 30px; }

/* ─── FOOTER ────────────────────────────────────────────────── */
.footer {
    background: var(--navy-deep);
    color: rgba(255,255,255,.6);
    text-align: center;
    padding: 30px 24px;
    font-size: 0.85rem;
}
.footer a { color: var(--gold-soft); text-decoration: none; }
.footer .social { margin-bottom: 10px; display: flex; gap: 18px; justify-content: center; }

/* ─── BOTÓN FLOTANTE WHATSAPP ───────────────────────────────── */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25d366;
    color: #fff;
    padding: 13px 20px 13px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    box-shadow: 0 14px 30px -10px rgba(37, 211, 102, 0.7);
    transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.03); }
.wa-float svg { width: 24px; height: 24px; flex-shrink: 0; }
.wa-float .wa-label { white-space: nowrap; }

/* Pulso sutil */
.wa-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
    animation: wa-pulse 2.4s infinite;
}
@keyframes wa-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ─── Animación de entrada ──────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 600px) {
    .hero { padding: 56px 18px 68px; }
    .packages { padding: 60px 0; }
    .wa-float .wa-label { display: none; }
    .wa-float { padding: 14px; }

    .intro-envelope { width: 94%; max-width: 340px; height: 420px; }
    .intro-env-body { height: 300px; }
    .intro-caption { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .wa-float::after { animation: none; }
    html { scroll-behavior: auto; }
}