/* COMPONENTES
   Piezas reutilizables: botones, tarjetas, formularios, carrito y avisos. */

.cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--borde);background:var(--superficie);border-radius:999px;padding:9px 13px;
  font-weight:900;color:var(--acento-texto);transition:.2s ease
}
.cart-btn:hover{transform:translateY(-2px)}
.cart-btn.has-items{border-color:var(--acento);box-shadow:0 10px 24px rgba(94,112,65,.20)}
.cart-icon{font-size:1.05rem;line-height:1}
/* Va el último de la barra: discreto, sin caja, hasta que lo tocas. */
.tema-btn{
  border:0;background:transparent;cursor:pointer;border-radius:999px;
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto;
  opacity:.65;transition:.18s ease
}
.tema-btn:hover,.tema-btn:focus-visible{opacity:1;background:var(--acento-suave)}
.theme-icon{font-size:1.15rem;line-height:1}
.cart-badge{
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--acento-suave);color:var(--acento-texto);
  font-size:.78rem;font-weight:900;display:grid;place-items:center
}
.cart-btn.has-items .cart-badge{background:var(--acento-solido);color:var(--sobre-acento)}
.lang-select{
  border:1px solid var(--borde);background:var(--superficie);border-radius:999px;padding:10px 13px;font-weight:850;color:var(--acento-texto);
  flex:0 0 auto;width:86px;text-align:center
}
.btn-nav{padding:11px 16px;font-size:.9rem}
.btn-nav-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.btn{
  border:0;border-radius:999px;padding:13px 20px;font-weight:900;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:.2s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--acento-solido);color:var(--sobre-acento);box-shadow:0 12px 28px rgba(57,70,43,.22)}
.btn-light{background:var(--superficie);color:var(--acento-texto);border:1px solid var(--borde)}
/* Ya está en el carrito: el botón sigue funcionando, sólo cambia de tono. */
.btn.hecho{background:var(--acento-suave);color:var(--acento-texto);box-shadow:none}
.price,.qty,.cart-count,.cart-badge,.cart-total strong,.cart-item strong{font-variant-numeric:tabular-nums}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.81rem;font-weight:900;
  text-transform:uppercase;letter-spacing:.13em;color:var(--acento)
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--acento)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--superficie);border:1px solid var(--borde-suave);border-radius:var(--radio);padding:26px;box-shadow:0 8px 30px rgba(45,52,32,.05);display:flex;flex-direction:column}
/* Un servicio con foto: la imagen sustituye al icono y ocupa el ancho. */
.card-imagen{
  margin:-26px -26px 20px;border-radius:var(--radio) var(--radio) 0 0;
  overflow:clip;background:var(--acento-suave);height:190px
}
.card-imagen img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--grado-foto)}
/* Varias fotos son verticales y el recorte centrado se quedaba con el cielo o
   con el suelo, que es justo lo que no cuenta nada. El encuadre se mueve a
   donde está el trabajo. El porcentaje va por foto porque cada una tiene el
   motivo a una altura distinta; el ancho de la tarjeta apenas cambia entre
   móvil y escritorio, así que un solo valor sirve para los dos. */
