/*
Theme Name: Olivo Soluciones Gráficas
Theme URI: https://olivosolucionesrd.com
Author: Olivo Soluciones RD
Description: Tema de bloques para catálogo de prendas promocionales con WooCommerce en modo cotización por WhatsApp. Bordado, DTF, P.O.P., confección y trofeos.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.9.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: olivo
Tags: block-theme, full-site-editing, e-commerce, one-column, custom-colors
*/

/* ==========================================================================
   Índice
   1. Base y accesibilidad
   2. Encabezado y navegación
   3. Piezas del catálogo (rejilla WooCommerce)
   4. Ficha de producto
   5. Componentes propios (rail, acordeón, marco de imagen)
   6. Movimiento
   ========================================================================== */

/* ---------- 1. Base y accesibilidad ---------------------------------- */

:root {
  --olivo-salida: cubic-bezier(0.22, 1, 0.36, 1);
  --olivo-traza: 1px solid var(--wp--preset--color--linea);

  /*
    Margen de página. Coincide exactamente con donde WordPress deja el
    contenido de una sección (ancho máximo 1400 px, centrado), así que
    las franjas a todo el ancho arrancan en la misma columna que el resto.
  */
  --olivo-margen: max(clamp(1.5rem, 5vw, 4rem), calc((100vw - 1400px) / 2));

  /*
    Profundidad. Tres niveles y no más, y todos tintados hacia el oliva de la
    marca en vez de gris neutro: una sombra gris sobre verde se ve sucia, y
    además es la sombra de plantilla que lleva cualquier sitio.

    Sólo la llevan las cosas que de verdad están por encima de la página:
    el encabezado fijo, lo que flota, y lo que responde al puntero.
  */
  --olivo-sombra-1: 0 1px 2px rgba(19, 41, 27, 0.05), 0 2px 6px rgba(19, 41, 27, 0.05);
  --olivo-sombra-2: 0 2px 4px rgba(19, 41, 27, 0.06), 0 8px 20px rgba(19, 41, 27, 0.13);
  --olivo-sombra-3: 0 4px 8px rgba(19, 41, 27, 0.08), 0 18px 44px rgba(19, 41, 27, 0.2);
}

/*
   Barrera contra el desplazamiento horizontal, en la raíz.

   En body no basta: basta con que un solo elemento (una salida de WooCommerce,
   un plugin, un nombre larguísimo de producto de Odoo) mida más que la pantalla
   para que el navegador reduzca la página entera y deje una franja en blanco a
   la derecha de todas las secciones.

   «clip» y no «hidden»: hidden crea un contenedor de scroll y rompería el
   encabezado fijo.
*/
/*
   El relleno cuenta dentro del ancho, no encima.

   Sin esto, un botón con «width: 100%» mide el 100% MÁS sus 3,2 rem de
   relleno y sus bordes: a 360 px el contenedor daba 312 y el botón 363, y se
   salía 27 px de la pantalla. Es la razón de que los botones del héroe
   desbordaran por debajo de 480 px, que es donde se ponen a ancho completo.

   No estaba en el tema: mi hoja de vista previa sí lo traía, y por eso el
   fallo no aparecía al probarlo aquí.
*/
*,
*::before,
*::after { box-sizing: border-box; }

/*
   Los hijos de una rejilla no pueden encogerse por debajo de su contenido
   mínimo salvo que se les diga. Es el desbordamiento clásico de CSS Grid: a
   320 px la columna de Contacto se plantaba en 300 px cuando solo cabían 257.
*/
.olivo-contacto > *,
.olivo-proceso > li,
.olivo-detalle > li,
.olivo-servicios > *,
.olivo-datos > div,
.olivo-pie__rejilla > * { min-width: 0; }

html { overflow-x: clip; }

/*
   Ningún bloque a sangre puede salirse de la pantalla.

   WordPress da márgenes negativos a .alignfull para compensar un relleno
   global que aquí no existe: cada sección pone el suyo con --olivo-margen.
   El resultado era «main» 48 px más ancho que la pantalla y todas las barras
   asomando por la derecha en el teléfono.

   Ya está desactivado en theme.json, pero esa opción se puede reactivar sola
   si alguien guarda estilos globales desde el Editor. Aquí se ataja el
   síntoma directamente: se anulan solo esos márgenes, nada más.
*/
.wp-site-blocks > .alignfull,
.has-global-padding > .alignfull,
.wp-block-post-content > .alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /*
     Red de seguridad. Si algún día un texto largo (el nombre del sitio, un
     nombre de producto de Odoo) vuelve a empujar el ancho, la página no se
     desplaza en horizontal ni se reduce entera.
     «clip» y no «hidden»: hidden rompería el encabezado fijo.
  */
  overflow-x: clip;
}

/*
   Encabezado, contenido y pie se tocan.

   WordPress separa los bloques de primer nivel con el hueco global que define
   theme.json, y eso incluye esas tres piezas: dejaba una franja blanca entre
   el encabezado y el héroe, y otra encima del pie. El hueco sigue existiendo
   dentro del contenido, que es donde sirve.

   Sin :where() a propósito: la regla del núcleo tiene especificidad 0 y hay
   que ganarle pase lo que pase con el orden de las hojas de estilo.
*/
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Prosa larga: slab robusto, medida controlada. Voz de etiqueta de ropa de
   trabajo, no de revista. */
.olivo-prosa {
  font-family: var(--wp--preset--font-family--prosa);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  line-height: 1.7;
  max-width: 62ch;
  text-wrap: pretty;
}

h1, h2, h3 { text-wrap: balance; }

