/* Esqueje · taller de flores (concepto WEBO). Botánico y editorial: cal, berenjena y un verde tallo como único acento.
   Newsreader 300 (con cursiva solo para los nombres latinos) y Onest para el texto.
   Forma: esquinas de hoja (dos redondas y dos casi rectas) en fotos y paneles; píldora en lo pulsable.
   Movimiento (6/10, vivo y botánico): el titular sube por líneas y el logotipo brota; el calendario crece mes a mes
   como tallos mientras la marca de «hoy» recorre el año hasta el mes en curso (esqueje.js); el ramo se ata al entrar
   y sus flores se recolocan con un muelle suave al cambiar el tono o el tamaño. Estados ocultos solo bajo html.mov. */

@font-face { font-family: "Newsreader"; src: url("/assets/fonts/conceptos/newsreader-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/conceptos/newsreader-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/assets/fonts/conceptos/onest-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/assets/fonts/conceptos/onest-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --cal: #F4F3EE;
  --cal-2: #E9E6DC;
  --berenjena: #2B1530;
  --berenjena-2: #5E4A62;
  --tallo: #C8DC3F;
  --tallo-hondo: #B4C92C;
  --sobre: #F4F3EE;
  --sobre-2: rgb(244 243 238 / .76);
  --filete: rgb(43 21 48 / .14);
  --filete-fuerte: rgb(43 21 48 / .3);
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --texto: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hoja: 36px 4px 36px 4px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --cajon: cubic-bezier(.32, .72, 0, 1);
  --margen: clamp(20px, 5vw, 72px);
  --ancho: 1296px;
}

html { scroll-padding-top: 24px; }
/* Desplazamiento suave por CSS solo sin el JS de movimiento (con él lo hace esqueje.js: el CSS descuadra ScrollTrigger, que lo lee al cargar) */
@media (prefers-reduced-motion: no-preference) { html:not(.mov) { scroll-behavior: smooth; } }
[tabindex="-1"]:focus { outline: none; }
body { background: var(--cal); color: var(--berenjena); font: 400 1.0625rem/1.6 var(--texto); font-kerning: normal; }
::selection { background: var(--tallo); color: var(--berenjena); }
:focus-visible { outline: 2px solid var(--berenjena); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 300; text-wrap: balance; font-optical-sizing: auto; }
p { text-wrap: pretty; }
i[lang=la] { font-family: var(--display); font-style: italic; }

.saltar { position: absolute; left: 16px; top: 16px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--berenjena); color: var(--cal); text-decoration: none; transform: translateY(-180%); }
.saltar:focus-visible { transform: none; }

.hueco { position: relative; overflow: hidden; margin: 0; background: var(--berenjena); }
.hueco > svg, .hueco > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Botones y enlaces */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tallo); color: var(--berenjena);
  font: 500 1rem/1 var(--texto); text-decoration: none; white-space: nowrap;
  transition: background-color 200ms ease, transform 160ms var(--ease);
}
.boton:active { transform: scale(.97); }
.boton--claro { min-height: 44px; padding: 0 20px; background: var(--cal); color: var(--berenjena); }
.enlace {
  color: var(--berenjena); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .32em; text-decoration-color: var(--filete-fuerte); transition: text-decoration-color 200ms ease;
}
.enlace--claro { color: var(--sobre); text-decoration-color: rgb(244 243 238 / .5); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--tallo-hondo); }
  .boton--claro:hover { background: var(--tallo); }
  .enlace:hover { text-decoration-color: currentColor; }
  .cabecera__nav a:hover { text-decoration-color: var(--tallo); }
  .pie a:hover { color: var(--tallo); }
}

