/* ===========================================================
   Temporada XV años 2027 — Hernán Copello
   Sistema de diseño "Musgo" (docs/sistema-de-diseno.md). Los
   componentes de abajo solo usan estos tokens: ningún color ni
   tipografía fija. Cambiar de sistema = cambiar valores de :root.
   =========================================================== */
:root {
  --bg:#1E251F; --text:#E9E5DA; --text-soft:rgba(233,229,218,.74); --title:#F2EEE5;
  --accent:#B3BE9F; --line:rgba(233,229,218,.13);
  --box-bg:#273027; --box-text:#E9E5DA; --box-soft:rgba(233,229,218,.72); --box-accent:#B3BE9F; --box-line:rgba(233,229,218,.12);
  --btn-bg:#B3BE9F; --btn-text:#1E251F;
  --input-bg:rgba(255,255,255,.04); --input-line:rgba(179,190,159,.55); --input-text:#E9E5DA;
  --on-photo:#F6F2EA;
  --f-display:'Newsreader', Georgia, serif; --f-body:'Work Sans', system-ui, sans-serif;
  --display-weight:400; --display-tracking:-.015em; --body-weight:300;
  --h1-size:clamp(3.2rem,10vw,6.4rem); --h2-size:clamp(2.1rem,5vw,3.1rem); --h3-size:clamp(1.6rem,3.5vw,2.2rem); --price-size:3.1rem;
  --kicker-size:.68rem; --kicker-tracking:.2em; --kicker-weight:500;
  --radius:4px; --img-radius:2px; --btn-radius:2px; --btn-tracking:.18em; --btn-size:.68rem;
  --foto-espera:linear-gradient(160deg,#4a5446,#262d26);
}

* { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { font-family:var(--f-body); font-weight:var(--body-weight); background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
/* Fotos sin arrastrar ni menú de "guardar" al mantener apretado en iPhone
   (el click derecho lo frena xv2027.js) */
.foto img { -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.display { font-family:var(--f-display); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); }
.kicker { text-transform:uppercase; letter-spacing:var(--kicker-tracking); font-size:var(--kicker-size); font-weight:var(--kicker-weight); color:var(--accent); }
.btn { display:inline-block; border:1px solid var(--btn-bg); background:var(--btn-bg); color:var(--btn-text); text-decoration:none; padding:.9rem 1.9rem; text-transform:uppercase; letter-spacing:var(--btn-tracking); font-size:var(--btn-size); font-weight:500; border-radius:var(--btn-radius); cursor:pointer; font-family:var(--f-body); transition:opacity .25s; }
.btn:hover { opacity:.85; }
.btn-linea { background:transparent; color:var(--box-text); border-color:var(--box-line); }

/* ---------- Fotos ----------
   El fondo es el tono de espera: si una foto falta o no carga, xv2027.js
   oculta el <img> y queda este tono en vez del ícono de imagen rota. */
.foto { position:relative; overflow:hidden; border-radius:var(--img-radius); background:var(--foto-espera); }
.foto img { width:100%; height:100%; object-fit:cover; }

/* ---------- HERO (el texto va siempre sobre foto) ---------- */
.hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; color:var(--on-photo); }
.hero .foto { position:absolute; inset:0; border-radius:0; }
.hero .foto::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(14,18,14,.9) 0%, rgba(14,18,14,.38) 45%, rgba(14,18,14,.08) 100%); }
.hero-txt { position:relative; z-index:2; padding:0 clamp(1.5rem,6vw,5rem) clamp(3rem,9vh,6rem); max-width:820px; }
.hero .kicker { color:rgba(246,242,234,.85); }
.hero h1 { font-size:var(--h1-size); line-height:.95; margin-top:1rem; }
.hero h1 em { display:block; font-style:italic; font-weight:300; font-size:.5em; margin-top:.6rem; opacity:.92; letter-spacing:0; }

/* ---------- CUERPO: momentos + caja de reserva ----------
   Celular: momentos → caja (justo antes del formulario).
   Compu: momentos a la izquierda, caja fija a la derecha. */
.cuerpo { max-width:1240px; margin:0 auto; padding:2.5rem 1.25rem 3rem; display:grid; gap:3rem; grid-template-columns:1fr; grid-template-areas:"mom" "box"; }
@media (min-width:900px) {
  .cuerpo { grid-template-columns:minmax(0,1fr) 360px; grid-template-areas:"mom box"; column-gap:3.5rem; align-items:start; padding:6.5rem 2rem 4rem; }
  .caja { position:sticky; top:1.5rem; }
}
.momentos { grid-area:mom; }
.sec-head { margin-bottom:3.2rem; }
.sec-head h2 { font-size:var(--h2-size); line-height:1.05; color:var(--title); margin-top:.7rem; }
.acto { margin-bottom:3.5rem; }
.acto-titulo { font-family:var(--f-display); font-style:italic; font-size:1.6rem; color:var(--accent); display:flex; align-items:center; gap:1.1rem; margin-bottom:2.2rem; }
.acto-titulo::after { content:""; flex:1; height:1px; background:var(--line); }
/* Las fotos son 3:2 (formato de cámara): el recuadro usa la misma
   proporción para mostrarlas enteras, sin recorte. Las ilustraciones van
   cuadradas en celular para que el celular dibujado tenga buen tamaño. */