/* Foco visible en todo lo interactivo. Nunca se elimina. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--hoja);
  outline-offset: 3px;
  border-radius: 1px;
}
.has-oliva-background-color :focus-visible,
.has-bosque-background-color :focus-visible,
.has-manzana-background-color :focus-visible {
  outline-color: var(--wp--preset--color--blanco);
}

.olivo-saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--wp--preset--color--tinta);
  color: #fff;
  padding: 0.85rem 1.25rem;
  font-weight: 800;
  text-decoration: none;
}
.olivo-saltar:focus { left: 0; }

/* Etiqueta de refuerzo: se usa contadas veces, no encima de cada sección. */
.olivo-marca {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- 2. Encabezado y navegación ------------------------------- */

.olivo-encabezado {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0.9rem var(--olivo-margen);
}

/*
   Marca: símbolo + nombre.

   Tiene que poder encogerse. Con «flex: none» y el nombre real del sitio
   («Olivo Soluciones Graficas») el bloque medía 388 px dentro de una pantalla
   de 360 y desbordaba el documento entero: el navegador reducía la página y
   dejaba una franja blanca a la derecha de todas las secciones.
*/
.olivo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.olivo-lockup img { display: block; flex: none; width: auto; height: 44px; border-radius: 0; }
/*
   El logo de Olivo es verde y tanto el encabezado como el pie son verde oliva:
   2,14:1, ilegible. Pasado a blanco da 11,57:1.
   Funciona con cualquier logo de un solo color. Si algún día subes uno
   multicolor y lo quieres tal cual, borra este bloque.
*/
.olivo-encabezado .olivo-lockup img,
.olivo-pie .olivo-lockup img { filter: brightness(0) invert(1); }
.olivo-lockup span { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.olivo-lockup strong {
  font-size: clamp(0.875rem, 0.78rem + 0.45vw, 1.0625rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.olivo-lockup small {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--wp--preset--color--brote);
}
/* En el teléfono el nombre manda; el subtítulo estorba. */
@media (max-width: 34.99em) {
  .olivo-lockup { gap: 0.55rem; }
  .olivo-lockup img { width: 34px; height: 34px; }
  .olivo-lockup small { display: none; }
}

/* En pantallas chicas manda el botón flotante, no el del encabezado. */
/*
   El botón del encabezado se estiraba a lo alto de la barra y quedaba como un
   bloque verde enorme al lado de una navegación fina. Aquí manda su propio
   tamaño, no el de la fila.
*/
.olivo-encabezado .olivo-encabezado__cta {
  align-self: center;
  min-height: 0;
  padding: 0.7rem 1.05rem;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  gap: 0.4rem;
  /*
     El relleno verde va aquí y no en una clase aparte.
     Antes lo aportaba «--grande»; al quitar esa clase para corregir el tamaño
     se fue también el fondo, y el botón quedó con texto casi negro sobre el
     oliva del encabezado: 1,43:1, invisible. Ahora tamaño y color viven
     juntos y no se pueden separar por accidente.

     Doble selector: .olivo-cotizar se declara más abajo en esta hoja y, a
     igual especificidad, gana el que va después. Ya me pasó con el display.
  */
  background: var(--wp--preset--color--manzana);
  border-color: var(--wp--preset--color--manzana);
  color: var(--wp--preset--color--tinta);
}
.olivo-encabezado .olivo-encabezado__cta:hover,
.olivo-encabezado .olivo-encabezado__cta:focus-visible {
  background: var(--wp--preset--color--brote);
  border-color: var(--wp--preset--color--brote);
  color: var(--wp--preset--color--tinta);
}
.olivo-encabezado .olivo-encabezado__cta svg { width: 1em; height: 1em; }
/* Selector doble a propósito: si no, gana la regla general de .olivo-cotizar
   y el botón se queda visible desbordando el encabezado en móvil. */
@media (max-width: 61.99em) {
  .olivo-encabezado .olivo-encabezado__cta { display: none; }
}

.olivo-encabezado .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.35rem;
}

/* Subrayado que crece desde la izquierda. */
.olivo-encabezado .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--wp--preset--color--manzana);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--olivo-salida);
}
.olivo-encabezado .wp-block-navigation-item__content:hover::after,
.olivo-encabezado .wp-block-navigation-item__content:focus-visible::after,
.olivo-encabezado .current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/*
   WooCommerce mete «mi cuenta» y el mini carrito en el encabezado de los temas
   de bloques. Aquí no hay carrito —el pedido se cierra por WhatsApp— así que
   son dos iconos que no llevan a ninguna parte útil y roban sitio en móvil.
   Si algún día activas la venta en línea, borra estas dos líneas.
*/
.olivo-encabezado .wp-block-woocommerce-customer-account,
.olivo-encabezado .wp-block-woocommerce-mini-cart,
.olivo-encabezado .wc-block-mini-cart { display: none; }