.card-imagen img[src$="atomizado-tractor.webp"]{object-position:center 90%}
.card-imagen img[src$="remolque-aceituna.webp"]{object-position:center bottom}
.card-imagen img[src$="lena-remolque.webp"]{object-position:center bottom}
.card-imagen img[src$="desbroce-finca.webp"]{object-position:center 35%}
.card-imagen img[src$="maquinaria-nave.webp"]{object-position:center 30%}
.card-imagen img[src$="plantacion-protectores.webp"]{object-position:center 20%}
.icon{width:52px;height:52px;border-radius:17px;background:var(--acento-suave);display:grid;place-items:center;font-size:1.45rem;margin-bottom:19px}
/* Cada experiencia es un bloque con su cabecera y sus tarjetas de detalle. */
/* Apadrinamiento: la novedad va destacada antes de las experiencias. */
.padrino,
.experiencia{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr);
  gap:clamp(24px,4vw,48px);align-items:center;margin-bottom:clamp(40px,6vw,64px);
  padding:clamp(26px,4vw,40px);border-radius:30px;
  background:linear-gradient(145deg,var(--tarjeta-1),var(--tarjeta-2));
  border:1px solid var(--borde-suave);box-shadow:var(--sombra)
}
.badge-novedad{
  display:inline-block;padding:6px 13px;border-radius:999px;
  background:var(--acento-solido);color:var(--sobre-acento);
  font-size:.79rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase
}
.padrino h3,
.experiencia h3{
  font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1.12;letter-spacing:-.025em;color:var(--acento-texto);margin:14px 0 12px
}
.padrino > .padrino-texto > p{color:var(--texto-medio);max-width:52ch;margin:0}
.padrino-incluye{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.padrino-incluye li{
  position:relative;padding-left:26px;color:var(--texto-suave);font-size:.97rem
}
.padrino-incluye li::before{
  content:"✓";position:absolute;left:0;top:-1px;
  color:var(--acento);font-weight:950
}
.padrino-precio{display:grid;gap:14px;justify-items:start}
.padrino-renovacion,.padrino-entrega{
  margin:0;color:var(--texto-suave);font-size:.9rem;line-height:1.55
}
.padrino-renovacion{font-weight:850;color:var(--acento-texto)}
.padrino-consent{font-size:.86rem;line-height:1.45;align-items:flex-start}
.padrino-consent input{margin-top:.2em;flex:0 0 auto}
.padrino-precio .btn{white-space:normal;text-align:center;line-height:1.25}
.padrino-gestionar,.padrino-respaldo{
  color:var(--acento-texto);font:inherit;font-size:.86rem;font-weight:850;
  text-decoration:underline;text-underline-offset:3px
}
.padrino-gestionar,.padrino-respaldo{
  border:0;background:none;cursor:pointer;text-align:left;
  /* Con padding llega a los 44 px de zona pulsable sin verse distinto: el
     margen negativo devuelve el hueco que el padding añadiría alrededor. */
  padding:11px 0;margin:-11px 0;min-height:44px
}
.padrino-status{min-height:0}
.precio-grande{
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1;font-weight:950;
  color:var(--acento-texto);font-variant-numeric:tabular-nums
}
.experiencias{display:grid;gap:clamp(24px,4vw,40px)}
/* Las tres cosas que incluye la experiencia, en lista y no en tarjetas sueltas. */
.experiencia-incluye{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:15px}
.experiencia-incluye li{display:flex;gap:13px;align-items:flex-start}
.incluye-icono{
  flex:0 0 auto;width:40px;height:40px;border-radius:13px;background:var(--acento-suave);
  display:grid;place-items:center;font-size:1.15rem
}
.experiencia-incluye strong{
  display:block;color:var(--acento-texto);font-size:1rem;margin-bottom:3px
}
.experiencia-incluye p{margin:0;color:var(--texto-suave);font-size:.94rem;line-height:1.5}
/* El nombre y su temporada se leen juntos: son la misma información. */
.experiencia-titulo{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;min-width:0}
.experiencia-accion{display:grid;gap:14px;justify-items:start}
/* La foto acompaña a la llamada: llena la columna, que antes quedaba vacía.
   justify-self:stretch porque la columna alinea su contenido a la izquierda. */
.experiencia-foto,.padrino-foto{
  justify-self:stretch;width:100%;border-radius:20px;overflow:clip;
  background:var(--acento-suave)
}
.experiencia-foto img,.padrino-foto img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  /* Varias fotos son verticales: recortadas por el centro se quedan con el
     suelo. Subiendo el encuadre entran los árboles y el cultivo. */
  object-position:center 30%;
  filter:var(--grado-foto)
}
/* La foto vertical del girasol tiene mucho cielo. Centramos el recorte más
   abajo para que entren la flor y el cultivo sin alterar otras experiencias. */
.experiencia-foto img[src$="girasol-flor.webp"]{object-position:center 50%}
/* La fecha tiene que leerse de un vistazo: el rango manda, el "aprox." acompaña. */
.fecha{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.fecha-icono{font-size:1rem}
.fecha-rango{font-size:1.05rem;font-weight:950;color:var(--acento-texto);letter-spacing:-.01em}
.fecha-nota{font-size:.78rem;font-weight:800;color:var(--texto-suave)}
.btn-mini{padding:9px 15px;font-size:.86rem}
.card h4{font-size:1.16rem;line-height:1.35;letter-spacing:-.012em;margin:0 0 9px}
.card p{color:var(--texto-suave);margin:0}
/* El pie de la tarjeta se pega abajo: los botones quedan a la misma altura. */
.card-pie{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.precio-servicio{font-size:1.25rem;font-weight:950;color:var(--acento-texto)}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--crema);font-size:.78rem;font-weight:900;color:var(--acento-texto)}
.checklist{display:grid;gap:13px;margin-top:24px}
.check{display:flex;align-items:flex-start;gap:12px}
.check i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--acento-suave);color:var(--acento-texto);display:grid;place-items:center;font-weight:950;flex:0 0 auto}
.form{background:var(--superficie);border-radius:30px;padding:30px;box-shadow:var(--sombra);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:7px}.field.full{grid-column:1/-1}
.form .btn,.micro{grid-column:1/-1}
.micro{font-size:.82rem;color:var(--texto-suave);margin:0}
/* CTA dentro de la cabecera de sección, bajo el texto de entrada. */
.section-cta{margin-top:20px}
.notice{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);
  background:var(--panel);color:var(--panel-texto);padding:14px 18px;border-radius:999px;box-shadow:var(--sombra);
  transition:.3s ease;z-index:100;font-weight:800;
  opacity:0;pointer-events:none;max-width:calc(100% - 32px);text-align:center
}
.notice.show{transform:translate(-50%,0);opacity:1}
.featured-product{background:linear-gradient(145deg,var(--tarjeta-1),var(--tarjeta-2));border:1px solid var(--borde-suave);border-radius:30px;padding:28px;box-shadow:var(--sombra);display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;align-items:center}
/* height:auto es obligatorio: los atributos width/height del <img> fijan la altura
   y sin esto la caja se estira aunque la foto se vea bien. */
