:root {
  --cream: #fff7d9;
  --paper: rgba(255, 251, 232, 0.91);
  --brown: #65391f;
  --brown-soft: #875c3e;
  --yellow: #f5bd35;
  --yellow-dark: #d99b18;
  --green: #63845b;
  --pink: #ef9b9c;
  --shadow: rgba(87, 52, 27, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  color: var(--brown);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
  background: #f9e9ad;
}
button { font: inherit; }

#app, .screen { min-height: 100vh; width: 100%; }
.screen {
  display: none;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(rgba(255, 247, 207, .12), rgba(255, 247, 207, .12)), url("assets/background.png");
  background-size: cover;
  background-position: center;
}
.screen.active { display: flex; }

.paper-card {
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 18px 50px var(--shadow), inset 0 0 40px rgba(255,255,255,.35);
  backdrop-filter: blur(2px);
}

/* INTRO */
.screen-intro { align-items: center; justify-content: center; padding: 30px 18px; }
.intro-card {
  width: min(92vw, 540px);
  padding: 42px 34px 34px;
  text-align: center;
  border-radius: 28px;
  position: relative;
  animation: cardIn .8s ease both;
}
.tiny-heart { font-size: 2.1rem; display: block; margin-bottom: 8px; color: #b86d52; }
h1, h2, .eyebrow, .little-note, .postscript, .signature { font-family: "Kalam", cursive; }
.intro-card h1 { margin: 0; font-size: clamp(2.4rem, 7vw, 4.1rem); line-height: .98; font-weight: 700; }
.intro-card h1 span { font-family: inherit; }
.intro-card > p:not(.little-note) { font-size: 1.05rem; line-height: 1.5; margin: 20px auto 22px; max-width: 410px; }
.meme-frame {
  width: min(100%, 330px); margin: 0 auto 16px; padding: 10px; background: #fffdf4;
  transform: rotate(-1.5deg); box-shadow: 0 10px 24px rgba(74,42,20,.13);
}
.meme-frame img { display: block; width: 100%; max-height: 290px; object-fit: contain; background: white; }
.little-note { margin: 7px 0 20px; font-size: 1.15rem; }
.main-button {
  border: 0; cursor: pointer; color: #5b351d; background: linear-gradient(#ffd86a, #f6bd35);
  border-radius: 999px; padding: 15px 25px; min-height: 54px; font-weight: 700;
  box-shadow: 0 8px 0 #d99c20, 0 12px 22px rgba(119,72,18,.16);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.main-button:hover { transform: translateY(-2px); filter: brightness(1.03); }
.main-button:active { transform: translateY(4px); box-shadow: 0 4px 0 #d99c20, 0 7px 14px rgba(119,72,18,.13); }
.main-button b { margin-left: 12px; font-size: 1.5rem; vertical-align: -2px; }
.main-button.small { padding: 12px 21px; min-height: 48px; }

/* GARDEN */
.garden-screen { align-items: center; justify-content: center; padding: 24px 18px 36px; }
.garden-content { width: min(100%, 900px); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 40px 0; }
.garden-copy { text-align: center; max-width: 640px; z-index: 5; }
.eyebrow { margin: 0 0 6px; font-size: 1.15rem; color: var(--brown-soft); }
.garden-copy h2 { margin: 0; font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.05; }
.garden-copy p:not(.eyebrow) { margin: 9px 0; font-size: 1.05rem; }
.garden-copy #garden-help { font-family: "Kalam", cursive; font-size: 1.35rem; }
.text-button { border: 0; background: rgba(255,255,255,.64); color: var(--brown); border-radius: 999px; padding: 10px 19px; margin-top: 12px; cursor: pointer; box-shadow: 0 5px 15px rgba(88,52,25,.1); }

.flower-stage { width: min(90vw, 600px); height: 350px; position: relative; margin-top: 4px; }
.ground { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); width:78%; height:22px; border-radius:50%; background:rgba(106,76,38,.22); filter:blur(7px); }
.plant { position:absolute; left:50%; bottom:26px; width:190px; height:300px; transform:translateX(-50%); }
.stem { position:absolute; left:50%; bottom:0; width:11px; height:252px; transform:translateX(-50%) scaleY(0); transform-origin:bottom; border-radius:99px; background:linear-gradient(90deg,#416b3d,#6f9a52 48%,#385d36); box-shadow:2px 0 5px rgba(54,80,41,.18); transition:transform .95s cubic-bezier(.22,.9,.27,1); }
.plant.stage-0 .stem { transform:translateX(-50%) scaleY(.08); }
.plant.stage-1 .stem { transform:translateX(-50%) scaleY(.25); }
.plant.stage-2 .stem { transform:translateX(-50%) scaleY(.43); }
.plant.stage-3 .stem { transform:translateX(-50%) scaleY(.62); }
.plant.stage-4 .stem { transform:translateX(-50%) scaleY(.80); }
.plant.stage-5 .stem { transform:translateX(-50%) scaleY(1); }
.plant.grow-pulse { animation:plantPulse .55s ease; }
.leaf { position:absolute; width:67px; height:34px; background:linear-gradient(135deg,#83a95f,#4f7c47); border-radius:100% 0 100% 0; opacity:0; transform:scale(0); box-shadow:inset -2px -2px 4px rgba(42,75,34,.14); transition:transform .65s ease,opacity .4s ease; }
.leaf-left { left:18px; transform-origin:right bottom; rotate:-18deg; }
.leaf-right { right:18px; transform-origin:left bottom; rotate:18deg; }
.leaf-1 { bottom:72px; }
.leaf-2 { bottom:119px; }
.leaf-3 { bottom:165px; }
.leaf-4 { bottom:205px; }
.plant.stage-2 .leaf-1,
.plant.stage-3 .leaf-1,
.plant.stage-3 .leaf-2,
.plant.stage-4 .leaf-1,
.plant.stage-4 .leaf-2,
.plant.stage-4 .leaf-3,
.plant.stage-5 .leaf { opacity:1; transform:scale(1); }
.bud { position:absolute; left:50%; top:7px; width:48px; height:61px; transform:translateX(-50%) scale(0); transform-origin:bottom; border-radius:50% 50% 42% 42%; background:linear-gradient(135deg,#78994e,#3e693b); box-shadow:inset 4px 0 8px rgba(31,66,29,.2); transition:transform .75s cubic-bezier(.2,.85,.25,1); }
.plant.stage-5 .bud { transform:translateX(-50%) scale(1); }
.daisy { position:absolute; left:50%; top:-22px; width:112px; height:112px; transform:translateX(-50%) scale(.05); opacity:0; }
.petal, .big-petal { position:absolute; left:50%; top:50%; width:31px; height:55px; border-radius:60% 60% 55% 55%; background:linear-gradient(180deg,#ffd83e,#f3ad08); border:1px solid rgba(196,126,0,.22); transform-origin:50% 90%; box-shadow:inset 0 0 5px rgba(255,239,123,.55),0 1px 2px rgba(135,83,0,.08); }
.p1{transform:translate(-50%,-90%) rotate(0)} .p2{transform:translate(-50%,-90%) rotate(30deg)} .p3{transform:translate(-50%,-90%) rotate(60deg)} .p4{transform:translate(-50%,-90%) rotate(90deg)}
.p5{transform:translate(-50%,-90%) rotate(120deg)} .p6{transform:translate(-50%,-90%) rotate(150deg)} .p7{transform:translate(-50%,-90%) rotate(180deg)} .p8{transform:translate(-50%,-90%) rotate(210deg)}
.p9{transform:translate(-50%,-90%) rotate(240deg)} .p10{transform:translate(-50%,-90%) rotate(270deg)} .p11{transform:translate(-50%,-90%) rotate(300deg)} .p12{transform:translate(-50%,-90%) rotate(330deg)}
.daisy-center, .big-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 50% 50%,#6e9a2e 0 8%,#6f7f22 9% 16%,#8b5b13 17% 48%,#5d3b0c 49% 100%); box-shadow:inset 0 0 9px rgba(54,32,0,.32),0 0 0 2px rgba(236,169,15,.55); }
.daisy-center { width:46px; height:46px; }
.plant.open .bud { transform:translateX(-50%) scale(.25); opacity:0; }
.plant.open .daisy { transform:translateX(-50%) scale(1); opacity:1; animation:bloomSmall .85s cubic-bezier(.2,.85,.25,1) forwards,swaySmall 4s .85s ease-in-out infinite; }

.interaction-area { width: min(100%, 700px); text-align: center; z-index: 5; }
.instruction { margin: 0 0 16px; line-height: 1.45; }
.icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: min(100%, 650px); margin: 0 auto; }
.interaction-button { position: relative; min-height: 70px; border: 0; border-radius: 20px; cursor: pointer; background: rgba(255,253,238,.82); color: var(--brown); box-shadow: 0 8px 20px rgba(92,55,25,.11); font-size: 2rem; transition: transform .2s ease, opacity .25s ease; }
.interaction-button:hover { transform: translateY(-4px) rotate(-2deg); }
.interaction-button.done { opacity: .55; pointer-events: none; }
.interaction-button.done::after { content:"✓"; position:absolute; right:7px; top:4px; font-size:.9rem; color:#507347; font-weight:700; }
.final-grow { text-align:center; z-index: 5; margin-top: 5px; }
.final-grow p { margin: 4px 0; font-family:"Kalam",cursive; font-size:1.35rem; }
.final-grow .main-button { margin-top: 18px; }

/* MODAL */
.modal { position: fixed; inset: 0; z-index: 30; display:grid; place-items:center; padding:20px; }
.modal.hidden { display:none; }
.modal-backdrop { position:absolute; inset:0; background:rgba(72,42,21,.28); backdrop-filter:blur(3px); }
.message-card { position:relative; width:min(92vw,520px); max-height:88vh; overflow:auto; padding:34px 28px 28px; border-radius:25px; text-align:center; animation:modalIn .3s ease both; }
.close-button { position:absolute; right:13px; top:9px; width:38px; height:38px; border:0; background:transparent; color:var(--brown); font-size:2rem; cursor:pointer; }
.modal-icon { font-size:2.5rem; display:block; }
.message-card h2 { margin:5px 0 12px; font-size:2.2rem; }
#modal-content { font-size:1rem; line-height:1.6; }
#modal-content p { margin:10px 0; }
#modal-content strong { font-family:"Kalam",cursive; font-size:1.3rem; }
.modal-image { width:min(100%,330px); max-height:330px; object-fit:contain; margin:14px auto; display:block; background:#fff; padding:7px; box-shadow:0 8px 18px rgba(76,46,25,.13); transform:rotate(-1deg); }

/* BLOOM */
.bloom-screen { flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.bloom-message { z-index:5; margin-bottom:0; }
.bloom-small { font-family:"Kalam",cursive; font-size:1.35rem; margin:0; }
.bloom-message h2 { font-size:2.5rem; margin:0; }
.bloom-flower-stage { width:100%; height:58vh; min-height:390px; position:relative; }
.big-plant { position:absolute; left:50%; bottom:0; width:300px; height:100%; transform:translateX(-50%); }
.big-stem { position:absolute; left:50%; bottom:0; width:14px; height:72%; transform:translateX(-50%) scaleY(0); transform-origin:bottom; border-radius:99px; background:linear-gradient(90deg,#416b3d,#73a151 48%,#385d36); box-shadow:2px 0 6px rgba(54,80,41,.2); animation:growStem 2.1s .35s cubic-bezier(.2,.85,.25,1) forwards; }
.big-leaf { position:absolute; width:91px; height:45px; opacity:0; background:linear-gradient(135deg,#83a95f,#4f7c47); border-radius:100% 0 100% 0; box-shadow:inset -2px -2px 4px rgba(42,75,34,.14); }
.big-leaf-left { left:18px; bottom:25%; rotate:-18deg; animation:leafIn .7s 1.45s ease forwards; }
.big-leaf-right { right:12px; bottom:39%; rotate:18deg; animation:leafIn .7s 1.7s ease forwards; }
.big-daisy { position:absolute; left:50%; top:7%; width:205px; height:205px; transform:translateX(-50%) scale(.05); opacity:0; animation:bloom .95s 2.1s cubic-bezier(.2,.85,.25,1) forwards,sway 4s 3.1s ease-in-out infinite; }
.big-petal { width:58px; height:95px; background:linear-gradient(180deg,#ffdf45 0%,#ffc21a 55%,#efa400 100%); border:1px solid rgba(199,125,0,.3); box-shadow:inset 0 0 8px rgba(255,244,137,.62),0 2px 3px rgba(117,71,0,.1); }
.bp1{transform:translate(-50%,-88%) rotate(0)} .bp2{transform:translate(-50%,-88%) rotate(18deg)} .bp3{transform:translate(-50%,-88%) rotate(36deg)} .bp4{transform:translate(-50%,-88%) rotate(54deg)}
.bp5{transform:translate(-50%,-88%) rotate(72deg)} .bp6{transform:translate(-50%,-88%) rotate(90deg)} .bp7{transform:translate(-50%,-88%) rotate(108deg)} .bp8{transform:translate(-50%,-88%) rotate(126deg)}
.bp9{transform:translate(-50%,-88%) rotate(144deg)} .bp10{transform:translate(-50%,-88%) rotate(162deg)} .bp11{transform:translate(-50%,-88%) rotate(180deg)} .bp12{transform:translate(-50%,-88%) rotate(198deg)}
.bp13{transform:translate(-50%,-88%) rotate(216deg)} .bp14{transform:translate(-50%,-88%) rotate(234deg)} .bp15{transform:translate(-50%,-88%) rotate(252deg)} .bp16{transform:translate(-50%,-88%) rotate(270deg)}
.bp17{transform:translate(-50%,-88%) rotate(288deg)} .bp18{transform:translate(-50%,-88%) rotate(306deg)} .bp19{transform:translate(-50%,-88%) rotate(324deg)} .bp20{transform:translate(-50%,-88%) rotate(342deg)}
.big-center { width:82px; height:82px; background:radial-gradient(circle at 50% 50%,#719d2d 0 7%,#6d7e22 8% 14%,#9a6611 15% 45%,#5b3808 46% 100%); box-shadow:inset 0 0 12px rgba(48,29,0,.35),0 0 0 3px rgba(241,174,11,.55); }
.bloom-finished { z-index:8; margin-top:-34px; animation:fadeIn .8s ease both; }
.bloom-finished h2 { font-size:3rem; margin:0 0 20px; }
.bloom-finished .main-button { font-size:.95rem; }

/* LETTER */
.letter-screen { align-items:center; justify-content:center; padding:28px 18px; }
.letter { width:min(92vw,650px); max-height:92vh; overflow:auto; padding:38px clamp(24px,6vw,60px) 32px; border-radius:20px; text-align:center; }
.letter-flower { font-size:3rem; animation:sway 4s ease-in-out infinite; }
.letter h2 { margin:0 0 20px; font-size:3rem; }
.letter-body { font-size:1.05rem; line-height:1.75; }
.signature { font-size:1.5rem; line-height:1.25; margin-top:28px; }
.signature span { font-size:1.1rem; }
.postscript { margin-top:28px; padding:18px; background:rgba(248,215,115,.28); border-radius:14px; font-size:1.05rem; line-height:1.4; }
.postscript p { margin:6px 0; }

.hidden { display:none !important; }
.fade-out { animation:fadeOut .45s ease forwards; }

@keyframes plantPulse { 0%{filter:brightness(1)} 45%{filter:brightness(1.12)} 100%{filter:brightness(1)} }
@keyframes cardIn { from{opacity:0;transform:translateY(20px) scale(.98)} to{opacity:1;transform:none} }
@keyframes modalIn { from{opacity:0;transform:translateY(15px) scale(.97)} to{opacity:1;transform:none} }
@keyframes fadeOut { to{opacity:0} }
@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes growStem { to{transform:translateX(-50%) scaleY(1)} }
@keyframes leafIn { from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)} }
@keyframes bloom { from{opacity:0;transform:translateX(-50%) scale(.05) rotate(-15deg)} to{opacity:1;transform:translateX(-50%) scale(1) rotate(0)} }
@keyframes bloomSmall { from{opacity:0;transform:translateX(-50%) scale(.05) rotate(-12deg)} to{opacity:1;transform:translateX(-50%) scale(1) rotate(0)} }
@keyframes swaySmall { 0%,100%{transform:translateX(-50%) rotate(-1deg)} 50%{transform:translateX(-50%) rotate(1deg)} }
@keyframes sway { 0%,100%{transform:translateX(-50%) rotate(-1deg)} 50%{transform:translateX(-50%) rotate(1deg)} }

@media (max-width: 620px) {
  .intro-card { padding:34px 20px 26px; }
  .intro-card h1 { font-size:2.45rem; }
  .intro-card > p:not(.little-note) { font-size:.96rem; }
  .meme-frame img { max-height:235px; }
  .garden-content { padding-top:25px; }
  .garden-copy h2 { font-size:2.1rem; }
  .garden-copy p:not(.eyebrow) { font-size:.96rem; }
  .flower-stage { height:270px; }
  .plant { height:245px; transform:translateX(-50%) scale(.88); }
  .icon-grid { grid-template-columns:repeat(3, 1fr); max-width:360px; }
  .interaction-button { min-height:65px; }
  .interaction-button:nth-child(4) { grid-column:2; }
  .bloom-flower-stage { height:52vh; min-height:330px; }
  .big-plant { transform:translateX(-50%) scale(.82); transform-origin:bottom center; }
  .bloom-message h2 { font-size:2.1rem; }
  .bloom-finished h2 { font-size:2.5rem; }
  .letter { max-height:94vh; }
  .letter h2 { font-size:2.5rem; }
  .letter-body { font-size:.98rem; line-height:1.65; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* =========================================================
   NUEVO: ICONOS INTERACTIVOS ILUSTRADOS
   ========================================================= */

.icon-grid {
  align-items: stretch;
}

.interaction-button {
  min-height: 92px;
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  background: rgba(255, 253, 238, 0.9);
  border: 1px solid rgba(126, 82, 42, 0.10);
}

.interaction-icon {
  width: 39px;
  height: 39px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  transition: transform .25s ease, filter .25s ease;
}

.interaction-button:hover .interaction-icon {
  transform: translateY(-2px) scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 4px 4px rgba(86, 51, 23, .12));
}

.interaction-label {
  font-family: "Kalam", cursive;
  font-size: .9rem;
  line-height: 1;
  color: var(--brown-soft);
}

.icon-heart { color: #d96f78; }
.icon-laugh { color: #c88624; }
.icon-camera { color: #668457; }
.icon-letter { color: #9b6950; }
.icon-sparkle { color: #e2a516; }

.interaction-button.done {
  background: rgba(234, 244, 220, .78);
  border-color: rgba(90, 124, 67, .22);
}

.interaction-button.done .interaction-icon {
  color: #63845b;
}

/* =========================================================
   NUEVO: VOLVER A VER LA FLOR
   ========================================================= */

.back-flower-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  padding: 11px 18px;
  border: 1px solid rgba(101, 57, 31, .16);
  border-radius: 999px;
  background: rgba(255, 251, 232, .72);
  color: var(--brown-soft);
  cursor: pointer;
  font-family: "Kalam", cursive;
  font-size: 1.02rem;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.back-flower-button span {
  font-family: sans-serif;
  font-size: 1.15rem;
}

.back-flower-button:hover {
  transform: translateY(-2px);
  background: rgba(255, 251, 232, .95);
  box-shadow: 0 6px 16px rgba(87, 52, 27, .10);
}

.back-flower-button:active {
  transform: translateY(1px);
}

@media (max-width: 620px) {
  .interaction-button {
    min-height: 82px;
    padding: 10px 6px;
  }

  .interaction-icon {
    width: 34px;
    height: 34px;
  }

  .interaction-label {
    font-size: .78rem;
  }
}
.memory-photo {
    display: block;

    width: min(100%, 340px);

    max-height: 380px;

    object-fit: cover;

    margin: 18px auto;

    padding: 8px;

    background: #fffdf4;

    border: 1px solid rgba(101, 57, 31, 0.12);

    box-shadow:
        0 8px 20px rgba(76, 46, 25, 0.15);

    transform: rotate(-1deg);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.memory-photo:hover {
    transform:
        rotate(0deg)
        scale(1.02);

    box-shadow:
        0 12px 25px rgba(76, 46, 25, 0.2);
}