/* ==========================================================
   Invitación Yoli & Tony · Estilos
   ========================================================== */

/* Tan Pearl (solo existe en peso Regular) */
@font-face{
  font-family:"Tan Pearl";
  src:url('../assets/fonts/tan-pearl.woff') format('woff'),
      url('../assets/fonts/tan-pearl.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme: light;
  --wine:#650029; --olive:#6B6504; --coral:#F47970; --lilac:#A98BC0; --lime:#C3CD39;
  --cream:#F7F3E9; --ink:#2B1710; --line:rgba(101,0,41,.18); --pink:#E65C84; --gold:#B8862E;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif;-webkit-text-size-adjust:100%;}
.site{max-width:420px;margin:0 auto;overflow-x:hidden;}
section{padding:56px 26px;position:relative;}
.eyebrow{display:block;font:500 10px "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.75;text-align:center;}
h2{font-family:"Italiana",serif;font-weight:400;font-size:30px;color:var(--wine);text-align:center;line-height:1.25;margin:10px 0 16px;}
.floral{position:absolute;width:64px;height:64px;border-radius:50%;opacity:.28;background:radial-gradient(circle at 30% 30%,var(--coral),var(--lilac) 70%);pointer-events:none;}

/* HERO */
.hero{padding:0;display:flex;flex-direction:column;}
.hero-photo{min-height:400px;background-image:url('../assets/img/hero.jpg');background-size:cover;background-position:center 30%;position:relative;}
.hero-photo .floral{background:radial-gradient(circle at 30% 30%,var(--lime),var(--coral) 70%);top:-18px;right:-18px;}
.hero-content{padding:30px 26px 40px;text-align:center;}
.hero h1{margin:6px 0;font-family:"Parisienne",cursive;font-weight:400;font-size:64px;color:var(--gold);line-height:1;}
.hero h1 span{color:var(--gold);}
.hero-date{margin:10px 0 22px;font:500 20px "DM Mono",monospace;letter-spacing:.16em;}
.sound{border:1px solid var(--wine);background:transparent;color:var(--wine);padding:9px 18px;border-radius:20px;font:500 9px "DM Mono",monospace;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;}

/* INTRO */
.intro p{font-size:14px;line-height:1.7;max-width:280px;margin:0 auto;text-align:center;}
.monogram{display:block;margin-top:22px;text-align:center;font-family:"Parisienne",cursive;font-size:32px;color:var(--olive);}
.seal-img{display:block;margin:24px auto 0;width:92px;opacity:.92;}
.parents-photo{padding:0;margin-top:18px;}
.parents-photo img{display:block;width:100%;height:auto;}

/* DATE BLOCK */
.date-block{background:var(--cream);color:var(--ink);padding:0 26px;}
.date-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.date-row strong{font-family:"Italiana",serif;font-size:52px;font-weight:400;line-height:1;color:var(--wine);}
.date-row span{font:500 clamp(14px,4.9vw,20px)/1.3 "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--wine);text-align:center;}

/* COUNTDOWN */
.clock{display:flex;justify-content:center;gap:16px;}
.clock div{display:flex;flex-direction:column;align-items:center;}
.clock b{font-family:"Italiana",serif;font-size:30px;color:var(--ink);}
.clock span{margin-top:4px;font:500 8px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.65;}

/* EVENT / PLACE */
.event{background:#efe7db;}
.photo-cut{height:200px;margin:-56px -26px 26px;background:linear-gradient(160deg,#cbb99f,#a98a68 60%,#7c5f45);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:rgba(255,255,255,.85);font:500 9px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;}
.place{margin-top:22px;padding:22px 0;text-align:center;border-top:1px solid var(--line);}
.icon{color:var(--wine);font:400 26px "Italiana",serif;}
.place h3{margin:8px 0;font:400 16px "Tan Pearl","Italiana",serif;letter-spacing:.02em;}
.place small{display:block;font:400 12px/1.5 "Tan Pearl","Italiana",serif;opacity:.8;}
.outline-btn{display:inline-block;margin-top:13px;padding:9px 16px;border:1px solid var(--wine);border-radius:2px;color:var(--wine);text-decoration:none;font:500 9px "DM Mono",monospace;letter-spacing:.09em;text-transform:uppercase;}

/* TIMELINE */
.timeline{background:#8B8E76;padding:34px 26px;}
.timeline .eyebrow{color:#F2D5A9;}
.timeline h2{color:var(--cream);}
.itinerary-list{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:8px;}
.itinerary-item{display:flex;flex-direction:column;align-items:center;gap:4px;}
.itinerary-item img{width:34px;height:34px;object-fit:contain;background:var(--cream);border-radius:50%;padding:2px;}
.itinerary-item span{font-family:"Italiana",serif;font-weight:400;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);}

/* DRESS CODE */
.dress{text-align:center;}
.dress .floral{right:-24px;top:6px;}
.intro-branch{position:absolute;top:-10px;left:-14px;width:110px;transform:rotate(90deg);opacity:.92;pointer-events:none;z-index:1;}
.timeline-ferris{position:absolute;bottom:10px;left:-14px;top:auto;right:auto;width:96px;opacity:.5;pointer-events:none;z-index:1;}
.pet-maki{position:absolute;width:42px;opacity:.8;pointer-events:none;z-index:1;}
.pet-benito{position:absolute;width:68px;opacity:.8;pointer-events:none;z-index:1;}
.final-heart{display:block;width:44px;margin:0 auto 6px;transform:rotate(-6deg);}
.dress-icon{display:block;margin:26px auto 16px;width:90px;height:auto;}
.dress .dress-title{font-family:"Italiana",serif;font-size:19px;font-weight:700;color:#6B4423;margin:0 auto;}
.dress p{max-width:250px;margin:0 auto;font-family:"Lora",serif;font-style:italic;font-size:14px;line-height:1.7;}
.dress .dress-note{margin-top:14px;}

/* RSVP (final version) */
.rsvp{background:var(--wine);color:var(--cream);padding:56px 26px 48px;text-align:center;}
.rsvp h2{color:var(--cream);font-size:44px;margin:10px 0 16px;}
.rsvp > p.lead{margin:0 auto;max-width:260px;font-size:14px;line-height:1.6;opacity:.92;}
.card{margin-top:30px;padding:24px 20px;background:var(--cream);color:var(--ink);border-radius:4px;text-align:left;box-shadow:0 18px 40px rgba(59,0,16,.25);}
.card label{display:block;margin:0 0 6px;font:500 9px "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--wine);}
.card input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:9px 2px;background:transparent;font:15px "DM Sans",sans-serif;color:var(--ink);}
.card input:focus{outline:0;border-bottom-color:var(--wine);}
.hint{margin-top:16px;font-size:10.5px;line-height:1.5;color:var(--wine);opacity:.6;font-style:italic;}
.btn-solid{width:100%;margin-top:20px;padding:14px;border:0;border-radius:2px;background:var(--olive);color:var(--cream);font:500 10px "DM Mono",monospace;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;}
.btn-solid:active{opacity:.85;}
.btn-outline{width:100%;padding:13px;border:1px solid var(--wine);border-radius:2px;background:transparent;color:var(--wine);font:500 10px "DM Mono",monospace;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;}
.btn-text{display:block;margin:16px auto 0;background:none;border:0;color:var(--wine);opacity:.65;font:500 10px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;}
.found-head{text-align:center;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line);}
.found-head .fam{font-family:"Italiana",serif;font-size:24px;color:#000;font-weight:700;margin:4px 0;}
.found-head .seats{font-size:12px;opacity:.75;}
.choice-row{display:flex;gap:10px;margin-top:6px;}
.choice-row button{flex:1;padding:14px 6px;margin-top:0;}
.attendees-box{margin-top:6px;}
.attendee-row{display:flex;align-items:center;gap:18px;padding:12px 4px;border-bottom:1px solid var(--line);}
.attendee-row:first-child{border-top:1px solid var(--line);}
.attendee-row input[type="checkbox"]{width:19px;height:19px;flex:none;accent-color:var(--wine);}
.attendee-row span{font-size:14px;}
.seats-note{margin-top:10px;font-size:11px;opacity:.65;}
.note{margin:20px auto 0;max-width:280px;font-size:11px;line-height:1.6;opacity:.82;}
.screen{display:none;}
.screen.active{display:block;}

/* GIFTS */
.gifts{text-align:center;}
.gift-list{display:flex;flex-direction:column;gap:12px;margin-top:26px;text-align:left;}
.gift-card{padding:18px 18px;border:1px solid var(--line);border-radius:4px;background:transparent;}
.gift-card b{display:block;font:400 22px "Italiana",serif;color:var(--wine);}
.gift-card small{display:block;margin-top:4px;font-size:12px;opacity:.75;line-height:1.5;}
.gift-card .clabe{margin-top:8px;font:600 13px "DM Mono",monospace;letter-spacing:.03em;color:var(--ink);}
.gift-btn{display:inline-block;margin-top:14px;padding:10px 16px;border-radius:2px;background:var(--wine);color:#fff;text-decoration:none;border:0;font:500 9px "DM Mono",monospace;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;}

/* DEDICATORIAS */
.letter{padding:0;}
.letter .photo-cut{margin:0;height:260px;}
.letter .note-paper{padding:40px 28px 36px;background:#f0e2d4;text-align:center;}
.letter .rule{width:40px;height:1px;background:var(--line);margin:14px auto;}
.letter p{font-family:"Lora",serif;font-size:14px;line-height:1.7;font-style:italic!important;font-weight:400;margin:14px 0 0;}
.letter .eyebrow{opacity:.55;}
.letter .signature{margin-top:20px;font-family:"Parisienne",cursive;font-size:44px;color:var(--wine);}

/* CIERRE */
.final{position:relative;min-height:380px;padding-bottom:40px;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#fff;background:linear-gradient(135deg,rgba(30,15,10,.62),rgba(30,15,10,.42)),url('../assets/img/final-fondo.jpg');background-size:cover;background-position:center;}
.final .eyebrow{color:#fff;opacity:.9;font-family:"Mrs Saint Delafield",cursive;font-size:26px;letter-spacing:.02em;text-transform:none;}
.final h2{font-size:52px;color:var(--cream);}
.final p{margin:16px auto;max-width:270px;font-size:22px;line-height:1.5;font-family:"Mrs Saint Delafield",cursive;}
.final .date{font:500 11px "DM Mono",monospace;letter-spacing:.18em;}
.credit-link{position:static;display:block;width:140px;margin:44px auto 0;opacity:.9;transition:opacity .2s;}
.credit-link:hover{opacity:1;}
.credit-logo{display:block;width:100%;height:auto;}

dialog{width:min(88%,380px);padding:0;border:0;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.35);}
dialog::backdrop{background:rgba(33,17,15,.62);}
.modal{padding:34px 26px;text-align:center;background:var(--cream);color:var(--ink);}
.modal h3{font:400 32px/1.1 "Italiana",serif;color:var(--wine);margin:6px 0 12px;}
.modal p{margin:0 0 22px;font-size:14px;line-height:1.6;}
.modal button{border:0;padding:11px 22px;border-radius:2px;color:#fff;background:var(--wine);font:500 10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;}

/* RSVP · Firebase: lugares libres, estados de carga y cierre */
.attendee-row.libre{flex-wrap:wrap;row-gap:8px;}
.attendee-row.libre .libre-input{flex:1 1 160px;width:auto;min-width:0;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:6px 2px;background:transparent;font:500 14px "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--wine);}
.attendee-row.libre .libre-input::placeholder{font-size:11px;color:var(--wine);opacity:.45;}
.attendee-row.libre .libre-input:focus{outline:0;border-bottom-color:var(--wine);}
.attendee-row.libre .libre-input.invalido{border-bottom-color:#c0392b;}
.seats-note.error{color:#a32020;opacity:1;}
.closed-note{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--wine);text-align:center;}
.btn-solid:disabled,.btn-outline:disabled{opacity:.6;cursor:wait;}
.card input:focus-visible,.btn-solid:focus-visible,.btn-outline:focus-visible,.btn-text:focus-visible,.modal button:focus-visible{outline:2px solid var(--wine);outline-offset:2px;}
/* La regla ".card label" (display:block) anulaba el flex de las filas de asistentes */
.card label.attendee-row{display:flex;margin:0;}

/* EFECTOS DE SCROLL · "Combinación" (js/efectos.js)
   Los títulos solo se ocultan si el efecto cargó (clase .fx en <html>). */
html.fx .fx-titulo{opacity:0;filter:blur(6px);transform:scale(.985);transition:opacity .9s ease,filter .9s ease,transform .9s ease;}
html.fx .fx-titulo.fx-visible{opacity:1;filter:none;transform:none;}
html.fx .hero h1.fx-titulo{transition-delay:.2s;}
.fx-marco{position:relative;overflow:hidden;}
.fx-capa{position:absolute;left:0;right:0;top:-14%;bottom:-14%;background-size:cover;background-repeat:no-repeat;will-change:transform;pointer-events:none;}
.fx-img{transform:scale(1.18);will-change:transform;}
@media (prefers-reduced-motion:reduce){
  html.fx .fx-titulo{opacity:1;filter:none;transform:none;transition:none;}
  .fx-capa,.fx-img{transform:none!important;}
}