/* Cabecera sobre la foto */
.cabecera {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto;
  padding: clamp(18px, 2.6vw, 30px) var(--margen) 0;
  color: var(--sobre);
}
.cabecera :focus-visible { outline-color: var(--sobre); }
.marca { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 300 1.875rem/1 var(--display); letter-spacing: -.01em; }
.marca__signo { width: 26px; height: 26px; color: var(--tallo); }
.cabecera__nav ul { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.cabecera__nav a {
  font-size: .9375rem; font-weight: 500; color: var(--sobre); text-decoration: underline;
  text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: text-decoration-color 200ms ease;
}

/* Portada a sangre */
.portada {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; min-height: 100dvh; display: grid; align-items: end;
  background: var(--berenjena); color: var(--sobre);
}
.portada ::selection { background: var(--tallo); color: var(--berenjena); }
.portada :focus-visible { outline-color: var(--sobre); }
.portada__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.portada__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.portada__foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgb(32 14 36 / .92) 0%, rgb(32 14 36 / .72) 30%, rgb(32 14 36 / .18) 58%, rgb(32 14 36 / 0) 72%),
    linear-gradient(180deg, rgb(32 14 36 / .55) 0%, rgb(32 14 36 / 0) 22%);
}
.portada__in {
  width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto;
  padding: 140px var(--margen) clamp(56px, 9vh, 96px);
}
.portada__semana {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgb(244 243 238 / .14); box-shadow: inset 0 0 0 1px rgb(244 243 238 / .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .9375rem;
}
.portada__semana span { padding: 4px 12px; border-radius: 999px; background: var(--tallo); color: var(--berenjena); font-weight: 500; font-size: .875rem; }
.portada__titulo { margin-top: clamp(20px, 3vh, 28px); font-size: clamp(3.3rem, 7.6vw, 6rem); line-height: .98; letter-spacing: -.025em; }
.portada__titulo .linea { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.portada__titulo .linea > span { display: block; }
.portada__pie { margin-top: clamp(24px, 4vh, 40px); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; }
.portada__sub { font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); color: var(--sobre-2); max-width: 44ch; }

/* Calendario de temporada */
.temporada__in, .ramo__in, .taller__in, .visita__in, .pie__in {
  max-width: calc(var(--ancho) + 2 * var(--margen)); margin-inline: auto; padding-inline: var(--margen);
}
.temporada__in { padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px); }
.temporada h2, .ramo h2, .taller h2, .visita h2 { font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -.02em; }
.temporada__cab { max-width: 620px; }
.temporada__cab p { margin-top: 18px; font-size: 1.125rem; color: var(--berenjena-2); max-width: 46ch; }
.calendario { position: relative; margin-top: clamp(48px, 6vw, 80px); --nombre: minmax(220px, 1.1fr); }
/* Columna del mes en curso (la crea y coloca esqueje.js) */
.calendario__hoy { position: absolute; z-index: 0; top: 0; left: 0; border-radius: 12px; background: rgb(200 220 63 / .26); pointer-events: none; }
.calendario__meses, .calendario__filas { position: relative; z-index: 1; }
.calendario__meses, .fila { display: grid; grid-template-columns: var(--nombre) repeat(12, minmax(0, 1fr)); column-gap: 6px; align-items: center; }
.calendario__meses span { justify-self: center; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .8125rem; font-weight: 500; color: var(--berenjena-2); }
.calendario__meses span { transition: background-color 300ms ease, color 300ms ease; }
.calendario__meses span.es-hoy { background: var(--berenjena); color: var(--cal); }
.calendario__filas { margin-top: 10px; border-top: 1px solid var(--filete-fuerte); }
.fila { padding: 14px 0; border-bottom: 1px solid var(--filete); }
.fila .sr { position: absolute; }
.fila__flor { font: 300 1.5rem/1.15 var(--display); }
.fila__flor i { display: block; margin-top: 2px; font-size: .9375rem; color: var(--berenjena-2); }
.fila__meses { display: contents; }
.fila__meses b {
  height: 30px; border-radius: 6px; position: relative;
  background: radial-gradient(circle, var(--filete-fuerte) 0 2px, transparent 2.5px);
}
.fila__meses b.en {
  background: var(--c); box-shadow: inset 0 0 0 1px rgb(43 21 48 / .1);
  transform-origin: 0 50%;
}
.fila__meses b.en.es-hoy { box-shadow: 0 0 0 2px var(--cal), 0 0 0 3.5px var(--berenjena); }
.fila__meses b { transition: box-shadow 300ms ease; }
/* La anémona es casi blanca: un borde algo más firme para que su barra se lea sobre la cal */
.fila[data-meses="11,12,1,2,3,4"] b.en { box-shadow: inset 0 0 0 1px rgb(43 21 48 / .26); }
.fila[data-meses="11,12,1,2,3,4"] b.en.es-hoy { box-shadow: inset 0 0 0 1px rgb(43 21 48 / .26), 0 0 0 2px var(--cal), 0 0 0 3.5px var(--berenjena); }

