:root{
  --bg: #fffdfb;
  --paper: #ffffff;
  --ink: #2d2a26;
  --muted: #6e655e;
  --primary: #c08a64;   /* terracota suave */
  --primary-2:#e5c7b3;  /* arena */
  --accent: #7aa39a;    /* verde salvia */
  --accent-2:#dfe8e5;
  --ring: rgba(192,138,100,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.55;
}

/* Containers & sections */
.container{max-width:1100px; margin:0 auto;}
.section{padding:72px 0}
.section.alt{background: linear-gradient(180deg, #fff 0, #fff 40%, #fff7f1 100%)}
.lead{color:var(--muted); max-width:65ch}

/* ======= HERO (slider inicial) ======= */
.hero{position:relative; min-height:80vh; display:grid; place-items:center; text-align:center; overflow:hidden}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(10%) contrast(105%) brightness(95%);
  transform: scale(1.03);
}
.hero .overlay{position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.25) 100%);
}
.hero-content{position:relative; color:#fff}
.pretitle{letter-spacing:.25em; text-transform:uppercase; opacity:.95}
.hero h1{
  font-family:"Playfair Display", serif; font-weight:700; font-size:clamp(40px,7vw,84px);
  margin:.25rem 0 .5rem;
}
.hero h1 span{color:var(--primary)}
.hero .date{font-weight:500; opacity:.95}

.countdown{display:flex; gap:1rem; align-items:center; justify-content:center; margin:1.25rem 0 2rem}
.countdown div{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); border-radius:14px; padding:.6rem .8rem; min-width:84px}
.countdown strong{display:block; font-size:clamp(20px,4vw,30px)}
.countdown span{font-size:.85rem; opacity:.9}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:14px; text-decoration:none; cursor:pointer; user-select:none; transition:.2s transform}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary); color:#fff; box-shadow:var(--shadow)}
.btn-primary:focus{outline:2px solid var(--ring); outline-offset:2px}

