/* ══════════════════════════════════════════════════════════════════
   Almácigo · floristería de barrio
   ------------------------------------------------------------------
   Ejemplo de meglio para la tarifa de web estática.

   Registro deliberadamente OPUESTO al de meglio: papel claro, verdes,
   tipografía con carácter. Si las tres demos se parecieran entre sí,
   estaríamos demostrando justo lo contrario de lo que se vende.

   La idea rectora: una floristería no tiene catálogo, tiene temporada.
   Por eso la sección central es un calendario de lo que entra cada mes,
   no una parrilla de productos.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --papel:  #EFF1EA;
  --papel2: #E5E9DD;
  --crema:  #FBFBF7;
  --tinta:  #1C2B21;
  --verde:  #46654E;
  --flor:   #A82E5D;   /* para texto: cumple contraste */
  --viva:   #C13B6E;   /* para rellenos y adornos */
  --sol:    #E5A13A;
  --linea:  rgba(28, 43, 33, .14);

  --canamo: #C2AE8D;   /* cordel de canamo, el del atado */
  --disp: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --txt:  'Karla', 'Segoe UI', system-ui, sans-serif;

  --e1: 8px;  --e2: 16px; --e3: 24px;
  --e4: 40px; --e5: 64px; --e6: 104px;

  --curva: cubic-bezier(.23, 1, .32, 1);
  --suave: cubic-bezier(.65, 0, .35, 1);
}

/* ─── Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--txt);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--disp);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
}
p { margin: 0 0 var(--e2); }
ul, table { margin: 0; padding: 0; }
li { list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--flor); outline-offset: 3px; border-radius: 4px; }

.salto { position: absolute; left: -9999px; }
.salto:focus { left: 12px; top: 56px; z-index: 99; background: var(--flor); color: #fff; padding: 12px 18px; }

.h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  margin-bottom: var(--e3);
}
.ojo {
  font-family: var(--disp);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 var(--e2);
}

/* ─── Aviso de demo ─────────────────────────────────────────────── */
.demo {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px var(--e2);
  padding: 8px var(--e3);
  background: var(--tinta);
  color: var(--papel);
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
}
@media (min-width: 640px) { .demo { padding: 9px var(--e3); font-size: .86rem; } }
.demo p { margin: 0; }
.demo strong { color: var(--sol); }
.demo a {
  color: var(--papel);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ─── Botones ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--flor);
  background: var(--flor);
  color: var(--crema);
  font-family: var(--disp);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  transition: transform .18s var(--curva), background-color .25s var(--curva),
              box-shadow .25s var(--curva);
}
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #91264F; box-shadow: 0 10px 26px -12px rgba(168, 46, 93, .8); }
}
.btn--linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .btn--linea:hover { background: var(--tinta); color: var(--papel); box-shadow: none; }
}
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: .9rem; }

