:root{
    --ivory:#f8f2e9;
    --paper:#fffdf9;
    --paper-2:#fbf7f0;
    --wine:#6f2834;
    --wine-dark:#4d1d26;
    --terracotta:#b85f42;
    --gold:#c99538;
    --gold-light:#e7c77d;
    --blush:#D08E8B;
    --ink:#302622;
    --muted:#75685f;
    --line:#e6d8c9;
    --shadow:0 10px 30px rgba(77,43,29,.08);
    --shadow-hover:0 16px 38px rgba(77,43,29,.14);

    --f-serif:'Playfair Display',Georgia,"Times New Roman",serif;
    --f-sans:'Mulish',"Segoe UI",Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    background:
        radial-gradient(circle at 8% 4%,rgba(201,149,56,.12),transparent 28%),
        radial-gradient(circle at 92% 8%,rgba(111,40,52,.10),transparent 30%),
        radial-gradient(circle at 50% 100%,rgba(208,142,139,.10),transparent 40%),
        var(--ivory);
    color:var(--ink);
    font-family:var(--f-sans);
    -webkit-font-smoothing:antialiased;
}

.page{
    width:min(1200px,92vw);
    margin:0 auto;
    padding:26px 0 0px;
}

/* ---------- CABECERA ---------- */

.header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:0 4px 20px;
    border-bottom:1px solid var(--line);
}

.brand{
    display:flex;
    align-items:center;
}

.brand img{
    display:block;
    width:186px;
    height:auto;
    filter:drop-shadow(0 4px 10px rgba(77,43,29,.10));
}

.header-copy{
    text-align:right;
}

.header-kicker{
    margin:0 0 4px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--gold);
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.header-kicker::before{
    content:"✦";
    font-size:9px;
}

.header-title{
    margin:0;
    color:var(--wine-dark);
    font-family:var(--f-serif);
    font-size:23px;
    font-weight:700;
}

.header-subtitle{
    margin:5px 0 0;
    color:var(--muted);
    font-size:11.5px;
}

/* ---------- PRESENTACIÓN ---------- */

.hero{
    position:relative;
    max-width:1100px;
    margin:28px auto 24px;
    text-align:center;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:11px;
    margin-bottom:16px;
    padding:6px 18px;
    border:1px solid var(--gold-light);
    border-radius:30px;
    background:linear-gradient(180deg,rgba(231,199,125,.16),rgba(231,199,125,.03));
    color:var(--gold);
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.hero h1{
    margin:0;
    color:var(--wine-dark);
    font-family:var(--f-serif);
    font-size:clamp(38px,5.4vw,58px);
    line-height:1.1;
    font-weight:700;
    letter-spacing:-.01em;
}

.hero h1 em{
    font-style:italic;
    color:var(--terracotta);
    background:linear-gradient(90deg,var(--terracotta),var(--blush));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:10px auto;
}

.hero-divider span{
    width:36px;
    height:1.5px;
    background:linear-gradient(90deg,transparent,var(--gold-light));
}

.hero-divider span:last-child{
    background:linear-gradient(90deg,var(--gold-light),transparent);
}

.hero-divider::before{
    content:"❖";
    color:var(--gold);
    font-size:13px;
}

.hero p{
    max-width:none;
    margin:0 auto;
    color:var(--muted);
    font-size:18px;
    line-height:1.4;
    white-space:nowrap;
}

/* ---------- GRID ---------- */

.events-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:20px;
    margin-top:10px;
}

.event-card{
    --accent-1:var(--gold-light);
    --accent-2:var(--gold);
    --accent-3:#b8872e;
    --accent-tint:#fff8ed;
    --accent-shadow:rgba(146,99,24,.28);

    position:relative;
    min-height:264px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:30px 18px 22px;
    background:linear-gradient(180deg,var(--paper),var(--paper-2));
    border:1px solid var(--line);
    border-radius:20px;
    text-align:center;
    box-shadow:var(--shadow);
    transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;
}

.event-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:5px;
    background:linear-gradient(90deg,var(--accent-1),var(--accent-2) 50%,var(--accent-3));
    opacity:.9;
}

