:root{
      --bg: #fff;
      --surface: #ffffff;
      --primary: #e66aa5; /* rosa suave */
      --primary-ink: #ffffff;
      --ink: #1f2937; /* gris oscuro */
      --muted: #6b7280; /* gris medio */
      --ring: rgba(230,106,165,.35);
      --shadow: 0 10px 25px rgba(0,0,0,.06);
      --radius-xl: 1.25rem;
      --radius-lg: .875rem;
    }

    html{scroll-behavior:smooth}
        body{
            margin:0; 
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
            color:var(--ink); 
            background-image: url('../images/fondo2.png'), linear-gradient(180deg,#fff, #fff8fb);
            background-repeat: repeat, no-repeat;
            background-position: top left, center;
            background-size: auto, cover;
        }

    /* Layout */
    .container{
        width:100%; 
        margin-inline:auto; 
        padding: clamp(16px, 4vw, 32px);
    }
    section{
        padding: clamp(32px, 8vw, 80px) 0;
    }

    /* Header / Nav */
    .nav{
      position:sticky; 
      top:0; 
      z-index:50; 
      backdrop-filter:saturate(180%) blur(10px);
      background: rgba(255,255,255,.7); border-bottom:1px solid rgba(0,0,0,.06);
    }
    .nav-inner{
        display:flex; 
        align-items:center; 
        justify-content:space-between; 
        gap:16px;
        padding: 32px;
    }
    .brand{
        font-weight:700; 
        letter-spacing:.2px
    }
    .nav a{
        color:var(--ink); 
        text-decoration:none; 
        font-weight:600; opacity:.8
    }
    .nav a:hover{
        opacity:1
    }
    .nav-links{
        display:flex; 
        gap: clamp(10px, 3vw, 28px); 
        align-items:center
    }

    /* Hero */
    .hero{
        display:flex; 
        flex-direction: column;
        place-items:center; 
        text-align:center; 
        padding: clamp(56px, 16vw, 220px) 0; 
        background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
            url('../images/portada.jpg') center center/cover no-repeat;
        justify-content: center;
    }
    
    .badge{
        display:inline-block; 
        background: #fff; 
        border:1px solid rgba(0,0,0,.08); 
        padding:.4rem .7rem; 
        border-radius:999px; 
        font-size:.9rem; 
        color:var(--muted)
    }
    .title{
        font-size: clamp(2rem, 6vw, 4rem); 
        line-height:1.1; margin:.5rem 0
    }
    .subtitle{
        color:var(--muted); 
        font-size: clamp(1rem, 2.5vw, 1.25rem)
    }

    /* Countdown */
    .countdown{
        display:flex; gap: 
        clamp(10px, 3vw, 24px); 
        justify-content:center; 
        margin-top:clamp(18px,2vw,24px)
    }
    .pill{background: #fff; border: 1px solid rgba(0,0,0,.06); box-shadow: var(--shadow); border-radius: var(--radius-xl); padding: 16px 18px; min-width: 84px}
    .num{font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800}
    .label{font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em}

    /* Cards */
    .card{background:var(--surface); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius-xl); box-shadow:var(--shadow); padding: clamp(18px, 3.5vw, 28px)}

    /* Dónde (mapa) */
    .map-wrap{position:relative; border-radius: var(--radius-xl); overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06);}
    .map-aspect{aspect-ratio: 16/9; width:100%}

    /* Planning tabla */
    .table{width:100%; border-collapse: collapse; overflow:hidden; border-radius: var(--radius-xl);}
    .table thead{background:#fff0f6}
    .table th, .table td{padding: clamp(10px, 2.4vw, 16px); text-align:left}
    .table th{font-size:.9rem; color:#5b5b5b; text-transform:uppercase; letter-spacing:.08em}
    .table tbody tr{border-top:1px solid rgba(0,0,0,.06)}
    .day{font-weight:700}

    /* RSVP */
    .form{display:grid; gap:12px}
    .field{display:grid; gap:6px}
    label{font-weight:600; font-size:.95rem}
    input, select, textarea{
      padding:14px 14px; border:1px solid rgba(0,0,0,.12); border-radius: var(--radius-lg); font:inherit; background:#fff;
    }
    input:focus, select:focus, textarea:focus{outline:2px solid var(--ring); border-color: var(--primary)}
    .cta{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 18px; border-radius:999px; border:0; background:var(--primary); color:var(--primary-ink); font-weight:800; cursor:pointer}
    .cta:hover{filter:brightness(.95)}

    /* Footer */
    footer{padding: 40px 0; color:var(--muted); text-align:center}

    /* Reveal on scroll */
    .reveal{opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease}
    .reveal.in{opacity:1; transform:none}

    /* Small helpers */
    .center{display:grid; gap:18px}
    .section{
        padding: 0 25%;
    }
    .section:not(:first-child) .section-inner {
        width: 60vw;
        max-width: 900px;
        margin: 0 auto;
        background: rgba(255,255,255,0.9);
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        padding: 48px 32px;
        display: grid;
        gap: 24px; /* gap between title and inner content */
    }
    .section-floral {
        background: url('../images/floral-bg.png') center center/cover repeat;
    }
    .donde-flex {
        display: flex;
        gap: 32px;
        align-items: stretch;
    }
    .donde-mapa, .donde-texto {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .donde-mapa {
        min-width: 0;
    }
    .donde-texto {
        padding-left: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    @media (max-width: 900px) {
        .section:not(:first-child) .section-inner { width: 95vw; }
        .donde-flex { flex-direction: column; gap: 18px; }
        .donde-texto { padding-left: 0; }
        .donde-grid { display: block; }
    }
    .donde-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center}
    .donde-mapa{ min-width:0}
    .donde-texto{ padding-left: 0 }
    /* Concepto: grid con texto a la izquierda e imagen a la derecha */
    .concepto-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        align-items: center;
    }
    .concepto-text {
        padding-right: 8px;
    }
    .concepto-imagen img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    @media (max-width: 900px) {
        .concepto-grid { grid-template-columns: 1fr; }
        .concepto-text { padding-right: 0; }
    }
    /* Section title styling (replaces h2) */
    .section-title{
        font-size: clamp(1.3rem, 2.8vw, 1.8rem);
        font-weight:700;
        color:var(--ink);
        margin:0;
    }
    .section-subtitle{
        font-size: clamp(1rem, 2.2vw, 1.1rem);
        font-weight:600;
        color:var(--muted);
        margin-bottom:8px;
    }
    /* gap between sections */
    .section{ margin-bottom: 40px }

/* Form validation styles */
.field.error input,
.field.error select,
.field.error textarea{
    border-color: #ef4444; /* red-500 */
    box-shadow: 0 0 0 3px rgba(239,68,68,0.08);
}
.error-message{
    color: #b91c1c; /* red-700 */
    font-size: .9rem;
    margin-top: 6px;
}

    /* Thank you title using Meow Script */
    .thankyou-title{
        font-family: 'Meow Script', cursive;
        font-size: clamp(1.6rem, 4vw, 2.2rem);
        margin: 0;
    }

    .section#concepto{
        margin-top: 40px;
    }

    .asistencia-detalles{
        display: grid;
        gap: 12px;
    }