/*
   Menú móvil a pantalla completa, sobre oliva.

   Doble selector y !important en el fondo a propósito: WordPress pinta el panel
   desplegado de blanco desde su propia hoja y ganaba a ésta. El resultado eran
   enlaces blancos sobre fondo blanco, o sea un menú que parecía vacío.
*/
.olivo-encabezado .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--oliva) !important;
  color: #fff;
  padding: clamp(1.5rem, 6vw, 3rem);
}
.olivo-encabezado .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.olivo-encabezado .wp-block-navigation__responsive-container.is-menu-open a {
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: none;
  text-decoration: none;
  color: #fff;
}
/* La X de cerrar tiene que verse sobre el oliva. */
.olivo-encabezado .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.olivo-encabezado .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { color: #fff; fill: currentColor; }
/* El botón flotante no puede quedar por encima del menú abierto. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .olivo-flotante { display: none; }

/*
   Ni una esquina redondeada en la fotografía. WooCommerce y algunos bloques
   del núcleo las ponen por su cuenta, y aquí el sistema entero es de ángulos
   rectos: una foto redondeada canta como intrusa.
*/
.olivo-marco img,
.olivo-carril img,
.olivo-detalle__foto img,
.olivo-hero__foto img,
.olivo-respaldo img,
.olivo-mosaico img,
.woocommerce ul.products li.product img,
.woocommerce div.product img { border-radius: 0; }

/* ---------- 3. Piezas del catálogo (rejilla WooCommerce) -------------- */
/*
   Lámina de muestrario, no tarjetas: celdas separadas por líneas finas,
   la foto ocupa el bloque completo y el precio manda.
*/

.woocommerce ul.products {
  display: grid;
  /* Cuatro por fila en escritorio, dos en tableta, una en móvil. Sin saltos
     bruscos y sin depender del ajuste de columnas de WooCommerce. */
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--wp--preset--color--linea);
  border: var(--olivo-traza);
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0 1.25rem;
  width: auto !important;
  float: none !important;
  background: var(--wp--preset--color--blanco);
  transition: background 0.3s var(--olivo-salida), box-shadow 0.3s var(--olivo-salida);
}
/*
   La celda se levanta con sombra, no con desplazamiento: los filetes de la
   rejilla son de 1 px y moverla dejaría una franja de fondo a la vista.
*/
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
  background: var(--wp--preset--color--blanco);
  box-shadow: var(--olivo-sombra-2);
  z-index: 2;
}

.woocommerce ul.products li.product a img {
  display: block;
  width: 100%;
  /*
     height:auto es obligatorio, no cosmético. La <img> trae height="750" como
     atributo, y con las dos dimensiones definidas el navegador ignora
     aspect-ratio: las fichas salían de 326x750 (proporción 0,43) en vez de
     4:5, en todos los tamaños de pantalla.
  */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0 0 1rem;
  background: var(--wp--preset--color--papel);
  transition: scale 0.5s var(--olivo-salida);
}

/* Misma precaución en la ficha del producto. */
.olivo-ficha-foto img { max-width: 100%; height: auto; }
.woocommerce ul.products li.product:hover a img { scale: 1.025; }

/* El nombre y el precio no son enlaces sueltos: toda la celda lo es. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.woocommerce ul.products li.product .olivo-cotizar { position: relative; z-index: 2; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0 1rem;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--wp--preset--color--tinta);
}
.woocommerce ul.products li.product .olivo-sku {
  padding: 0 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gris);
}
.woocommerce ul.products li.product .price {
  padding: 0 1rem;
  margin-top: auto;
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--wp--preset--color--tinta);
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .price del {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--gris);
  margin-right: 0.4rem;
}

/* Etiqueta de oferta. */
.woocommerce span.onsale {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0;
  line-height: 1;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--wp--preset--color--manzana);
  color: var(--wp--preset--color--tinta);
}

/* Botón de cotización: el único botón de la celda. */
.olivo-cotizar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  min-height: 2.75rem;              /* 44 px */
  margin: 0.75rem 1rem 0;
  padding: 0.75rem 1.15rem;
  border: 2px solid var(--wp--preset--color--tinta);
  background: transparent;
  color: var(--wp--preset--color--tinta);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: background 0.25s var(--olivo-salida), color 0.25s var(--olivo-salida);
}
.olivo-cotizar:hover,
.olivo-cotizar:focus-visible {
  background: var(--wp--preset--color--manzana);
  color: var(--wp--preset--color--tinta);
}
.olivo-cotizar svg { width: 1em; height: 1em; flex: none; }

.olivo-cotizar--grande {
  margin: 0;
  padding: 1.15rem 1.75rem;
  font-size: 0.8125rem;
  background: var(--wp--preset--color--manzana);
  border-color: var(--wp--preset--color--manzana);
}
.olivo-cotizar--grande:hover,
.olivo-cotizar--grande:focus-visible {
  background: var(--wp--preset--color--brote);
  border-color: var(--wp--preset--color--brote);
}

/* Encabezado del catálogo y avisos de Woo. */
.woocommerce-products-header,
.woocommerce-result-count,
.woocommerce-ordering { font-size: 0.875rem; }
.woocommerce .woocommerce-ordering select {
  border: 2px solid var(--wp--preset--color--tinta);
  border-radius: 0;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-weight: 700;
  background: #fff;
}
.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 1px;
  justify-content: center;
  background: var(--wp--preset--color--linea);
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  padding: 0.9rem 1.15rem;
  background: #fff;
  font-weight: 800;
  color: var(--wp--preset--color--tinta);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--wp--preset--color--manzana); }

/* Chips de categoría del catálogo. */
.olivo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--wp--preset--spacing--50);
  padding: 0;
  list-style: none;
}
.olivo-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;              /* 44 px: se toca con el pulgar */
  padding: 0.5rem 1.1rem;
  border: var(--olivo-traza);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--wp--preset--color--tinta);
  transition: background 0.25s var(--olivo-salida), border-color 0.25s var(--olivo-salida);
}
.olivo-chips a:hover,
.olivo-chips a:focus-visible,
.olivo-chips .es-actual a {
  background: var(--wp--preset--color--oliva);
  border-color: var(--wp--preset--color--oliva);
  color: #fff;
}
.olivo-chips span.olivo-cuenta { opacity: 0.6; font-weight: 600; }

/* ---------- 4. Ficha de producto ------------------------------------- */

.woocommerce div.product .product_title {
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.woocommerce div.product p.price {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--tinta);
  margin: 0.75rem 0 0.25rem;
}
.olivo-precio-nota {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--hoja);
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--wp--preset--font-family--prosa);
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 60ch;
  margin-block: 1.5rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin: 0 0 1.5rem;
  border-bottom: 2px solid var(--wp--preset--color--tinta);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.9rem 1.25rem;
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--gris);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--wp--preset--color--tinta);
  color: #fff;
}
.woocommerce .related > h2, .woocommerce .up-sells > h2 {
  font-size: var(--wp--preset--font-size--grande);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--wp--preset--color--tinta);
  margin-bottom: var(--wp--preset--spacing--40);
}

