/* =========================================================
   Jardín de Ramos — dos materiales, un objeto:
   A) Jardín: granja 2010 pulida (caramelo, pasto saturado)
   B) Diario: papel + acuarela + tinta manuscrita
   ========================================================= */

:root{
  --papel:#f6efdd; --papel-hondo:#efe5cc; --tinta:#453626; --tinta-suave:#7a6a52;
  --pasto:#5aa843; --pasto-luz:#7dc855; --pasto-sombra:#3f7d2e;
  --tierra:#7a5230; --tierra-mojada:#4e3320;
  --madera:#a5713f; --madera-oscura:#7c4f28; --madera-borde:#5e3a1c;
  --agua:#58b7e8; --agua-honda:#3d92c4;
  --dorado:#f5b940; --senal:#e2574c; --rosa:#e8639a; --rosa-honda:#c2417a;
  --hoja:#3f7d2e; --hoja-luz:#69a84f;
  --cielo-noche:#1c2547;
  --radius:16px;
  --sombra-carta: 0 10px 28px rgba(69,54,38,.28);
  --fredoka:'Fredoka', system-ui, sans-serif;
  --garamond:'EB Garamond', Georgia, serif;
  --caveat:'Caveat', cursive;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--garamond);
  color:var(--tinta);
  background:var(--papel-hondo);
  overflow:hidden;
  height:100dvh;
  -webkit-tap-highlight-color:transparent;
}
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img{ max-width:100%; display:block; }

#app{ height:calc(100dvh - 64px - env(safe-area-inset-bottom)); position:relative; }
.tab{ display:none; height:100%; overflow:hidden; }
.tab.activa{ display:block; }
.tab.papel{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.tab.papel.activa .pagina{ animation:pasarPagina .3s cubic-bezier(.22,1,.36,1); }
@keyframes pasarPagina{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ═════════════════ REALM A · EL JARDÍN ═════════════════ */

#escena{ position:relative; height:100%; overflow:hidden; user-select:none; }

/* ---- cielo por fase ---- */
#cielo{ position:absolute; inset:0 0 62%; transition:background 2s; }
[data-fase="dia"]       #cielo{ background:linear-gradient(#5fb2e4 0%, #9fd7f3 55%, #d8f0fb 100%); }
[data-fase="amanecer"]  #cielo{ background:linear-gradient(#8fb6dd 0%, #f9d9a5 60%, #fdeecf 100%); }
[data-fase="atardecer"] #cielo{ background:linear-gradient(#7379c4 0%, #f39a5d 55%, #fbd9a1 100%); }
[data-fase="noche"]     #cielo{ background:linear-gradient(#10142e 0%, #232c56 60%, #3a4372 100%); }

.astro{ position:absolute; width:96px; }
.astro svg{ width:100%; }
[data-fase="dia"] .sol{ top:6%; right:8%; }
[data-fase="amanecer"] .sol{ top:34%; left:10%; }
[data-fase="atardecer"] .sol{ top:40%; right:12%; }
[data-fase="atardecer"] .sol circle{ fill:#ffb35c; }
.luna{ top:8%; right:10%; width:74px; }

.estrella{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff; box-shadow:0 0 6px 1px rgba(255,255,255,.8);
  animation:titilar 3s ease-in-out infinite;
}
@keyframes titilar{ 0%,100%{opacity:.9} 50%{opacity:.25} }

.nube{ position:absolute; opacity:.95; animation:deriva linear infinite; }
.nube-0{ top:8%;  animation-duration:95s; }
.nube-1{ top:20%; animation-duration:140s; animation-delay:-40s; transform:scale(.7); }
.nube-2{ top:2%;  animation-duration:115s; animation-delay:-80s; transform:scale(.85); }
[data-fase="noche"] .nube{ opacity:.16; }
@keyframes deriva{ from{ left:-220px; } to{ left:110%; } }

/* ---- campo ---- */
#campo{
  position:absolute; inset:38% 0 0;
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,.045) 0 46px, rgba(0,0,0,.03) 46px 92px),
    radial-gradient(120% 60% at 50% 0%, var(--pasto-luz) 0%, var(--pasto) 55%, #4c9639 100%);
}
[data-fase="noche"] #campo{
  background:
    repeating-linear-gradient(102deg, rgba(255,255,255,.03) 0 46px, rgba(0,0,0,.05) 46px 92px),
    radial-gradient(120% 60% at 50% 0%, #3e7a37 0%, #34682c 55%, #2a5424 100%);
}
.seto{
  position:absolute; top:-26px; left:0; right:0; height:30px;
  background:
    radial-gradient(circle at 10px 26px, var(--pasto-sombra) 0 12px, transparent 13px),
    radial-gradient(circle at 30px 20px, #4c8f3a 0 14px, transparent 15px),
    radial-gradient(circle at 52px 25px, var(--pasto-sombra) 0 13px, transparent 14px);
  background-size:62px 30px; background-repeat:repeat-x;
}
[data-fase="noche"] .seto{ filter:brightness(.62); }

/* tinte ambiental sobre todo el jardín */
#escena::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  transition:background 2s;
}
[data-fase="noche"] #escena::after{ background:rgba(24,32,80,.30); }
[data-fase="atardecer"] #escena::after{ background:rgba(255,140,60,.10); }
[data-fase="amanecer"] #escena::after{ background:rgba(255,205,140,.08); }

/* ---- filas de parcelas con perspectiva ---- */
#filas{
  position:absolute; inset:5% 0 15%;
  display:flex; flex-direction:column; justify-content:space-between;
  max-width:760px; margin:0 auto; padding:0 8px;
}
.fila{ display:flex; justify-content:center; gap:2vw; }
.fila-0{ transform:scale(.80); z-index:1; }
.fila-1{ transform:scale(.92); z-index:2; }
.fila-2{ transform:scale(1.04); z-index:3; }

.parcela{
  position:relative;
  width:clamp(72px, 20vw, 116px);
  aspect-ratio:120/74;
  cursor:pointer;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
.parcela:active{ transform:scale(.93); }
.suelo-svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 4px 6px rgba(30,50,15,.25)); }

.cartel-vacio{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--fredoka); font-weight:600; font-size:1.5rem;
  color:rgba(255,244,214,.85); text-shadow:0 2px 3px rgba(60,35,12,.5);
  opacity:0; transition:opacity .2s;
}
.parcela.vacia:hover .cartel-vacio, .parcela.vacia:active .cartel-vacio{ opacity:1; }

