/* Boho · boda entre viñedos: tonos tierra, arcoíris boho, pampas y polaroids */
:root {
  --fondo: #f6efe4;
  --papel: #efe3d1;
  --texto: #4a3a2c;
  --terracota: #c7774f;
  --mostaza: #d9a35b;
  --olivo: #8a8a5c;
  --suave: #e6d6bf;
  --acento: #b8653f;
  --sobre-acento: #fff;
  --linea: rgba(74, 58, 44, .22);
  --encabezado-fondo: rgba(246, 239, 228, .93);
  --menu-fondo: #f6efe4;
  --fuente-display: "Young Serif", Georgia, serif;
  --fuente-script: "Birthstone", "Brush Script MT", cursive;
  --fuente-texto: "Outfit", system-ui, sans-serif;
  --radio: 999px;
  --radio-foto: 4px;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .23 0 0 0 0 .17 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
body { background-image: var(--grano); }
.encabezado__marca { font: 400 22px var(--fuente-display); color: var(--acento); }
.eyebrow { color: var(--olivo); }
.titulo { color: var(--texto); }
.papel { background-color: var(--papel); background-image: var(--grano); }

/* Polaroid */
.polaroid { margin: 0; background: #fffdf8; padding: 12px 12px 0; box-shadow: 0 14px 34px rgba(74, 58, 44, .18); position: relative; }
.polaroid::before { content: ""; position: absolute; top: -14px; left: 50%; width: 96px; height: 28px; transform: translateX(-50%) rotate(-3deg); background: rgba(233, 207, 174, .78); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid figcaption { font-size: 34px; text-align: center; padding: 6px 0 10px; color: var(--texto); }

/* Portada */
.hero { min-height: 100svh; display: grid; place-items: center; gap: 36px; padding: calc(100px + env(safe-area-inset-top, 0px)) 16px 64px; text-align: center; }
.hero__fotos { position: relative; width: min(72vw, 380px); }
.polaroid--portada { transform: rotate(-3deg); z-index: 1; }
.polaroid--portada img { object-position: 50% 30%; }
.hero__pampa { position: absolute; width: 60px; height: 180px; color: var(--mostaza); bottom: -20px; z-index: 2; }
.hero__pampa--1 { left: -30px; transform: rotate(-18deg); }
.hero__pampa--2 { right: -26px; transform: rotate(14deg); color: var(--terracota); height: 150px; }
.hero__texto { display: grid; justify-items: center; }
.hero__arcoiris { width: 150px; height: 78px; }
.hero__nos { font-size: 13px; letter-spacing: .34em; text-transform: uppercase; color: var(--olivo); margin-top: 14px; font-weight: 500; }
.hero__nombres { font: 400 clamp(52px, 14vw, 88px)/1.02 var(--fuente-display); margin-top: 8px; }
.hero__nombres span:not(.hero__y) { display: inline-block; }
.hero__y { color: var(--terracota); font-size: 1.1em; }
.hero__fecha { font-size: 19px; margin-top: 14px; }
.hero__lugar { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--acento); margin-top: 4px; font-weight: 500; }
.hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 380px minmax(0, 560px); justify-content: center; gap: 100px; }
}

/* Invitación */
.sol { width: 54px; height: 54px; color: var(--mostaza); display: block; margin: 0 auto 18px; }
.frase { font: 400 clamp(22px, 4vw, 29px)/1.45 var(--fuente-display); max-width: 32ch; margin: 0 auto; }
.padres__titulo { font-size: 38px; color: var(--acento); line-height: 1; margin-bottom: 8px; }
.padres__nombre { font-family: var(--fuente-texto); font-size: 19px; }

/* Historia en terracota */
.terracota { background: var(--terracota); color: #fff8ef; }
.terracota .titulo { color: #fff8ef; }
.hito { background: #fff8ef; color: var(--texto); padding: 26px 22px 30px; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,.12); border-radius: 160px 160px 8px 8px; padding-top: 50px; }
.hito:nth-child(2) { border-radius: 8px; padding-top: 30px; }
.hito__num { color: var(--terracota); }
.hito__fecha { color: var(--olivo); }

/* Cuenta regresiva */
.arcoiris-chico { width: 110px; height: 57px; display: block; margin: 0 auto 10px; }
.cuenta__item { background: #fffdf8; border-radius: 120px 120px 6px 6px; box-shadow: 0 8px 20px rgba(74, 58, 44, .08); padding-top: 22px; }
.cuenta__num { color: var(--acento); }
.cuenta__lbl { color: var(--olivo); font-weight: 600; }

/* Celebración */
.evento { background: #fffdf8; border-radius: 8px; box-shadow: 0 10px 28px rgba(74, 58, 44, .1); }
.evento__tipo { color: var(--olivo); }
.evento__hora { color: var(--acento); }
.itin-caja { margin-top: 56px; }
.subtitulo { font-size: 52px; color: var(--acento); }
.itin__hora { color: var(--acento); }
.itin__txt { text-align: left; }
.itin__punto { background: var(--mostaza); }

/* Padrinos en olivo */
.olivo { background: var(--olivo); color: #fffaf0; }
.olivo .titulo { color: #fffaf0; }
.olivo .padrino__rol { color: #f1d9a8; }

/* Detalles: notas pegadas */
.detalles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px; }
.nota { position: relative; background: #fffdf8; padding: 46px 24px 34px; box-shadow: 0 12px 28px rgba(74, 58, 44, .12); transform: rotate(-1deg); }
.nota--2 { transform: rotate(1.2deg); }
.nota::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; transform: translateX(-50%) rotate(2deg); background: rgba(217, 163, 91, .55); }
.vest__codigo, .regalo__tienda { color: var(--acento); }
.regalo { padding: 16px 8px; }

/* Hospedaje */
.hotel { background: #fffdf8; border-radius: 8px; border-bottom: 5px solid var(--mostaza); }
.hotel__nombre { color: var(--acento); }

/* Galería en polaroids */
.galeria { gap: 22px 16px; }
.gal__item { background: #fffdf8; padding: 8px 8px 26px; border-radius: 2px; box-shadow: 0 10px 22px rgba(74, 58, 44, .14); aspect-ratio: 4 / 5; overflow: visible; }
.gal__item img { aspect-ratio: auto; height: 100%; }
.gal__item:nth-child(odd) { transform: rotate(-2deg); }
.gal__item:nth-child(even) { transform: rotate(1.8deg); }
.gal__item:hover img { transform: none; }
.hashtag { margin-top: 30px; }
.hashtag strong { color: var(--acento); }

/* Confirmar */
.confirmar { background: linear-gradient(180deg, var(--acento) 0%, #9b5236 100%); color: #fff8ef; }
.confirmar .titulo { color: #fff8ef; }
.confirmar .arcoiris-chico { filter: brightness(1.15); }
.confirmar__texto { max-width: 44ch; margin: 12px auto 0; }
.boton--claro { background: #fff8ef; color: var(--acento); border-color: #fff8ef; }
.boton--linea-claro { background: transparent; color: #fff8ef; border-color: rgba(255,248,239,.8); }

.pie__nombre { color: var(--acento); font-size: 64px; }