.product-visual img,.cross-visual img{
  max-width:100%;height:auto;max-height:420px;
  border-radius:12px;box-shadow:0 14px 32px rgba(35,42,24,.28)
}
/* Con foto, la caja se ajusta a la etiqueta en vez de imponer un alto fijo. */
.product-visual.con-foto{min-height:0;padding:22px}
/* Ficha alimentaria: obligatoria antes de comprar, pero plegada para no tapar
   el producto. <details> lo resuelve sin JavaScript y es accesible de serie. */
.ficha{
  margin:18px 0 0;border:1px solid var(--borde-suave);border-radius:16px;
  background:var(--fondo-alt);overflow:hidden
}
.ficha summary{
  cursor:pointer;padding:12px 16px;font-size:.9rem;font-weight:900;
  color:var(--acento-texto);list-style-position:inside
}
.ficha summary:hover{background:var(--acento-suave)}
.ficha dl{margin:0;padding:4px 16px 14px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.ficha dt{font-size:.83rem;font-weight:900;color:var(--texto-medio);white-space:nowrap}
.ficha dd{margin:0;font-size:.88rem;color:var(--texto-suave)}
/* El alérgeno no puede pasar desapercibido: es información de seguridad. */
.ficha dd.ficha-alergeno{color:var(--acento-texto);font-weight:900}
.ficha-nota{margin:0;padding:0 16px 14px;font-size:.82rem;color:var(--texto-suave)}

/* Selector de variante: pastillas grandes, cómodas de tocar en móvil. */
.variantes{border:0;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.variantes legend{float:left;width:100%;font-size:.82rem;font-weight:900;color:var(--texto-medio);margin-bottom:8px}
.variante{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 14px;border-radius:999px;border:1px solid var(--borde);
  background:var(--superficie);font-weight:850;font-size:.92rem;transition:.18s ease
}
.variante:hover{border-color:var(--acento)}
.variante input{width:19px;height:19px;margin:0;flex:0 0 auto;accent-color:var(--acento)}
.variante:has(input:checked){background:var(--acento-suave);border-color:var(--acento);color:var(--acento-texto)}
.product-visual{min-height:360px;border-radius:24px;background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.9),transparent 28%),linear-gradient(160deg,#dce5ca,#a9ba87);position:relative;display:grid;place-items:center;overflow:hidden}
.product-copy h3{font-size:1.9rem;margin-top:14px}
.product-copy .price{font-size:2.4rem;line-height:1;font-weight:950;color:var(--acento-texto);margin:18px 0 8px}
.product-pricing{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:18px 0 8px}
.product-copy .product-pricing .price{margin:0}
.price-offer{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.price-offer[hidden]{display:none}
.previous-price{display:inline-flex;align-items:baseline;gap:5px;color:var(--texto-suave);font-size:.78rem;font-weight:800}
.previous-price del{font-size:1rem;font-weight:850;font-variant-numeric:tabular-nums}
.discount-badge{padding:5px 9px;border-radius:999px;background:var(--acento-solido);color:var(--sobre-acento);font-size:.78rem;font-weight:950}
.product-copy .unit{font-size:.9rem;color:var(--texto-suave);font-weight:800}
.unit-price{font-size:.82rem;color:var(--texto-medio);font-weight:850;margin-top:3px}
.product-shipping{margin:8px 0 0;font-size:.82rem;line-height:1.45;color:var(--texto-suave)}
.production-alert{
  margin:-18px 0 28px;padding:13px 16px;border-left:4px solid var(--espera);
  border-radius:0 12px 12px 0;background:var(--superficie);color:var(--texto-medio);
  font-size:.86rem;font-weight:750
}
.product-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.qty{width:82px;padding:12px 14px;border:1px solid var(--borde);border-radius:999px;background:var(--superficie);font-weight:850}
.stock{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:850;color:#4f6038}
.stock:before{content:"";width:9px;height:9px;border-radius:50%;background:#6e8a46;box-shadow:0 0 0 4px rgba(110,138,70,.12)}
.stock--agotado{color:var(--error)}
.stock--agotado:before{background:var(--error);box-shadow:none}
.featured-product.secundario .product-visual{min-height:270px}
.featured-product.secundario .product-copy h3{font-size:1.55rem}
.form-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--texto-medio);line-height:1.5}
.consent input{width:21px;height:21px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--acento)}
.consent a,.privacy-summary a{color:var(--acento-texto);text-decoration:underline;text-underline-offset:3px}
.privacy-summary{
  grid-column:1/-1;margin:0;padding:13px 15px;border:1px solid var(--borde-suave);
  border-radius:14px;background:var(--fondo-alt);color:var(--texto-suave);
  font-size:.78rem;line-height:1.55
}
.form-status{grid-column:1/-1;margin:0;font-size:.92rem;font-weight:850;min-height:1.2em}
.form-status.ok{color:var(--ok)}
.form-status.err{color:var(--error)}
.fallbacks{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.fallbacks a{font-size:.9rem;padding:11px 16px}
.contact-channel{margin-top:24px}
.contact-channel.btn-light{border-color:var(--acento);color:var(--acento-texto)}
.consulta-canales{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.consulta-canales .btn{min-height:44px;flex:1 1 145px;white-space:normal;text-align:center;line-height:1.35}
.consulta-canales .contact-channel{margin-top:0}
.contacto-canales{margin-top:24px}
.consulta-aviso{margin:0 0 24px}
.section-head .consulta-aviso{margin-top:12px}
.empty-cart{background:var(--superficie);border:1px dashed var(--borde);border-radius:24px;padding:34px;text-align:center}
.empty-cart .btn{margin-top:16px}
/* Recomendacion cruzada: se ofrece al cerrar el pedido, sin sacar a nadie del flujo. */
.cross-sell{
  display:flex;align-items:center;gap:24px;margin-top:24px;padding:22px 26px;
  background:linear-gradient(145deg,var(--tarjeta-1),var(--tarjeta-2));border:1px solid var(--borde-suave);
  border-radius:26px;box-shadow:var(--sombra)
}
.cross-sell[hidden]{display:none}
.cross-visual{
  position:relative;flex:0 0 auto;width:132px;height:150px;border-radius:20px;display:grid;place-items:center;
  background:linear-gradient(160deg,#dce5ca,#a9ba87);overflow:hidden
}
.cross-copy h3{margin:8px 0 6px}
.cross-copy p{margin:0 0 16px;color:var(--texto-medio);font-size:.97rem;max-width:60ch}
.cart-panel{position:sticky;top:96px;scroll-margin-top:var(--desfase-barra);background:var(--panel);color:var(--panel-texto);border-radius:28px;padding:24px;box-shadow:0 18px 50px rgba(30,33,26,.18)}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.cart-panel .eyebrow{color:var(--panel-acento)}
.cart-panel .eyebrow .dot{background:var(--panel-acento)}
.cart-panel h3{font-size:1.45rem;margin-top:6px;color:var(--panel-texto)}
.cart-count{min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:var(--panel-acento);color:var(--panel);display:grid;place-items:center;font-weight:950}
.cart-empty{color:var(--panel-suave);font-size:.93rem;margin:6px 0 18px}
.cart-item{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid rgba(255,255,255,.10)}
.cart-item small{display:block;color:var(--panel-suave);margin-top:3px}
.cart-total{display:flex;justify-content:space-between;align-items:center;padding-top:18px;margin-top:4px;border-top:1px solid rgba(255,255,255,.14)}
.cart-total strong{font-size:1.35rem}
/* El envío no va incluido y hay que decirlo antes de pagar, no después. */
.aviso-envio{margin:12px 0 0;font-size:.82rem;line-height:1.5;color:var(--panel-suave)}
.cart-actions{display:grid;gap:9px;margin-top:18px}
.btn-cart{background:var(--panel-acento);color:var(--panel)}
.btn-ghost{background:transparent;color:var(--panel-suave);border:1px solid rgba(255,255,255,.18)}