/* ─── Cabecera ──────────────────────────────────────────────────── */
.cab {
  position: sticky;
  top: 38px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 14px clamp(var(--e3), 5vw, var(--e5));
  background: rgba(239, 241, 234, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca__ico { width: 30px; height: 30px; }
.mi-tallo { stroke: var(--verde); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.mi-flor { fill: var(--viva); }
.mi-hoja { fill: var(--verde); }
.marca span { font-family: var(--disp); font-weight: 700; font-size: 1.32rem; letter-spacing: -.03em; }

.cab__nav { display: none; margin-left: auto; gap: var(--e3); }
.cab__nav a {
  position: relative;
  font-size: .96rem;
  text-decoration: none;
  color: var(--verde);
  padding: 4px 0;
  transition: color .2s var(--curva);
}
.cab__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1.5px;
  background: var(--flor);
  transition: right .3s var(--curva);
}
.cab__nav a:hover { color: var(--flor); }
.cab__nav a:hover::after { right: 0; }
.cab .btn { margin-left: auto; }
@media (min-width: 900px) {
  .cab__nav { display: flex; }
  .cab .btn { margin-left: 0; }
}

/* ─── Portada ───────────────────────────────────────────────────── */
.portada {
  position: relative;
  display: grid;
  gap: var(--e4);
  padding: var(--e5) clamp(var(--e3), 5vw, var(--e5)) var(--e6);
  align-items: center;
}
@media (min-width: 940px) {
  .portada { grid-template-columns: 1fr 1fr; gap: var(--e5); padding-block: var(--e6); }
}

.portada__h {
  font-size: clamp(2.6rem, 1.5rem + 5vw, 4.6rem);
  margin-bottom: var(--e3);
}
/* El subrayado se traza al cargar, como si alguien lo hubiera pasado a
   mano por encima. Va de estado visible a estado visible: sin fill-mode. */
.portada__h em {
  position: relative;
  font-style: normal;
  color: var(--flor);
}
.portada__h em::after {
  content: "";
  position: absolute;
  left: 0; right: .08em; bottom: .04em;
  height: .07em;
  border-radius: 999px;
  background: var(--sol);
  transform-origin: 0 50%;
  animation: traza 1.1s var(--suave);
}
@keyframes traza { 0%, 26% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.portada__p { font-size: 1.12rem; color: var(--verde); max-width: 44ch; margin-bottom: var(--e4); }
.portada__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.portada__foto { margin: 0; }
.portada__foto img {
  width: 100%;
  border-radius: 200px 200px 20px 20px;   /* arco, como un arriate */
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
@media (min-width: 940px) {
  .portada__foto img { aspect-ratio: 4 / 5; }
}

/* ─── Temporada: el corazón de la web ───────────────────────────── */
.temporada {
  background: var(--papel2);
  padding: var(--e6) clamp(var(--e3), 5vw, var(--e5));
}
.tem__cab { max-width: 52ch; margin-bottom: var(--e4); }
.tem__p { color: var(--verde); font-size: 1.08rem; margin: 0; }

/* Tira de meses. Se desplaza en móvil sin romper la página. */
.meses {
  position: relative;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: var(--e2);
  margin-bottom: var(--e4);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
/* La marca viaja de un mes a otro en vez de encenderse y apagarse.
   Es la diferencia entre cambiar de pestana y recorrer un ano. */
.meses__marca {
  position: absolute;
  top: 0;
  left: 0;
  height: 41px;
  border-radius: 999px;
  background: var(--tinta);
  transition: transform .48s var(--suave), width .48s var(--suave);
  pointer-events: none;
}
.mes {
  position: relative;
  z-index: 1;
  flex: none;
  scroll-snap-align: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--verde);
  font-family: var(--disp);
  font-weight: 600;
  font-size: .94rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .3s var(--curva), color .3s var(--curva),
              border-color .3s var(--curva), transform .18s var(--curva);
}
.mes:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) {
  .mes:hover { border-color: var(--linea); }
}
/* El fondo lo pone la marca que viaja, no el propio boton; el texto
   espera a que llegue antes de aclararse. */
.mes[aria-selected="true"] {
  color: var(--papel);
  background: transparent;
  border-color: transparent;
  transition-delay: .14s;
}

.tem__panel {
  position: relative;
  background: var(--crema);
  border-radius: 26px;
  padding: clamp(var(--e3), 4vw, var(--e5));
  overflow: hidden;
  /* Los cuatro colores del mes viven aqui: la lista y el ramo beben
     de las mismas variables, asi no pueden desincronizarse. */
  --t0: var(--viva); --t1: var(--verde); --t2: var(--sol); --t3: var(--flor);
  --acento: var(--viva);
  display: grid;
  gap: var(--e4);
  box-shadow: 0 30px 60px -46px rgba(28, 43, 33, .5);
}
@media (min-width: 940px) {
  .tem__panel { grid-template-columns: 1.4fr .6fr; gap: var(--e5); align-items: center; }
}

/* Una banda con el color dominante del mes. Se rehace al cambiar. */
.tem__barra {
  position: absolute;
  top: 0; left: 0;
  height: 4px;
  width: 100%;
  background: var(--acento);
  transform-origin: 0 50%;
  transition: background-color .55s var(--curva), transform .6s var(--suave);
}
.tem__panel.is-cambiando .tem__barra { transform: scaleX(0); transition-duration: .28s; }
.tem__mes {
  font-family: var(--disp);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--verde);
  margin: 0 0 var(--e3);
}
.tem__mes b { color: var(--tinta); }

.flores { display: grid; gap: 2px; margin-bottom: var(--e3); }
.flor {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: var(--e2);
  padding: 16px 8px;
  border-top: 1px solid var(--linea);
  cursor: default;
  transition: background-color .3s var(--curva), padding-left .3s var(--curva);
}
.flor:last-child { border-bottom: 1px solid var(--linea); }
.flor__punto {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--tono);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.flor__n { font-family: var(--disp); font-weight: 600; font-size: 1.14rem; }
.flor__d { color: var(--verde); font-size: .93rem; text-align: right; }

@media (hover: hover) and (pointer: fine) {
  .flor:hover { background: color-mix(in srgb, var(--tono) 12%, transparent); padding-left: 16px; }
  .flor:hover .flor__punto { transform: scale(1.9); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tono) 22%, transparent); }
}
.flor.is-tocada { background: color-mix(in srgb, var(--tono) 12%, transparent); }
.flor.is-tocada .flor__punto { transform: scale(1.9); }

