/* ═══════════════════════════════════════════════════════════════════
   OLIVOS · ramas decorativas, disparo único cuando la sección entra
   en pantalla — no atado al scroll (ver comentario en js/olivos.js).

   El tallo de cada rama es un <path pathLength="1">: con eso,
   stroke-dashoffset va de 1 (nada dibujado) a 0 (rama completa) sin
   medir el largo real del trazo. Las hojas y los frutos los agrega
   js/olivos.js a lo largo del mismo path, cada uno con su propio
   transition-delay para que sigan apareciendo de a una en vez de
   todas juntas.

   js/olivos.js sólo agrega la clase .olivo--visto a [data-olivos]
   una vez, vía IntersectionObserver — todo el resto es CSS estándar
   con transition, no un valor que haya que perseguir cuadro a cuadro. */

/* La sección que recibe el componente necesita recortar la rama (crece
   más alta que su propio alto) y darle a su .wrap una capa de apilado
   propia: .olivo-decor es position:absolute, así que sin esto pintaría
   por encima del texto en vez de detrás — un elemento posicionado pinta
   sobre el contenido no posicionado sin importar el orden en el HTML. */
[data-olivos]{position:relative;overflow:hidden}
[data-olivos] > .wrap{position:relative;z-index:1}

/* top:0 + bottom:0 (sin height) estira el contenedor a la altura real
   de la sección, sea cual sea — antes tenía el alto fijado por el
   ancho (aspect-ratio del viewBox), y en una sección más alta que eso
   la rama se quedaba corta y no llegaba al borde opuesto.
   preserveAspectRatio="none" en el svg (ver index.html) es lo que
   permite que el trazo se estire para ocupar ese alto real. */
.olivo-decor{
  position:absolute;z-index:0;pointer-events:none;
  width:clamp(120px,15vw,220px);
  top:0;bottom:0;
}
.olivo-decor svg{display:block;width:100%;height:100%;overflow:visible}

.olivo-decor--iz{left:clamp(-30px,-1.5vw,0px)}
.olivo-decor--der{right:clamp(-30px,-1.5vw,0px);transform:scaleY(-1) scaleX(-1)}

.olivo__tallo{
  fill:none;stroke:var(--crema-2);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:1 1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s var(--e-expo);
}
[data-olivos].olivo--visto .olivo__tallo{stroke-dashoffset:0}

/* transform-box:view-box, no fill-box: el punto de apoyo de cada hoja
   (dónde nace del tallo) lo escribe js/olivos.js en transform-origin,
   ya en coordenadas del viewBox — con fill-box esas mismas cifras se
   leen como offset contra la caja propia del elemento, no como punto
   absoluto, y la hoja escala desde el lugar equivocado. El delay que
   escalona la aparición también lo pone js/olivos.js, inline, por
   hoja — no hay forma de leer un --at por CSS puro como delay. */
.olivo__hoja,.olivo__fruto{
  transform-box:view-box;
  opacity:0;transform:scale(0);
  transition:opacity .5s ease-out,transform .5s cubic-bezier(.34,1.56,.64,1);
}
[data-olivos].olivo--visto .olivo__hoja,
[data-olivos].olivo--visto .olivo__fruto{opacity:1;transform:scale(1)}

.olivo__hoja{fill:var(--crema-2)}
.olivo__fruto{fill:var(--oro)}

@media(prefers-reduced-motion:reduce){
  .olivo__tallo,.olivo__hoja,.olivo__fruto{
    transition:none !important;
    stroke-dashoffset:0 !important;opacity:1 !important;transform:none !important;
  }
}

@media(max-width:900px){
  /* En una columna angosta las ramas se meten debajo del texto
     centrado. Se apagan en vez de reposicionarlas mal. */
  .olivo-decor{display:none}
}