.item { display:grid; grid-template-columns:1fr; gap:1.3rem; align-items:center; margin-bottom:3rem; }
.item .foto { aspect-ratio:3/2; }
.item .ilustracion { aspect-ratio:1/1; }
@media (min-width:780px) {
  .item { grid-template-columns:1.15fr 1fr; gap:2.4rem; }
  .item:nth-of-type(even) .foto { order:2; }
  .item .ilustracion { aspect-ratio:3/2; }
}
.item h3 { font-size:var(--h3-size); line-height:1.1; color:var(--title); margin-bottom:.6rem; }
/* Solo la columna de texto: los <p> de adentro de las ilustraciones tienen
   sus propios colores y no deben heredar estos. */
.item > div p { line-height:1.8; color:var(--text-soft); max-width:380px; }

/* Ilustraciones de lo digital (invitación web y álbum de invitados): un
   celular esquemático en vez de foto. Los textos de adentro usan unidades
   cqh para escalar con el tamaño del celular. Cuando el álbum esté
   desarrollado, su grilla se reemplaza por una captura real. */
.ilustracion { background:var(--box-bg); display:flex; align-items:center; justify-content:center; }
.cel { height:84%; aspect-ratio:9/18.5; border:2px solid rgba(179,190,159,.55); border-radius:22px; padding:12% 6% 6%; background:var(--bg); display:flex; flex-direction:column; container-type:size; }
.cel-titulo { font-size:.55rem; color:var(--box-soft); margin-bottom:.55rem; text-align:center; letter-spacing:.04em; }