.tem__pie { color: var(--verde); font-size: .92rem; margin: 0; max-width: 58ch; }
/* Solo se ve si el JavaScript no llega a vaciar la lista. */
.flor--sinjs { display: block; padding: 16px 8px; color: var(--verde); border-top: 1px solid var(--linea); }

/* ─── El ramo que se rehace ─────────────────────────────────────────
   Cuatro tallos, uno por flor del mes. Al cambiar de mes las cabezas
   se cierran, cambian de color y vuelven a abrir escalonadas. Todo con
   transiciones sobre el estado normal: si algo fallara, el ramo se
   queda abierto y a la vista, nunca invisible.                        */
.tem__ramo { margin: 0; display: grid; justify-items: center; gap: var(--e2); }
.tem__ramo figcaption {
  font-family: var(--disp);
  font-size: .88rem;
  font-weight: 600;
  color: var(--verde);
  letter-spacing: .01em;
}
.tem__ramo figcaption span { color: var(--tinta); }

.ramo { width: min(100%, 290px); height: auto; overflow: visible; }

.atado { fill: var(--canamo); }
.atado__cabo { fill: none; stroke: var(--canamo); stroke-width: 3; stroke-linecap: round; }
.hoja { fill: var(--verde); opacity: .72; }

.tallo-l {
  fill: none;
  stroke: var(--verde);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.rama { transition: opacity .35s var(--curva), transform .5s var(--suave); }
.rama--0 .petalo, .rama--0 .baya { fill: var(--t0); }
.rama--1 .petalo, .rama--1 .baya { fill: var(--t1); }
.rama--2 .petalo, .rama--2 .baya { fill: var(--t2); }
.rama--3 .petalo, .rama--3 .baya { fill: var(--t3); }
.petalo, .baya { transition: fill .5s var(--curva); }
.ojo { fill: var(--crema); }

/* Tres formas por cabeza: roseta, espiga y rama de verde. Un ramo de
   verdad mezcla las tres, y el eucalipto no tiene petalos. */
.forma--espiga, .forma--verde { display: none; }
.rama[data-forma="espiga"] .forma--flor,
.rama[data-forma="verde"]  .forma--flor   { display: none; }
.rama[data-forma="espiga"] .forma--espiga { display: block; }
.rama[data-forma="verde"]  .forma--verde  { display: block; }
.verde__vara { fill: none; stroke: var(--verde); stroke-width: 2.2; stroke-linecap: round; }
.verde__hoja { fill: var(--verde); opacity: .82; }
/* Una rama de verde ocupa mas que una flor: si va a la misma
   escala parece un boton verde perdido en el ramo. */
.forma--verde { transform: scale(1.3); }

/* Estado natural: abierta. El cierre es el estado excepcional. */
.cabeza {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .46s var(--suave), opacity .3s var(--curva);
}
.tem__panel.is-cambiando .cabeza { transform: rotate(-40deg) scale(0); opacity: 0; transition-duration: .3s; }
.cabeza[data-c="1"] { transition-delay: .06s; }
.cabeza[data-c="2"] { transition-delay: .12s; }
.cabeza[data-c="3"] { transition-delay: .18s; }
.tem__panel.is-cambiando .cabeza[data-c="0"],
.tem__panel.is-cambiando .cabeza[data-c="1"],
.tem__panel.is-cambiando .cabeza[data-c="2"],
.tem__panel.is-cambiando .cabeza[data-c="3"] { transition-delay: 0s; }

/* Lista y ramo se senalan mutuamente. */
.ramo[data-viva] .rama { opacity: .22; }
.ramo[data-viva="0"] .rama--0,
.ramo[data-viva="1"] .rama--1,
.ramo[data-viva="2"] .rama--2,
.ramo[data-viva="3"] .rama--3 { opacity: 1; transform: translateY(-9px); }

/* Sin movimiento no hay cierre: el ramo cambia de golpe y a la vista. */
@media (prefers-reduced-motion: reduce) {
  .tem__panel.is-cambiando .cabeza { transform: none; opacity: 1; }
}

/* ─── Qué hacemos: la lista revela su foto ──────────────────────── */
.hacemos { padding: var(--e6) clamp(var(--e3), 5vw, var(--e5)); }
.hac { display: grid; gap: var(--e4); }
@media (min-width: 940px) {
  .hac { grid-template-columns: 1.15fr .85fr; gap: var(--e5); align-items: start; }
}

.hac__lista { display: grid; }
.hac__it {
  padding: var(--e3) 0;
  border-top: 1px solid var(--linea);
  cursor: default;
  transition: padding-left .35s var(--curva);
}
.hac__it:last-child { border-bottom: 1px solid var(--linea); }
.hac__it h3 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  transition: color .3s var(--curva);
}
.hac__it p { color: var(--verde); margin: 0; max-width: 46ch; }
@media (hover: hover) and (pointer: fine) {
  .hac__it:hover { padding-left: 18px; }
  .hac__it:hover h3 { color: var(--flor); }
}
.hac__it.is-viva { padding-left: 18px; }
.hac__it.is-viva h3 { color: var(--flor); }

