:root {
  color-scheme: light;
  --cream: #fff8ea;
  --paper: #fffdf7;
  --ink: #3b2a1a;
  --ink-soft: #7a6450;
  --sun: #ffc61a;
  --sun-soft: #ffe89a;
  --sun-deep: #946000;
  --leaf: #4a7a36;
  --leaf-soft: #e7f0dc;
  --line: #f0e2c6;
  --danger: #b4431f;
  --radius: 20px;
  --shadow: 0 10px 30px -12px rgba(120, 80, 10, 0.25);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100dvh;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, #fff1c2 0%, transparent 60%),
    var(--cream);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg { max-width: 100%; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* ---------- botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font: 700 17px/1 var(--body);
  text-decoration: none;
  color: var(--ink);
  background: var(--sun);
  box-shadow: 0 6px 0 var(--sun-deep), 0 12px 24px -8px rgba(224, 142, 0, 0.55);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s;
  user-select: none;
}
.btn:hover { background: #ffcf3a; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sun-deep), 0 6px 12px -8px rgba(224, 142, 0, 0.55); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn:focus-visible, .chip:focus-visible, .ghost:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
}

.btn.block { width: 100%; }

.btn.whatsapp { background: #25d366; color: #173b20; box-shadow: 0 6px 0 #179c4a, 0 12px 24px -8px rgba(23, 156, 74, 0.5); }
.btn.whatsapp:hover { background: #2fe174; }
.btn.whatsapp:active { box-shadow: 0 2px 0 #179c4a; }

.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font: 700 16px/1 var(--body);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.ghost:hover { border-color: var(--sun); background: #fffaf0; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font: 600 15px/1.2 var(--body);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.chip:hover { border-color: var(--sun); background: #fff6d9; }

/* ---------- formularios ---------- */

label.field { display: block; margin-bottom: 18px; }
label.field > span {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-soft);
}

input[type='text'], input[type='password'], input[type='tel'], select, textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  font: 500 18px/1.4 var(--body);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type='text']:focus, input[type='password']:focus, input[type='tel']:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sun);
  box-shadow: 0 0 0 4px rgba(255, 198, 26, 0.25);
}
textarea { min-height: 150px; resize: vertical; font-family: var(--hand); font-size: 24px; line-height: 1.3; }
::placeholder { color: #776653; }

.hint { font-size: 14px; color: var(--ink-soft); }

.error {
  padding: 12px 16px;
  border-radius: 14px;
  background: #fdeee8;
  color: var(--danger);
  font-weight: 600;
  font-size: 15px;
}

/* ---------- el ramo (SVG) ---------- */

.bq { display: block; width: 100%; height: auto; overflow: visible; }
.bq .pt, .bq .ct, .bq .lf, .bq .hd, .bq .sway { transform-box: view-box; transform-origin: 0 0; }
.bq .sway { transform-origin: 200px 430px; }

.bq.anim .paper { animation: fadeUp 0.7s ease-out both; }
.bq.anim .stem { stroke-dasharray: 1; stroke-dashoffset: 1; animation: grow 1s ease-out forwards; animation-delay: var(--sd); }
.bq.anim .lf { animation: bloom 0.8s cubic-bezier(0.3, 1.4, 0.6, 1) both; animation-delay: var(--ld); }
.bq.anim .pt, .bq.anim .ct,
.bq .pop .pt, .bq .pop .ct {
  animation: bloom 0.65s cubic-bezier(0.3, 1.55, 0.6, 1) both;
  animation-delay: calc(var(--fd) + var(--k) * 0.9s);
}
.bq .pop { --fd: 0s !important; }
.bq.alive .sway { animation: sway 6s ease-in-out infinite alternate; }

.bq .hd { cursor: pointer; }

@keyframes grow { to { stroke-dashoffset: 0; } }
@keyframes bloom {
  from { transform: scale(0); opacity: 0; }
  40% { opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes sway {
  from { transform: rotate(-1.2deg); }
  to { transform: rotate(1.2deg); }
}

/* ---------- lluvia de pétalos ---------- */

.petal-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.petal-rain .petal {
  position: absolute;
  top: -40px;
  width: var(--size);
  height: var(--size);
  animation: fall var(--dur) linear var(--delay) infinite;
  opacity: 0;
}
.petal-rain .petal.once { animation-iteration-count: 1; animation-fill-mode: forwards; }
.petal-rain .petal svg { display: block; width: 100%; height: 100%; animation: spin var(--spin) ease-in-out infinite alternate; }

@keyframes fall {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: 0.95; }
  100% { transform: translate3d(var(--drift), 110dvh, 0); opacity: 0.85; }
}
@keyframes spin {
  from { transform: rotate(-40deg) rotateY(0deg); }
  to { transform: rotate(200deg) rotateY(160deg); }
}

.burst-petal {
  position: fixed;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 20;
  animation: burst 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes burst {
  from { transform: translate(-50%, -50%) scale(0.4) rotate(0); opacity: 1; }
  to { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1) rotate(var(--br)); opacity: 0; }
}

/* ---------- aviso flotante ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  transform: translate(-50%, 20px);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .petal-rain { display: none; }
}

/* Foco, textos largos y controles secundarios. */
:focus-visible { outline: 3px solid #245cc2; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.delete-link { display: block; margin-top: 6px; padding: 8px 0; background: none; border: 0; font: inherit; font-size: 14px; color: var(--danger); text-decoration: underline; cursor: pointer; }
h1, .to, .for, .sign, .meaning, .meanings, .sent a { overflow-wrap: anywhere; }
.sent li > div { min-width: 0; }
[hidden] { display: none !important; }

/* Administración privada de los ramos enviados. */
.sent details { margin-top:10px; max-width:100%; }
.sent summary { cursor:pointer; font-weight:700; }
.sent details label { display:block; margin-top:10px; }
.sent details input { display:block; width:100%; min-width:0; margin-block:6px; }
.sent details p { font-size:14px; margin-block:10px; }

.sent li > div { min-width:0; flex:1; }
@media (max-width:600px) { .sent li { flex-direction:column; align-items:stretch; } .sent .status { align-self:flex-start; } }

/* Vista previa del estado: el archivo se prepara antes de abrir el menú del teléfono. */
.status-composer { width:min(94vw, 560px); max-height:92dvh; padding:22px; border:1px solid var(--line); border-radius:24px; background:var(--paper); color:var(--ink); overflow:auto; }
.status-composer::backdrop { background:rgba(35,25,10,.65); }
.status-composer p { margin-block:12px; }
.status-heading { display:flex; align-items:start; gap:12px; justify-content:space-between; }
.status-heading h2 { font-size:26px; }
.status-choice { display:flex; align-items:start; gap:10px; margin-top:18px; font-weight:700; font-size:15px; }
.status-choice input { width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--sun-deep); }
.status-privacy, .status-help, .status-feedback { font-size:14px; color:var(--ink-soft); }
.status-preview { display:block; width:min(100%,260px); aspect-ratio:9/16; margin:16px auto; border-radius:14px; box-shadow:var(--shadow); }
.status-buttons { display:flex; flex-wrap:wrap; gap:12px; }
.status-buttons > * { flex:1; white-space:nowrap; }

.status-composer > a { display:block; overflow-wrap:anywhere; }