/* Compositor de ramo */
.ramo { background: var(--cal-2); }
.ramo__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: center;
  padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px);
}
.ramo__vista {
  grid-column: 1 / 7; position: relative; aspect-ratio: 1 / 1; border-radius: var(--hoja); overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgb(255 255 255 / .75), rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, #F7F6F1, #E2DED1);
  box-shadow: inset 0 0 0 1px var(--filete);
}
.ramo__texto { grid-column: 8 / 13; }
.ramo__entrada { margin-top: 18px; font-size: 1.125rem; color: var(--berenjena-2); max-width: 40ch; }

/* Tonos del ramo: cada uno cambia las variables y las flores funden de color */
.ramo {
  --p1: #FBF8F1; --p2: #EEE8DA; --p3: #DCE4C6; --p4: #FFFFFF; --centro: #2C2630; --h1: #6E8B5B; --h2: #9DB08A;
  --escala: 1;
}
.ramo:has(input[value=rosas]:checked) { --p1: #E8B4B8; --p2: #F4D6D2; --p3: #C98698; --p4: #F7E8E3; --centro: #6B2E3E; --h1: #6E8B5B; --h2: #A3B48E; }
.ramo:has(input[value=calidos]:checked) { --p1: #F2A65A; --p2: #F7D07E; --p3: #E0705A; --p4: #FBE4C4; --centro: #6E3412; --h1: #6F7F45; --h2: #A88A4A; }
.ramo:has(input[value=silvestre]:checked) { --p1: #98A7D9; --p2: #CBBBE6; --p3: #F3EFE2; --p4: #7890C6; --centro: #2E2A55; --h1: #5E7D58; --h2: #8EA57A; }
.ramo:has(input[value="pequeño"]:checked) { --escala: .8; }
.ramo:has(input[value=generoso]:checked) { --escala: 1.06; }

.ramillete { position: absolute; inset: 0; transform: scale(var(--escala)); transform-origin: 50% 72%; transition: transform 640ms var(--cajon); }
.ramillete__flores { position: absolute; left: 11%; top: 12%; width: 78%; height: 54%; }
.ramillete__flores i { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.flor {
  width: calc(var(--s) * 1.3%); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, 0);
  background-color: var(--f);
  background-image:
    radial-gradient(circle at 36% 30%, rgb(255 255 255 / .62), rgb(255 255 255 / 0) 46%),
    radial-gradient(circle, rgb(0 0 0 / 0) 40%, rgb(43 21 48 / .16) 76%),
    repeating-conic-gradient(from 10deg, rgb(43 21 48 / .06) 0 3deg, rgb(43 21 48 / 0) 3deg 26deg);
  box-shadow: 0 14px 24px -14px rgb(43 21 48 / .55);
  transition: background-color 700ms ease, opacity 420ms ease, transform 640ms var(--cajon);
}
.flor::before { content: ""; position: absolute; inset: 20%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(43 21 48 / .07), 0 0 0 6px rgb(43 21 48 / .035); }
.flor.centro::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle, var(--centro) 0 30%, rgb(43 21 48 / .25) 58%, transparent 72%); opacity: .85; }
.c1 { --f: var(--p1); } .c2 { --f: var(--p2); } .c3 { --f: var(--p3); } .c4 { --f: var(--p4); }
.hoja {
  width: 30%; height: 11%; border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, var(--h2), var(--h1));
  transform: translate(-50%, 0) rotate(var(--r)); transform-origin: 50% 50%;
  transition: background 700ms ease, opacity 420ms ease;
}
.flor--extra, .hoja--extra { opacity: 0; }
.flor--extra { transform: translate(-50%, 8%) scale(.7); }
.ramo:has(input[value=generoso]:checked) .flor--extra,
.ramo:has(input[value=generoso]:checked) .hoja--extra { opacity: 1; }
.ramo:has(input[value=generoso]:checked) .flor--extra { transform: translate(-50%, 0); }
.ramo:has(input[value="pequeño"]:checked) .flor--mini { opacity: 0; }
.ramillete__tallos { position: absolute; left: 50%; top: 50%; width: 0; height: 40%; }
.ramillete__tallos i {
  position: absolute; left: -1.5px; top: 0; width: 3px; height: 100%; border-radius: 3px;
  background: linear-gradient(180deg, var(--h1), #4E6640);
  transform-origin: 50% 58%;
}
.ramillete__tallos i:nth-child(1) { transform: rotate(-16deg); }
.ramillete__tallos i:nth-child(2) { transform: rotate(-8deg); }
.ramillete__tallos i:nth-child(4) { transform: rotate(8deg); }
.ramillete__tallos i:nth-child(5) { transform: rotate(16deg); }
.ramillete__lazo { position: absolute; left: 50%; top: 71.5%; width: 9%; height: 3.4%; transform: translateX(-50%); border-radius: 3px; background: var(--tallo); box-shadow: 0 6px 12px -6px rgb(43 21 48 / .5); }

.compositor { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: 28px; }
.compositor fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.compositor legend { padding: 0; margin-bottom: 12px; font-weight: 500; font-size: .9688rem; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion, .tamano { position: relative; }
.opcion input, .tamano input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcion span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 8px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--filete-fuerte); font-size: .9688rem; background: var(--cal);
  transition: box-shadow 180ms ease, background-color 180ms ease, transform 160ms var(--ease);
}
.muestra { width: 30px; height: 30px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgb(43 21 48 / .12); }
.muestra--blancos { background: conic-gradient(#FBF8F1 0 30%, #DCE4C6 0 55%, #FFFFFF 0 80%, #9DB08A 0); }
.muestra--rosas { background: conic-gradient(#E8B4B8 0 30%, #F4D6D2 0 55%, #C98698 0 80%, #A3B48E 0); }
.muestra--calidos { background: conic-gradient(#F2A65A 0 30%, #F7D07E 0 55%, #E0705A 0 80%, #A88A4A 0); }
.muestra--silvestre { background: conic-gradient(#98A7D9 0 30%, #CBBBE6 0 55%, #F3EFE2 0 80%, #8EA57A 0); }
.opcion input:checked + span { box-shadow: inset 0 0 0 2px var(--berenjena); background: #FFFFFF; font-weight: 500; }
.tamanos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tamano span {
  display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--cal);
  box-shadow: inset 0 0 0 1px var(--filete-fuerte); font-weight: 500;
  transition: box-shadow 180ms ease, background-color 180ms ease, color 180ms ease, transform 160ms var(--ease);
}
.tamano small { font: 300 1.375rem/1.1 var(--display); color: var(--berenjena-2); transition: color 180ms ease; }
.tamano input:checked + span { background: var(--berenjena); color: var(--cal); box-shadow: none; }
.tamano input:checked + span small { color: var(--tallo); }
.opcion input:focus-visible + span, .tamano input:focus-visible + span { outline: 2px solid var(--berenjena); outline-offset: 3px; }
.opcion:active span, .tamano:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .opcion input:not(:checked):hover + span, .tamano input:not(:checked):hover + span { box-shadow: inset 0 0 0 1px var(--berenjena); }
}
.compositor__pie { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: center; padding-top: 24px; border-top: 1px solid var(--filete-fuerte); }
.compositor__resumen { font: 300 1.3125rem/1.35 var(--display); }
.compositor__resumen strong { font-weight: 300; white-space: nowrap; background: linear-gradient(transparent 62%, var(--tallo) 0); padding: 0 2px; }
.compositor__aviso { grid-column: 1 / -1; font-size: .9375rem; color: var(--berenjena-2); }
.compositor__aviso:empty { display: none; }

/* El taller, en berenjena */
.taller { background: var(--berenjena); color: var(--sobre); }
.taller ::selection { background: var(--tallo); color: var(--berenjena); }
.taller :focus-visible { outline-color: var(--sobre); }
.taller__in {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: center;
  padding-top: clamp(96px, 11vw, 160px); padding-bottom: clamp(96px, 11vw, 160px);
}
.hueco--manos { grid-column: 1 / 6; aspect-ratio: 4 / 5; border-radius: var(--hoja); }
.taller__texto { grid-column: 7 / 13; }
.taller h2 { max-width: 14ch; }
.taller__entrada { margin-top: 20px; font-size: 1.125rem; color: var(--sobre-2); max-width: 42ch; }
.servicios { margin-top: clamp(40px, 5vw, 64px); }
.servicios li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px 28px; padding: 22px 0; border-top: 1px solid rgb(244 243 238 / .2); }
.servicios li:last-child { border-bottom: 1px solid rgb(244 243 238 / .2); }
.servicios h3 { font-size: 1.625rem; line-height: 1.15; color: var(--tallo); }
.servicios p { color: var(--sobre-2); }

/* Visítanos */
.visita__in { padding-top: clamp(96px, 11vw, 152px); padding-bottom: clamp(80px, 9vw, 120px); }
.visita__datos { margin-top: clamp(44px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); }
.dato { border-top: 1px solid var(--filete-fuerte); padding-top: 16px; }
.dato h3 { font-size: 1.5rem; }
.dato p, .horario { margin-top: 10px; color: var(--berenjena-2); }
.horario { display: grid; gap: 6px; }
.horario div { display: flex; justify-content: space-between; gap: 16px; max-width: 320px; }
.horario dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--berenjena); }
.visita .enlace { font: 300 1.625rem/1.2 var(--display); }

.pie { background: var(--berenjena); color: var(--sobre-2); }
.pie__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 28px; padding-bottom: 88px; font-size: .9375rem; }
.pie__marca { font: 300 1.375rem/1 var(--display); color: var(--sobre); }
.pie nav { margin-left: auto; }
.pie ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pie a { color: var(--sobre-2); text-decoration: none; transition: color 200ms ease; }
.pie :focus-visible { outline-color: var(--sobre); }

/* Movimiento: entrada de la portada en CSS (no espera al JS) y solo bajo html.mov */
html.mov .portada__titulo .linea > span { animation: esqueje-linea 1150ms var(--ease) 120ms both; }
html.mov .portada__titulo .linea + .linea > span { animation-delay: 260ms; }
html.mov .portada__semana { animation: esqueje-fundir 900ms ease 60ms both; }
html.mov .portada__pie { animation: esqueje-sube 1000ms var(--ease) 520ms both; }
html.mov .portada__foto > img { animation: esqueje-asentar 2400ms var(--ease) both; }
html.mov .cabecera { animation: esqueje-fundir 900ms ease 300ms both; }
/* El logotipo brota: el tallo crece y las hojas se abren desde su nudo */
html.mov .marca__tallo { stroke-dasharray: 1; animation: esqueje-tallo 900ms var(--ease) 500ms both; }
.marca__hoja { transform-box: view-box; }
.marca__hoja--1 { transform-origin: 16px 15px; }
.marca__hoja--2 { transform-origin: 16px 20px; }
html.mov .marca__hoja--1 { animation: esqueje-hoja 900ms var(--ease) 950ms both; }
html.mov .marca__hoja--2 { animation: esqueje-hoja 900ms var(--ease) 820ms both; }
/* Con JS de movimiento, las flores del ramo las mueve esqueje.js (muelle suave): el CSS solo funde el color */
html.mov-listo .flor { transition: background-color 700ms ease; }
@media (prefers-reduced-motion: reduce) {
  .ramillete { transition: none; }
  .flor { transition: background-color 500ms ease, opacity 300ms ease; }
  .flor.centro::after { transition: none; }
  .hoja { transition: background 500ms ease, opacity 300ms ease; }
}
@keyframes esqueje-linea { from { transform: translateY(104%); } }
@keyframes esqueje-fundir { from { opacity: 0; } }
@keyframes esqueje-sube { from { opacity: 0; transform: translateY(14px); } }
@keyframes esqueje-asentar { from { transform: scale(1.06); } }
@keyframes esqueje-tallo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes esqueje-hoja { from { transform: scale(.1) rotate(-30deg); opacity: 0; } }

/* Tableta */
@media (max-width: 1080px) {
  .cabecera__nav { display: none; }
  .calendario { --nombre: minmax(170px, 1fr); }
  .ramo__vista { grid-column: 1 / 7; }
  .ramo__texto { grid-column: 7 / 13; }
}
@media (max-width: 860px) {
  .ramo__vista { grid-column: 2 / 12; }
  .ramo__texto { grid-column: 1 / 13; margin-top: 48px; }
  .hueco--manos { grid-column: 1 / 13; aspect-ratio: 16 / 10; }
  .taller__texto { grid-column: 1 / 13; margin-top: 48px; }
  .visita__datos { grid-template-columns: 1fr 1fr; }
}

/* Móvil */
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .cabecera { padding-top: 16px; gap: 12px; }
  .marca { font-size: 1.625rem; }
  .boton--claro { min-height: 40px; padding: 0 16px; font-size: .9063rem; }
  .portada__foto > img { object-position: 62% 50%; }
  .portada__foto::after {
    background:
      linear-gradient(0deg, rgb(32 14 36 / .95) 0%, rgb(32 14 36 / .82) 40%, rgb(32 14 36 / .2) 66%, rgb(32 14 36 / 0) 78%),
      linear-gradient(180deg, rgb(32 14 36 / .6) 0%, rgb(32 14 36 / 0) 18%);
  }
  .portada__in { padding-bottom: 72px; }
  .portada__semana { font-size: .875rem; padding-right: 14px; }
  .portada__titulo { font-size: clamp(2.9rem, 13.6vw, 3.6rem); }
  .calendario { --nombre: 1fr; }
  .calendario__meses { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 3px; }
  .calendario__meses span:first-child { display: none; }
  .calendario__meses span { width: 22px; height: 22px; font-size: .75rem; }
  .fila { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 3px; row-gap: 10px; }
  .fila__flor { grid-column: 1 / -1; font-size: 1.3125rem; }
  .fila__flor i { display: inline; margin: 0 0 0 6px; font-size: .875rem; }
  .fila__meses b { height: 22px; border-radius: 4px; }
  .ramo__vista { grid-column: 1 / 13; }
  .tamanos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tamano span { padding: 12px; }
  .compositor__pie { grid-template-columns: 1fr; }
  .compositor__pie .boton { width: 100%; }
  .servicios li { grid-template-columns: 1fr; }
  .visita__datos { grid-template-columns: 1fr; }
  .pie nav { margin-left: 0; width: 100%; }
}