/* Cards & grids */
.cards{display:grid; gap:1rem; margin-top:1.25rem}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:var(--paper); border:1px solid #efe9e4; border-radius:18px; padding:1.1rem 1.1rem 1.2rem;
  box-shadow:var(--shadow);
}
.card h3{font-family:"Playfair Display", serif; margin:.2rem 0 .5rem}
.card.link{text-align:center}
.card.link img{height:42px; object-fit:contain; filter:saturate(0.85)}
.actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem}
.chip{display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .7rem; background:#f7efe8; color:#5a4a41; border-radius:999px; text-decoration:none; border:1px solid #edd9cc}
.chip.neutral{background:#eef3f1; color:#3d4a47; border-color:#d9e6e1}

/* Info box */
.info-box{
  margin-top:1rem; background:linear-gradient(180deg,#fff, #fff7f1); border:1px dashed #e9d7c8;
  border-radius:16px; padding:1rem 1.25rem; color:#5a4a41
}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem; margin-top:1rem}
.gallery img{width:100%; height:260px; object-fit:cover; border-radius:16px; box-shadow:var(--shadow)}

/* FAQ */
.faq{background:var(--paper); border:1px solid #eee2d9; border-radius:14px; padding:.9rem 1rem; margin:.5rem 0}
.faq summary{cursor:pointer; font-weight:600}
.faq[open]{border-color:#e0d0c3}

/* RSVP form */
.rsvp{background:
  radial-gradient(1200px 300px at 50% -100px, #ffeede 0, rgba(255,255,255,0) 70%), #fffefc}
.form{max-width:820px; margin:1rem auto}
.form .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.form label{display:flex; flex-direction:column; gap:.35rem}
.form label.full{grid-column:1 / -1}
.form input:not([type="radio"]):not([type="checkbox"]),
.form select,
.form textarea{
  appearance:none; border:1px solid #e6ddd6; border-radius:12px;
  padding:.7rem .8rem; font:inherit; background:#fff;
}
.form input:not([type="radio"]):not([type="checkbox"]):focus,
.form select:focus,
.form textarea:focus{
  outline:2px solid var(--ring); border-color:#e6c5b1;
}
.form .checks{display:flex; gap:1rem; flex-wrap:wrap}
.form-actions{display:flex; align-items:center; gap:1rem; margin-top:.6rem}
.form-note{color:var(--muted); font-size:.9rem}
.alert{margin-top:.6rem; padding:.6rem .8rem; border-radius:12px; background:#eef8f2; color:#214636; border:1px solid #cfe8db}

/* Footer */
.footer{padding:40px 0; background:#faf7f4; border-top:1px solid #efe9e4; color:#4a3f37}
.footnav{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.4rem}
.footnav a{text-decoration:none; color:#4a3f37; border-bottom:1px dotted #d3c3b7}

/* Decorative petals */
.bg-ornaments{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:-1}
.petal{
  position:absolute; width:18px; height:18px; background:var(--primary-2);
  border-radius:12px 12px 2px 12px / 12px 12px 2px 12px; opacity:.5; animation:float 12s linear infinite;
}
.p1{top:10%; left:5%}
.p2{top:35%; right:10%; animation-duration:15s}
.p3{bottom:20%; left:15%; animation-duration:18s}
.p4{bottom:5%; right:25%; animation-duration:20s}
@keyframes float{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-20px) rotate(20deg)}
  100%{transform:translateY(0) rotate(0)}
}

/* Reveal animations */
.fade-up{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.fade-up.in{opacity:1; transform:none}

/* Headings */
h2{
  font-family:"Playfair Display", serif; font-weight:700; font-size:clamp(26px,3.4vw,36px);
  margin:0 0 .35rem; letter-spacing:.2px
}

/* ===== Padding general solo en .container ===== */
@media (max-width: 768px){
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* El hero se mantiene edge-to-edge */
  .hero .container{
    padding-left: 0;
    padding-right: 0;
  }
}

/* ===== Timeline ===== */
.timeline{
  --line: #e9d7c8;
  --dot:  var(--primary);
  list-style:none; padding:24px 0 0; margin:18px 0 0;
  display:grid; gap:1.25rem;
  position:relative;
}
.timeline::before{
  content:""; position:absolute; left:30px; top:0; bottom:0;
  width:2px; background:linear-gradient(180deg,var(--line),transparent 96%);
}
.t-item{
  display:grid; grid-template-columns:60px 1fr; gap:.75rem; align-items:start; 
  position:relative;
}
.t-time{
  font-weight:600; color:#5a4a41; background:#fff; border:1px solid #efe9e4;
  border-radius:12px; padding:.35rem .55rem; text-align:center; width:max-content;
  z-index:2; position:relative;
}
.t-card{padding:1rem}
.t-title{font-family:"Playfair Display",serif; margin:.1rem 0 .35rem}
.t-place{font-weight:600; margin:0 0 .1rem}
.t-addr{color:var(--muted); margin:0}
.t-dot{
  position:absolute; left:22px; width:16px; height:16px; border-radius:50%;
  background:var(--dot); box-shadow:0 0 0 6px rgba(192,138,100,.18);
  transform:translateY(14px);
  z-index:1;
}
@media (min-width: 960px){
  .timeline{
    grid-template-columns:repeat(3,1fr); gap:1.5rem 1.25rem; padding-top:30px;
  }
  .timeline::before{
    left:auto; right:auto; top:52px; height:2px; width:100%;
    background:linear-gradient(90deg,var(--line),transparent 96%);
  }
  .t-item{
    grid-template-columns:1fr; gap:.6rem; padding-top:36px;
  }
  .t-item .t-dot{
    top:40px; left:calc(50% - 8px); transform:none;
  }
  .t-time{
    margin:0 auto; display:block;
  }
  .t-card{
    text-align:center;
  }
}
@media (max-width:720px){
  .form .grid{grid-template-columns:1fr}
  .countdown{gap:.6rem}
}


/* === Registries link card polish === */
#registries .card.link{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease;
}
#registries .card.link h3{
  font-family:"Playfair Display", serif;
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.2px;
  margin:.35rem 0 .25rem;
}
#registries .card.link p{
  color:var(--muted);
  font-size:.92rem;
  margin:0;
}
#registries .card.link img{
  margin-bottom:.25rem;
  opacity:.98;
}
#registries .card.link:hover,
#registries .card.link:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--shadow), 0 6px 18px rgba(0,0,0,.06);
}
#registries .card.link:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:3px;
  border-color:var(--ring);
}

/* Reduce motion for users that prefer less animation */
@media (prefers-reduced-motion: reduce){
  #registries .card.link{ transition:none }
}

/* Radios nativos bonitos */
input[type="radio"]{
  /* Usa el color de marca para el dot y el aro */
  accent-color: var(--brand, #C8A385);
  width: 22px;
  height: 22px;
  vertical-align: -3px;
}

/* Mejora de accesibilidad/estado */
input[type="radio"]:focus-visible{
  outline: 2px solid var(--brand, #C8A385);
  outline-offset: 2px;
}

/* Opcional: pastillitas “Sí / No” más claras cuando están activas */
label.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px;
  padding: 10px 14px;
  border: 1.5px solid #e8ded7;
  border-radius: 14px;
  user-select: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
label.radio-pill:hover{ border-color:#dbcfc7; }

/* Si quieres que la pastilla se vea “activa” cuando está checada */
label.radio-pill input[type="radio"]:checked ~ .txt{
  font-weight: 600;
}
label.radio-pill input[type="radio"]:checked ~ .box{
  box-shadow: inset 0 0 0 1.5px var(--brand, #C8A385);
}