/* HEYAMIX · diseño «Acuarela» (tema jardín, el de Carmen), separado de la base el 31/10/2026 (v5/separar_jardin.cjs).
   Se carga DESPUÉS de la base. Solo lo del jardín: hojitas, ramitas, la hoja de las miniaturas y los colores por capítulo.
   No cambia nada de cómo se veía: mismas reglas, mismo orden. Los diseños «Clásico» y «Collage» NO cargan esta hoja. */
.rama { fill: none; stroke: var(--hx-gold); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.rama--fina { stroke-width: 4; }
.hoja { stroke: none; }
.hoja--verde { fill: var(--hx-leaf-deep); }
.hoja--salvia { fill: var(--hx-leaf); }
.hoja--mango { fill: var(--hx-mango); }
.hoja--coral { fill: var(--hx-coral); }
.hoja--turquesa { fill: var(--hx-turquoise); }
.baya--mango { fill: var(--hx-mango); }
.baya--coral { fill: var(--hx-coral); }
/* ramitas de esquina: acuarela real (PNG con transparencia → AVIF/WebP), solo decorativas, nunca encima del texto */
.con-ramitas { position: relative; }
.con-ramitas::before, .con-ramitas::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: var(--ramita, 5.5rem); aspect-ratio: 1; background-size: contain; background-repeat: no-repeat;
}
.con-ramitas::before { top: calc(var(--sp-5) * -1); left: calc(var(--gutter) * -1); background-position: top left; }
.con-ramitas::after { top: calc(var(--sp-5) * -1); right: calc(var(--gutter) * -1); background-position: top right; }
.con-ramitas--der::before { left: auto; right: calc(var(--gutter) * -1); background-position: top right; }
.con-ramitas--der::after { display: none; }
.con-ramitas--diagonal::after { top: auto; bottom: 0; background-position: bottom right; }
.con-ramitas > * { position: relative; z-index: 1; }

.dedicatoria { --ramita: 6.5rem; }
.indice { --ramita: 5.5rem; }
.indice__mini { border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%; }
.indice__capitulo:nth-child(even) .indice__mini { border-radius: 44% 56% 42% 58% / 55% 45% 55% 45%; }
.indice__capitulo--leaf .indice__num { background: var(--hx-leaf); }
.indice__capitulo--mango .indice__num { background: var(--hx-mango); }
.indice__capitulo--coral .indice__num { background: var(--hx-coral); }
.indice__capitulo--turquoise .indice__num { background: var(--hx-turquoise); }
.zona__enlace--cap.zona__enlace--leaf { background: var(--hx-leaf); }
.zona__enlace--cap.zona__enlace--mango { background: var(--hx-mango); }
.zona__enlace--cap.zona__enlace--coral { background: var(--hx-coral-tint); }
.zona__enlace--cap.zona__enlace--turquoise { background: var(--hx-turquoise-tint); }
.zona__enlace--leaf .zona__num { background: var(--hx-leaf); }
.zona__enlace--mango .zona__num { background: var(--hx-mango); }
.zona__enlace--coral .zona__num { background: var(--hx-coral); }
.zona__enlace--turquoise .zona__num { background: var(--hx-turquoise); }
.leyenda__num--leaf { background: var(--hx-leaf); }
.leyenda__num--mango { background: var(--hx-mango); }
.leyenda__num--coral { background: var(--hx-coral); }
.leyenda__num--turquoise { background: var(--hx-turquoise); }
.historia__foto::before { content: ""; position: absolute; z-index: 1; top: -0.5rem; left: -0.5rem; width: 6.5rem; aspect-ratio: 1; background-size: contain; background-repeat: no-repeat; pointer-events: none; }
.historia--coral .pregunta { border-left-color: var(--hx-coral); }
.historia--turquoise .pregunta { border-left-color: var(--hx-turquoise); }
.historia--leaf .pregunta { border-left-color: var(--hx-leaf-deep); }
.mensaje--verde { background: var(--hx-leaf-tint); }
.mensaje--mango { background: var(--hx-mango-tint); }
.mensaje--turquesa { background: var(--hx-turquoise-tint); }
.familia { --ramita: 6rem; }
.formato--verde::before { background: var(--hx-leaf); }
.formato--mango::before { background: var(--hx-mango); }
.formato--coral::before { background: var(--hx-coral); }
.formato--turquesa::before { background: var(--hx-turquoise); }
@media (min-width: 48em) {
  .historia__foto::before { width: 9rem; top: -1rem; left: -1rem; }
  .indice, .familia, .dedicatoria { --ramita: 10rem; }
}

/* ===== generado por construir_v5.cjs a partir de imagenes.json: no editar a mano ===== */
.zona--c1 { left: 26%; top: 14%; }
.zona--c2 { left: 74%; top: 14%; }
.zona--c3 { left: 25%; top: 38%; }
.zona--c4 { left: 75%; top: 38%; }
.zona--c5 { left: 26%; top: 62%; }
.zona--c6 { left: 74%; top: 62%; }
.zona--h1 { left: 24%; top: 24.5%; }
.zona--h2 { left: 76%; top: 24.5%; }
.zona--h3 { left: 23%; top: 48.5%; }
.zona--h4 { left: 77%; top: 48.5%; }
.zona--h5 { left: 24%; top: 72.5%; }
.zona--h6 { left: 76%; top: 72.5%; }
.con-ramitas::before { background-image: url("../img/ramita-si-480.png"); background-image: image-set(url("../img/ramita-si-480.avif") type("image/avif"), url("../img/ramita-si-480.webp") type("image/webp"), url("../img/ramita-si-480.png") type("image/png")); }
.con-ramitas::after, .con-ramitas--der::before { background-image: url("../img/ramita-sd-480.png"); background-image: image-set(url("../img/ramita-sd-480.avif") type("image/avif"), url("../img/ramita-sd-480.webp") type("image/webp"), url("../img/ramita-sd-480.png") type("image/png")); }
.con-ramitas--diagonal::after { background-image: url("../img/ramita-id-480.png"); background-image: image-set(url("../img/ramita-id-480.avif") type("image/avif"), url("../img/ramita-id-480.webp") type("image/webp"), url("../img/ramita-id-480.png") type("image/png")); }
.historia__foto::before { background-image: url("../img/ramita-si-480.png"); background-image: image-set(url("../img/ramita-si-480.avif") type("image/avif"), url("../img/ramita-si-480.webp") type("image/webp"), url("../img/ramita-si-480.png") type("image/png")); }