/* =============================================================
   Del Campo — estilos del sitio
   Se cargan en todas las páginas.

   Este archivo reemplaza el CSS adicional del personalizador.
   Se movió aquí por dos razones: el firewall de GoDaddy rechaza
   los guardados grandes de CSS del personalizador, y aquí el
   estilo queda versionado junto al resto de los ajustes.
   ============================================================= */

/* ---------- Catálogo: color por línea de producto ---------- */
.woocommerce ul.products li.product{--lc:#007236;--lct:#007236}
.woocommerce ul.products li.product.product_cat-proteccion-vegetal{--lc:#007236;--lct:#007236}
.woocommerce ul.products li.product.product_cat-nutricion-vegetal{--lc:#30A837;--lct:#1F7A26}
.woocommerce ul.products li.product.product_cat-semillas{--lc:#9BC31E;--lct:#5F7D08}
.woocommerce ul.products li.product.product_cat-riegos-agricolas{--lc:#00B2E3;--lct:#0A7FA3}
.woocommerce ul.products li.product.product_cat-plasticos{--lc:#8FA09D;--lct:#5C6E6B}
.woocommerce ul.products li.product.product_cat-equipos{--lc:#F28F22;--lct:#B4600F}

/* ---------- Tarjeta del catálogo ---------- */
.woocommerce ul.products li.product{
  background:#fff;border:1px solid #DDE5E2;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.woocommerce ul.products li.product:hover{transform:translateY(-3px);
  box-shadow:0 10px 28px -14px rgba(37,65,68,.35);border-color:var(--lc)}
.woocommerce ul.products li.product::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--lc);opacity:0;transition:opacity .18s;z-index:2}
.woocommerce ul.products li.product:hover::before{opacity:1}

.woocommerce ul.products li.product .woocommerce-loop-image-link{
  display:block;background:#F1F5F2;border-bottom:1px solid #E7EDEA}
.woocommerce ul.products li.product img{
  aspect-ratio:1/1;object-fit:contain;width:100%;height:auto;padding:14px;mix-blend-mode:multiply}
.woocommerce ul.products li.product img[src*="placeholder"]{opacity:.25;padding:34px;mix-blend-mode:normal}

.woocommerce ul.products li.product .product-details{
  padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:17px!important;line-height:1.25;font-weight:700;letter-spacing:-.01em;
  margin:0!important;padding:0!important}
.woocommerce ul.products li.product .woocommerce-loop-product__title a{color:#254144}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title a{color:var(--lct)}
.woocommerce ul.products li.product .product-excerpt{
  display:block!important;font-size:13.5px;line-height:1.5;color:#63766F;flex:1}
.woocommerce ul.products li.product .product-excerpt p{margin:0}

/* El tema oculta la acción hasta el hover y la etiqueta era genérica.
   Aquí queda siempre visible y dice a dónde lleva. */
.woocommerce ul.products li.product .product-action-wrap{
  opacity:1!important;visibility:visible!important;transform:none!important;
  position:static!important;margin-top:4px}
.woocommerce ul.products li.product .product-action-wrap .button{
  background:none!important;border:0;padding:0!important;margin:0!important;
  min-height:0;line-height:1.4;text-transform:none;letter-spacing:0;font-size:0!important}
.woocommerce ul.products li.product .product-action-wrap .button::before{
  content:"Ver ficha técnica";font-size:13.5px;font-weight:700;color:var(--lct)}
.woocommerce ul.products li.product .product-action-wrap .button::after{
  content:" \2192";font-size:13.5px;font-weight:700;color:var(--lct)}
.woocommerce ul.products li.product .product-action-wrap .button svg,
.woocommerce ul.products li.product .product-action-wrap .button i{display:none!important}
.woocommerce ul.products li.product .product-action-wrap .button:hover::before{text-decoration:underline}

.woocommerce-result-count{color:#63766F;font-size:14px}
.woocommerce-ordering select{border:1px solid #DDE5E2;border-radius:9px;padding:8px 12px}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce div.product .product_title{
  text-transform:none !important;
  font-family:"DM Sans",system-ui,sans-serif !important}
.woocommerce div.product .product_title{font-weight:700;letter-spacing:-.015em}

/* ---------- Productos sin fotografía ----------
   En vez de una caja vacía, la tarjeta muestra el nombre de su línea. */
.woocommerce ul.products li.product{--ln:"Del Campo"}
.woocommerce ul.products li.product.product_cat-proteccion-vegetal{--ln:"Protección Vegetal"}
.woocommerce ul.products li.product.product_cat-nutricion-vegetal{--ln:"Nutrición Vegetal"}
.woocommerce ul.products li.product.product_cat-semillas{--ln:"Semillas"}
.woocommerce ul.products li.product.product_cat-riegos-agricolas{--ln:"Riegos Agrícolas"}
.woocommerce ul.products li.product.product_cat-plasticos{--ln:"Plásticos"}
.woocommerce ul.products li.product.product_cat-equipos{--ln:"Equipos"}
.woocommerce ul.products li.product:not(.has-post-thumbnail) .woocommerce-loop-image-link{
  display:grid;place-items:center;aspect-ratio:1/1;
  background:linear-gradient(160deg,#F4F8F5,#EAF1EC)}
.woocommerce ul.products li.product:not(.has-post-thumbnail) .woocommerce-loop-image-link img{display:none}
.woocommerce ul.products li.product:not(.has-post-thumbnail) .woocommerce-loop-image-link::after{
  content:var(--ln);font-family:"DM Sans",system-ui,sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--lc);opacity:.55;text-align:center;
  padding:0 14px;line-height:1.4}

/* ---------- Ficha de producto ---------- */
.woocommerce div.product .woocommerce-product-gallery img{max-width:100%!important;height:auto!important}
.woocommerce div.product .woocommerce-product-gallery__image img{
  aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.woocommerce div.product .flex-control-thumbs{margin-top:12px;gap:8px;display:flex}
.woocommerce div.product .flex-control-thumbs li{width:auto!important;margin:0!important}
.woocommerce div.product .flex-control-thumbs img{
  width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid #E2E9E5;border-radius:9px;padding:5px}
.woocommerce div.product .product_title{font-size:34px;line-height:1.12;margin-bottom:10px}
.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:16px;color:#4A5F5B;line-height:1.6}
.woocommerce div.product .product_meta{
  margin-top:18px;padding-top:14px;border-top:1px solid #E2E9E5;font-size:13px;color:#7B8C88}

/* Las pestañas escondían la ficha técnica. Se muestran todas las
   secciones a la vez y se oculta la de reseñas, que no se usa. */
.woocommerce div.product .woocommerce-tabs ul.tabs{display:none!important}
.woocommerce div.product .woocommerce-tabs .panel{
  display:block!important;margin:0 0 34px;padding:0;border:0;box-shadow:none}
.woocommerce div.product #tab-reviews{display:none!important}
.woocommerce div.product .woocommerce-tabs .panel > h2{
  font-size:20px;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid #007236;display:inline-block}

.woocommerce div.product table.woocommerce-product-attributes{
  width:100%;border-collapse:collapse;border:1px solid #E2E9E5;border-radius:12px;overflow:hidden;background:#fff}
.woocommerce div.product table.woocommerce-product-attributes th,
.woocommerce div.product table.woocommerce-product-attributes td{
  padding:13px 16px;border-bottom:1px solid #EDF2EF;text-align:left;font-size:14.5px;
  font-style:normal!important;text-transform:none!important}
.woocommerce div.product table.woocommerce-product-attributes td p{margin:0;font-style:normal!important}
.woocommerce div.product table.woocommerce-product-attributes th{
  width:38%;background:#F7FAF8;font-weight:600;color:#48605C}
.woocommerce div.product table.woocommerce-product-attributes td{color:#254144}
.woocommerce div.product table.woocommerce-product-attributes tr:last-child th,
.woocommerce div.product table.woocommerce-product-attributes tr:last-child td{border-bottom:0}

.woocommerce div.product .woocommerce-Tabs-panel a[href$=".pdf"]{
  display:inline-flex;align-items:center;gap:9px;background:#007236;color:#fff !important;
  padding:12px 22px;border-radius:999px;font-weight:700;font-size:14.5px;text-decoration:none;margin:6px 0}
.woocommerce div.product .woocommerce-Tabs-panel a[href$=".pdf"]:hover{background:#005c2b}
.woocommerce div.product .woocommerce-Tabs-panel em{
  display:block;margin-top:16px;padding:13px 16px;background:#FBF0DA;border-left:3px solid #F28F22;
  border-radius:0 10px 10px 0;font-size:13.5px;color:#5C4A22;font-style:normal}

/* ---------- Correcciones del tema ---------- */
/* Los botones de línea traían el color escrito a mano en el widget
   (#77B81E daba 2.43:1 con texto blanco). Se unifican con el verde
   de marca, que da 6.07:1. */
.cms-cat-image .cms-button .elementor-button{
  font-size:16px !important;line-height:1.3;white-space:normal;padding:11px 14px !important;
  background-color:#007236 !important}
.cms-cat-image .cms-button .elementor-button-text{white-space:normal}
.cms-cat-image .cms-button .elementor-button:hover{background-color:#005c2b !important}

/* Varios widgets de Elementor traían Marcellus escrita a mano. */
h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.widget-title,
.entry-title{font-family:"DM Sans",system-ui,-apple-system,sans-serif !important}
h1,h2,h3,.elementor-heading-title{letter-spacing:-.015em}

/* El tema aplica text-transform:capitalize a los titulares. En español
   no se usa mayúscula en cada palabra: «Confía En Nosotros» debe leerse
   «Confía en nosotros». Ningún titular usa uppercase a propósito. */
h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.widget-title,
.entry-title{text-transform:none}

/* ---------- Botones de subcategoría de las páginas de línea ---------- */
.dc-lineas{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:40px auto;
  max-width:1100px;font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.dc-lineas a{flex:1 1 260px;max-width:340px;min-height:150px;display:flex;align-items:center;
  justify-content:center;gap:10px;padding:24px 22px;color:#fff;text-decoration:none;font-size:21px;
  font-weight:700;line-height:1.25;text-align:center;border-radius:12px;
  box-shadow:0 8px 18px rgba(37,65,68,.15);transition:transform .25s ease,box-shadow .25s ease}
.dc-lineas a:hover,.dc-lineas a:focus-visible{transform:translateY(-5px);
  box-shadow:0 12px 25px rgba(37,65,68,.28);color:#fff}
.dc-lineas a::after{content:"\2192";font-weight:400;opacity:.75}
.dc-lineas.dc-uno a{max-width:460px;min-height:112px}
@media(max-width:640px){.dc-lineas{gap:14px}.dc-lineas a{flex-basis:100%;min-height:104px;font-size:19px}}

/* ---------- Botón de WhatsApp en la ficha de producto ----------
   Usa el verde de marca y no el verde de WhatsApp (#25D366), que con
   texto blanco da 1.9:1 y sería ilegible. El glifo aporta el
   reconocimiento; el color, el contraste (6.07:1). */
.dc-wa{margin:22px 0 4px}
.dc-wa-btn{display:inline-flex;align-items:center;gap:10px;background:#007236;color:#fff;
  border-radius:999px;padding:14px 26px;font-family:"DM Sans",system-ui,sans-serif;
  font-weight:700;font-size:15.5px;line-height:1;text-decoration:none;
  box-shadow:0 1px 2px rgba(37,65,68,.06),0 12px 26px -16px rgba(0,114,54,.85);
  transition:background .15s ease,transform .15s ease}
.dc-wa-btn:hover,.dc-wa-btn:focus-visible{background:#005c2b;color:#fff;transform:translateY(-1px)}
.dc-wa-btn svg{flex-shrink:0}
.dc-wa-nota{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#63766F;max-width:44ch}

/* El catálogo no maneja precios: WooCommerce deja el párrafo vacío. */
.woocommerce div.product p.price:empty{display:none}

/* ============================================================
   MASCOTA DE MARCA (la hormiga)
   ------------------------------------------------------------
   Aparece en cuatro sitios y en ninguno más: tarjeta de asesoría
   de la portada, página 404, catálogo sin resultados y cierre de
   /historia/. No se pone en las fichas de producto: ahí conviven
   advertencias de manejo y una caricatura al lado les resta peso.

   Las imágenes son WebP de 480 px de alto (~20 KB cada una). Se
   sirven desde el propio plugin, no desde la biblioteca de medios,
   para que viajen con la versión del plugin y no se puedan borrar
   por accidente desde el escritorio de WordPress.
   ============================================================ */
.dc-masc{position:relative;display:block;line-height:0;
  pointer-events:none;user-select:none}
.dc-masc img{display:block;
  /* El catálogo aplica mix-blend-mode:multiply a las fotos de
     producto. La mascota no debe heredarlo nunca: sobre el verde
     oscuro de la tarjeta de asesoría se vería sucia. */
  mix-blend-mode:normal}
/* La primera pose marca el tamaño del bloque. El max-width va con
   clase+clase+tipo porque WooCommerce impone img{max-width:100%} con
   dos clases y le ganaría a la segunda pose, que es más ancha que su
   contenedor en algunas parejas. */
.dc-masc img.p1{width:100%;height:auto;max-width:none}
/* La segunda va encima, oculta en reposo. Se iguala por ALTURA y se
   centra, no por caja: las cuatro poses miden lo mismo de alto pero
   distinto de ancho, y estirarlas a la misma caja las deformaría. */
.dc-masc img.p2{position:absolute;top:0;right:0;height:100%;width:auto;
  max-width:none;opacity:0}
.dc-masc img.p1,.dc-masc img.p2{transition:opacity .45s ease}

.dc-flota{animation:dc-flota 4.5s ease-in-out infinite}
@keyframes dc-flota{0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}}

/* Quien pide menos movimiento en su sistema operativo la ve quieta. */
@media (prefers-reduced-motion:reduce){
  .dc-flota{animation:none}
  .dc-masc img.p1,.dc-masc img.p2{transition:none}
}

/* ---------- Página 404 ----------
   El tema no ofrece ningún hook para insertar HTML aquí, así que la
   mascota se pinta como fondo de dos pseudoelementos: es decoración
   pura y de todos modos no debería estar en el árbol de contenido.
   Las dos poses se alternan solas porque en móvil no hay hover. */
/* El tema declara padding:0 aquí con cuatro clases
   (.content-style-unboxed .entry:not(.loop-entry) > .entry-content-wrap),
   así que un selector de tres perdía en silencio: la mascota quedaba
   encima del título. Estas cinco clases ganan sin !important y sin
   depender del orden en que se impriman las hojas. */
.error404 .error .page-content.entry.content-bg > .entry-content-wrap{
  position:relative;min-height:300px;padding-left:258px;display:flex;
  flex-direction:column;justify-content:center}
.error404 .error .entry-content-wrap::before,
.error404 .error .entry-content-wrap::after{
  content:"";position:absolute;left:8px;top:50%;margin-top:-153px;
  width:214px;height:306px;background:left bottom/auto 100% no-repeat;
  animation:dc-flota 4.5s ease-in-out infinite}
.error404 .error .entry-content-wrap::before{
  background-image:url(../img/hormiga-3.webp)}
.error404 .error .entry-content-wrap::after{
  background-image:url(../img/hormiga-1.webp);opacity:0;
  animation:dc-flota 4.5s ease-in-out infinite,
            dc-cambia 11s ease-in-out infinite}
@keyframes dc-cambia{0%,38%{opacity:0}48%,62%{opacity:1}72%,100%{opacity:0}}
.error404 .error .page-title{text-transform:none}
@media(max-width:640px){
  .error404 .error .page-content.entry.content-bg > .entry-content-wrap{
    padding-left:0;padding-top:210px;min-height:0;text-align:center}
  .error404 .error .entry-content-wrap::before,
  .error404 .error .entry-content-wrap::after{
    left:50%;margin-left:-107px;top:0;margin-top:0;width:214px;height:190px;
    background-position:center top;background-size:auto 100%}
  .error404 .error .search-form{margin-left:auto;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
  .error404 .error .entry-content-wrap::before,
  .error404 .error .entry-content-wrap::after{animation:none}
  .error404 .error .entry-content-wrap::after{opacity:0}
}

/* ---------- Catálogo sin resultados ---------- */
.dc-vacio{max-width:620px;margin:34px auto 60px;text-align:center;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.dc-vacio .dc-masc{width:150px;margin:0 auto 6px}
.dc-vacio h2{font-size:22px;line-height:1.25;color:#254144;margin:0 0 8px;
  font-weight:700;text-transform:none;letter-spacing:-.01em}
.dc-vacio p{font-size:15.5px;line-height:1.6;color:#5A6B68;margin:0 0 20px}
.dc-vacio .dc-vacio-btns{display:flex;gap:10px;justify-content:center;
  flex-wrap:wrap}
.dc-vacio a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;border-radius:999px;font-weight:600;
  font-size:14.5px;text-decoration:none;
  transition:transform .15s ease,filter .15s ease}
.dc-vacio a:hover{transform:translateY(-1px);filter:brightness(1.05)}
.dc-vacio .dc-v-1{background:#007236;color:#fff}
.dc-vacio .dc-v-2{background:#fff;color:#254144;border:1px solid #C9D5D2}

/* ============================================================
   REDES SOCIALES
   ------------------------------------------------------------
   Aparecen en el pie (fondo oscuro) y en la página de contacto
   (fondo claro), así que el color se hereda del contenedor en vez
   de fijarse: currentColor sirve para el trazo, el borde y el
   relleno del glifo.

   El selector lleva dos clases a propósito. El pie declara
   «.dc-pie a{display:block;padding:4px 0;color:#A3B5B2}» en una
   hoja incrustada que se imprime DESPUÉS de esta; con una sola
   clase perderíamos por orden y los iconos saldrían apilados en
   vertical.
   ============================================================ */
.dc-social{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:16px}
.dc-social a.dc-soc{display:inline-flex;align-items:center;justify-content:center;
  /* 44px es el mínimo cómodo para el dedo; los iconos van dentro. */
  width:44px;height:44px;padding:0;border-radius:50%;
  color:inherit;text-decoration:none;
  border:1px solid currentColor;opacity:.6;
  transition:opacity .15s ease,transform .15s ease,background-color .15s ease}
.dc-social a.dc-soc:hover,.dc-social a.dc-soc:focus-visible{
  opacity:1;transform:translateY(-2px);text-decoration:none}
.dc-social a.dc-soc svg{width:19px;height:19px;fill:currentColor;display:block}
/* En el pie el texto es gris claro sobre verde petróleo: al pasar el
   cursor el icono pasa a blanco pleno, igual que los enlaces. */
.dc-pie .dc-social a.dc-soc:hover{color:#fff;background:rgba(255,255,255,.1)}
.dc-social-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;opacity:.75;width:100%;margin-bottom:2px}

/* ============================================================
   BOTONERA FIJA (WhatsApp + redes)
   ------------------------------------------------------------
   Escritorio: columna pegada al borde izquierdo, centrada
   verticalmente. Celular: franja horizontal al pie, porque una
   columna lateral en 375px se come el borde de las tarjetas y
   además queda lejos del pulgar.
   ============================================================ */
.dc-rail{position:fixed;left:0;top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;gap:3px;padding:6px;
  background:#fff;border:1px solid #DCE4E1;border-left:0;
  border-radius:0 16px 16px 0;
  box-shadow:0 1px 2px rgba(37,65,68,.05),0 12px 30px -18px rgba(37,65,68,.5)}
.dc-rail .dc-rail-b{display:grid;place-items:center;width:44px;height:44px;
  border-radius:11px;color:#254144;text-decoration:none;position:relative;
  transition:background-color .16s ease,color .16s ease}
.dc-rail .dc-rail-b svg{width:20px;height:20px;fill:currentColor;display:block}
/* Al pasar el cursor cada botón toma el color de su marca; en reposo
   todos van en el verde petróleo del sitio para no convertir el borde
   de la pantalla en un semáforo. */
.dc-rail .dc-rail-wa:hover,.dc-rail .dc-rail-wa:focus-visible{background:#25D366;color:#fff}
.dc-rail .dc-rail-fb:hover,.dc-rail .dc-rail-fb:focus-visible{background:#1877F2;color:#fff}
.dc-rail .dc-rail-ig:hover,.dc-rail .dc-rail-ig:focus-visible{background:#C13584;color:#fff}
.dc-rail .dc-rail-li:hover,.dc-rail .dc-rail-li:focus-visible{background:#0A66C2;color:#fff}

/* El nombre está en el marcado para los lectores de pantalla; en
   escritorio se muestra como etiqueta al pasar el cursor. */
.dc-rail .dc-rail-txt{position:absolute;left:calc(100% + 10px);
  white-space:nowrap;background:#254144;color:#fff;font-size:12.5px;
  font-weight:600;padding:7px 11px;border-radius:8px;
  opacity:0;pointer-events:none;transform:translateX(-4px);
  transition:opacity .16s ease,transform .16s ease;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.dc-rail .dc-rail-b:hover .dc-rail-txt,
.dc-rail .dc-rail-b:focus-visible .dc-rail-txt{opacity:1;transform:translateX(0)}

@media(max-width:768px){
  .dc-rail{left:0;right:0;top:auto;bottom:0;transform:none;
    flex-direction:row;justify-content:center;gap:6px;
    border:0;border-top:1px solid #DCE4E1;border-radius:0;
    padding:6px 8px;
    /* respeta la barra de gestos de los teléfonos sin botón físico */
    padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 24px -18px rgba(37,65,68,.6)}
  .dc-rail .dc-rail-b{width:56px;height:44px}
  /* La etiqueta flotante no cabe ni hace falta: en táctil no hay hover. */
  .dc-rail .dc-rail-txt{display:none}
  /* Sin esto la franja tapa el aviso de copyright. El relleno NO va
     en .dc-pie: ese es solo el widget de las cuatro columnas, y el
     copyright vive en otro widget hermano, dentro del último
     contenedor del pie. Poniéndolo en .dc-pie el hueco quedaba en
     medio del pie y el aviso seguía tapado. */
  .dc-pie{padding-bottom:30px}
  .footer-width-fixer > .elementor > .e-con:last-child{padding-bottom:64px}
}
@media print{.dc-rail{display:none}}
@media (prefers-reduced-motion:reduce){
  .dc-rail .dc-rail-b,.dc-rail .dc-rail-txt{transition:none}
}

/* ============================================================
   ENCABEZADO FIJO AL HACER SCROLL
   ------------------------------------------------------------
   Dos cosas a la vez.

   1) El tema traía el encabezado en «position:absolute» (modo de
      cabecera transparente): flotaba sobre la foto del hero sin ocupar
      sitio. En escritorio sobraba espacio, pero en celular el hero se
      encoge y el titular «Del Campo para el Campo» quedaba pegado
      debajo de la fila del logo, sin aire. Al pasar a «sticky» el
      encabezado vuelve a ocupar su espacio y el problema desaparece
      por construcción, no con un parche de relleno.

   2) Un encabezado fijo NO puede ser transparente: al desplazarse, el
      texto de la página se leería a través de él. Por eso lleva fondo
      blanco.

   El truco del «top» negativo: se pega el encabezado ENTERO con un
   desplazamiento igual al alto de la barra de utilidad, de modo que
   esa barra se va con el scroll y solo queda fijada la fila del logo.
   Sin JavaScript.
   ============================================================ */

/* «overflow:hidden» en un ancestro anula position:sticky en todo lo
   que contiene: era la razón por la que el encabezado se iba con el
   scroll aunque estuviera declarado como sticky. «clip» recorta
   igual pero no crea contexto de desplazamiento.
   Safari 15 y anteriores no entienden «clip» y conservan el
   «hidden» del tema: ahí el encabezado simplemente no se queda
   fijo. Nada se rompe, solo se pierde la mejora. */
/* El «hidden» no lo declara «.site» sino «#wrapper», que es el mismo
   elemento con un selector de ID: 100 de especificidad contra los 10
   de una clase. Por eso una regla sobre «.site» a secas perdía en
   silencio y el encabezado seguía sin quedarse fijo. */
.site,#wrapper.site{overflow-x:clip;overflow-y:visible}

body.transparent-header #masthead,
body.mobile-transparent-header #masthead{
  position:sticky;top:-37px;z-index:120;background:#fff}
/* Filo inferior para separar el encabezado del contenido cuando pasa
   por encima al desplazarse. */
.elementor-element-dc783d2{
  box-shadow:0 1px 0 #DCE4E1,0 6px 18px -16px rgba(37,65,68,.55)}

@media(max-width:768px){
  body.transparent-header #masthead,
  body.mobile-transparent-header #masthead{top:-32px}
}

/* Con sesión iniciada, la barra de WordPress ocupa la parte superior:
   el encabezado se pega justo debajo en vez de esconderse detrás.
   32px de barra en escritorio, 46px en pantallas pequeñas. */
body.admin-bar.transparent-header #masthead,
body.admin-bar.mobile-transparent-header #masthead{top:-5px}
@media(max-width:768px){
  body.admin-bar.transparent-header #masthead,
  body.admin-bar.mobile-transparent-header #masthead{top:14px}
}

/* ---------- Mapa de cobertura (Leaflet) bajo el encabezado ----------
   Leaflet numera sus capas internas de 200 a 700 (baldosas, sombras,
   marcadores, ventanas emergentes). El contenedor del mapa no crea
   contexto de apilamiento propio, así que esos valores compiten
   directamente contra el z-index:120 del encabezado fijo y le ganan:
   al desplazarse, los marcadores y las baldosas se dibujaban ENCIMA
   de la barra.

   La solución no es subir el z-index del encabezado —Leaflet siempre
   podría superarlo con una ventana emergente a 700— sino encerrar el
   mapa en su propio contexto. Dentro de él, sus 700 son relativos al
   contenedor y ya no pueden asomar por encima de nada externo.

   «isolation» va en .leaflet-container para que valga también para
   cualquier otro mapa que se añada más adelante; no altera la
   maquetación en absoluto. */
.leaflet-container{isolation:isolate}
.dc-map-container{position:relative;z-index:0}

/* ============================================================
   FORMULARIO DE CONTACTO (Contact Form 7)
   ------------------------------------------------------------
   El formulario anterior llevaba los estilos incrustados en cada
   etiqueta y enviaba a un servicio externo. Este usa Contact Form 7,
   sale por FluentSMTP y queda registrado; aquí va su apariencia, en
   la misma escala tipográfica y los mismos verdes del resto del sitio.
   ============================================================ */
.dc-form{max-width:640px;margin:0 auto;padding:0;background:none;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.dc-form h2{font-size:clamp(24px,3vw,32px);font-weight:700;color:#254144;
  letter-spacing:-.02em;line-height:1.15;margin:0 0 22px;text-transform:none}
.dc-form .wpcf7-form p{margin:0 0 16px}
.dc-form label{display:block;font-size:14.5px;font-weight:600;color:#254144;
  line-height:1.5}
.dc-form input[type=text],.dc-form input[type=email],.dc-form input[type=tel],
.dc-form textarea{
  width:100%;box-sizing:border-box;margin-top:6px;
  font-family:inherit;font-size:15.5px;color:#254144;
  background:#fff;border:1px solid #C9D5D2;border-radius:10px;
  padding:12px 14px;line-height:1.5;
  transition:border-color .15s ease,box-shadow .15s ease}
.dc-form textarea{min-height:150px;resize:vertical}
.dc-form input:focus,.dc-form textarea:focus{outline:none;border-color:#007236;
  box-shadow:0 0 0 3px rgba(0,114,54,.14)}
.dc-form input::placeholder,.dc-form textarea::placeholder{color:#8FA09D}

.dc-form input[type=submit]{
  /* 48px de alto: por encima del mínimo cómodo para el dedo. */
  min-height:48px;padding:0 30px;border:0;border-radius:999px;
  background:#007236;color:#fff;font-family:inherit;font-weight:600;
  font-size:15px;cursor:pointer;
  transition:transform .15s ease,filter .15s ease}
.dc-form input[type=submit]:hover{transform:translateY(-1px);filter:brightness(1.07)}
.dc-form input[type=submit]:disabled{opacity:.6;cursor:default;transform:none}

/* La trampa antispam: fuera de la pantalla, nunca oculta con
   «display:none» —hay robots que descartan los campos ocultos así—
   y ya marcada con aria-hidden en el marcado. */
.dc-form .dc-trampa{position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden}

/* Avisos de validación y de envío. */
.dc-form .wpcf7-not-valid-tip{color:#B4300F;font-size:13.5px;font-weight:500;
  margin-top:6px}
.dc-form .wpcf7-not-valid{border-color:#D4552B}
.dc-form .wpcf7-response-output{margin:18px 0 0;padding:14px 18px;
  border-radius:12px;font-size:15px;line-height:1.5;border:1px solid #DCE4E1}
.dc-form form.sent .wpcf7-response-output{background:#F1F8F3;border-color:#9BC31E;color:#1F5B33}
.dc-form form.invalid .wpcf7-response-output,
.dc-form form.failed .wpcf7-response-output,
.dc-form form.spam .wpcf7-response-output{background:#FDF3F0;border-color:#E0A794;color:#8C3315}


/* ============================================================
   BUSCADOR POR CULTIVO Y NECESIDAD
   ------------------------------------------------------------
   Vive en sitio.css y no en portada.css porque el bloque sale en
   tres sitios: portada, catálogo y la vista de resultados. En
   portada.css se veía sin estilos en todas menos la primera.
   ============================================================ */
.dc-bus{max-width:1160px;margin:0 auto;padding:0 22px;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.dc-bus-in{background:#254144;border-radius:22px;padding:40px 46px;color:#EEF3F2}
.dc-bus-eyebrow{display:block;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;color:#9BC31E}
.dc-bus h2{font-size:clamp(23px,2.8vw,31px);line-height:1.15;letter-spacing:-.02em;
  font-weight:700;color:#fff;margin:10px 0 0;text-transform:none}
.dc-bus-sub{font-size:15.5px;line-height:1.6;color:#A3B5B2;margin:10px 0 0}
.dc-bus-form{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;
  align-items:end;margin:24px 0 0}
.dc-bus-campo{margin:0}
.dc-bus-campo label{display:block;font-size:13px;font-weight:600;
  color:#A3B5B2;margin-bottom:7px}
.dc-bus-campo select{width:100%;box-sizing:border-box;min-height:48px;
  padding:0 40px 0 14px;font-family:inherit;font-size:15.5px;color:#254144;
  background:#fff;border:1px solid #C9D5D2;border-radius:10px;
  -webkit-appearance:none;appearance:none;
  /* la flecha va como fondo SVG para no depender del estilo del sistema */
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23254144' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px}
.dc-bus-campo select:focus{outline:none;border-color:#9BC31E;
  box-shadow:0 0 0 3px rgba(155,195,30,.3)}
.dc-bus-envio{margin:0}
.dc-bus-envio button{min-height:48px;padding:0 28px;border:0;border-radius:999px;
  background:#9BC31E;color:#17292B;font-family:inherit;font-weight:700;
  font-size:15px;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,filter .15s ease}
.dc-bus-envio button:hover{transform:translateY(-1px);filter:brightness(1.06)}
@media(max-width:820px){
  .dc-bus-form{grid-template-columns:1fr}
  .dc-bus-envio button{width:100%}
}
@media(max-width:900px){.dc-bus{padding:0 16px}.dc-bus-in{padding:30px 24px;border-radius:18px}}

/* ---------- Cabecera de la vista de resultados ---------- */
.dc-res{max-width:1160px;margin:0 auto 22px;padding:0 22px;
  font-family:"DM Sans",system-ui,-apple-system,sans-serif}
.dc-res-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid #DCE4E1}
.dc-res-n{font-size:15px;color:#254144;font-weight:600;margin:0}
.dc-res-n b{color:#007236}
.dc-res-chip{display:inline-flex;align-items:center;gap:8px;
  background:#F1F6F2;border:1px solid #CFE0D3;border-radius:999px;
  padding:6px 8px 6px 14px;font-size:13.5px;color:#254144;font-weight:600}
.dc-res-chip span{color:#5D716E;font-weight:500}
.dc-res-chip a{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:#DCE7DE;color:#254144;
  text-decoration:none;font-size:14px;line-height:1}
.dc-res-chip a:hover{background:#007236;color:#fff}
.dc-res-limpiar{margin-left:auto;font-size:13.5px;font-weight:600;
  color:#007236;text-decoration:none;border-bottom:1px solid rgba(0,114,54,.3)}
.dc-res-limpiar:hover{border-bottom-color:#007236}
@media(max-width:900px){.dc-res{padding:0 16px}.dc-res-limpiar{margin-left:0}}

/* ---------- Buscador en la vista de resultados (compacto) ----------
   En el archivo el buscador es una herramienta, no una portada: se
   queda sin antetítulo ni bajada, ocupa el ancho del contenedor del
   tema (por eso max-width:none) y baja de altura para que la primera
   fila de productos siga entrando en pantalla. */
.dc-bus--fino{max-width:none;padding:0;margin:0 0 20px}
.dc-bus--fino .dc-bus-in{padding:22px 26px;border-radius:16px}
.dc-bus--fino h2{font-size:18px;margin:0;letter-spacing:-.01em}
.dc-bus--fino .dc-bus-form{margin-top:16px;gap:14px}
.dc-bus--fino .dc-bus-campo select,
.dc-bus--fino .dc-bus-envio button{min-height:44px}
@media(max-width:900px){.dc-bus--fino .dc-bus-in{padding:20px 18px}}

/* El listado necesita aire bajo la cabecera de resultados. */
.woocommerce-page .dc-res{margin-bottom:26px}

/* Con filtros activos manda la cabecera propia: el contador del tema
   («Mostrando los 3 resultados») diría lo mismo dos líneas más abajo. */
body.dc-filtrado .thebase-woo-results-count{display:none}

/* El archivo de productos del tema llega casi al borde de la ventana
   (contenedor de 1448px con 24px de aire), así que la botonera fija de
   la izquierda le caía encima a la primera columna de tarjetas. Aquí
   se le hace sitio; en el resto del sitio el contenido va centrado y
   no hace falta. */
@media(min-width:1025px){
  body.woocommerce-shop .content-container.site-container,
  body.tax-product_cat .content-container.site-container{padding-left:80px}
}