.planta{
  position:absolute; left:50%; bottom:23%;
  width:108%; transform:translateX(-50%);
  pointer-events:none;
  transition:filter .6s;
}
.planta-svg{ width:100%; display:block; filter:drop-shadow(0 3px 3px rgba(30,50,15,.3)); }
.planta.pop{ animation:brotar .55s cubic-bezier(.34,1.7,.64,1); }
@keyframes brotar{ 0%{ transform:translateX(-50%) scale(.55); } 100%{ transform:translateX(-50%) scale(1); } }

.planta.marchita{ filter:saturate(.4) brightness(.9); }
.planta.marchita .cabeza{
  transform-box:fill-box; transform-origin:50% 100%;
  transform:rotate(24deg); transition:transform 1s;
}
.destello{ animation:titilar 2.2s ease-in-out infinite; }

.estado{
  position:absolute; top:-34%; right:2%;
  width:30px; height:30px; display:grid; place-items:center;
  background:#fffdf4; border:2px solid #e3d5b4; border-radius:50% 50% 50% 6px;
  font-size:.95rem; box-shadow:0 3px 6px rgba(60,40,15,.3);
  animation:burbujear 1.6s ease-in-out infinite;
}
.estado.feliz{ animation:none; opacity:.85; color:var(--rosa); font-size:1.05rem; }
@keyframes burbujear{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

.barra{
  position:absolute; left:16%; right:16%; bottom:8%;
  height:6px; background:rgba(46,28,10,.55); border-radius:4px; overflow:hidden;
}
.barra i{ display:block; height:100%; width:100%; background:linear-gradient(#b3e086, #74bb4c); border-radius:4px; transform-origin:0 50%; transition:transform .5s ease-out; }

/* ---- animación de riego ---- */
.riego{ position:absolute; inset:-70% 0 0; pointer-events:none; z-index:4; }
.riego-lata{ position:absolute; top:0; right:-6%; width:56%; animation:verter 1.15s ease-in-out; transform-origin:80% 80%; }
.sprite-regadera{ width:100%; }
@keyframes verter{
  0%{ transform:translateY(-14px) rotate(6deg); opacity:0; }
  22%{ transform:translateY(0) rotate(-24deg); opacity:1; }
  78%{ transform:translateY(0) rotate(-24deg); opacity:1; }
  100%{ transform:translateY(-10px) rotate(8deg); opacity:0; }
}
.gota{
  position:absolute; top:22%; width:5px; height:9px;
  background:linear-gradient(var(--agua), var(--agua-honda));
  border-radius:50% 50% 60% 60% / 30% 30% 70% 70%;
  opacity:0; animation:caer .55s ease-in forwards;
}
@keyframes caer{
  0%{ opacity:0; transform:translateY(0) scale(.7); }
  25%{ opacity:1; }
  100%{ opacity:0; transform:translateY(46px) scale(1); }
}

/* ---- HUD ---- */
#hud{
  position:absolute; top:10px; left:10px; right:10px; z-index:6;
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
  font-family:var(--fredoka);
}
#letrero{
  background:linear-gradient(#b3804d, var(--madera) 40%, var(--madera-oscura));
  border:2px solid var(--madera-borde); border-bottom-width:5px;
  border-radius:12px; padding:8px 16px;
  color:#ffedc9; font-weight:600; font-size:clamp(.95rem, 3.4vw, 1.15rem);
  text-shadow:0 2px 2px rgba(60,35,10,.6);
  box-shadow:0 6px 14px rgba(40,25,8,.35);
  transform:rotate(-1.2deg);
  max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* La floristería firma el letrero con su color, sin repintar la madera:
   el jardín sigue siendo el mismo mundo, sólo cambia quién lo entregó. */
body.con-marca #letrero{
  border-color:var(--marca-primario);
  border-bottom-color:var(--marca-acento);
}
#chips{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.chip{
  background:linear-gradient(#fffef7, #f3ecd8);
  border:2px solid #d9c9a4; border-bottom-width:4px; border-radius:999px;
  padding:6px 12px; font-family:var(--fredoka); font-weight:600; font-size:.9rem;
  color:#5c4a2e; box-shadow:0 4px 10px rgba(50,35,12,.25);
  transition:transform .12s;
  min-height:38px;
}
.chip:active{ transform:translateY(2px); }
.chip.redonda{ width:38px; padding:6px 0; }
#chip-racha.pendiente{ filter:saturate(.3); }
.racha-llama{ font-size:3.2rem; line-height:1; }
.racha-llama.apagada{ filter:grayscale(1) opacity(.45); }

/* ---- botones caramelo ---- */
.boton{
  font-family:var(--fredoka); font-weight:600; font-size:1rem;
  padding:10px 20px; border-radius:var(--radius);
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25);
  box-shadow:0 6px 14px rgba(40,30,10,.3), inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .12s cubic-bezier(.34,1.56,.64,1), filter .12s;
  border-bottom:4px solid rgba(0,0,0,.28);
}
.boton:active{ transform:translateY(3px) scale(.98); border-bottom-width:2px; }
.boton.azul { background:linear-gradient(#7ecbee, var(--agua) 45%, var(--agua-honda)); }
.boton.verde{ background:linear-gradient(#93cf6c, #6cb04a 45%, #4f8c3b); }
.boton.rosa { background:linear-gradient(#f490bb, var(--rosa) 45%, var(--rosa-honda)); }
.boton.neutro{ background:linear-gradient(#efe6cf, #ddcfae); color:#5c4a2e; text-shadow:none; }
.boton.grande{ font-size:1.1rem; padding:13px 24px; }

#btn-regar-todas{ position:absolute; right:14px; bottom:16px; z-index:6; }

/* ---- granjerita y florero ---- */
#granjerita{
  position:absolute; left:6px; top:28.5%; z-index:4;
  width:clamp(66px, 16vw, 92px);
  filter:drop-shadow(0 6px 8px rgba(30,50,15,.32));
  animation:respirar 3.6s ease-in-out infinite;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
#granjerita:active{ transform:scale(.95); }
#granjerita svg{ width:100%; display:block; }
#granjerita.regando{ animation:brinquito .65s ease-in-out 2; }
@keyframes respirar{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@keyframes brinquito{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-14px) rotate(-3deg); } }

/* el granjero: vive en la esquina contraria, entre las parcelas de abajo */
#granjero{
  position:absolute; right:max(19%, calc(50% - 165px)); bottom:8.5%; z-index:4;
  width:clamp(70px, 17vw, 96px);
  filter:drop-shadow(0 6px 8px rgba(30,50,15,.32));
  animation:respirar 3.8s ease-in-out infinite;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
  transform-origin:50% 90%;
}
#granjero:active{ transform:scale(.95); }
#granjero svg{ width:100%; display:block; }
#granjerita{ transform-origin:50% 90%; }
/* actividades ociosas: abonar y paseo con carretilla */
.grano-abono{
  position:absolute; top:6%; width:4px; height:4px; border-radius:50%;
  opacity:0; z-index:5; animation:caerAbono .95s ease-in forwards; pointer-events:none;
}
@keyframes caerAbono{
  0%{ opacity:0; transform:translateY(-16px); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:translateY(26px); }
}
.paseo-carretilla{
  position:absolute; top:47%; left:0; z-index:2;
  display:flex; align-items:flex-end; pointer-events:none;
  filter:drop-shadow(0 5px 6px rgba(30,50,15,.3));
  will-change:transform;
}
.paseo-carretilla .paseante{ width:clamp(64px, 15vw, 88px); animation:pasitos .55s ease-in-out infinite; margin-left:-14px; }
.paseo-carretilla .carreta{ width:clamp(62px, 14.5vw, 86px); margin-bottom:1px; }
.paseo-carretilla.invertido{ flex-direction:row-reverse; }
.paseo-carretilla.invertido .paseante{ margin-left:0; margin-right:-14px; }
.paseo-carretilla.invertido .paseante svg, .paseo-carretilla.invertido .carreta svg{ transform:scaleX(-1); }
@keyframes pasitos{
  0%, 100%{ transform:translateY(0) rotate(5deg); }
  50%{ transform:translateY(-3px) rotate(7deg); }
}
.carreta .rueda-giro{ transform-box:fill-box; transform-origin:center; animation:girarRueda 1.1s linear infinite; }
@keyframes girarRueda{ to{ transform:rotate(360deg); } }

.corazon-beso{
  position:absolute; font-size:1rem; z-index:6; pointer-events:none;
  opacity:0; animation:subirCorazon 1.9s ease-out forwards;
}
@keyframes subirCorazon{
  0%{ opacity:0; transform:translateY(4px) scale(.5); }
  18%{ opacity:1; transform:translateY(-6px) scale(1.15); }
  100%{ opacity:0; transform:translateY(-40px) scale(.9) rotate(12deg); }
}

#florero{
  position:absolute; right:max(6px, calc(50% - 388px)); top:34%; z-index:4;
  width:clamp(58px, 14vw, 80px);
  filter:drop-shadow(0 5px 7px rgba(30,50,15,.3));
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
#florero:active{ transform:scale(.94); }
#florero svg{ width:100%; display:block; }
#florero-cuenta{
  position:absolute; top:6%; right:-4px;
  font-family:var(--fredoka); font-weight:600; font-size:.72rem;
  background:#fff8e4; border:1.5px solid #e0cf9e; border-radius:999px;
  padding:1px 7px; color:#7c5c22; box-shadow:0 2px 5px rgba(50,35,12,.25);
}
.sin-accion{ cursor:default; }
#btn-regar-todas.urgente{ animation:latido 1.4s ease-in-out infinite; }
@keyframes latido{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

/* ---- ambiente ---- */
#ambiente{ position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; }
.vuelo{ position:absolute; top:0; left:0; width:38px; will-change:transform; }
.vuelo svg{ width:100%; overflow:visible; }
.sprite-abeja .alas{ animation:aleteo .1s infinite alternate; transform-origin:60% 60%; }
@keyframes aleteo{ from{ transform:scaleY(1); } to{ transform:scaleY(.55) translateY(2px); } }
.sprite-mariposa .ala{ transform-origin:50% 50%; }
.sprite-mariposa .ala.izq{ animation:alaIzq .3s infinite alternate ease-in-out; }
.sprite-mariposa .ala.der{ animation:alaDer .3s infinite alternate ease-in-out; }
@keyframes alaIzq{ from{ transform:scaleX(1); } to{ transform:scaleX(.45); } }
@keyframes alaDer{ from{ transform:scaleX(1); } to{ transform:scaleX(.45); } }

.luciernaga{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#ffe97a; box-shadow:0 0 8px 3px rgba(255,233,122,.65);
  animation:flotarLuz 7s ease-in-out infinite;
}
@keyframes flotarLuz{
  0%,100%{ transform:translate(0,0); opacity:0; }
  20%{ opacity:1; }
  50%{ transform:translate(26px,-30px); opacity:.5; }
  80%{ opacity:1; }
}

/* ═════════════════ REALM B · EL DIARIO ═════════════════ */

.papel{
  background:var(--papel);
  position:relative;
}
.papel::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .24 0 0 0 0 .16 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
.pagina{ position:relative; z-index:1; max-width:740px; margin:0 auto; padding:26px 18px 80px; }

.mano{ font-family:var(--caveat); }
.titulo-pagina{
  font-family:var(--caveat); font-weight:700; color:var(--tinta);
  font-size:clamp(2.1rem, 7vw, 2.8rem); line-height:1;
  transform:rotate(-1deg);
}
.subtitulo{
  font-style:italic; color:var(--tinta-suave);
  font-size:1.05rem; margin:6px 0 18px;
}

/* puntitos de progreso */
.puntitos{ display:inline-flex; gap:4px; margin-left:10px; vertical-align:middle; }
.puntitos i{ width:9px; height:9px; border-radius:50%; border:1.5px solid #b8a884; display:inline-block; }
.puntitos i.si{ background:var(--rosa); border-color:var(--rosa-honda); }

/* ---- enciclopedia: láminas ---- */
#lista-flores{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:14px; margin-top:18px;
}
.lamina{
  position:relative; text-align:center; padding:18px 10px 14px;
  background:#fbf7ea; border:1px solid #e5d9bc; border-radius:6px;
  box-shadow:0 3px 10px rgba(90,70,40,.12);
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.lamina:hover{ transform:translateY(-4px) rotate(-.5deg); box-shadow:0 10px 22px rgba(90,70,40,.2); }
.mancha{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:104px; height:96px; pointer-events:none;
  background:radial-gradient(closest-side, var(--hue), transparent 72%);
  opacity:.28; filter:blur(7px); mix-blend-mode:multiply;
  border-radius:44% 56% 58% 42% / 52% 44% 56% 48%;
}
.lamina-flor{ width:96px; height:96px; position:relative; }
.lamina-svg{ width:100%; height:100%; }
.silueta{ filter:grayscale(1) brightness(1.25) contrast(.55) opacity(.55); }
.lamina-nombre{ font-weight:600; font-size:1.06rem; margin-top:4px; }
.lamina-cientifico{ font-style:italic; font-size:.85rem; color:var(--tinta-suave); }
.lamina.cerrada{ background:#f3ecd8; border-style:dashed; }
.lamina.cerrada .lamina-nombre{ color:var(--tinta-suave); letter-spacing:3px; }
.fav{ color:#b07d1e; font-size:1.05rem; margin-top:2px; }
.fav-inline{ font-size:.8em; }
.lamina-semillas{
  position:absolute; top:6px; right:6px;
  font-family:var(--fredoka); font-size:.72rem; font-weight:600;
  background:#fff8e4; border:1.5px solid #e0cf9e; border-radius:999px; padding:2px 7px;
  color:#7c5c22;
}

/* ---- ramos: páginas del diario ---- */
#lista-ramos{ margin-top:22px; display:flex; flex-direction:column; gap:26px; }
.pagina-ramo{
  position:relative; display:flex; gap:16px; align-items:flex-start;
  background:#fbf7ea; border:1px solid #e5d9bc; border-radius:6px;
  padding:20px 16px 16px; box-shadow:0 4px 14px rgba(90,70,40,.13);
  transform:rotate(var(--rot, 0deg));
}
.washi{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:110px; height:22px; border-radius:2px;
  background:repeating-linear-gradient(45deg, rgba(232,99,154,.55) 0 8px, rgba(245,185,64,.5) 8px 16px);
  opacity:.75; box-shadow:0 1px 3px rgba(90,70,40,.2);
}
.polaroid{
  flex:0 0 44%; max-width:250px;
  background:#fff; padding:8px 8px 6px; border:1px solid #e8e0cc;
  box-shadow:0 6px 16px rgba(90,70,40,.22);
  transform:rotate(calc(var(--rot, 0deg) * -1.6));
}
.polaroid img{ width:100%; aspect-ratio:4/3.4; object-fit:cover; }
.sin-foto{ aspect-ratio:4/3.4; display:grid; place-items:center; background:#f4efdf; }
.sin-foto svg{ width:70%; height:70%; opacity:.9; }
.polaroid figcaption{ text-align:center; font-size:1.15rem; color:#6b5335; padding-top:5px; }
.ramo-texto{ flex:1; min-width:0; }
.ramo-de{ font-size:1.4rem; color:var(--rosa-honda); line-height:1.05; }
.ramo-nota{ font-style:italic; margin:6px 0 10px; color:var(--tinta); }
.ramo-mano-mia{ margin:-6px 0 10px; color:var(--tinta-suave); font-size:.78rem; }
.ramo-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip-flor{
  display:inline-flex; align-items:center; gap:5px;
  background:#f2ecd9; border:1px solid #ded0ab; border-radius:999px;
  padding:3px 10px 3px 4px; font-size:.86rem; font-weight:600;
}
.mini-flor{ width:26px; height:26px; display:inline-block; }
.mini-flor svg{ width:100%; height:100%; }
.ramo-semillas{ margin-top:10px; font-size:.85rem; color:var(--tinta-suave); font-style:italic; }
.ramo-momento{ margin:0 0 8px; color:#9e4c61; font-family:var(--caveat); font-size:1.25rem; font-weight:700; }
.ramo-floristeria{ margin-top:12px; color:var(--tinta-suave); font-size:.78rem; }

body.con-marca .ramo-floristeria{ color:var(--marca-primario); }

/* ---- cabecera de la floristería (sólo con jardín entregado) ----
   Lo que la clienta reconoce es el logo, no un renglón de letra chica: manda
   él y el nombre lo acompaña. */
#marca-ramos{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:20px; padding:14px 16px;
  background:#fbf7ea; border:1px solid #e5d9bc; border-top:3px solid var(--marca-primario);
  border-radius:8px; box-shadow:0 3px 10px rgba(90,70,40,.12);
}
/* Con la firma pidiendo 190px, en teléfono el botón baja a su propio
   renglón en vez de quedar espachurrado contra el borde. */
.marca-firma{ display:flex; align-items:center; gap:13px; flex:1 1 190px; min-width:0; }
.marca-logo{
  width:74px; height:74px; flex:0 0 auto; object-fit:contain;
  background:#fff; padding:7px; border:1px solid #e8e0cc; border-radius:16px;
  box-shadow:0 2px 8px rgba(90,70,40,.14);
}
/* Sin logo subido, la inicial hace de sello y la cabecera se ve igual de
   entera: la mayoría no sube uno el primer día. */
.marca-sello{
  width:74px; height:74px; flex:0 0 auto;
  display:grid; place-items:center; border-radius:16px;
  background:var(--marca-primario); color:#fff;
  font-family:var(--fredoka); font-size:2.1rem; font-weight:600; line-height:1;
  box-shadow:0 2px 8px rgba(90,70,40,.2);
}
.marca-quien{ min-width:0; }
.marca-etiqueta{ margin-top:3px; font-size:.76rem; color:var(--tinta-suave); }
.marca-nombre{ font-size:1.6rem; line-height:1.1; color:var(--marca-primario); }
/* Dos floristerías en el mismo jardín: la cabecera es de la última, las otras
   siguen nombradas aquí (y cada ramo dice de quién vino en su página). */
.marca-tambien{
  flex:1 1 100%; margin-top:2px; padding-top:10px;
  border-top:1px dashed #e2d5b6; font-size:.8rem; color:var(--tinta-suave);
}
.marca-tambien b{ color:var(--marca-primario); font-weight:700; }
.marca-pedir{
  margin-left:auto;
  font-family:var(--fredoka); font-weight:600; font-size:.92rem; text-decoration:none;
  background:var(--marca-acento); color:#fff; padding:9px 16px; border-radius:999px;
  border-bottom:3px solid rgba(0,0,0,.18);
  box-shadow:0 4px 10px rgba(50,35,12,.22);
  transition:transform .12s;
}
.marca-pedir:active{ transform:translateY(2px); }
body.con-marca #tab-ramos .titulo-pagina::after{
  content:""; display:block; width:72px; height:4px; margin-top:6px;
  border-radius:999px; background:var(--marca-acento); opacity:.85;
}

.vacio-diario{ text-align:center; padding:34px 20px; color:var(--tinta-suave); }
.vacio-dibujo{ width:120px; margin:0 auto 8px; opacity:.9; }
.vacio-diario .mano{ font-size:1.6rem; color:var(--tinta); }
.vacio-diario p + p{ margin-top:6px; font-style:italic; }

#btn-nuevo-ramo{ margin-top:4px; }

/* ═════════════════ modales ═════════════════ */
.velo{
  position:fixed; inset:0; z-index:50;   /* por encima del foco del tutorial */
  background:rgba(48,36,22,.45); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:16px;
  opacity:0; transition:opacity .18s;
}
.velo.visible{ opacity:1; }
.tarjeta{
  position:relative; width:min(440px, 94vw); max-height:88dvh; overflow-y:auto;
  background:var(--papel); border-radius:14px; border:1px solid #e0d3b2;
  box-shadow:var(--sombra-carta); padding:24px 20px 20px;
  transform:scale(.95) translateY(12px); transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.velo.visible .tarjeta{ transform:none; }
.tarjeta.ancha{ width:min(560px, 94vw); }
.cerrar{
  position:absolute; top:10px; right:10px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:#efe5cc; color:#7a6a52; font-size:1rem; font-weight:700;
}
.cerrar:hover{ background:#e5d8b8; }

.ficha{ text-align:center; }
.ficha h3{ font-size:1.5rem; margin-top:10px; }
.ficha .mano, .ficha h3.mano{ font-family:var(--caveat); font-size:1.9rem; }
.ficha-lamina{ position:relative; width:150px; height:150px; margin:0 auto; }
.ficha-lamina svg{ width:100%; height:100%; position:relative; }
.ficha-lamina .mancha{ width:150px; height:140px; top:4px; }
.cientifico{ font-style:italic; color:var(--tinta-suave); margin-top:2px; }
.tono{ font-family:var(--caveat); font-size:1.1rem; color:var(--tinta-suave); }
.significado{ font-size:1.45rem; color:var(--rosa-honda); margin:10px 0 4px; line-height:1.1; }
.ficha-datos{ text-align:left; margin:14px 0 10px; display:flex; flex-direction:column; gap:10px; }
.ficha-datos dt{ font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:#8a6f42; }
.ficha-datos dd{ margin-top:2px; line-height:1.35; }
.ficha-colores{ display:flex; justify-content:center; gap:8px; margin:10px 0; }
.ficha-colores span{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 2px 5px rgba(90,70,40,.3); }
.ficha-stats{ font-size:.92rem; color:var(--tinta-suave); margin:8px 0 12px; }
.botonera{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

/* selector de semillas + form */
.rejilla-semillas{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:10px; margin:14px 0;
}
.semilla-opcion, .form-ramo .semilla-opcion{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; margin:0;
  background:#fbf7ea; border:1.5px solid #e0d3b2; border-radius:12px; padding:10px 6px 8px;
  font-size:.85rem; cursor:pointer;
  transition:transform .18s cubic-bezier(.22,1,.36,1), border-color .15s, background .15s;
}
.semilla-opcion:hover{ transform:translateY(-3px); }
.semilla-opcion .mini-flor{ width:52px; height:52px; }
.semilla-opcion .cuantas{ font-family:var(--fredoka); font-size:.75rem; color:#7c5c22; }
.semilla-opcion input{ position:absolute; opacity:0; pointer-events:none; }
.semilla-opcion:has(input:checked){
  border-color:var(--rosa); background:#fdeef5;
  box-shadow:0 0 0 2px rgba(232,99,154,.35);
}

.form-ramo{ text-align:left; }
.form-ramo h3{ text-align:center; }
.form-ramo label{ display:block; margin:12px 0 0; font-weight:600; font-size:.95rem; }
.form-ramo input[type="text"], .form-ramo input[type="date"], .form-ramo textarea,
.ficha input[type="text"]{
  width:100%; margin-top:4px; padding:9px 12px;
  font-family:var(--garamond); font-size:1rem; color:var(--tinta);
  background:#fffdf4; border:1.5px solid #ddcfae; border-radius:10px;
}
.form-ramo textarea{ resize:vertical; }
.form-ramo input:focus, .form-ramo textarea:focus, .ficha input:focus{
  outline:2px solid var(--rosa); outline-offset:1px;
}
.que-flores{ margin-top:14px; font-weight:600; }
.que-flores small{ font-weight:400; color:var(--tinta-suave); }
.campo-foto{ cursor:pointer; }
#foto-vista{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:110px; border:2px dashed #cbb98d; border-radius:12px;
  color:#8a6f42; background:#faf5e6; font-weight:600; overflow:hidden;
}
#foto-vista i{ font-style:normal; font-size:1.7rem; }
#foto-vista small{ font-family:var(--caveat); font-size:1.05rem; font-weight:400; }
#foto-vista img{ width:100%; max-height:220px; object-fit:cover; border-radius:10px; }
.form-ramo .boton.grande{ display:block; width:100%; margin-top:16px; }

.bienvenida p{ margin-top:8px; line-height:1.4; text-align:center; }
.bienvenida .regalo{ font-weight:600; color:#7c5c22; }
.bienvenida label{ display:block; text-align:left; margin-top:14px; font-weight:600; }
.bienvenida .boton{ display:block; width:100%; margin-top:14px; }

.linea{ display:flex; align-items:center; gap:8px; margin:12px 0; font-weight:600; }
.linea input{ width:18px; height:18px; accent-color:var(--rosa); }
.importar{ display:block; margin-top:12px; font-size:.9rem; color:var(--tinta-suave); }
.importar u{ cursor:pointer; color:var(--rosa-honda); }
.nota-pie{ margin-top:14px; font-size:.85rem; font-style:italic; color:var(--tinta-suave); text-align:center; }
.ficha label{ text-align:left; display:block; font-weight:600; margin-top:8px; }

/* ═════════════════ constructor de granjeros ═════════════════ */
.ctor .ctor-tabs{ display:flex; gap:8px; justify-content:center; margin:10px 0 12px; }
.ctor .ctor-tabs button{
  font-family:var(--fredoka); font-weight:600; font-size:.95rem;
  padding:7px 20px; border-radius:999px; background:#efe5cc; color:#6f5a38;
  transition:background .15s;
}
.ctor .ctor-tabs button.activa{ background:#e9f4dd; color:#3f7d2e; box-shadow:inset 0 0 0 2px #9cc57e; }
.ctor .ctor-tabs #ctor-random{ padding:7px 12px; font-size:1.05rem; background:#fdeef5; }
.ctor .ctor-tabs #ctor-random:active{ transform:rotate(20deg) scale(.92); }
.ctor-presets{
  display:flex; gap:6px; overflow-x:auto; padding:2px 2px 8px;
  scrollbar-width:thin;
}
.ctor-preset{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:1px;
  font-family:var(--fredoka); font-size:.72rem; font-weight:600; color:#6f5a38;
  background:#fbf7ea; border:1.5px solid #e0d3b2; border-radius:12px;
  padding:5px 9px; cursor:pointer; transition:transform .15s, border-color .15s;
}
.ctor-preset i{ font-style:normal; font-size:1.15rem; line-height:1.1; }
.ctor-preset:hover{ transform:translateY(-2px); border-color:var(--rosa); }
.ctor-col{ flex:0 0 132px; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; }
.ctor-acciones{ display:flex; gap:5px; }
.ctor-acciones button{
  flex:1; font-family:var(--fredoka); font-weight:600; font-size:.76rem; color:#5c4a2e;
  background:#f2ecd9; border:1.5px solid #ded0ab; border-radius:10px; padding:6px 4px;
  transition:transform .12s, background .15s;
}
.ctor-acciones button:hover{ background:#fdeef5; border-color:var(--rosa); }
.ctor-acciones button:active{ transform:scale(.95); }
.ctor-cuerpo{ display:flex; gap:14px; align-items:flex-start; text-align:left; }
.ctor-preview{
  width:100%; padding:8px 8px 2px;
  background:radial-gradient(circle at 50% 26%, #a8dcf5 0%, #8ecf6b 58%, #6cb04a 100%);
  border:2px solid #d9c9a4; border-radius:16px;
  position:sticky; top:0;
}
.ctor-preview svg{ width:100%; display:block; filter:drop-shadow(0 4px 5px rgba(30,50,15,.3)); }
.ctor-opciones{ flex:1; display:flex; flex-direction:column; gap:9px; max-height:44vh; overflow-y:auto; padding-right:4px; }
/* Pantallas cortas: la vista previa cede altura para que la pista de
   desplazamiento y los botones de guardar queden dentro de la pantalla. */
@media (max-height:840px) and (max-width:760px){
  .ctor-preview{ max-width:148px; margin:0 auto; }
  /* que el botón de guardar quepa sin arrastrar el modal */
  .ficha.ctor .ctor-opciones{ max-height:26vh; }
  .ctor-col{ align-items:center; }
}
@media (max-height:660px){
  .ctor-preview{ max-width:118px; }
}

/* Constructor: línea divisoria y pista de que el panel se desplaza */
.ctor-opciones-caja{ flex:1; min-width:0; width:100%; position:relative; }
.ctor-linea{
  border:0; height:2px; margin:0 0 9px;
  background:linear-gradient(to right, transparent, rgba(138,111,66,.42), transparent);
}
.ctor-mas{
  position:absolute; left:0; right:4px; bottom:0; height:58px;
  pointer-events:none; display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:2px; opacity:1; transition:opacity .22s ease-out;
  background:linear-gradient(to bottom, rgba(246,239,221,0) 0%, var(--papel) 82%);
}
.ctor-mas span{
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#8a6f42; display:inline-flex; align-items:center; gap:5px;
}
.ctor-mas i{ font-style:normal; display:inline-block; animation:ctorBaja 1.9s ease-in-out infinite; }
@keyframes ctorBaja{ 0%,70%,100%{ transform:translateY(0) } 82%{ transform:translateY(4px) } }
.ctor-opciones-caja.sin-mas .ctor-mas{ opacity:0; }
/* el aviso tapa el final de la lista: le dejamos aire */
.ctor-opciones{ padding-bottom:22px; }
@media (prefers-reduced-motion: reduce){ .ctor-mas i{ animation:none } }

.ctor-etq{
  display:block; font-weight:700; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:#8a6f42;
}
.ctor-ops-fila{ display:flex; flex-wrap:wrap; gap:6px; margin-top:3px; }
.ctor-sw{
  width:27px; height:27px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(90,70,40,.35); cursor:pointer;
  transition:transform .12s;
}
.ctor-sw:hover{ transform:scale(1.12); }
.ctor-sw.sel{ outline:3px solid var(--rosa); outline-offset:1px; }
.ctor-op{
  font-family:var(--fredoka); font-size:.8rem; font-weight:600;
  padding:4px 11px; border-radius:999px;
  background:#f2ecd9; border:1.5px solid #ded0ab; color:#5c4a2e; cursor:pointer;
}
.ctor-op.sel{ background:#fdeef5; border-color:var(--rosa); color:var(--rosa-honda); }
@media (max-width:480px){
  .ctor-cuerpo{ flex-direction:column; align-items:center; }
  .ctor-col{ position:static; flex-basis:auto; width:100%; max-width:190px; }
  .ctor-opciones{ max-height:34vh; width:100%; }
}

/* ═════════════════ mini tutorial ═════════════════ */
.tutorial-foco{
  position:relative; z-index:45 !important;
  box-shadow:0 0 0 6px rgba(245,185,64,.95), 0 0 0 9999px rgba(40,28,16,.52) !important;
  transition:box-shadow .2s;
  border-radius:18px;
  animation:latido 1.6s ease-in-out infinite;
}
.parcela.tutorial-foco{ border-radius:50%; }
#tut-burbuja{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(76px + env(safe-area-inset-bottom)); z-index:60;
  width:min(430px, 93vw);
  display:flex; gap:12px; align-items:center;
  background:var(--papel); border:2px solid #e0cf9e; border-radius:18px;
  box-shadow:var(--sombra-carta); padding:12px 14px;
  animation:brotarBurbuja .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes brotarBurbuja{ from{ opacity:0; transform:translateX(-50%) translateY(14px) scale(.92); } }
.tut-cara{
  flex:0 0 48px; width:48px; height:48px; border-radius:50%;
  background:#fdeef5; border:2px solid #f0c2d6; display:grid; place-items:center; overflow:hidden;
}
.tut-cara svg{ width:38px; height:38px; }
.tut-texto p{ font-size:.98rem; line-height:1.3; }
.tut-paso{
  font-family:var(--fredoka); font-weight:600; font-size:.68rem !important;
  letter-spacing:.07em; text-transform:uppercase; color:var(--verde);
  margin-bottom:.35rem;
}
.tut-barra{
  height:3px; background:#e3dcc6; border-radius:2px; overflow:hidden; margin-bottom:.55rem;
}
.tut-barra i{
  display:block; height:100%; background:var(--rosa); border-radius:2px;
  transition:width .35s cubic-bezier(.22,1,.36,1);
}
.tut-texto b{ color:var(--rosa-honda); }
.tut-botones{ display:flex; gap:12px; align-items:center; margin-top:8px; }
.tut-botones .boton{ padding:7px 16px; font-size:.92rem; }
#tut-saltar{
  font-family:var(--fredoka); font-size:.82rem; font-weight:500;
  color:var(--tinta-suave); text-decoration:underline;
}


/* ── guía del tutorial dentro de una pantalla ──────────────
   Una sola tarjeta: el paso encabeza el modal en vez de flotar encima. */
.tut-encabezado{
  margin:-4px -4px 12px; padding:0 0 10px;
  border-bottom:1px solid var(--linea, #e0d3b2);
  text-align:left;
}
.tut-fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tut-encabezado .tut-paso{ margin:0; min-width:0; }
.tut-encabezado .tut-barra{ margin:.45rem 0 0; }
.tut-encabezado #tut-saltar{
  flex:0 0 auto; font-family:var(--fredoka); font-size:.76rem; font-weight:500;
  color:var(--tinta-suave); text-decoration:underline;
  min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:flex-end;
  cursor:pointer; margin:-10px -4px -10px 0;
}

/* ── teléfonos bajitos: el modal se comprime en vez de desbordarse ──
   Con la barra del navegador, un iPhone deja ~600px útiles. */
.velo{
  padding:max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  align-content:center;
}
.tarjeta{ max-height:min(88dvh, 760px); }
@media (max-height: 760px){
  .tarjeta{ padding:18px 16px 16px; border-radius:20px; }
  .ficha-lamina{ width:104px; height:104px; }
  .ficha-lamina .mancha{ width:104px; height:96px; }
  .ficha h3{ font-size:1.3rem; }
  .ficha .mano, .ficha h3.mano{ font-size:1.55rem; }
  .ficha p{ font-size:.95rem; }
  .significado{ font-size:1.2rem; }
  .ctor-opciones{ max-height:30vh; }
  .rejilla-semillas{ gap:8px; }
  .semilla-opcion .mini-flor{ width:44px; height:44px; }
}
@media (max-height: 640px){
  .ficha-lamina{ width:76px; height:76px; }
  .ficha-lamina .mancha{ width:76px; height:70px; }
  .ficha .mano, .ficha h3.mano{ font-size:1.35rem; }
  .tut-encabezado{ margin-bottom:10px; padding-bottom:8px; }
}

/* la burbuja flotante nunca se mete debajo de la barra de pestañas */
#tut-burbuja{
  bottom:calc(72px + env(safe-area-inset-bottom));
  max-height:44dvh; overflow-y:auto;
}
/* …y va DESPUÉS, para que sí gane cuando la burbuja tapa lo señalado. */
#tut-burbuja.arriba{
  bottom:auto; top:max(12px, env(safe-area-inset-top));
}

/* señalador: dónde hay que tocar */
#tut-senalador{
  position:fixed; z-index:58; transform:translateX(-50%);
  pointer-events:none; filter:drop-shadow(0 3px 6px rgba(60,35,12,.35));
  animation:senalar 1.15s cubic-bezier(.22,1,.36,1) infinite;
}
#tut-senalador svg{ display:block; }
@keyframes senalar{
  0%, 100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(-9px); }
}
#tut-senalador.apunta-arriba{ animation-name:senalarArriba; }
@keyframes senalarArriba{
  0%, 100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(9px); }
}

/* ═════════════════ nav, toast, confeti ═════════════════ */
#tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  height:calc(64px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; justify-content:center; gap:6px;
  background:linear-gradient(#fdf9ee, #f1e8d2);
  border-top:2px solid #ddcfae;
  box-shadow:0 -6px 18px rgba(69,54,38,.12);
}
#tabs button{
  flex:0 1 120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-family:var(--fredoka); font-weight:600; font-size:.8rem; color:#6f5a38;
  border-radius:14px; margin:6px 0; transition:background .15s, color .15s, transform .15s;
}
#tabs button i{ font-style:normal; font-size:1.35rem; line-height:1; filter:grayscale(.35); transition:filter .15s, transform .15s; }
#tabs button.activa{ background:#e9f4dd; color:#3f7d2e; }
#tabs button.activa i{ filter:none; transform:scale(1.12); }

#toast{
  position:fixed; left:50%; bottom:calc(80px + env(safe-area-inset-bottom)); z-index:60;
  transform:translateX(-50%) translateY(20px);
  background:var(--papel); color:var(--tinta);
  border:1px solid #e0d3b2; border-radius:14px;
  padding:10px 18px; max-width:88vw; text-align:center;
  font-weight:600; box-shadow:var(--sombra-carta);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
#toast.visible{ opacity:1; transform:translateX(-50%); }

#confeti{ position:fixed; inset:0; pointer-events:none; z-index:70; overflow:hidden; }
.petalo-confeti{
  position:absolute; top:-24px; width:12px; height:16px;
  border-radius:60% 40% 55% 45% / 70% 70% 30% 30%;
  animation:caerPetalo linear forwards;
}
@keyframes caerPetalo{
  to{ transform:translateY(110vh) rotate(var(--giro, 300deg)); opacity:.6; }
}

.flotante{
  position:absolute; left:50%; top:-10%;
  transform:translateX(-50%);
  font-family:var(--fredoka); font-weight:700; font-size:1.05rem; color:#fff;
  text-shadow:0 2px 4px rgba(50,30,10,.55);
  animation:subir 1.5s ease-out forwards; pointer-events:none; white-space:nowrap; z-index:8;
}
@keyframes subir{
  0%{ opacity:0; transform:translateX(-50%) translateY(6px) scale(.7); }
  18%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1.08); }
  100%{ opacity:0; transform:translateX(-50%) translateY(-42px) scale(1); }
}

/* ═════════════════ desktop ═════════════════ */
@media (min-width:820px){
  .fila{ gap:26px; }
  .parcela{ width:122px; }
  #letrero{ font-size:1.25rem; }
  .vuelo{ width:44px; }
  #lista-ramos{ gap:32px; }
}
@media (max-width:520px){
  .pagina-ramo{ flex-direction:column; align-items:center; }
  .polaroid{ flex-basis:auto; width:78%; }
  .ramo-texto{ text-align:center; width:100%; }
  .ramo-chips{ justify-content:center; }
}

/* accesibilidad de movimiento */
@media (prefers-reduced-motion: reduce){
  .nube, .estrella, .luciernaga, .estado, #btn-regar-todas.urgente,
  .planta.pop, .destello, #granjerita, #granjero, .tab.papel.activa .pagina, #tut-senalador,
  .paseo-carretilla .paseante, .carreta .rueda-giro, .grano-abono{ animation:none !important; }
  .tarjeta, .velo{ transition:none; }
}

/* ---------- bienvenida del jardín recién nacido ---------- */
.bienvenida-velo{ z-index:60; display:grid; place-items:center; padding:24px; }
.bienvenida{
  max-width:340px; text-align:center; color:var(--tinta);
  background:var(--papel); border-radius:26px; padding:34px 26px 30px;
  box-shadow:0 26px 70px rgba(30,40,20,.4);
}
.bienvenida .bv-flor{ width:132px; margin:0 auto 18px; }
.bienvenida .bv-flor svg{ width:100%; display:block; }
.bienvenida h2{ font-size:1.55rem; line-height:1.2; }
.bienvenida p{ margin-top:10px; line-height:1.5; color:var(--tinta-suave); }
.bienvenida .boton{ margin-top:22px; width:100%; }

/* ---------- formularios del jardín ----------
   Ritmo en em para que crezcan con el tamaño de letra del teléfono; la
   etiqueta siempre encima del campo (la cercanía dice a qué pertenece), y
   la ayuda debajo, donde se lee después de haber entendido qué se pide. */
.campo{ display:block; text-align:left; margin-top:1.35em; }
.campo > .etq{
  display:block; font-weight:700; font-size:.95rem; line-height:1.3;
  letter-spacing:.01em; color:var(--tinta);
}
.campo > .etq .suave{ font-weight:500; color:var(--tinta-suave); }
.campo > .ayuda{
  display:block; margin-top:.45em; font-weight:500; font-size:.82rem;
  line-height:1.45; color:var(--tinta-suave);
}
.campo input{
  display:block; width:100%; margin-top:.5em;
  /* 16px evita que iOS haga zoom al enfocar */
  font-size:1rem; min-height:2.9rem;
}

/* El PIN dejó de ser un extra: es la llave del jardín, y el recuadro lo dice
   antes de que se lea la ayuda. */
.campo-llave{
  margin-top:1.5em; margin-bottom:.35em; padding:1em 1em 1.15em;
  background:rgba(120,165,105,.09);
  border:1.5px solid rgba(120,165,105,.32); border-radius:14px;
}

#tut-pin{ text-align:center; letter-spacing:.4em; font-size:1.35rem; }
#tut-pin::placeholder{ letter-spacing:.4em; }

/* Lo que el servidor no aceptó se dice donde está el campo, no en un aviso
   que se va solo: aquí se está guardando la llave del jardín. */
.error-campo{
  margin-top:1em; padding:.7em .85em; border-radius:12px;
  background:rgba(200,70,90,.09); border:1.5px solid rgba(200,70,90,.28);
  color:#96334a; font-size:.88rem; line-height:1.45; text-align:left;
}

/* La respuesta ocurre al presionar, no al soltar. */
.ficha .boton{ transition:transform .1s ease-out; }
.ficha .boton:active{ transform:scale(.97); }
#form-nombre-tut .boton,
#form-llave-jardin .boton{ width:100%; margin-top:1.5em; min-height:3rem; }

@media (prefers-reduced-motion: reduce){
  .ficha .boton{ transition:none; }
  .ficha .boton:active{ transform:none; }
}

/* ── El taller del florero: forma, papel y vista en vivo del ramo ── */
.semilla-opcion .paso{
  width:26px;height:26px;flex:none;margin:0 4px;border:0;border-radius:8px;cursor:pointer;
  background:#efe3cd;color:#6d5c45;font:700 15px/1 Fredoka,sans-serif;
}
.semilla-opcion .paso:active{ transform:scale(.9); }
.semilla-opcion .cuantas{ display:flex;align-items:center;justify-content:center; }
.semilla-opcion .cuantas i{ font-style:normal;min-width:2.4em;text-align:center; }
.semilla-opcion.elegida{ outline:2px solid #d3467d; outline-offset:2px; border-radius:12px; }
.semilla-opcion .tono{ display:block;font-size:.72rem;color:#a8977c;margin-top:-2px; }

.ramo-vista{
  display:grid;place-items:center;min-height:190px;margin:.2rem 0 .4rem;
  background:radial-gradient(ellipse at 50% 62%, rgba(255,255,255,.85), rgba(246,239,221,0) 70%);
  border-radius:16px;
}
.ramo-vista .sprite-ramo{ width:min(210px, 62vw); height:auto; display:block; }
.vista-vacia{ color:#a8977c; font-size:1.05rem; }
.taller-titulo{
  margin:.9rem 0 .35rem;font:600 .82rem/1 Fredoka,sans-serif;color:#8a7a5f;
  text-transform:uppercase;letter-spacing:.08em;
}
.tira-opciones{ display:flex;flex-wrap:wrap;gap:.4rem; }
.opcion-chip,.opcion-papel{
  flex:1 1 auto;min-height:44px;padding:.5rem .7rem;border:1.5px solid #e2d7c3;border-radius:12px;
  background:#fffdf7;color:#6d5c45;font:600 .82rem/1.2 Fredoka,sans-serif;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.4rem;
}
.opcion-chip.activa,.opcion-papel.activa{ border-color:#d3467d;color:#d3467d;background:#fff5f8; }
.opcion-chip:active,.opcion-papel:active{ transform:scale(.96); }
.opcion-papel .muestra{
  width:17px;height:17px;border-radius:5px;border:1.5px solid;display:inline-block;flex:none;
}
.pista-diseno{ margin:.35rem 0 0;font-size:.82rem;color:#8a7a5f;font-style:italic; }
.taller{ text-align:left; }
.taller h3, .taller .ficha-stats, .taller .ramo-vista{ text-align:center; }
.taller label{ display:block; margin:12px 0 0; font-weight:600; font-size:.95rem; }
.ficha .regalo{ font-size:.9rem; color:#7c5c22; margin:10px 0 0; }

/* ── La repisa: los ramos que armó ella. No van al diario (ése es de los
      ramos que le regalaron), viven donde los hizo. ── */
.repisa-ramos{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
  gap:12px; margin:10px 0 4px;
}
.ramo-repisa{
  margin:0; padding:8px 6px 10px; background:#fbf7ea;
  border:1.5px solid #e0d3b2; border-radius:12px; text-align:center;
}
.ramo-repisa .sprite-ramo{ width:100%; max-width:110px; height:auto; display:block; margin:0 auto; }
.ramo-repisa figcaption{ margin-top:4px; line-height:1.25; }
.ramo-repisa figcaption .mano{ display:block; font-size:1.15rem; color:var(--rosa-honda, #c2557f); }
.ramo-repisa figcaption small{ display:block; font-size:.7rem; color:#a8977c; }