/* ───────────────────────────────────────────────────────────────────────────
   Flores amarillas — hoja de estilo única.
   Paleta en tokens sobre :root, con variante de anochecer para modo oscuro.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --crema:      #fdf6e3;
  --crema-2:    #fbeec8;
  --papel:      #fffdf7;
  --tinta:      #3b2e1a;
  --tinta-suave:#7a6648;
  --oro:        #e8a80c;
  --oro-claro:  #ffd85e;
  --hoja:       #6f8f4a;
  --hoja-osc:   #4d6a32;
  --sombra:     0 18px 40px -22px rgba(80, 56, 12, .45);
  --borde:      rgba(120, 90, 30, .16);
  --kraft:      #d8b483;
  --kraft-osc:  #b98f5a;
  --cinta:      #fff3d0;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mano:  "Parisienne", "Cormorant Garamond", cursive;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: 16px;
  --sway: 7s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --crema:      #191426;
    --crema-2:    #241a33;
    --papel:      #221a30;
    --tinta:      #f6ecd8;
    --tinta-suave:#c0ad92;
    --oro:        #ffc93c;
    --oro-claro:  #ffe89a;
    --hoja:       #7f9f57;
    --hoja-osc:   #47632e;
    --sombra:     0 18px 44px -20px rgba(0, 0, 0, .7);
    --borde:      rgba(255, 216, 94, .18);
    --kraft:      #b58d5e;
    --kraft-osc:  #8e6a41;
    --cinta:      #fbe7b0;
  }
}
:root[data-theme="dark"] {
  --crema: #191426; --crema-2: #241a33; --papel: #221a30;
  --tinta: #f6ecd8; --tinta-suave: #c0ad92;
  --oro: #ffc93c; --oro-claro: #ffe89a;
  --hoja: #7f9f57; --hoja-osc: #47632e;
  --sombra: 0 18px 44px -20px rgba(0, 0, 0, .7);
  --borde: rgba(255, 216, 94, .18);
  --kraft: #b58d5e; --kraft-osc: #8e6a41; --cinta: #fbe7b0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: clamp(17px, 1.1vw + 14px, 20px);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.svg-defs { position: absolute; width: 0; height: 0; }

.envoltura {
  width: min(680px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* ─────────────────────────────── portada ─────────────────────────────── */

.portada {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 12vh var(--gutter) 34vh;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 8%, var(--crema-2) 0%, transparent 62%),
    linear-gradient(to bottom, var(--crema) 0%, var(--crema) 55%, var(--crema-2) 100%);
}

.sol {
  position: absolute;
  top: -22vmin; left: 50%;
  width: 78vmin; aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 94, .55), rgba(255, 201, 60, .12) 55%, transparent 72%);
  filter: blur(8px);
  animation: latir 9s ease-in-out infinite;
}

.bruma {
  position: absolute; inset: auto 0 0 0; height: 45vh;
  background: linear-gradient(to top, var(--crema-2), transparent);
  pointer-events: none;
}

.portada__texto { position: relative; text-align: center; max-width: 30ch; }

.kicker {
  margin: 0 0 .9rem;
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

h1 { margin: 0; font-weight: 300; line-height: 1.05; }

.h1__linea {
  display: block;
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  letter-spacing: .01em;
}
.h1__para {
  display: block;
  font-size: clamp(.95rem, 3vw, 1.1rem);
  font-style: italic;
  color: var(--tinta-suave);
  margin: .35em 0 .1em;
}
.h1__nombre {
  display: block;
  font-family: var(--mano);
  font-size: clamp(3.4rem, 15vw, 5.6rem);
  line-height: 1;
  color: var(--oro);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .35);
}

.lead {
  margin: 1.6rem auto 0;
  font-size: 1.02rem;
  font-style: italic;
  color: var(--tinta-suave);
}

.bajar {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 2.2rem;
  padding: .6rem 1.35rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: color-mix(in srgb, var(--papel) 70%, transparent);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: transform .25s, background .25s;
}
.bajar:hover { transform: translateY(-2px); background: var(--papel); }
.bajar svg { width: 1rem; height: 1rem; animation: flotar 2.2s ease-in-out infinite; }