.hac__marco {
  position: relative;
  aspect-ratio: 1;
  border-radius: 24px;
  overflow: hidden;
  background: var(--papel2);
}
.hac__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .55s var(--curva), transform .8s var(--curva);
}
.hac__img--on { opacity: 1; transform: scale(1); }
@media (min-width: 940px) {
  .hac__marco { position: sticky; top: 140px; }
}

/* ─── Taller ────────────────────────────────────────────────────── */
.taller {
  display: grid;
  gap: var(--e4);
  padding: var(--e6) clamp(var(--e3), 5vw, var(--e5));
  background: var(--papel2);
  align-items: center;
}
@media (min-width: 940px) {
  .taller { grid-template-columns: 1fr 1fr; gap: var(--e5); }
}
.taller__foto { margin: 0; }
/* height: auto hace falta: sin él manda el height="733" del HTML y el
   aspect-ratio no se aplica nunca. */
.taller__foto img {
  width: 100%;
  height: auto;
  border-radius: 20px 20px 200px 200px;
  aspect-ratio: 4/5;
  object-fit: cover;
}
/* En dos columnas la foto va cuadrada: con el texto de al lado corto, la
   alta dejaba medio metro de hueco. Apilada en el móvil vuelve a ser alta. */
@media (min-width: 940px) { .taller__foto img { aspect-ratio: 1; } }
.taller__txt p { color: var(--verde); max-width: 46ch; }

/* ─── Visítanos ─────────────────────────────────────────────────── */
.visita { padding: var(--e6) clamp(var(--e3), 5vw, var(--e5)); }
.visita__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e4);
}
.visita__cab .h2 { margin: 0; }

/* Píldora que dice si está abierto AHORA. Se calcula de verdad. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--disp);
  font-weight: 600;
  font-size: .9rem;
  margin: 0;
  border: 1.5px solid var(--linea);
}
.estado::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.estado.abierto { color: #1F6B42; border-color: rgba(31, 107, 66, .32); background: rgba(31, 107, 66, .09); }
.estado.cerrado { color: var(--flor); border-color: rgba(168, 46, 93, .3); background: rgba(168, 46, 93, .07); }

.visita__cols { display: grid; gap: var(--e4); }
@media (min-width: 860px) { .visita__cols { grid-template-columns: repeat(3, 1fr); gap: var(--e5); } }
.visita h3 { font-size: 1.24rem; margin-bottom: var(--e2); }

.horas { width: 100%; border-collapse: collapse; margin-bottom: var(--e2); }
.horas td { padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: .96rem; }
.horas td:last-child { text-align: right; color: var(--verde); font-variant-numeric: tabular-nums; }
.horas tr.hoy td { color: var(--flor); font-weight: 700; }

.dir { font-family: var(--disp); font-weight: 600; font-size: 1.16rem; line-height: 1.4; }
.nota { color: var(--verde); font-size: .93rem; }
.contacto .btn { width: 100%; margin-bottom: 10px; }

/* ─── Pie ───────────────────────────────────────────────────────── */
.pie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  justify-content: space-between;
  padding: var(--e4) clamp(var(--e3), 5vw, var(--e5));
  border-top: 1px solid var(--linea);
  color: var(--verde);
  font-size: .9rem;
}
.pie p { margin: 0; }
.pie__meglio a { color: var(--flor); font-weight: 700; }

/* ─── Aparición al entrar en pantalla ───────────────────────────── */
/* El escalonado va DENTRO de los keyframes, nunca con fill-mode: both.
   Con `both`, si la animación no llega a correr el elemento se queda
   invisible para siempre. Así el estado natural es visible. */
.sube { animation: sube .7s var(--curva); }
@keyframes sube {
  0%, 8% { opacity: 0; transform: translateY(22px); }
  100%   { opacity: 1; transform: none; }
}

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