.event-card::after{
    content:"";
    position:absolute;
    top:-60px;
    right:-60px;
    width:150px;
    height:150px;
    border-radius:50%;
    background:radial-gradient(circle,var(--accent-1) 0%,transparent 70%);
    opacity:.35;
    pointer-events:none;
    transition:opacity .3s ease,transform .3s ease;
}

.event-card:hover{
    transform:translateY(-7px) scale(1.015);
    border-color:var(--accent-2);
    box-shadow:0 20px 40px var(--accent-shadow),var(--shadow-hover);
}

.event-card:hover::after{
    opacity:.55;
    transform:scale(1.15);
}

.event-card.featured{
    border-width:1.5px;
    box-shadow:0 14px 34px var(--accent-shadow),var(--shadow);
}

.event-card.featured::before{
    height:6px;
}

.event-badge{
    position:absolute;
    top:14px;
    right:14px;
    padding:4px 12px;
    background:linear-gradient(135deg,var(--accent-2),var(--accent-3));
    color:#fff;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    border-radius:20px;
    box-shadow:0 4px 10px var(--accent-shadow);
}

.event-icon{
    position:relative;
    z-index:1;
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    color:var(--accent-3);
    background:linear-gradient(160deg,var(--accent-tint),#ffffff);
    border:1px solid var(--accent-1);
    border-radius:50%;
    box-shadow:0 6px 16px var(--accent-shadow),0 1px 0 rgba(255,255,255,.6) inset;
    transition:transform .3s ease;
}

.event-card:hover .event-icon{
    transform:scale(1.08) rotate(-4deg);
}

.event-icon svg{
    width:38px;
    height:38px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.event-icon svg text{
    fill:currentColor;
    stroke:none;
}

.event-icon img{
    width:52px;
    height:52px;
    object-fit:contain;
    display:block;
}

.event-card h2{
    position:relative;
    z-index:1;
    margin:0;
    color:var(--wine-dark);
    font-family:var(--f-serif);
    font-size:20px;
    line-height:1.25;
    font-weight:700;
}

.event-card p{
    position:relative;
    z-index:1;
    max-width:220px;
    min-height:38px;
    margin:8px 0 18px;
    color:var(--muted);
    font-size:12.5px;
    line-height:1.5;
}

/* ---------- CTA BUTTON ---------- */

.event-button{
    position:relative;
    z-index:1;
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    min-width:130px;
    background:linear-gradient(145deg,var(--accent-1),var(--accent-2) 50%,var(--accent-3));
    color:#fff;
    text-decoration:none;
    padding:12px 26px;
    border-radius:50px;
    font-family:var(--f-sans);
    font-size:13px;
    font-weight:700;
    letter-spacing:.03em;
    border:2px solid rgba(255,255,255,.2);
    transition:all .35s ease;
    cursor:pointer;
    box-shadow:
        0 8px 20px var(--accent-shadow),
        0 2px 4px rgba(255,255,255,.25) inset,
        0 -3px 6px rgba(0,0,0,.15) inset;
}

.event-button::after{
    content:"→";
    font-size:13px;
    transition:transform .3s ease;
}

.event-button:hover{
    background:transparent;
    color:var(--accent-3);
    border-color:var(--accent-2);
    transform:translateY(-3px);
    box-shadow:0 14px 30px var(--accent-shadow);
}

.event-button:hover::after{
    transform:translateX(3px);
}

/* ---------- PALETAS POR CATEGORÍA ---------- */

.event-card--wedding{
    --accent-1:#e0aeab; --accent-2:#D08E8B; --accent-3:#a66360;
    --accent-tint:#fbeeed; --accent-shadow:rgba(166,99,96,.32);
}
.event-card--birthday{
    --accent-1:#f0d9a0; --accent-2:#d8ac54; --accent-3:#b8872e;
    --accent-tint:#fff8ed; --accent-shadow:rgba(146,99,24,.28);
}
.event-card--xv{
    --accent-1:#eab08f; --accent-2:#d3835a; --accent-3:#a85a37;
    --accent-tint:#fdf0e7; --accent-shadow:rgba(168,90,55,.30);
}
.event-card--babyshower{
    --accent-1:#c9d9ec; --accent-2:#8fa8cf; --accent-3:#5f7ba8;
    --accent-tint:#eef3fa; --accent-shadow:rgba(95,123,168,.28);
}
.event-card--graduation{
    --accent-1:#c3cdec; --accent-2:#8c9bd6; --accent-3:#5567ab;
    --accent-tint:#f0f2fb; --accent-shadow:rgba(85,103,171,.28);
}
.event-card--anniversary{
    --accent-1:#e6c1d3; --accent-2:#c37a9b; --accent-3:#954f72;
    --accent-tint:#fbeff5; --accent-shadow:rgba(149,79,114,.28);
}
.event-card--cultural{
    --accent-1:#a9d8cd; --accent-2:#5fa896; --accent-3:#3a7566;
    --accent-tint:#eaf6f2; --accent-shadow:rgba(58,117,102,.28);
}
.event-card--ceremony{
    --accent-1:#d3bfe9; --accent-2:#a97ac9; --accent-3:#7a4f9e;
    --accent-tint:#f4eefa; --accent-shadow:rgba(122,79,158,.28);
}
.event-card--other{
    --accent-1:#e3d7bf; --accent-2:#b8a583; --accent-3:#8c7a58;
    --accent-tint:#f8f3e9; --accent-shadow:rgba(140,122,88,.26);
}
.event-card--corporate{
    --accent-1:#b7c7da; --accent-2:#6a89ab; --accent-3:#3f5b7d;
    --accent-tint:#eef2f6; --accent-shadow:rgba(63,91,125,.28);
}


/* ---------- RESPONSIVE ---------- */

@media(max-width:1050px){
    .events-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media(max-width:850px) and (min-width:681px){
    .events-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:680px) and (min-width:481px){
    .events-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:680px){
    .page{
        width:91vw;
        padding:19px 0 35px;
    }

    .header{
        flex-direction:column;
        align-items:center;
        gap:14px;
        padding-bottom:18px;
        text-align:center;
    }

    .brand img{
        width:160px;
    }

    .header-copy{
        text-align:center;
    }

    .header-title{
        font-size:20px;
    }

    .hero{
        margin:24px auto 20px;
    }

    .hero h1{
        font-size:34px;
    }

    .hero p{
        font-size:13.5px;
        white-space:normal;
    }

    .events-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .event-card{
        min-height:auto;
        padding:26px 20px 22px;
    }

    .event-icon{
        width:64px;
        height:64px;
        margin-bottom:13px;
    }

    .event-icon svg{
        width:36px;
        height:36px;
    }

    .event-card h2{
        font-size:18px;
    }

    .footer{
        text-align:center;
        flex-wrap:wrap;
    }
}

/* FOOTER */
.footer{
  background:#4A1825;
  padding:50px 28px 30px;
  margin-top:50px;
  width:100vw;
  margin-left:calc(50% - 50vw);
  text-align:center;
}
.footer-brand{
  font-family:'Libre Baskerville', serif; font-size:1.4rem;
  color:#E7B978; margin-bottom:10px; letter-spacing:0.5px; font-weight:700;
}
.footer-tagline{
  color:rgba(247,244,236,0.6); font-family:'Libre Baskerville', serif; font-style:italic;
  font-size:1.2rem; margin-bottom:24px;
}
.footer-divider{ width:40px; height:2px; background:var(--amber); margin:0 auto 20px; opacity:0.5; }
.footer-copy{ color:rgba(247,244,236,0.5); font-size:0.8rem; }

/* ---------- site-bar ---------- */
.site-bar{
  position:fixed;
  top:20px;
  left:20px;
  z-index:60;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 24px 13px 18px;
  background:rgba(255,255,255,0.2);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid #E7B978;
  border-radius:30px;
  font-size:15px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink-soft);
  transition:.3s;
}
.site-bar img{
  height:64px;
  width:auto;
  display:block;
}
.site-bar:hover{
  color:#4A1825;
  border-color:#4A1825;
  transform:translateY(-2px);
}

.back-home{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:18px;
  font-size:12.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-weight:600;
  font-family:'Space Grotesk', sans-serif;
  color:var(--steel-deep);
  border-bottom:1px solid var(--amber);
  padding-bottom:3px;
  transition:color 0.25s ease, border-color 0.25s ease;
}
.back-home:hover{ color:#E7B978; border-color:#4A1825; }

.back-home{color:#fff !important; text-decoration:none;}