/* Pradera del pie de la portada: tallos de alturas y retardos distintos. */
.pradera {
  position: absolute;
  inset: auto 0 -2px 0;
  height: 40vh; min-height: 230px;
  pointer-events: none;
}

.tallo {
  position: absolute;
  bottom: 0;
  transform-origin: 50% 100%;
  animation: mecer var(--sway) ease-in-out infinite;
  animation-delay: var(--retardo, 0s);
}
.tallo__linea {
  position: absolute;
  left: 50%; bottom: 0;
  width: 3px; height: 100%;
  translate: -50% 0;
  border-radius: 3px;
  background: linear-gradient(to top, var(--hoja-osc), var(--hoja));
}
.tallo__hoja {
  position: absolute;
  left: 50%; bottom: 22%;
  width: 34px; height: 15px;
  background: var(--hoja);
  border-radius: 100% 0 100% 0;
  transform-origin: 0 50%;
  rotate: -18deg;
}
.tallo__hoja--b { bottom: 42%; rotate: 162deg; translate: -100% 0; }

.flor {
  position: absolute;
  left: 50%; top: 0;
  width: var(--flor, 84px); height: var(--flor, 84px);
  translate: -50% -42%;
  color: var(--oro);
  animation: girar-suave 12s ease-in-out infinite;
  animation-delay: var(--retardo, 0s);
}
.flor .corola { transform-origin: 50% 50%; }

.petalo { fill: url(#petalo); }
.petalo--claro { fill: url(#petaloClaro); }

/* ──────────────────────────────── el ramo ──────────────────────────────── */

.ramo, .carta { padding: clamp(3.5rem, 10vw, 6rem) 0; }

.ramo { background: var(--crema-2); text-align: center; }

h2 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.7rem, 6vw, 2.5rem);
}

.sub {
  margin: .6rem auto 0;
  max-width: 34ch;
  font-style: italic;
  color: var(--tinta-suave);
}

.contador {
  margin: 1.8rem 0 0;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* Ramo: capas SVG apiladas sobre una caja 4:5; las flores se colocan en % de ella. */
.ramo__composicion {
  position: relative;
  /* El ramo se limita también por el alto de pantalla, para que la nota
     quepa debajo en móviles; nunca baja de 220px (móvil apaisado). */
  width: min(400px, 100%, max(220px, 42svh));
  aspect-ratio: 4 / 5;
  margin: 1.2rem auto 0;
}
.capa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.capa--frente { z-index: 2; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(60, 40, 10, .25)); }

.kraft { fill: var(--kraft); }
.kraft--atras { fill: var(--kraft-osc); }
.kraft--pliegue { fill: var(--kraft-osc); opacity: .55; }
.kraft-borde { fill: none; stroke: var(--kraft-osc); stroke-width: 2; }
.lazo path, .lazo ellipse, .cinta { fill: var(--cinta); stroke: rgba(120, 90, 30, .25); stroke-width: 1; }

.tallo-ramo { stroke: var(--hoja-osc); stroke-width: 4; stroke-linecap: round; fill: none; }
.hoja-ramo { fill: var(--hoja); }
.hoja-ramo--osc { fill: var(--hoja-osc); }

.ramo__flores { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; }
.ramo__flores li {
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  translate: -50% -50%;
}

.boton-flor {
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--oro);
  cursor: pointer;
  rotate: var(--incl, 0deg);
  scale: .78;
  filter: saturate(.45) brightness(1.02);
  transition: filter .5s, scale .35s, rotate .35s;
  -webkit-tap-highlight-color: transparent;
  animation: invitar 2.8s ease-in-out infinite;
  animation-delay: var(--retardo, 0s);
}
.boton-flor svg { width: 100%; height: 100%; display: block; overflow: visible; }
.boton-flor:hover { scale: .86; }
.boton-flor:focus-visible { outline: none; filter: saturate(1) drop-shadow(0 0 8px var(--oro-claro)); }

.boton-flor.abierta {
  scale: 1;
  filter: saturate(1.05) drop-shadow(0 6px 8px rgba(60, 40, 10, .25));
  animation: abrir .7s cubic-bezier(.2, 1.5, .4, 1) both;
}

/* Tarjeta donde aparece la nota de la flor tocada. */
.nota {
  display: grid;
  place-items: center;
  min-height: 9.5rem;
  margin: 1.6rem auto 0;
  padding: 1.6rem 1.4rem;
  width: min(520px, 100%);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 4px 4px 14px 14px;
  box-shadow: var(--sombra);
}
.nota p { margin: 0; }
.nota__vacia {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.nota__texto {
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
  animation: escribir .55s ease both;
}
.nota__numero {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--mano);
  font-size: 1.6rem;
  color: var(--oro);
}

.premio {
  margin: 2.2rem auto 0;
  width: min(560px, 100%);
  padding: 1.8rem 1.5rem;
  border-top: 1px solid var(--borde);
  animation: escribir .9s ease both;
}
.premio[hidden] { display: none; }
.premio__eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--oro);
}
.premio__texto { margin: 0; font-size: 1.1rem; font-style: italic; }