/* Ficha técnica en lugar de la tabla de atributos por defecto. */
.olivo-ficha { display: grid; gap: 1px; background: var(--wp--preset--color--linea); border: var(--olivo-traza); margin: 0; }
.olivo-ficha > div { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; background: #fff; padding: 0.9rem 1.15rem; }
.olivo-ficha dt { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--gris); margin: 0; }
.olivo-ficha dd { margin: 0; font-weight: 700; }

/* ---------- 5. Componentes propios ----------------------------------- */

/* Carril de categorías: desplazamiento con anclaje; las flechas son un extra. */
.olivo-carril-caja { position: relative; }

.olivo-carril__nav {
  position: absolute;
  top: 35%;              /* Centrado sobre la foto, no sobre la ficha entera. */
  translate: 0 -50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: var(--wp--preset--color--oliva);
  color: #fff;
  box-shadow: var(--olivo-sombra-2);
  transition: background 0.25s var(--olivo-salida), scale 0.25s var(--olivo-salida);
}
.olivo-carril__nav:hover,
.olivo-carril__nav:focus-visible { background: var(--wp--preset--color--manzana); color: var(--wp--preset--color--tinta); scale: 1.06; }
.olivo-carril__nav[hidden] { display: none; }
.olivo-carril__nav svg { width: 1.1rem; height: 1.1rem; }
.olivo-carril__nav--antes { left: 0; }
.olivo-carril__nav--despues { right: 0; }

/* En táctil se arrastra con el dedo: sobra el botón, hace falta la pista. */
@media (max-width: 47.99em) {
  .olivo-carril__nav { display: none; }
}
@media (min-width: 48em) {
  .olivo-carril__pista { display: none; }
}
.olivo-carril__pista { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--wp--preset--color--gris); }

.olivo-carril {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 22vw);
  gap: 1px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--manzana) var(--wp--preset--color--papel);
  background: var(--wp--preset--color--linea);
  border-block: var(--olivo-traza);
  padding: 0;
  margin: 0;
  list-style: none;
}
.olivo-carril > li { scroll-snap-align: start; background: #fff; }
.olivo-carril a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: background 0.3s var(--olivo-salida);
}
.olivo-carril a:hover, .olivo-carril a:focus-visible {
  background: var(--wp--preset--color--blanco);
  box-shadow: var(--olivo-sombra-2);
  position: relative;
  z-index: 2;
}
.olivo-carril .olivo-carril__foto { aspect-ratio: 3 / 4; overflow: hidden; background: var(--wp--preset--color--papel); }
.olivo-carril img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 0.5s var(--olivo-salida); }
.olivo-carril a:hover img { scale: 1.04; }
.olivo-carril__pie { padding: 1.1rem 1.15rem 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; }
.olivo-carril__nombre { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.015em; }
.olivo-carril__meta { font-size: 0.8125rem; color: var(--wp--preset--color--gris); }

/* Acordeón nativo. */
.olivo-faq { border-top: 2px solid var(--wp--preset--color--tinta); }
.olivo-faq details { border-bottom: var(--olivo-traza); }
.olivo-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.olivo-faq summary::-webkit-details-marker { display: none; }
.olivo-faq summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--wp--preset--color--hoja);
  border-bottom: 2px solid var(--wp--preset--color--hoja);
  rotate: 45deg;
  transition: rotate 0.35s var(--olivo-salida);
}
.olivo-faq details[open] summary::after { rotate: 225deg; }
.olivo-faq details > div {
  padding-bottom: 1.5rem;
  max-width: 62ch;
  color: var(--wp--preset--color--gris);
  font-family: var(--wp--preset--font-family--prosa);
  line-height: 1.7;
}

/* Foto heredada de la categoría: se enseña el género, pero se dice que no es
   la pieza exacta. Mentir con una foto es peor que no tenerla. */
.olivo-respaldo { position: relative; display: block; }
.olivo-respaldo__marca {
  position: absolute;
  left: 0;
  bottom: 1rem;
  padding: 0.4rem 0.6rem;
  background: rgba(19, 41, 27, 0.88);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}
.olivo-ficha-foto .olivo-respaldo__marca { bottom: 0; }

/* Marco para fotos que aún no existen. */
.olivo-marco {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--wp--preset--color--papel);
}
/* La imagen se ancla al marco: así manda la altura del hueco y no la
   proporción del archivo, que es lo que rompía la portada. */
.olivo-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fila de datos separada por líneas, sin tarjetas. */
.olivo-datos { display: grid; gap: 1px; background: currentColor; margin: 0; }
@media (min-width: 48em) { .olivo-datos { grid-auto-flow: column; grid-auto-columns: 1fr; } }
/*
   Fondo propio, obligatorio. Los filetes de esta rejilla son huecos de 1 px
   sobre un contenedor pintado: sin fondo en la celda, ese color se ve entero
   y además hunde el contraste del texto que va encima.
   Las variantes de la portada y de la franja verde lo sobrescriben.
*/
.olivo-datos > div {
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--wp--preset--color--blanco);
}
/* El navegador sangra los <dd> 40 px por su cuenta: las etiquetas salían
   desplazadas a la derecha en vez de alineadas con su cifra. */
.olivo-datos dt, .olivo-datos dd { margin: 0; }