.cel-invitacion { background:#F2EEE5; color:#1E251F; padding:8% 8% 9%; align-items:center; text-align:center; }
.cel-url { font-size:3.1cqh; color:#4A5446; background:rgba(30,37,31,.07); border-radius:999px; padding:.45em 1.1em; letter-spacing:.02em; }
.inv { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.inv-kicker { font-family:var(--f-display); font-style:italic; font-size:5cqh; color:#4A5446; }
.inv-nombre { font-family:var(--f-display); font-size:21cqh; line-height:.95; letter-spacing:-.02em; margin:1cqh 0 .5cqh; }
.inv-sub { font-family:var(--f-display); font-style:italic; font-size:7.5cqh; }
.inv-fecha { font-size:3.4cqh; letter-spacing:.25em; border-top:1px solid rgba(30,37,31,.2); padding-top:2.2cqh; margin-top:3cqh; }
.inv-btn { margin-top:4cqh; font-size:3.1cqh; background:#3E4A35; color:#F2EEE5; border-radius:999px; padding:.75em 1.2em; letter-spacing:.02em; white-space:nowrap; }
.cel .grilla { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.cel .grilla i { aspect-ratio:1; border-radius:2px; background:linear-gradient(160deg,#8a7a68,#4a4037); }
.cel .grilla i:nth-child(4n+2) { background:linear-gradient(200deg,#7d7466,#3f3a33); }
.cel .grilla i:nth-child(4n+3) { background:linear-gradient(140deg,#9a8b78,#5a4e43); }
.cel .grilla i:nth-child(4n) { background:linear-gradient(120deg,#857565,#443a32); }

.caja { grid-area:box; background:var(--box-bg); color:var(--box-text); border:1px solid var(--box-line); border-radius:var(--radius); padding:2rem 1.8rem; }
.caja .kicker { color:var(--box-accent); }
.caja .precio { font-size:var(--price-size); line-height:1; margin:.9rem 0 .35rem; }
.caja .cuotas { font-size:.88rem; color:var(--box-soft); }
.caja .congela { font-size:.8rem; color:var(--box-accent); margin:.8rem 0 1.4rem; }
.caja .incluye { list-style:none; border-top:1px solid var(--box-line); padding-top:1.1rem; margin-bottom:1.6rem; }
.caja .incluye li { font-size:.84rem; line-height:1.5; padding:.3rem 0 .3rem 1.5rem; position:relative; }
.caja .incluye li::before { content:"✓"; position:absolute; left:0; color:var(--box-accent); font-size:.8rem; }
.caja h3 { font-size:var(--kicker-size); letter-spacing:var(--kicker-tracking); text-transform:uppercase; color:var(--box-accent); margin-bottom:.8rem; font-weight:var(--kicker-weight); }
.caja .cupos { font-size:var(--kicker-size); letter-spacing:var(--kicker-tracking); text-transform:uppercase; color:var(--box-soft); margin-top:1.3rem; text-align:center; }

/* ---------- Buscador de fecha (dentro de la caja) ---------- */
.buscador-form { display:flex; gap:.6rem; flex-wrap:wrap; }
.buscador-form input { font-family:var(--f-body); font-size:.95rem; color:var(--input-text); background:var(--input-bg); border:1px solid var(--input-line); border-radius:var(--radius); padding:.8rem .9rem; color-scheme:dark; min-width:0; flex:1 1 170px; }
.buscador-resultado { margin-top:.9rem; min-height:1.4em; }
.resultado-titulo { font-family:var(--f-display); font-weight:var(--display-weight); font-size:1.4rem; margin-bottom:.45rem; }
.buscador-resultado .btn { padding:.8rem 1.6rem; }

/* ---------- Barra fija de celular ----------
   Aparece mientras se recorren los momentos (no en el hero, la caja ni el
   formulario, que ya muestran lo mismo). Ver xv2027.js. */
.barra { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.1rem calc(.85rem + env(safe-area-inset-bottom)); background:var(--box-bg); color:var(--box-text); border-top:1px solid var(--box-line); box-shadow:0 -6px 20px rgba(0,0,0,.18); transform:translateY(110%); transition:transform .35s ease; }
.barra.visible { transform:none; }
.barra-precio { font-size:1.5rem; line-height:1; }
.barra-precio small { display:block; font-family:var(--f-body); font-size:.66rem; letter-spacing:.06em; color:var(--box-accent); margin-top:.3rem; }
.barra .btn { padding:.8rem 1.3rem; }
@media (min-width:900px) { .barra { display:none; } }

/* ---------- RESERVA ---------- */
.reserva { padding:4.5rem 1.5rem 5rem; text-align:center; border-top:1px solid var(--line); }
.reserva h2 { font-size:var(--h2-size); line-height:1.05; color:var(--title); margin-bottom:.6rem; }
.reserva-cupos { margin:1rem 0 .9rem; }
.reserva-sub { color:var(--text-soft); margin-bottom:2.2rem; }

/* Panel de admin del contador — solo existe con ?admin=1 (lo arma xv2027.js) */
.admin-panel { max-width:300px; margin:1rem auto 0; padding:1.1rem 1.4rem; border:1px dashed var(--input-line); border-radius:var(--radius); }
.admin-label { text-transform:uppercase; letter-spacing:var(--kicker-tracking); font-size:var(--kicker-size); color:var(--text-soft); margin-bottom:.8rem; }
.admin-clave { display:block; width:100%; max-width:220px; margin:0 auto 1rem; padding:.7rem .8rem; font:inherit; text-align:center; color:var(--input-text); background:var(--input-bg); border:1px solid var(--input-line); border-radius:var(--btn-radius); color-scheme:dark; }
.admin-clave:-webkit-autofill { -webkit-text-fill-color:var(--input-text); -webkit-box-shadow:0 0 0 1000px var(--box-bg) inset; }
.admin-botones { display:flex; gap:.8rem; justify-content:center; }
.admin-botones .btn { min-width:70px; }
.admin-aviso { margin-top:.8rem; font-size:.8rem; color:#e0a598; }
.reserva-sub a { color:var(--accent); }
.reserva-form { max-width:690px; margin:0 auto; }
.reserva-form iframe { width:100%; min-height:1005px; border:0; border-radius:var(--radius); display:block; }

/* ---------- FOOTER ---------- */
.brand-footer { border-top:1px solid var(--line); padding:4rem 2rem; text-align:center; }
.brand-name { font-family:var(--f-display); font-size:1.7rem; color:var(--title); text-decoration:none; display:inline-block; margin-bottom:.4rem; transition:color .3s; }
.brand-name:hover { color:var(--accent); }
.brand-tag { text-transform:uppercase; letter-spacing:var(--kicker-tracking); font-size:var(--kicker-size); opacity:.65; margin-bottom:1.5rem; }
.brand-links { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
.brand-links a { color:var(--accent); text-decoration:none; text-transform:uppercase; letter-spacing:.15em; font-size:.68rem; transition:opacity .3s; }
.brand-links a:hover { opacity:.7; }
.copy { margin-top:2.5rem; font-size:.65rem; opacity:.45; letter-spacing:.1em; }

/* ---------- WHATSAPP FLOTANTE (igual que style.css) ---------- */
.wa-fab { position:fixed; bottom:1.4rem; right:1.4rem; z-index:50; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#25d366; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .25s ease, box-shadow .25s ease, bottom .35s ease; }
.wa-fab:hover { transform:scale(1.08); box-shadow:0 8px 22px rgba(0,0,0,.45); }
/* Con la barra fija visible, el botón sube para no taparla. */
body.con-barra .wa-fab { bottom:5.6rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .barra, .wa-fab { transition:none; }
}