/* ──────────────────────────────── la carta ─────────────────────────────── */

.tarjeta {
  position: relative;
  padding: clamp(1.8rem, 6vw, 3rem);
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 2px;
  box-shadow: var(--sombra);
}
.tarjeta::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid var(--borde);
  border-radius: 1px;
  pointer-events: none;
}
.tarjeta p { margin: 0 0 1.1rem; }
.tarjeta p:last-child { margin-bottom: 0; }
.tarjeta__fecha {
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .3em;
  color: var(--tinta-suave);
}
.firma {
  font-family: var(--mano);
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--oro);
  text-align: right;
}

.pie {
  padding: 2.5rem var(--gutter) 3rem;
  text-align: center;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ───────────────────────── lluvia de pétalos ───────────────────────── */

.lluvia {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.petalo-suelto {
  position: absolute;
  top: -8vh;
  width: 13px; height: 18px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(140deg, var(--oro-claro), var(--oro));
  opacity: .9;
  animation: caer var(--dur, 7s) linear var(--retardo, 0s) forwards;
}

/* ──────────────────────────── animaciones ──────────────────────────── */

@keyframes mecer {
  0%, 100% { rotate: -2.2deg; }
  50%      { rotate: 2.2deg; }
}
@keyframes girar-suave {
  0%, 100% { rotate: -5deg; }
  50%      { rotate: 5deg; }
}
@keyframes latir {
  0%, 100% { opacity: .85; scale: 1; }
  50%      { opacity: 1;  scale: 1.04; }
}
@keyframes flotar {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 4px; }
}
@keyframes invitar {
  0%, 100% { scale: .78; }
  50%      { scale: .83; }
}
@keyframes abrir {
  0%   { scale: .7; rotate: calc(var(--incl, 0deg) - 25deg); }
  100% { scale: 1;  rotate: var(--incl, 0deg); }
}
@keyframes escribir {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes caer {
  0%   { translate: 0 0; rotate: 0deg; opacity: 0; }
  10%  { opacity: .9; }
  100% { translate: var(--deriva, 40px) 110vh; rotate: 540deg; opacity: 0; }
}
@keyframes brotar {
  from { scale: .3; opacity: 0; }
  to   { scale: 1;  opacity: 1; }
}

.tallo { animation-name: mecer; }
.tallo--brote .flor { animation: brotar .9s cubic-bezier(.2, 1.4, .4, 1) var(--retardo, 0s) both, girar-suave 12s ease-in-out var(--retardo, 0s) infinite; }

/* ─────────────────────────── móviles ─────────────────────────── */

@media (max-width: 480px), (max-height: 720px) {
  .ramo, .carta { padding: 2rem 0; }
  .ramo h2 { font-size: 1.7rem; }
  .sub { margin-top: .35rem; font-size: .95rem; line-height: 1.5; }
  .contador { margin-top: .9rem; }
  .ramo__composicion { margin-top: .4rem; }
  .nota { min-height: 6.5rem; margin-top: .8rem; padding: 1.1rem 1rem; }
  .nota__numero { font-size: 1.3rem; margin-bottom: .3rem; }
  .nota__texto { font-size: 1.1rem; }
  .portada { padding-top: 9vh; }
  .lead { margin-top: 1.1rem; }
  .bajar { margin-top: 1.5rem; }
}

@media (max-width: 360px) {
  .envoltura { width: calc(100% - 24px); }
  .tarjeta { padding: 1.5rem 1.2rem; }
  .tarjeta::before { inset: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .lluvia { display: none; }
}