/* Botón flotante de WhatsApp (solo móvil, donde el pulgar llega). */
.olivo-flotante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.15rem;
  background: var(--wp--preset--color--manzana);
  color: var(--wp--preset--color--tinta);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--olivo-sombra-3);
}
.olivo-flotante svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 62em) { .olivo-flotante { display: none; } }

/* ---------- 5b. Secciones de página ---------------------------------- */

.olivo-seccion { padding-block: var(--wp--preset--spacing--70); }
.olivo-seccion--corta { padding-block: var(--wp--preset--spacing--60); }

/* Título con regla: encabezado a la izquierda, entradilla a la derecha. */
.olivo-titular {
  position: relative;
  display: grid;
  gap: 1rem var(--wp--preset--spacing--50);
  align-items: end;
  padding-bottom: calc(1.25rem + 2px);
  margin-bottom: var(--wp--preset--spacing--50);
}
/* La regla es un pseudoelemento y no un borde para poder dibujarla al entrar
   en pantalla. Sin animación se ve exactamente igual que el borde. */
.olivo-titular::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform-origin: left;
}
/*
   Casi todo lo que va bajo un titular (acordeón, pasos, carril, mosaico,
   rejilla de productos) abre con su propia línea. Dos reglas horizontales
   separadas por un hueco se leen como un fallo, así que manda la del
   contenido y el titular retira la suya.
*/
.olivo-titular:has(+ .olivo-faq)::after,
.olivo-titular:has(+ .olivo-proceso)::after,
.olivo-titular:has(+ .olivo-carril-caja)::after,
.olivo-titular:has(+ .olivo-mosaico)::after,
.olivo-titular:has(+ .woocommerce)::after { content: none; }
@media (min-width: 52em) {
  .olivo-titular { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.olivo-titular > :first-child { margin: 0; }
.olivo-titular__nota {
  font-family: var(--wp--preset--font-family--prosa);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--wp--preset--color--gris);
  margin: 0;
  text-wrap: pretty;
}
/* Un enlace suelto dentro de una frase se pierde y además es un objetivo
   táctil minúsculo. Aquí la salida al catálogo es un botón de verdad. */
.olivo-titular__accion { margin-top: 0.9rem; }

/* --- Portada: apertura ------------------------------------------------ */

/*
   La foto del taller es el argumento de venta, así que ocupa el fondo entero
   y el texto se apoya sobre un velo direccional: opaco donde va la tipografía,
   casi limpio donde se ve la máquina. El color va también aquí y no sólo en
   las clases del bloque, para que no se rompa si alguien edita el grupo.
*/
.olivo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(28rem, 74vh, 44rem);
  background: var(--wp--preset--color--oliva);
  color: #fff;
}
.olivo-hero__foto { position: absolute; inset: 0; z-index: -2; }
.olivo-hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }

/* Velo: en móvil cae de arriba abajo, en escritorio de izquierda a derecha. */
.olivo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /*
     El titular arranca muy arriba en el teléfono, así que el velo ya llega
     opaco ahí: sobre tela clara un 0,6 dejaba el blanco en 4,4:1, justo en el
     filo. Con 0,75 de salida se queda en 8,5:1 y la foto se sigue viendo.
  */
  background: linear-gradient(
    180deg,
    rgba(19, 41, 27, 0.75) 0%,
    rgba(19, 41, 27, 0.92) 30%,
    rgba(19, 41, 27, 0.97) 100%
  );
}
@media (min-width: 60em) {
  .olivo-hero::after {
    background: linear-gradient(
      100deg,
      rgba(19, 41, 27, 0.97) 0%,
      rgba(19, 41, 27, 0.95) 38%,
      rgba(19, 41, 27, 0.6) 62%,
      rgba(19, 41, 27, 0.2) 100%
    );
  }
}

.olivo-hero__texto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 44rem;
  padding: clamp(2.75rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem) clamp(2.75rem, 7vw, 5.5rem) var(--olivo-margen);
}
.olivo-hero h1 { margin: 0; max-width: 13ch; }
.olivo-hero h1 em { font-style: normal; color: var(--wp--preset--color--manzana); }
.olivo-hero__deck {
  font-family: var(--wp--preset--font-family--prosa);
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.65;
  color: #e2eadd;
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}
/*
   Los dos botones igualan altura (el de WhatsApp es más alto por el icono) y
   cada uno centra su texto. Sin esto, el estirado del flex dejaba «Ver el
   catálogo» pegado al borde de arriba de su propio botón.
*/
.olivo-hero__acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: stretch; }
.olivo-hero__acciones > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* En el teléfono los dos botones ocupan el ancho completo y se apilan: así
   «Pedir cotización» deja de partirse en dos líneas y el pulgar acierta. */
@media (max-width: 29.99em) {
  .olivo-hero__acciones { flex-direction: column; align-items: stretch; }
  .olivo-hero__acciones > * { width: 100%; }
}
/* Sobre la foto no puede haber celdas opacas: se leerían como un panel
   pegado encima. Aquí las divisiones son filetes, no huecos de rejilla. */
