@font-face { font-family: "Source Serif 4"; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/source-serif-4-latin-wght-italic.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-display: swap; src: url(/fonts/source-sans-3-latin-wght-normal.woff2) format("woff2"); }

/* Paleta de la identidad visual (Publicidad/Identidad visual/11 Paleta) */
:root {
  --azul: #24405E;
  --noche: #1A2F47;
  --azul-tono: #2B4B6D;
  --rosa: #A85F5E;
  --rosa-claro: #C98584;
  --rosa-oscuro: #8E4F4E;
  --rosa-suave: #F2E3DF;
  --rosa-tono: #9B5453;
  --rosa-sobre-azul: #E8B4B2;
  --marfil: #FAF6EF;
  --blanco: #FFFDF9;
  --linea: #E7DFD3;
  --tinta: #1F2630;
  --gris: #4F5866;

  /* Lo que cambia con el modo oscuro: las bandas claras */
  --claro-fondo: var(--marfil);
  --claro-papel: var(--blanco);
  --claro-tinta: var(--tinta);
  --claro-suave: var(--gris);
  --claro-titulo: var(--azul);
  --suave-fondo: var(--rosa-suave);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --claro-fondo: #121F2E;
    --claro-papel: #1B2A3C;
    --claro-tinta: #EDE7DD;
    --claro-suave: #B8C2CE;
    --claro-titulo: #F2E3DF;
    --suave-fondo: #22344A;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--noche); color: var(--claro-tinta);
  font: 400 1.0625rem/1.65 "Source Sans 3", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
::selection { background: var(--rosa-claro); color: var(--noche); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3 { font-family: "Source Serif 4", Georgia, serif; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; }
:focus-visible { outline: 3px solid var(--rosa-claro); outline-offset: 3px; border-radius: 6px; }
.icono { width: 1.6rem; height: 1.6rem; }

/* Bandas de color, como los fondos de la identidad */
.banda { padding: clamp(4.5rem, 10vw, 8rem) 0; position: relative; overflow: hidden; }
.ancho { width: min(1120px, 100% - 2.5rem); margin-inline: auto; position: relative; }
.banda-azul { background: var(--azul); color: var(--marfil); }
.banda-noche { background: var(--noche); color: var(--marfil); }
.banda-rosa { background: var(--rosa); color: var(--blanco); }
.banda-marfil { color: var(--claro-tinta);
  background:
    repeating-linear-gradient(90deg, transparent 0 239px, rgba(36, 64, 94, .05) 239px 241px),
    repeating-linear-gradient(0deg, transparent 0 179px, rgba(36, 64, 94, .05) 179px 181px),
    var(--claro-fondo); }
.banda-suave { background: var(--suave-fondo); color: var(--claro-tinta); }
.banda-marfil h2, .banda-suave h2 { color: var(--claro-titulo); }

/* Píldoras (05 Botones y píldoras) */
.pildora {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 1rem/1 "Source Sans 3", sans-serif; text-decoration: none; white-space: nowrap;
  padding: 1rem 1.7rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer;
  transition: transform .4s var(--ease), background-color .3s, color .3s, box-shadow .4s var(--ease);
}
.pildora:hover { transform: translateY(-2px); }
.pildora:active { transform: translateY(0); }
.pildora-rosa { background: var(--rosa-tono); color: var(--blanco); box-shadow: 0 10px 24px -12px rgba(10, 20, 33, .55); }
.pildora-rosa:hover { background: var(--rosa-oscuro); }
.pildora-linea { border-color: rgba(250, 246, 239, .55); color: var(--marfil); }
.pildora-linea:hover { background: var(--marfil); color: var(--azul); border-color: var(--marfil); }
.pildora-azul-linea { border-color: var(--azul); color: var(--azul); }
.pildora-azul-linea:hover { background: var(--azul); color: var(--marfil); }
@media (prefers-color-scheme: dark) {
  .pildora-azul-linea { border-color: var(--rosa-suave); color: var(--rosa-suave); }
  .pildora-azul-linea:hover { background: var(--rosa-suave); color: var(--noche); }
}
.pildora[disabled] { opacity: .6; cursor: progress; transform: none; }

/* Cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem clamp(1.25rem, 4vw, 3rem); background: var(--azul); color: var(--marfil);
  border-bottom: 1px solid rgba(250, 246, 239, .12);
}
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marca img { height: 40px; width: auto; }
.marca span { font-family: "Source Serif 4", serif; font-size: 1.15rem; white-space: nowrap; }
.menu { display: flex; align-items: center; gap: 1.4rem; font-size: .95rem; white-space: nowrap; }
.menu > a:not(.pildora) { text-decoration: none; opacity: .85; }
.menu > a[aria-current] { opacity: 1; color: var(--rosa-sobre-azul); text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 2px; }
.menu > a:not(.pildora):hover { opacity: 1; color: var(--rosa-sobre-azul); }
.menu .pildora { padding: .6rem 1.1rem; font-size: .9rem; }
.idiomas { display: flex; gap: .2rem; }
.idiomas a { text-decoration: none; font-size: .78rem; font-weight: 600; letter-spacing: .06em; padding: .3rem .5rem; border-radius: 999px; opacity: .75; }
.idiomas a:hover { opacity: 1; }
.idiomas a[aria-current] { background: var(--rosa-suave); color: var(--azul); opacity: 1; }
.menu-boton { display: none; }

/* Portada: el invernadero */
.portada {
  position: relative; min-height: calc(100svh - 62px); overflow: hidden; color: var(--marfil);
  display: grid; grid-template-rows: 1fr auto;
  background:
    radial-gradient(60% 55% at 72% 28%, rgba(201, 133, 132, .28), transparent 70%),
    radial-gradient(40% 40% at 18% 20%, rgba(250, 246, 239, .10), transparent 70%),
    linear-gradient(180deg, #2B4B6D 0%, var(--azul) 45%, var(--noche) 100%);
}
.invernadero { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.invernadero .cristal { fill: rgba(250, 246, 239, .045); }
.invernadero .reflejo path { fill: rgba(255, 253, 249, .055); }
.invernadero .montantes line { stroke: #10213A; stroke-width: 5; opacity: .85; }
.invernadero .arco { fill: none; stroke: #0E1C30; stroke-width: 14; }
.portada-texto { position: relative; z-index: 2; align-self: center; padding: clamp(2rem, 4.5vw, 4rem) clamp(1.25rem, 7vw, 7rem) 1rem; max-width: 52rem; }
.portada-texto::before {
  content: ""; position: absolute; inset: -10% -20% -10% -30%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(26, 47, 71, .78), rgba(26, 47, 71, 0));
}
.portada h1 { font-size: clamp(2.9rem, 6.4vw, 6rem); font-weight: 400; line-height: .98; letter-spacing: -0.025em; text-shadow: 0 2px 30px rgba(10, 20, 33, .35); }
.portada h1 em { display: block; color: var(--rosa-sobre-azul); font-style: italic; }
.linea { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 32rem; margin: 1.5rem 0 2rem; color: rgba(250, 246, 239, .86); }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Repisa y macetas */
.repisa { position: relative; z-index: 2; padding: 0 clamp(1rem, 5vw, 5rem); }
.repisa::after {
  content: ""; display: block; height: 22px; margin: 0 calc(-1 * clamp(1rem, 5vw, 5rem));
  background: linear-gradient(180deg, #8E4F4E 0 6px, #7A4343 6px 100%); box-shadow: 0 18px 30px -10px rgba(0, 0, 0, .45);
}
.macetas { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 3vw, 3rem); align-items: end; }
.maceta { position: relative; display: grid; justify-items: center; }
.planta { width: min(100%, 150px); height: auto; display: block; overflow: visible; margin-bottom: -2px; }
.etiqueta {
  position: absolute; bottom: 9%; left: 50%; translate: -50% 0; padding: .25rem .7rem; border-radius: 999px;
  background: var(--blanco); color: var(--azul); font: 600 clamp(.72rem, 1.1vw, .9rem)/1.2 "Source Sans 3", sans-serif;
  white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(10, 20, 33, .4);
}
.globo-maceta {
  position: absolute; top: -2%; left: 58%; z-index: 3; padding: .55rem .95rem; border-radius: 1.2rem 1.2rem 1.2rem .35rem;
  font: 600 clamp(.85rem, 1.3vw, 1.1rem)/1 "Source Serif 4", serif; white-space: nowrap;
  background: var(--blanco); color: var(--azul); box-shadow: 0 12px 24px -12px rgba(10, 20, 33, .6);
}
.maceta:nth-child(2) .globo-maceta { background: var(--rosa-tono); color: var(--blanco); }
.maceta:nth-child(3) .globo-maceta { background: var(--rosa-suave); color: var(--rosa-oscuro); }
.maceta:nth-child(4) .globo-maceta { background: var(--marfil); }
.crece .tallo { transform-box: fill-box; transform-origin: 50% 100%; }
.flor-maceta .abre { transform-box: fill-box; transform-origin: center; }
.hoja { transform-box: fill-box; transform-origin: 50% 100%; }

/* Vivero: las plantas crecen de A1 a C1 al bajar */
.crecer-escena { position: relative; height: 260vh; background: var(--noche); color: var(--marfil); }
.crecer-fijo { position: sticky; top: 62px; height: calc(100svh - 62px); display: grid; align-items: center; overflow: hidden;
  background: radial-gradient(50% 50% at 60% 40%, rgba(201, 133, 132, .16), transparent 70%), var(--noche); }
.crecer-ancho { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.vivero { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 4vw, 3rem); align-items: end; }
.regla { list-style: none; margin: 0; padding: 0 0 4.5rem; display: grid; gap: clamp(1.4rem, 5vh, 3.2rem); border-left: 3px solid rgba(250, 246, 239, .35); }
.regla li { position: relative; padding-left: 1.1rem; font: 600 1.05rem/1 "Source Sans 3", sans-serif; letter-spacing: .08em; color: rgba(250, 246, 239, .45); transition: color .4s, transform .4s var(--ease); }
.regla li::before { content: ""; position: absolute; left: -3px; top: 50%; width: .7rem; height: 3px; background: currentColor; }
.regla li.alcanzado { color: var(--rosa-sobre-azul); transform: translateX(4px); }
.macetas-grandes .globo-maceta { opacity: var(--globos, 0); transition: opacity .4s; }
.macetas-grandes .planta { width: min(100%, 230px); }
.macetas-grandes .crece .tallo { transform: scaleY(calc(.25 + var(--p) * .75)); }
.macetas-grandes .flor-maceta { transform: translate(100px, calc(60px + (1 - var(--p)) * 156px)); }
.macetas-grandes .abre { transform: scale(calc(.03 + var(--p) * .11)); }
.macetas-grandes .hojas { opacity: calc(var(--p) * 2); }

/* Cabecera de las páginas interiores: el mismo invernadero, más bajo */
.cabeza-pagina {
  position: relative; overflow: hidden; color: var(--marfil); padding: clamp(4rem, 10vw, 7.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  background: radial-gradient(55% 80% at 75% 20%, rgba(201, 133, 132, .26), transparent 70%), linear-gradient(180deg, #2B4B6D, var(--azul));
}
.cabeza-pagina h1 { position: relative; z-index: 1; font-size: clamp(3rem, 8vw, 6rem); font-weight: 400; line-height: 1; letter-spacing: -0.025em; }
.cabeza-pagina .invernadero { opacity: .9; }
.cabeza-pagina + .banda-rosa h2 { display: none; }

/* Cierre con la llamada a escribir */
.cierre .ancho { display: grid; gap: 1.75rem; justify-items: start; }
.cierre h2 { color: var(--marfil); max-width: 18ch; }

/* Clases: estacas de jardín clavadas en el cantero */
.cantero { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0 0 46px; position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); align-items: end; }
.cantero::after {
  content: ""; position: absolute; left: -2rem; right: -2rem; bottom: 0; height: 58px; z-index: 2; border-radius: 40px 40px 6px 6px;
  background: radial-gradient(circle at 20% 30%, rgba(250, 246, 239, .12) 0 3px, transparent 4px) 0 0 / 46px 22px, linear-gradient(180deg, #9B5453, #7A4343);
}
.estaca { position: relative; display: grid; justify-items: center; rotate: calc((var(--k) - 1) * 1.6deg); transform-origin: 50% 100%; }
.estaca:nth-child(2) { margin-bottom: 28px; }
.tablilla {
  position: relative; z-index: 1; display: grid; gap: .8rem; justify-items: start; padding: 1.6rem 1.5rem 1.75rem;
  background: var(--blanco); color: var(--tinta); border-radius: 1.1rem 1.1rem .6rem .6rem;
  box-shadow: 0 18px 34px -22px rgba(26, 47, 71, .7);
}
.tablilla h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 400; color: var(--azul); }
.tablilla p { margin: 0; color: var(--gris); }
.palo { display: block; width: 16px; height: 96px; margin-top: -4px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, #EEDAD5, #E2C7C0); }
.disco {
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: var(--azul); color: var(--marfil);
}
.estaca:nth-child(2) .disco { background: var(--rosa-tono); }
.estaca:nth-child(3) .disco { background: var(--rosa-suave); color: var(--rosa-oscuro); }

/* Precio: etiquetas de vivero colgadas de un cordel */
.precio { display: grid; gap: 2rem; }
.precio h2, .precio-par, .moneda { position: relative; z-index: 1; }
.tendedero { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 6vw, 5rem); padding-top: 1.6rem; position: relative; }
.tendedero::before { content: ""; position: absolute; left: -100vw; right: -100vw; top: .6rem; height: 2px; background: rgba(255, 253, 249, .55); }
.etiqueta-precio {
  position: relative; margin: 0; display: grid; gap: .4rem; min-width: min(100%, 300px); padding: 2.4rem 2rem 1.6rem;
  background: var(--blanco); color: var(--azul); border-radius: .9rem;
  clip-path: polygon(14% 0, 86% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
  transform-origin: 50% -2.4rem; box-shadow: 0 20px 40px -20px rgba(26, 47, 71, .6);
}
.etiqueta-precio::before { content: ""; position: absolute; top: .9rem; left: 50%; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%; background: var(--rosa); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25); }
.precio-par .etiqueta-precio:nth-child(2) { background: var(--rosa-suave); }
.etiqueta-precio strong { font: 400 clamp(2.8rem, 7vw, 5rem)/1 "Source Serif 4", serif; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.etiqueta-precio span { color: var(--rosa-oscuro); max-width: 16rem; font-weight: 600; }
.cordel { position: absolute; }
.moneda { display: inline-flex; align-items: center; gap: .75rem; font-size: .95rem; color: var(--blanco); justify-self: start; }
.moneda select {
  font: 600 .95rem "Source Sans 3", sans-serif; color: var(--rosa-oscuro); background: var(--blanco);
  border: 0; border-radius: 999px; padding: .55rem 1rem;
}
.flor-precio { display: none; position: absolute; right: -24%; top: 40%; width: min(52vw, 520px); translate: 0 -50%; pointer-events: none; }
.flor-precio .p1 { fill: rgba(255, 253, 249, .1); }
.flor-precio .centro { fill: rgba(255, 253, 249, .14); }

/* Por qué: sobres de semillas */
.porque { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.sobre-semillas {
  position: relative; display: grid; gap: .75rem; align-content: start; padding: 2.6rem 1.6rem 1.8rem; overflow: hidden;
  background: var(--blanco); color: var(--tinta); border-radius: .5rem; rotate: calc(((var(--k) % 3) - 1) * .8deg);
  box-shadow: 0 18px 34px -24px rgba(26, 47, 71, .7);
}
.sobre-semillas:nth-child(3n+2) { background: var(--rosa-suave); }
.sobre-semillas:nth-child(3n) { background: #EEDAD5; }
.solapa {
  position: absolute; inset: 0 0 auto; height: 1.4rem; background: var(--azul);
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100%;
          mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100%;
}
.sobre-semillas:nth-child(3n+2) .solapa { background: var(--rosa-tono); }
.sobre-semillas:nth-child(3n) .solapa { background: var(--rosa-oscuro); }
.semilla-flor { position: absolute; right: -2.2rem; bottom: -2.2rem; width: 7.5rem; opacity: .9; }
.sobre-semillas h3 { font-size: 1.4rem; font-weight: 500; color: var(--azul); position: relative; }
.sobre-semillas p { margin: 0; color: var(--gris); position: relative; max-width: 22rem; padding-right: 2.5rem; }
.disco-suave { width: 3.2rem; height: 3.2rem; background: var(--azul); color: var(--marfil); }
.disco-suave .icono { width: 1.4rem; height: 1.4rem; }

/* Pasos: la planta en cuatro momentos */
.etapas { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); }
.etapa-paso { display: grid; gap: .8rem; justify-items: start; }
.etapa { width: 100%; max-width: 220px; height: auto; }
.etapa-paso p { margin: 0; }
.etapa-paso .paso { margin: 0; }

/* Conversaciones: pasos, preguntas, contacto */
.conversa { max-width: 760px; }
.hilo { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; display: grid; gap: 1.1rem; }
.globo {
  position: relative; max-width: min(34rem, 88%); padding: 1.1rem 1.4rem; border-radius: 1.6rem;
  box-shadow: 0 12px 28px -18px rgba(26, 47, 71, .55); line-height: 1.5;
}
.globo::after { content: ""; position: absolute; bottom: -9px; border: 10px solid transparent; border-bottom: 0; }
.globo-tu { justify-self: end; background: var(--azul); color: var(--marfil); border-bottom-right-radius: .5rem; }
.globo-tu::after { right: 18px; border-top-color: var(--azul); }
.globo-lb { justify-self: start; background: var(--claro-papel); color: var(--claro-tinta); border-bottom-left-radius: .5rem; }
.globo-lb::after { left: 18px; border-top-color: var(--claro-papel); }
.globo h3 { font: 600 1.1rem/1.4 "Source Sans 3", sans-serif; }
.globo p { margin: 0; }
.firma { display: block; font: 600 .8rem/1 "Source Sans 3", sans-serif; letter-spacing: .04em; color: var(--rosa); margin-bottom: .45rem; }
@media (prefers-color-scheme: dark) { .firma { color: var(--rosa-sobre-azul); } }
.paso {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-right: .6rem; border-radius: 50%;
  font: 700 .85rem/1 "Source Sans 3", sans-serif; background: var(--rosa); color: var(--blanco); vertical-align: .1em;
}
.globo-tu .paso { background: var(--rosa-suave); color: var(--rosa-oscuro); }
@media (prefers-color-scheme: dark) {
  .globo-tu { background: var(--rosa); color: var(--blanco); }
  .globo-tu::after { border-top-color: var(--rosa); }
  .banda-suave { background: #2A2433; }
}

/* Sobre */
.sobre p { font: 300 clamp(1.4rem, 2.8vw, 2.2rem)/1.45 "Source Serif 4", serif; max-width: 38ch; margin: 1.5rem 0 0; position: relative; }
.sobre h2 { position: relative; color: var(--rosa-sobre-azul); }
.flor-sobre { position: absolute; right: -22%; top: 50%; width: min(70vw, 640px); translate: 0 -50%; }
.flor-sobre .p1 { fill: var(--azul-tono); }
.flor-sobre .p2 { fill: #284666; }
.flor-sobre .centro { fill: var(--azul-tono); }

/* Contacto: escribir el primer mensaje */
.redactar {
  margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--claro-papel); border-radius: 2rem 2rem 2rem .6rem; box-shadow: 0 24px 48px -30px rgba(26, 47, 71, .6);
}
.redactar label { display: grid; gap: .4rem; font-size: .92rem; font-weight: 600; color: var(--claro-suave); }
.redactar input, .redactar select, .redactar textarea {
  font: 400 1rem/1.4 "Source Sans 3", sans-serif; color: var(--claro-tinta); background: var(--claro-fondo);
  border: 1.5px solid transparent; border-radius: 1rem; padding: .85rem 1rem; width: 100%;
  transition: border-color .2s, background-color .2s;
}
.redactar textarea { resize: vertical; min-height: 6rem; }
.redactar input:focus, .redactar select:focus, .redactar textarea:focus { border-color: var(--rosa); outline: none; background: var(--claro-papel); }
.redactar input:user-invalid { border-color: var(--rosa); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.enviar-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: .25rem; }
.o { color: var(--claro-suave); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; }
.estado { margin: 0; min-height: 1.4em; font-weight: 600; }
.estado.ok { color: var(--claro-titulo); }
.estado.mal { color: var(--rosa); }

/* Pie */
.pie { padding: 4rem 1.25rem 6.5rem; display: grid; justify-items: center; gap: 1.25rem; text-align: center; color: rgba(250, 246, 239, .72); font-size: .9rem; }
.pie img { width: 150px; }
.pie p { margin: 0; }

.flotante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; background: #1E7A4C; color: #fff; box-shadow: 0 12px 28px -8px rgba(10, 20, 33, .5);
  transition: transform .4s var(--ease);
}
.flotante:hover { transform: scale(1.07); }

/* Movimiento: la flor se abre y la conversación empieza */
@media (prefers-reduced-motion: no-preference) {
  .js .portada-texto > * { animation: subir 1s var(--ease) both; }
  .js .linea { animation-delay: .15s; }
  .js .acciones { animation-delay: .3s; }
  .js .portada .crece .tallo { animation: tallo 1.2s var(--ease) both; animation-delay: calc(.3s + var(--m) * .15s); }
  .js .portada .abre { animation: brotar 1s var(--ease) both; animation-delay: calc(1.1s + var(--m) * .18s); }
  .js .portada .hoja { animation: brotar .8s var(--ease) both; animation-delay: calc(.8s + var(--m) * .15s); }
  .js .portada .globo-maceta { animation: globo .7s var(--ease) both; animation-delay: calc(2s + var(--m) * .35s); }
  .js .portada .flor-maceta .abre { transform-origin: center; }

  .js .aparece { opacity: 0; translate: 0 14px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
  .js .aparece.visto { opacity: 1; translate: 0 0; }
  .etiqueta-precio { animation: mecer 5s ease-in-out infinite alternate; }
  .etiqueta-precio:nth-child(2) { animation-duration: 6.5s; animation-delay: -2s; }
  .js .flor-precio .flor-giro, .js .flor-sobre .flor-giro { animation: girar 120s linear infinite; }
}
@keyframes tallo { from { transform: scaleY(0); } }
@keyframes brotar { from { scale: 0; } }
@keyframes mecer { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
@keyframes girar { to { rotate: 360deg; } }
@keyframes globo { from { opacity: 0; transform: translateY(12px) scale(.6); } }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }

/* Tablet y móvil */
@media (max-width: 1080px) {
  .menu-boton { display: grid; gap: 6px; background: none; border: 0; padding: .7rem; cursor: pointer; }
  .menu-boton span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--marfil); transition: transform .3s var(--ease); }
  .menu-boton[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 1.2rem;
    padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 2rem; background: var(--azul); display: none; font-size: 1.15rem;
    box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .5);
  }
  .menu.abierto { display: flex; }
  .porque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cantero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .portada { min-height: 0; }
  .portada-texto { padding-bottom: 2rem; }
}
@media (max-width: 640px) {
  .macetas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
  .globo-maceta { left: 30%; top: -8%; padding: .4rem .6rem; }
  .etiqueta { padding: .2rem .45rem; }
  .vivero { grid-template-columns: 1fr; }
  .regla { display: flex; justify-content: space-between; border-left: 0; border-bottom: 3px solid rgba(250, 246, 239, .35); padding: 0 0 .6rem; gap: 0; order: 2; }
  .regla li { padding-left: 0; }
  .regla li::before { display: none; }
  .regla { flex-direction: row-reverse; }
  .marca span { font-size: 1.02rem; }
  .cantero { grid-template-columns: 1fr; gap: 0; }
  .estaca, .estaca:nth-child(2) { rotate: 0deg; margin-bottom: 0; }
  .estaca .palo { height: 26px; }
  .estaca:last-child .palo { height: 70px; }
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .porque { grid-template-columns: 1fr; }
  .etiqueta-precio { min-width: 0; width: 100%; }
  .dos { grid-template-columns: 1fr; }
  .enviar-fila .pildora { width: 100%; }
  .enviar-fila .o { width: 100%; text-align: center; }
  .flor-precio { right: -35%; opacity: .7; }
}