.olivo-hero .olivo-datos {
  background: none;
  gap: 0;
  margin: 1rem 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.olivo-hero .olivo-datos > div { background: none; padding: 0 1.5rem 0 0; }
/* En el teléfono los tres datos van en fila y en cuerpo pequeño: apilados se
   comían la pantalla entera y la franja de promesas no llegaba a asomar. */
.olivo-hero .olivo-datos { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.olivo-hero .olivo-datos > div { padding-right: 0.85rem; }
.olivo-hero .olivo-datos > div + div { padding-left: 0.85rem; border-left: 1px solid rgba(255, 255, 255, 0.28); }
@media (max-width: 47.99em) {
  .olivo-hero__cifra { font-size: 1rem; }
  .olivo-hero__pie { font-size: 0.625rem; letter-spacing: 0.1em; }
}
@media (min-width: 48em) {
  .olivo-hero .olivo-datos > div { padding-right: 1.5rem; }
  .olivo-hero .olivo-datos > div + div { padding-left: 1.5rem; }
}
/*
   En el teléfono, tres columnas de 110 px obligan a «5–7 días» y «Precio fijo»
   a partirse en dos líneas, y entonces cada etiqueta queda a una altura
   distinta. En filas se lee de un vistazo y ocupa lo mismo.
*/
@media (max-width: 29.99em) {
  .olivo-hero .olivo-datos { grid-auto-flow: row; grid-auto-columns: auto; }
  .olivo-hero .olivo-datos > div {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
  }
  .olivo-hero .olivo-datos > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .olivo-hero__cifra { font-size: 1.125rem; }
  .olivo-hero__pie { font-size: 0.6875rem; }
}
/* El color del contenedor pinta las líneas divisorias, así que el texto
   lleva el suyo propio para no heredar ese verde apagado. */
.olivo-hero__cifra { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.025em; line-height: 1; color: #ffffff; }
.olivo-hero__pie { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--brote); }

/* Botón de contorno sobre oliva. */
.olivo-boton-fantasma {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.05rem 1.6rem;
  border: 2px solid #6d8a70;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: background 0.25s var(--olivo-salida), border-color 0.25s var(--olivo-salida);
}
.olivo-boton-fantasma:hover,
.olivo-boton-fantasma:focus-visible { background: var(--wp--preset--color--bosque); border-color: var(--wp--preset--color--manzana); color: #fff; }

/*
   Red de seguridad para los iconos: un SVG suelto dentro de cualquier botón
   nuestro se queda a tamaño de texto. Sin esto, al botón de contorno del héroe
   le faltaba la regla y el icono se dibujaba a 300 px.
*/
.olivo-cotizar svg,
.olivo-boton-tinta svg,
.olivo-boton-fantasma svg,
.olivo-flotante svg,
.wp-element-button svg { width: 1.15em; height: 1.15em; flex: none; }

/* --- Banda de promesas ------------------------------------------------ */
/*
   Fondo a todo el ancho, contenido alineado a la misma columna que el
   resto de la página: el borde izquierdo del texto no se mueve nunca.
*/
.olivo-banda { color: #7ab32f; }              /* color = línea divisoria */
.olivo-banda > div { background: var(--wp--preset--color--manzana); padding-inline: var(--olivo-margen); }
@media (min-width: 48em) {
  .olivo-banda > div { padding-inline: clamp(1rem, 2.2vw, 1.75rem); }
  .olivo-banda > div:first-child { padding-left: var(--olivo-margen); }
  .olivo-banda > div:last-child { padding-right: var(--olivo-margen); }
}
.olivo-banda dt { font-size: 0.9375rem; font-weight: 900; letter-spacing: -0.01em; color: var(--wp--preset--color--tinta); }
.olivo-banda dd { margin: 0; font-size: 0.875rem; line-height: 1.5; color: #2f4a0c; }

/* --- Servicios en lista, no en tarjetas ------------------------------- */

.olivo-servicios { display: grid; gap: var(--wp--preset--spacing--50); }
@media (min-width: 60em) {
  .olivo-servicios { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--wp--preset--spacing--60); align-items: start; }
  .olivo-servicios__intro { position: sticky; top: 6.5rem; }
}
.olivo-servicios__lista { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--wp--preset--color--tinta); }
.olivo-servicios__lista li {
  display: grid;
  gap: 0.25rem 2rem;
  padding: 1.5rem 0;
  border-bottom: var(--olivo-traza);
}
@media (min-width: 40em) {
  .olivo-servicios__lista li { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); align-items: baseline; }
}
.olivo-servicios__nombre { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.olivo-servicios__desc { color: var(--wp--preset--color--gris); line-height: 1.6; margin: 0; max-width: 52ch; }

/* --- Proceso: aquí los números sí son una secuencia ------------------- */

.olivo-proceso { display: grid; gap: 1px; background: var(--wp--preset--color--linea); border-block: var(--olivo-traza); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
@media (min-width: 46em) { .olivo-proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .olivo-proceso { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.olivo-proceso li { counter-increment: paso; background: var(--wp--preset--color--blanco); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 0.6rem; }
.olivo-proceso li::before {
  content: counter(paso, decimal-leading-zero);
  font-size: 2.75rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--wp--preset--color--manzana);
}
@media (min-width: 46em) { .olivo-proceso--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .olivo-proceso--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.olivo-proceso h3 { margin: 0; font-size: 1.1875rem; }
.olivo-proceso p { margin: 0; color: var(--wp--preset--color--gris); font-size: 0.9375rem; line-height: 1.6; }

/* --- Mosaico de trabajos --------------------------------------------- */

.olivo-mosaico { display: grid; gap: 1px; background: var(--wp--preset--color--linea); border: var(--olivo-traza); }
.olivo-mosaico > * { min-height: 13rem; }
@media (min-width: 46em) {
  .olivo-mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 12rem; }
  /*
     Manda la altura de la fila, no la del contenido. Con min-height puesta
     aquí los hijos medían 208 px dentro de filas de 176 y las celdas dejaban
     de cuadrar: por los huecos asomaba el fondo de la rejilla y parecían
     bordes vacíos alrededor de cada foto.
  */
  .olivo-mosaico > * { min-height: 0; }
  .olivo-mosaico > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .olivo-mosaico > :nth-child(4) { grid-column: span 2; }
}
.olivo-mosaico__nota {
  background: var(--wp--preset--color--oliva);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* La cifra va con line-height 1, así que sus glifos llenan la caja entera:
     con 8 px el número y su etiqueta se leían pegados. */
  gap: 0.8rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}

/* --- Portada de página interior --------------------------------------- */

.olivo-portada {
  background: var(--wp--preset--color--oliva);
  color: #fff;
  padding: clamp(3rem, 7vw, 5.5rem) var(--olivo-margen);
}
.olivo-portada__caja { max-width: 1400px; margin-inline: auto; display: grid; gap: 1.25rem var(--wp--preset--spacing--60); align-items: end; }
@media (min-width: 56em) { .olivo-portada__caja { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.olivo-portada h1 { margin: 0; font-size: clamp(2.25rem, 1.4rem + 3.8vw, 4rem); }
.olivo-portada p {
  margin: 0;
  font-family: var(--wp--preset--font-family--prosa);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.7;
  color: #e2eadd;
  max-width: 52ch;
  text-wrap: pretty;
}

/* --- Lista de detalle (servicios, nosotros) ---------------------------- */

.olivo-detalle { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--wp--preset--color--tinta); }
.olivo-detalle > li { display: grid; gap: 1.25rem var(--wp--preset--spacing--50); padding: clamp(1.75rem, 4vw, 2.75rem) 0; border-bottom: var(--olivo-traza); }
@media (min-width: 56em) {
  .olivo-detalle > li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: start; }
}
.olivo-detalle__foto { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--wp--preset--color--papel); }
.olivo-detalle__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.olivo-detalle h2 { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); }
.olivo-detalle p { margin: 0; max-width: 62ch; line-height: 1.7; color: var(--wp--preset--color--gris); }
.olivo-detalle__usos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.olivo-detalle__usos li {
  border: var(--olivo-traza);
  padding: 0.4rem 0.7rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--hoja);
}

/* --- Cierre y contacto ------------------------------------------------ */

/*
   Cierre. Antes era un titular y un botón con «space-between»: en pantallas
   anchas se iban a los extremos y dejaban un vacío enorme en medio. Ahora son
   dos columnas con peso propio, y el hueco lo llena información útil.
*/
.olivo-cta {
  padding: var(--wp--preset--spacing--60) var(--olivo-margen);
  display: grid;
  gap: var(--wp--preset--spacing--50);
}
@media (min-width: 56em) {
  .olivo-cta {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--wp--preset--spacing--60);
    align-items: center;
  }
}
.olivo-cta h2 { margin: 0; max-width: 20ch; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem); }
.olivo-cta__apoyo {
  margin: 1.1rem 0 0;
  max-width: 46ch;
  font-family: var(--wp--preset--font-family--prosa);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.65;
  color: #2f4a0c;                      /* 4,9:1 sobre manzana */
  text-wrap: pretty;
}
.olivo-cta__accion { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
@media (min-width: 56em) {
  .olivo-cta__accion { align-items: flex-end; text-align: right; }
}
.olivo-cta__meta {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
  color: #2f4a0c;
}
.olivo-cta__meta a { color: var(--wp--preset--color--tinta); text-underline-offset: 3px; }
.olivo-cta__meta a:hover { color: #2f4a0c; }
.olivo-cta--manzana { background: var(--wp--preset--color--manzana); border-top: 2px solid var(--wp--preset--color--tinta); }
.olivo-cta--manzana h2 { color: var(--wp--preset--color--tinta); }

.olivo-boton-tinta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  padding: 1.25rem 1.75rem;
  background: var(--wp--preset--color--tinta);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: background 0.25s var(--olivo-salida);
}
.olivo-boton-tinta:hover,
.olivo-boton-tinta:focus-visible { background: var(--wp--preset--color--oliva); color: #fff; }
.olivo-boton-tinta svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* En el cierre el botón es la acción principal de la página: pesa más. */
.olivo-boton-tinta--ancho {
  justify-content: center;
  width: 100%;
  max-width: 22rem;
  padding: 1.4rem 1.75rem;
  font-size: 1rem;
  letter-spacing: 0.03em;
}
.olivo-boton-tinta--ancho svg { width: 1.35rem; height: 1.35rem; }

.olivo-contacto { display: grid; gap: var(--wp--preset--spacing--50); }
@media (min-width: 56em) { .olivo-contacto { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--wp--preset--spacing--60); } }
.olivo-tarjeta-contacto { background: var(--wp--preset--color--oliva); color: #fff; padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--olivo-sombra-3); }
.olivo-tarjeta-contacto dl { display: grid; gap: 1.35rem; margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid #3d5e43; }
.olivo-tarjeta-contacto dt { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--brote); margin-bottom: 0.3rem; }
.olivo-tarjeta-contacto dd { margin: 0; font-size: 1rem; line-height: 1.55; color: #e2eadd; }
.olivo-tarjeta-contacto dd a { color: #fff; text-decoration-color: var(--wp--preset--color--manzana); text-underline-offset: 3px; }
.olivo-tarjeta-contacto dd a:hover { color: var(--wp--preset--color--brote); }

/* --- Pie de página ---------------------------------------------------- */

.olivo-pie { background: var(--wp--preset--color--bosque); color: #c9d6c4; padding-inline: var(--olivo-margen); }
.olivo-pie__rejilla {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
  max-width: 1400px;
  margin-inline: auto;
}
@media (min-width: 46em) { .olivo-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68em) { .olivo-pie__rejilla { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); } }
.olivo-pie h2 { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--manzana); margin: 0 0 1.1rem; }
.olivo-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.olivo-pie a { display: inline-block; padding-block: 0.45rem; color: #c9d6c4; text-decoration: none; }
.olivo-pie a:hover, .olivo-pie a:focus-visible { color: var(--wp--preset--color--manzana); text-decoration: underline; }
.olivo-pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  max-width: 1400px;
  margin-inline: auto;
  padding-block: 1.25rem 2rem;
  border-top: 1px solid #24402b;
  font-size: 0.8125rem;
  color: #94a690;
}

/* ---------- 6. Movimiento -------------------------------------------- */
/*
   Una entrada orquestada en el héroe y nada más al cargar. El estado por
   defecto de todo es visible: la animación reemplaza ese estado, no lo crea.
   Si no se ejecuta (pestaña oculta, render sin animaciones, motor antiguo),
   la página se ve completa igual.
*/
@media (prefers-reduced-motion: no-preference) {
  .olivo-hero__texto > * {
    animation: olivo-entra 0.75s var(--olivo-salida) backwards;
  }
  .olivo-hero__texto > :nth-child(1) { animation-delay: 0.05s; }
  .olivo-hero__texto > :nth-child(2) { animation-delay: 0.13s; }
  .olivo-hero__texto > :nth-child(3) { animation-delay: 0.21s; }
  .olivo-hero__texto > :nth-child(4) { animation-delay: 0.29s; }

  /* La foto se asienta: arranca un punto más cerca y se posa. */
  .olivo-hero__foto img { animation: olivo-asienta 1.4s var(--olivo-salida) backwards; }
}

@keyframes olivo-entra {
  from { opacity: 0; translate: 0 0.9rem; }
}
@keyframes olivo-asienta {
  from { opacity: 0; scale: 1.06; }
}

/*
   El resto del recorrido usa líneas de tiempo de scroll NATIVAS: sin
   JavaScript, sin librería y sin coste de red. Van dentro de @supports, así
   que en un navegador que no las entienda la página se ve completa y quieta.

   La disciplina aquí es no repetir el mismo revelado en todas las secciones:
   eso es lo que delata una plantilla. Cada uno encaja con lo que enseña —
   los datos suben, la lista entra desde el lado, las fotos se asientan.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /*
       Los titulares NO se animan, a propósito. Ponerle la misma entrada a la
       cabecera de cada sección es la animación de plantilla: se nota que es
       un reflejo y no una decisión. Que se mueva el contenido; los títulos
       son el suelo firme desde el que se lee.
    */

    /*
       Franja de promesas y pasos numerados: se anima el CONTENIDO de cada
       celda, nunca la celda.

       Los filetes de estas rejillas son un «gap: 1px» sobre un fondo gris. Al
       bajarle la opacidad a la celda, ese gris se transparentaba a través de
       ella y el paso que estaba entrando se veía con fondo gris mientras los
       demás seguían blancos.
    */
    .olivo-banda > div > * {
      animation: olivo-subir linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 20%;
    }

    /* Listas: entran desde el lado, como una hoja que se desliza. */
    .olivo-servicios__lista li,
    .olivo-detalle > li {
      animation: olivo-entra-lado linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 16%;
    }

    .olivo-proceso li::before,
    .olivo-proceso li > *,
    .olivo-aparece-hijos > * {
      animation: olivo-subir linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }

    /* Fotos del mosaico: se asientan desde un punto más cerca. Material
       fotográfico, no tipográfico: por eso escala y no desplazamiento. */
    .olivo-mosaico .olivo-marco img {
      animation: olivo-asienta-foto linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }

    /* Cierre: el titular y su acción llegan juntos. */
    .olivo-cta > * {
      animation: olivo-subir linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 25%;
    }

    .olivo-aparece {
      animation: olivo-subir linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}

@keyframes olivo-subir {
  from { opacity: 0; translate: 0 1.25rem; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes olivo-entra-lado {
  from { opacity: 0; translate: -1.25rem 0; }
  to   { opacity: 1; translate: 0 0; }
}
/* Deriva lenta con zoom: la foto se asienta mientras subes, como un paneo
   corto de cámara. Se nota mucho más que el zoom seco de antes y no toca la
   opacidad, así que nunca deja ver el fondo de la rejilla por debajo. */
@keyframes olivo-asienta-foto {
  from { scale: 1.12; translate: 0 -2.5%; }
  to   { scale: 1; translate: 0 0; }
}

/*
   El encabezado despega del contenido en cuanto empiezas a bajar: al principio
   está pegado a la página y no necesita sombra; en cuanto flota por encima del
   contenido, sí. Con línea de tiempo de scroll nativa, sin JavaScript.
*/
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .olivo-encabezado {
      animation: olivo-despega linear both;
      animation-timeline: scroll();
      animation-range: 0 140px;
    }
  }
}
@keyframes olivo-despega {
  from { box-shadow: 0 0 0 rgba(19, 41, 27, 0); }
  to   { box-shadow: var(--olivo-sombra-2); }
}

/* Micro-interacción: el icono empuja hacia delante, como el mensaje que va
   a salir. Sólo donde hay puntero de verdad. */
@media (hover: hover) {
  .olivo-cotizar svg,
  .olivo-boton-tinta svg,
  .olivo-flecha { transition: translate 0.3s var(--olivo-salida); }
  .olivo-cotizar:hover svg,
  .olivo-boton-tinta:hover svg,
  .olivo-cotizar:hover .olivo-flecha { translate: 0.25rem 0; }
}
.olivo-flecha { font-size: 1.1em; line-height: 1; }

/* La respuesta del acordeón aparece en vez de saltar. */
@media (prefers-reduced-motion: no-preference) {
  .olivo-faq details[open] > div { animation: olivo-subir 0.45s var(--olivo-salida); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Al imprimir no hay scroll que dispare nada: sin esto, todo lo que revela el
   desplazamiento saldría en blanco en el papel. */
@media print {
  *, *::before, *::after {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
}

/* El respaldo de revelado para navegadores sin líneas de tiempo de scroll
   vive entero en assets/carril.js: aplica los estados en línea para no
   depender de la cascada. Aquí no hace falta ninguna regla. */