/* ============================================================
   Ramarcar Agro – custom.css
   Overrides y extensiones sobre los estilos base del tema WP FSE.
   Todos los valores usan var(--wp--preset--*) o var(--ra-*).
   ============================================================ */

/* ---- Aliases de tokens (mapeo design → WP custom properties) ---- */
:root {
	--ra-primary:         var(--wp--preset--color--brand-primary);
	--ra-primary-deep:    var(--wp--preset--color--brand-primary-deep);
	--ra-secondary:       var(--wp--preset--color--brand-secondary);
	--ra-secondary-soft:  var(--wp--preset--color--brand-secondary-soft);
	--ra-ink-strong:      var(--wp--preset--color--ink-strong);
	--ra-ink-muted:       var(--wp--preset--color--ink-muted);
	--ra-inverse:         var(--wp--preset--color--inverse);
	--ra-bg-canvas:       var(--wp--preset--color--bg-canvas);
	--ra-bg-sunken:       var(--wp--preset--color--bg-sunken);
	--ra-bg-field:        var(--wp--preset--color--bg-field);
	--ra-line:            var(--wp--preset--color--line-base);
	--ra-whatsapp:        #25d366;

	--ra-font-display:    var(--wp--preset--font-family--display);
	--ra-font-body:       var(--wp--preset--font-family--body);

	--ra-fs-xs:    var(--wp--preset--font-size--xs);
	--ra-fs-sm:    var(--wp--preset--font-size--sm);
	--ra-fs-base:  var(--wp--preset--font-size--base);
	--ra-fs-md:    var(--wp--preset--font-size--md);
	--ra-fs-lg:    var(--wp--preset--font-size--lg);

	--ra-space-3xs: var(--wp--preset--spacing--20);
	--ra-space-2xs: var(--wp--preset--spacing--30);
	--ra-space-xs:  var(--wp--preset--spacing--40);
	--ra-space-sm:  var(--wp--preset--spacing--50);
	--ra-space-md:  var(--wp--preset--spacing--60);
	--ra-space-lg:  var(--wp--preset--spacing--70);
	--ra-space-xl:  var(--wp--preset--spacing--80);
	--ra-space-2xl: var(--wp--preset--spacing--90);
	--ra-space-3xl: var(--wp--preset--spacing--100);

	--ra-radius-sm:   4px;
	--ra-radius-md:   8px;
	--ra-radius-lg:   14px;
	--ra-radius-pill: 9999px;

	--ra-shadow-sm: 0 1px 4px rgba(31,46,42,.08);
	--ra-shadow-md: 0 4px 16px rgba(31,46,42,.12);
	--ra-shadow-lg: 0 8px 32px rgba(31,46,42,.18);

	--ra-header-height: 72px;
}

/* ---- Reset mínimo ---- */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }

/* ---- Tipografía global ---- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
	font-family: var(--ra-font-display);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.05;
}
.is-style-display h1,
.is-style-display h2,
.is-style-display h3 {
	line-height: 0.95;
}

/* ---- Eyebrow ---- */
.eyebrow {
	font-family: var(--ra-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: var(--ra-fs-xs);
	color: var(--ra-secondary);
	display: inline-block;
	margin-bottom: var(--ra-space-sm);
}
.eyebrow--ondark { color: var(--ra-secondary-soft); }

/* ---- Lead ---- */
.lead {
	font-size: var(--ra-fs-md);
	line-height: 1.55;
	color: var(--ra-ink-muted);
}

/* ---- Layout secciones ---- */
/* Secciones a pantalla completa PEGADAS entre sí (0 px de separación). Anula la
   franja de block-gap (margin-block-start = spacing--50 = 24px) que WP aplica a
   los hijos directos de .wp-site-blocks —cabecera, secciones alignfull y pie— con
   «:where(.wp-site-blocks) > *», y también a los hijos de <main> si existiera.
   El prefijo :root eleva la especificidad a (0,2,0) para ganar siempre, incluida
   la variante :root :where(...) de los estilos base. Se anula margin-block-start y
   margin-top, cubriendo la primera sección tras la cabecera y el pie. */
:root .wp-site-blocks > *,
:root .wp-site-blocks main > * {
	margin-block-start: 0;
	margin-top: 0;
}

.section {
	/* Relleno vertical proporcional: ~120px en escritorio, ~56px en móvil (375px). */
	padding-block: clamp(3.5rem, 8vw, 7.5rem);
}
.section--tight  { padding-block: var(--ra-space-2xl); }
.section--sunken { background: var(--ra-bg-sunken); }
.section--field  { background: var(--ra-bg-field); }
.section--dark {
	background: var(--ra-primary-deep);
	color: var(--ra-inverse);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--ra-inverse); }

.section--brand {
	background: var(--ra-primary);
	color: var(--ra-inverse);
}

.section-head            { max-width: 46rem; margin-bottom: var(--ra-space-xl); }
.section-head--center    { margin-inline: auto; text-align: center; }

/* ---- Botones ---- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ra-space-2xs);
	padding: 0.85rem 1.5rem;
	font-family: var(--ra-font-body);
	font-weight: 700;
	font-size: var(--ra-fs-sm);
	letter-spacing: 0.02em;
	border: 2px solid transparent;
	border-radius: var(--ra-radius-sm);
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ra-primary); color: var(--ra-inverse); }
.btn--primary:hover { background: var(--ra-primary-deep); }
.btn--outline {
	border-color: var(--ra-primary);
	color: var(--ra-primary);
	background: transparent;
}
.btn--outline:hover { background: var(--ra-primary); color: var(--ra-inverse); }
.btn--ondark {
	border-color: rgba(255,255,255,.55);
	color: var(--ra-inverse);
	background: transparent;
}
.btn--ondark:hover {
	background: var(--ra-inverse);
	color: var(--ra-primary);
	border-color: var(--ra-inverse);
}
.btn--wa {
	background: var(--ra-whatsapp);
	color: #0b3a1f;
	border-color: transparent;
}
.btn--wa:hover { background: #1ebe5a; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--ra-fs-base); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--ra-space-sm); align-items: center; }

/* ---- Iconos inline SVG ---- */
.icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---- Header ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ra-bg-canvas);
	border-bottom: 1px solid var(--ra-line);
}
.header-inner {
	display: flex;
	align-items: center;
	gap: var(--ra-space-md);
	min-height: var(--ra-header-height);
}
.brand { display: inline-flex; align-items: center; gap: var(--ra-space-2xs); flex: none; }
.brand img { height: 42px; width: auto; }
.brand .brand-fallback {
	font-family: var(--ra-font-display);
	font-size: 1.7rem;
	letter-spacing: .04em;
	color: var(--ra-primary);
	text-transform: uppercase;
}
.wp-block-navigation {
	margin-left: auto;
}
.wp-block-navigation-item__content {
	font-weight: 600;
	font-size: var(--ra-fs-sm);
	color: var(--ra-ink-strong) !important;
	padding-block: var(--ra-space-2xs);
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--ra-primary) !important;
	border-bottom-color: var(--ra-secondary);
}

/* ---- Hero ---- */
.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ra-space-lg);
	border-top: 1px solid rgba(255,255,255,.22);
	padding-top: var(--ra-space-md);
	margin-top: var(--ra-space-xl);
}
.hero__meta dt {
	font-family: var(--ra-font-display);
	font-size: var(--ra-fs-lg);
	color: var(--ra-secondary-soft);
	letter-spacing: .02em;
}
.hero__meta dd { margin: 0; font-size: var(--ra-fs-sm); color: rgba(255,255,255,.85); }

/* ---- Statement band ---- */
.statement .wrap { max-width: 52rem; }
.statement p.big {
	font-family: var(--ra-font-display);
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: var(--ra-space-md);
}
.statement .sig {
	font-size: var(--ra-fs-sm);
	color: rgba(255,255,255,.8);
	font-weight: 700;
	letter-spacing: .04em;
}

/* ---- Split text + media ---- */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ra-space-2xl);
	align-items: center;
}
.split--flip .split__media { order: -1; }
.split__media img {
	width: 100%;
	min-height: 320px;
	object-fit: cover;
	border-radius: var(--ra-radius-lg);
	box-shadow: var(--ra-shadow-md);
}

/* ---- Lista de servicios ---- */
.service-list { display: grid; gap: 0; margin-top: var(--ra-space-lg); }
.service-item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ra-space-md);
	padding: var(--ra-space-md) 0;
	border-top: 1px solid var(--ra-line);
}
.service-item:last-child { border-bottom: 1px solid var(--ra-line); }
.service-item .num {
	font-family: var(--ra-font-display);
	font-size: var(--ra-fs-lg);
	color: var(--ra-secondary);
	line-height: 1;
	padding-top: .15em;
}
.service-item h3 { font-size: var(--ra-fs-lg); margin-bottom: var(--ra-space-3xs); text-transform: none; }
.service-item p  { color: var(--ra-ink-muted); font-size: var(--ra-fs-sm); margin: 0; }

/* ---- Proceso (pasos) ---- */
.step { border-top: 3px solid var(--ra-secondary); padding-top: var(--ra-space-md); }
.step .step-num {
	font-family: var(--ra-font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--ra-primary);
	line-height: 1;
	display: block;
	margin-bottom: var(--ra-space-2xs);
}
.step h3 { font-size: var(--ra-fs-md); text-transform: none; margin-bottom: var(--ra-space-3xs); }
.step p  { font-size: var(--ra-fs-sm); color: var(--ra-ink-muted); margin: 0; }

/* ---- Perfiles ---- */
.profile {
	background: var(--ra-bg-canvas);
	border: 1px solid var(--ra-line);
	border-left: 4px solid var(--ra-primary);
	border-radius: var(--ra-radius-md);
	padding: var(--ra-space-lg);
}
.profile h3 { font-size: var(--ra-fs-md); text-transform: none; margin-bottom: var(--ra-space-2xs); }
.profile p  { font-size: var(--ra-fs-sm); color: var(--ra-ink-muted); margin: 0; }

/* ---- Testimonios ---- */
.review {
	background: var(--ra-bg-canvas);
	border: 1px solid var(--ra-line);
	border-radius: var(--ra-radius-md);
	padding: var(--ra-space-lg);
	box-shadow: var(--ra-shadow-sm);
}
.review p { font-size: var(--ra-fs-base); color: var(--ra-ink-strong); }
.review .review-who {
	margin-top: var(--ra-space-md);
	font-weight: 700;
	font-size: var(--ra-fs-sm);
	color: var(--ra-primary);
}
.review .review-where {
	display: block;
	font-weight: 400;
	color: var(--ra-ink-muted);
	font-size: var(--ra-fs-xs);
}

/* ---- Contacto ---- */
.contact-cards { display: grid; gap: var(--ra-space-sm); }
.contact-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ra-space-md);
	align-items: center;
	padding: var(--ra-space-md);
	border: 1px solid var(--ra-line);
	border-radius: var(--ra-radius-md);
	background: var(--ra-bg-canvas);
}
.contact-card .ci {
	width: 40px; height: 40px;
	border-radius: var(--ra-radius-sm);
	background: var(--ra-bg-sunken);
	display: grid; place-items: center;
	color: var(--ra-primary);
}
.contact-card .ci svg { width: 20px; height: 20px; fill: currentColor; }
.contact-card .k { font-size: var(--ra-fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ra-ink-muted); }
.contact-card .v { font-weight: 700; color: var(--ra-ink-strong); word-break: break-word; }
.contact-card a.v:hover { color: var(--ra-primary); }

/* ---- Formulario ---- */
.form { display: grid; gap: var(--ra-space-md); }
.form label { display: block; font-size: var(--ra-fs-sm); font-weight: 700; margin-bottom: var(--ra-space-3xs); }
.form input,
.form select,
.form textarea {
	width: 100%;
	padding: 0.8rem 0.9rem;
	font-family: inherit;
	font-size: var(--ra-fs-base);
	color: var(--ra-ink-strong);
	background: var(--ra-bg-canvas);
	border: 1px solid #a0b0ac;
	border-radius: var(--ra-radius-sm);
	transition: border-color .15s, box-shadow .15s;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
	outline: none;
	border-color: var(--ra-primary);
	box-shadow: 0 0 0 3px rgba(15,92,70,.15);
}
.form textarea { min-height: 140px; resize: vertical; }
.form .consent { display: flex; gap: var(--ra-space-2xs); align-items: flex-start; font-size: var(--ra-fs-sm); color: var(--ra-ink-muted); }
.form .consent input { width: auto; margin-top: .25rem; }
.map-embed {
	border: 0;
	width: 100%;
	height: 320px;
	border-radius: var(--ra-radius-lg);
	box-shadow: var(--ra-shadow-sm);
	margin-top: var(--ra-space-lg);
}

/* ---- FAQ (acordeón semántico) ---- */
.faq { display: grid; gap: var(--ra-space-sm); margin-top: var(--ra-space-lg); max-width: 52rem; }
.faq details {
	border: 1px solid var(--ra-line);
	border-radius: var(--ra-radius-md);
	background: var(--ra-bg-canvas);
	padding: 0 var(--ra-space-md);
}
.faq summary {
	list-style: none;
	cursor: pointer;
	font-weight: 700;
	padding: var(--ra-space-md) 0;
	display: flex;
	justify-content: space-between;
	gap: var(--ra-space-md);
	align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	font-family: var(--ra-font-display);
	font-size: 1.6rem;
	color: var(--ra-secondary);
	line-height: 1;
	flex-shrink: 0;
}
.faq details[open] summary::after { content: "–"; }
.faq details > p { padding-bottom: var(--ra-space-md); margin: 0; color: var(--ra-ink-muted); }

/* ---- Page hero ---- */
.page-hero {
	padding-block: var(--ra-space-2xl);
}
.page-hero .lead { color: rgba(255,255,255,.9); max-width: 42rem; }

/* ---- Breadcrumb ---- */
.breadcrumb {
	font-size: var(--ra-fs-xs);
	color: rgba(255,255,255,.7);
	margin-bottom: var(--ra-space-sm);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.breadcrumb a:hover { color: var(--ra-inverse); }

/* ---- Prosa (legales / textos largos) ---- */
.prose h2 { font-size: var(--ra-fs-lg); margin-top: var(--ra-space-xl); text-transform: none; }
.prose h3 { font-size: var(--ra-fs-md); text-transform: none; margin-top: var(--ra-space-lg); }
.prose p,
.prose li { color: var(--ra-ink-strong); }
.prose ul,
.prose ol { padding-left: 1.3rem; margin: 0 0 var(--ra-space-sm); }
.prose li { margin-bottom: var(--ra-space-2xs); }
.prose a { color: var(--ra-primary); text-decoration: underline; }
.prose .muted { color: var(--ra-ink-muted); font-size: var(--ra-fs-sm); }

/* ---- Footer ---- */
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ra-space-2xs); }
.footer-slogan {
	font-family: var(--ra-font-display);
	color: var(--ra-secondary-soft);
	font-size: var(--ra-fs-lg);
	letter-spacing: .03em;
	text-transform: uppercase;
	margin-top: var(--ra-space-sm);
}
.wp-block-group.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ra-space-sm);
	font-size: var(--ra-fs-xs);
	color: rgba(255,255,255,.6);
}
.wp-block-group.footer-bottom a { text-decoration: underline; }

/* ---- Botón flotante WhatsApp ---- */
.wa-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	width: 58px;
	height: 58px;
	border-radius: var(--ra-radius-pill);
	background: var(--ra-whatsapp);
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: var(--ra-shadow-lg);
	transition: transform .15s ease;
	text-decoration: none;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---- Tienda (WooCommerce coherente con la marca) ---- */
/* Rejilla de productos: separación y tarjetas en la home y en la tienda */
.woocommerce ul.products {
	display: grid;
	gap: var(--ra-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* El clearfix de WooCommerce (::before/::after con display:table) ocupaba, dentro
   del grid, la primera celda y dejaba un hueco vacío a la izquierda. Se oculta. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
/* auto-fit: con 3 productos se rellenan 3 columnas a lo ancho, sin huecos; con 4,
   cuatro columnas. (Los breakpoints de más abajo siguen mandando en tablet/móvil.) */
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: var(--ra-bg-canvas);
	border: 1px solid var(--ra-line);
	border-radius: var(--ra-radius-md);
	padding: var(--ra-space-md);
	box-shadow: var(--ra-shadow-sm);
	display: flex;
	flex-direction: column;
}
.woocommerce ul.products li.product img {
	border-radius: var(--ra-radius-sm);
	margin-bottom: var(--ra-space-sm);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ra-font-display);
	font-size: var(--ra-fs-lg);
	text-transform: none;
	letter-spacing: 0.01em;
	color: var(--ra-ink-strong);
	padding: 0 0 var(--ra-space-3xs);
}
.woocommerce ul.products li.product .price {
	color: var(--ra-primary);
	font-weight: 700;
	margin-bottom: var(--ra-space-sm);
}
.woocommerce ul.products li.product .price del { color: var(--ra-ink-muted); font-weight: 400; }
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
	margin-top: auto;
	background: var(--ra-primary);
	color: var(--ra-inverse);
	font-family: var(--ra-font-body);
	font-weight: 700;
	border-radius: var(--ra-radius-sm);
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover {
	background: var(--ra-primary-deep);
	color: var(--ra-inverse);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--ra-primary);
	color: var(--ra-inverse);
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--ra-primary-deep); }
/* Precios / enlaces WooCommerce en verde de marca */
.woocommerce span.price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--ra-primary); }

@media (max-width: 900px) {
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-2 { grid-template-columns: 1fr; }
}

/* ---- Utilidades ---- */
.text-center { text-align: center; }
.mt-lg { margin-top: var(--ra-space-lg); }
.divider {
	height: 3px;
	width: 56px;
	background: var(--ra-secondary);
	border: 0;
	margin: 0 0 var(--ra-space-md);
}
.section--dark .divider,
.page-hero .divider { background: var(--ra-secondary-soft); }

/* ---- wp:cover overrides ---- */
.wp-block-cover { min-height: 500px; }
.wp-block-cover .wp-block-cover__inner-container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 1.5rem; }

/* ---- wp:columns spacing ---- */
.wp-block-columns { gap: var(--ra-space-xl) !important; }
.wp-block-column  { min-width: 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.split             { grid-template-columns: 1fr; gap: var(--ra-space-xl); }
	.split--flip .split__media { order: 0; }
	.wp-block-columns.is-not-stacked-on-mobile { flex-wrap: wrap; }
}

/* Relleno vertical del hero de páginas proporcional en móvil.
   (.section usa clamp() y ya es proporcional; no se sobreescribe aquí para no
   forzar un valor fijo que anularía el clamp en móvil.) */
@media (max-width: 782px) {
	.page-hero  { padding-block: var(--ra-space-lg); }
}

@media (max-width: 720px) {
	.wa-float { right: 12px; bottom: 12px; width: 52px; height: 52px; }
	.wa-float svg { width: 26px; height: 26px; }
}

@media (max-width: 400px) {
	.btn { padding: 0.8rem 1.1rem; }
}

/* ============================================================
   Arreglos WooCommerce — portada, tienda, ficha y cabecera
   (SOLO CSS, con los tokens del tema)
   ============================================================ */

/* ---- 1) Portada · «Productos destacados»: una sola alineación ----
   El layout "constrained" centra el encabezado (max-width 46rem) con
   margin-inline:auto mientras la rejilla y el botón ocupan el ancho de
   contenido, de modo que antetítulo/botón quedaban a la izquierda y
   título/entradilla centrados. Alineamos los tres hijos directos de la
   sección al mismo borde izquierdo. */
.shop-featured > .section-head,
.shop-featured > .woocommerce,
.shop-featured > .wp-block-buttons {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ---- 1b) TODAS las .section-head de la portada: hijos alineados a la izquierda ----
   El layout "constrained" de .section-head aplica a sus hijos
   margin-left/right:auto !important (+ max-width 736px), centrando el h2 y la
   entradilla .lead mientras el .eyebrow (inline-block) se queda a la izquierda.
   Alineamos esos hijos a la IZQUIERDA (margin-left:0), conservando el ancho
   máximo de lectura de 736px que ya fija WP. Así el antetítulo, el título y la
   entradilla empiezan en la misma x en las CUATRO secciones («Finca a finca…»,
   «Si tiene olivar…», «Trato directo…» y «Productos destacados»), igual que la
   sección «Labores que decidimos juntos». Se excluye la variante centrada. */
.section-head:not(.section-head--center) > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ---- 2a) Tienda (/tienda/): encabezado y controles con estilo del tema ---- */
.woocommerce-products-header {
	max-width: 1120px;
	margin-inline: auto;
	margin-bottom: var(--ra-space-lg);
}
.woocommerce-products-header__title,
.woocommerce .page-title {
	font-family: var(--ra-font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.05;
	color: var(--ra-ink-strong);
}
.woocommerce-products-header__title::before {
	content: "";
	display: block;
	height: 3px;
	width: 56px;
	background: var(--ra-secondary);
	margin-bottom: var(--ra-space-sm);
}
.woocommerce .woocommerce-result-count {
	color: var(--ra-ink-muted);
	font-size: var(--ra-fs-sm);
}
.woocommerce .woocommerce-ordering { margin-bottom: var(--ra-space-lg); }
.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby {
	font-family: var(--ra-font-body);
	font-size: var(--ra-fs-sm);
	color: var(--ra-ink-strong);
	background: var(--ra-bg-canvas);
	border: 1px solid #a0b0ac;
	border-radius: var(--ra-radius-sm);
	padding: 0.55rem 0.8rem;
}
.woocommerce .woocommerce-ordering select:focus,
.woocommerce select.orderby:focus {
	outline: none;
	border-color: var(--ra-primary);
	box-shadow: 0 0 0 3px rgba(15,92,70,.15);
}
/* Título del archivo (bloque Query Title): display + barra de acento de marca,
   para igualar el encabezado de las demás páginas (antetítulo + título display). */
.woocommerce-shop .wp-block-query-title,
.post-type-archive-product .wp-block-query-title {
	font-family: var(--ra-font-display);
	letter-spacing: 0.01em;
	margin-bottom: var(--ra-space-md);
}
.woocommerce-shop .wp-block-query-title::before,
.post-type-archive-product .wp-block-query-title::before {
	content: "";
	display: block;
	height: 3px;
	width: 56px;
	background: var(--ra-secondary);
	margin-bottom: var(--ra-space-sm);
}

/* ---- 2c) Tienda (/tienda/): aire vertical del contenido ----
   El reset global de block-gap (:root .wp-site-blocks > * y ...main > *, que anula
   margin-top, arriba del fichero) dejaba el contenido de la tienda PEGADO: el
   título apretado bajo la cabecera (aspecto "cuadrado") y la rejilla de productos
   pegada al pie, sin separación. Se devuelve el aire con padding vertical al
   <main> (aire bajo la cabecera y antes del pie → margen productos↔footer) y un
   ritmo entre sus bloques (migas, título, controles y rejilla). Scope por las
   clases de <body> de la tienda; el prefijo :root sube la especificidad para
   ganar al reset global. Solo afecta a /tienda/. */
:root .woocommerce-shop main.wp-block-group,
:root .post-type-archive-product main.wp-block-group {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
:root .woocommerce-shop main.wp-block-group > * + *,
:root .post-type-archive-product main.wp-block-group > * + * {
	margin-block-start: var(--ra-space-md);
}

/* La tienda usa el bloque «Product Collection»: la rejilla es
   ul.wc-block-product-template > li.wc-block-product (NO ul.products), por eso el
   CSS clásico no la alcanzaba. Se le dan las mismas tarjetas que a la home. */
ul.wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	gap: var(--ra-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}
li.wc-block-product {
	background: var(--ra-bg-canvas);
	border: 1px solid var(--ra-line);
	border-radius: var(--ra-radius-md);
	padding: var(--ra-space-md);
	box-shadow: var(--ra-shadow-sm);
	display: flex;
	flex-direction: column;
	margin: 0;
	text-align: start;
}
li.wc-block-product .wc-block-components-product-image,
li.wc-block-product .wp-block-woocommerce-product-image { margin-bottom: var(--ra-space-sm); }
li.wc-block-product .wp-block-woocommerce-product-image img { border-radius: var(--ra-radius-sm); }
li.wc-block-product .wp-block-post-title {
	font-family: var(--ra-font-display);
	font-size: var(--ra-fs-lg);
	text-transform: none;
	letter-spacing: 0.01em;
	line-height: 1.15;
	margin: 0 0 var(--ra-space-3xs);
}
li.wc-block-product .wp-block-post-title a { color: var(--ra-ink-strong); text-decoration: none; }
li.wc-block-product .wp-block-post-title a:hover { color: var(--ra-primary); }
li.wc-block-product .wc-block-components-product-price {
	color: var(--ra-primary);
	font-weight: 700;
	font-size: var(--ra-fs-base);
}
li.wc-block-product .wc-block-components-product-button,
li.wc-block-product .wp-block-woocommerce-product-button { margin-top: auto; align-items: flex-start; }
li.wc-block-product .wc-block-components-product-button__button,
li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
	background: var(--ra-primary);
	color: var(--ra-inverse);
	font-family: var(--ra-font-body);
	font-weight: 700;
	border: 0;
	border-radius: var(--ra-radius-sm);
}
li.wc-block-product .wc-block-components-product-button__button:hover,
li.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover {
	background: var(--ra-primary-deep);
	color: var(--ra-inverse);
}
/* El bloque Product Collection trae los textos centrados (has-text-align-center en
   título y precio, align-center en el botón). Se alinean a la IZQUIERDA como en la
   portada; estas reglas ganan a .has-text-align-center por especificidad. */
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wc-block-components-product-price,
li.wc-block-product .wc-block-components-product-button,
li.wc-block-product .wp-block-woocommerce-product-button {
	text-align: start;
}

/* ---- 2a-bis) Tienda: comparador LINDE SUR (Botella vs Pack) ----
   Dos tarjetas comparables generadas en functions.php
   (karma_pagina_web_v1_render_linde_compare). Solo aparece en /tienda/. */
.karma-linde-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ra-space-lg);
	align-items: stretch;
	margin: var(--ra-space-lg) 0 var(--ra-space-2xl);
}
.karma-linde-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ra-bg-canvas);
	border: 1px solid var(--ra-line);
	border-radius: var(--ra-radius-lg);
	box-shadow: var(--ra-shadow-sm);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.karma-linde-card:hover { box-shadow: var(--ra-shadow-md); transform: translateY(-2px); }
.karma-linde-card--featured {
	border: 2px solid var(--ra-secondary);
	box-shadow: var(--ra-shadow-md);
}
.karma-linde-card__badge {
	position: absolute;
	top: var(--ra-space-sm);
	right: var(--ra-space-sm);
	z-index: 2;
	background: var(--ra-secondary);
	color: var(--ra-inverse);
	font-family: var(--ra-font-body);
	font-weight: 700;
	font-size: var(--ra-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.35em 0.85em;
	border-radius: var(--ra-radius-pill);
	box-shadow: var(--ra-shadow-sm);
}
.karma-linde-card__media {
	display: block;
	background: var(--ra-bg-sunken);
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.karma-linde-card__media img,
.karma-linde-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.karma-linde-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ra-space-2xs);
	padding: var(--ra-space-md);
	flex: 1 1 auto;
}
.karma-linde-card__eyebrow {
	margin: 0;
	font-family: var(--ra-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: var(--ra-fs-xs);
	color: var(--ra-secondary);
}
.karma-linde-card__title {
	margin: 0;
	font-family: var(--ra-font-display);
	font-size: var(--ra-fs-lg);
	text-transform: none;
	letter-spacing: 0.01em;
	line-height: 1.15;
}
.karma-linde-card__title a { color: var(--ra-ink-strong); text-decoration: none; }
.karma-linde-card__title a:hover { color: var(--ra-primary); }
.karma-linde-card__format {
	margin: 0;
	color: var(--ra-ink-muted);
	font-size: var(--ra-fs-sm);
}
.karma-linde-card__price {
	margin-top: var(--ra-space-3xs);
	color: var(--ra-primary);
	font-weight: 700;
	font-size: var(--ra-fs-md);
}
.karma-linde-card__price .woocommerce-Price-amount { font-size: inherit; }
.karma-linde-card__saving {
	margin: var(--ra-space-3xs) 0 0;
	padding: 0.5em 0.75em;
	color: var(--ra-primary-deep);
	background: color-mix(in srgb, var(--ra-secondary) 16%, transparent);
	border-radius: var(--ra-radius-sm);
	font-size: var(--ra-fs-sm);
	font-weight: 600;
}
.karma-linde-card__btn {
	margin-top: var(--ra-space-sm);
	display: inline-block;
	text-align: center;
	background: var(--ra-bg-canvas);
	color: var(--ra-primary);
	border: 2px solid var(--ra-primary);
	font-family: var(--ra-font-body);
	font-weight: 700;
	border-radius: var(--ra-radius-sm);
	padding: 0.75em 1.25em;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.karma-linde-card__btn:hover { background: var(--ra-primary); color: var(--ra-inverse); }
.karma-linde-card__btn--primary { background: var(--ra-primary); color: var(--ra-inverse); }
.karma-linde-card__btn--primary:hover { background: var(--ra-primary-deep); color: var(--ra-inverse); }

/* ---- Condiciones de envío (junto al precio: Tienda y ficha) ----
   Aviso leído en vivo de WooCommerce (zonas + envío gratis). Tokens del tema:
   fondo sunken, barra de acento verde secundario y tipografías de marca. */
.karma-ship {
	margin-top: var(--ra-space-sm);
	padding: var(--ra-space-sm) var(--ra-space-md);
	background: var(--ra-bg-sunken);
	border: 1px solid var(--ra-line);
	border-left: 3px solid var(--ra-secondary);
	border-radius: var(--ra-radius-sm);
	font-size: var(--ra-fs-sm);
	color: var(--ra-ink-muted);
}
.karma-ship__title {
	margin: 0 0 var(--ra-space-3xs);
	font-family: var(--ra-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--ra-fs-xs);
	color: var(--ra-ink-strong);
}
.karma-ship__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ra-space-3xs);
}
.karma-ship__list li { margin: 0; line-height: 1.45; }
.karma-ship__free { color: var(--ra-primary); }
.karma-ship__free strong { color: var(--ra-primary-deep); }
.karma-ship .woocommerce-Price-amount { font-weight: 700; color: inherit; }
.karma-ship--single { max-width: 40rem; }

/* Con dos opciones curadas, el contador y el orden del catálogo sobran en la Tienda. */
.woocommerce-shop .wp-block-woocommerce-product-results-count,
.woocommerce-shop .wp-block-woocommerce-catalog-sorting { display: none; }

@media (max-width: 781px) {
	.karma-linde-compare { grid-template-columns: 1fr; }
}

/* ---- 2b) Ficha de producto (/product/...): controles con estilo del tema ----
   La plantilla es «blockified»: NO hay envoltorio div.product; el bloque
   add-to-cart-form sí genera markup clásico (table.variations, .quantity, botón,
   pestañas). Se estiliza bajo .woocommerce (el <body> lleva esa clase). */
.woocommerce .wp-block-woocommerce-product-price .wc-block-components-product-price {
	color: var(--ra-primary);
	font-weight: 700;
}
.woocommerce .variations th,
.woocommerce .variations label {
	font-family: var(--ra-font-body);
	font-weight: 700;
	color: var(--ra-ink-strong);
}
.woocommerce .variations select,
.woocommerce form.cart .quantity .qty {
	font-family: var(--ra-font-body);
	font-size: var(--ra-fs-base);
	color: var(--ra-ink-strong);
	background: var(--ra-bg-canvas);
	border: 1px solid #a0b0ac;
	border-radius: var(--ra-radius-sm);
	padding: 0.6rem 0.8rem;
}
.woocommerce .variations select { min-width: 14rem; }
.woocommerce form.cart .quantity .qty { min-height: 2.9rem; text-align: center; }
.woocommerce .variations select:focus,
.woocommerce form.cart .quantity .qty:focus {
	outline: none;
	border-color: var(--ra-primary);
	box-shadow: 0 0 0 3px rgba(15,92,70,.15);
}
.woocommerce form.cart .button,
.woocommerce .single_add_to_cart_button {
	padding: 0.95rem 1.7rem;
	font-size: var(--ra-fs-base);
	border-radius: var(--ra-radius-sm);
}
/* Fila cantidad + botón, alineada */
.woocommerce .woocommerce-variation-add-to-cart,
.woocommerce form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ra-space-sm);
}
/* Pestañas de descripción: planas y con la paleta del tema */
.woocommerce .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ra-space-md);
	list-style: none;
	border-bottom: 1px solid var(--ra-line);
	margin: 0 0 var(--ra-space-md);
	padding: 0;
}
.woocommerce .woocommerce-tabs ul.tabs::before,
.woocommerce .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce .woocommerce-tabs ul.tabs li::before,
.woocommerce .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce .woocommerce-tabs ul.tabs li a {
	font-family: var(--ra-font-body);
	font-weight: 700;
	font-size: var(--ra-fs-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ra-ink-muted);
	padding: var(--ra-space-2xs) 0;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}
.woocommerce .woocommerce-tabs ul.tabs li.active a,
.woocommerce .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ra-primary);
	border-bottom-color: var(--ra-secondary);
}
.woocommerce .woocommerce-tabs .panel h2 {
	font-family: var(--ra-font-display);
	text-transform: none;
}

/* ---- 2d) Ficha de producto: título y escala tipográfica coherentes ----
   El título es un bloque wp:post-title de nivel 1 (h1.wp-block-post-title) y en
   theme.json el elemento h1 usa font-size:display (clamp(3.25rem,9vw,6.5rem), el
   tamaño del hero), por lo que salía enorme y descuadrado respecto al resto del
   sitio. Se le da el mismo tratamiento que al título de la tienda (display Bebas
   Neue, clamp 2–3rem, mayúsculas y barra de acento verde) y se ajustan precio y
   entradilla a tamaños de marca. Scope por la clase .single-product del <body>. */
.single-product .wp-block-post-title {
	font-family: var(--ra-font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.05;
	color: var(--ra-ink-strong);
	margin: 0 0 var(--ra-space-sm);
}
.single-product .wp-block-post-title::before {
	content: "";
	display: block;
	height: 3px;
	width: 56px;
	background: var(--ra-secondary);
	margin-bottom: var(--ra-space-sm);
}
.single-product .wp-block-woocommerce-product-price .wc-block-components-product-price {
	font-size: var(--ra-fs-md);
}
.single-product .wp-block-post-excerpt__excerpt {
	font-size: var(--ra-fs-base);
	line-height: 1.6;
	color: var(--ra-ink-muted);
}

/* ---- Aire vertical de la cabecera (escritorio) ----
   La barra .site-header es un flex con align-items:center cuya altura la fija el
   hijo más alto (el botón «Llamar», ~53px), por lo que el botón tocaba el borde
   superior e inferior. Se le da ~14px de padding arriba y abajo para centrarlo
   verticalmente con margen. Los enlaces del menú y los iconos de perfil/carrito
   siguen centrados y juntos a la derecha (reglas de abajo). Solo escritorio. */
@media (min-width: 782px) {
	.site-header { padding-block: 0.875rem; }
}

/* ---- 3) Cabecera (escritorio): cuenta + carrito juntos a la derecha ----
   Eran cuatro hijos sueltos con justify-content:space-between y los iconos
   quedaban separados ~129px. margin-left:auto ancla el par a la derecha y un
   margen pequeño los junta (8–12px). Solo escritorio; en móvil no se toca. */
@media (min-width: 783px) {
	/* El nav (con el botón «Llamar») ancla a la derecha TODO el grupo derecho;
	   perfil y carrito van justo después, juntos. Un único margin-left:auto (el del
	   nav) evita que justify-content:space-between los separe (antes flotaban a
	   ~129px). Entre los dos iconos, 12px. */
	.site-header > .wp-block-navigation { margin-left: auto; }
	.site-header > .wp-block-woocommerce-customer-account { margin-left: var(--ra-space-xs); }
	.site-header > .wp-block-woocommerce-mini-cart { margin-left: var(--ra-space-2xs); }
	.site-header > .wp-block-woocommerce-customer-account,
	.site-header > .wp-block-woocommerce-mini-cart {
		display: inline-flex;
		align-items: center;
		align-self: center;
	}
	/* Mismo tamaño de icono, botón-icono limpio y centrado verticalmente con el botón. */
	.site-header .wc-block-customer-account__link,
	.site-header .wc-block-mini-cart__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--ra-ink-strong);
	}
	.site-header .wc-block-customer-account__account-icon,
	.site-header .wc-block-mini-cart__icon { width: 26px; height: 26px; }
}

/* ---- 4) Cabecera (escritorio): aire vertical en la barra ----
   La barra .site-header es un flex (align-items:center) sin padding vertical, así
   que el botón «Llamar» definía la altura y tocaba el borde superior e inferior.
   Con ~14px arriba/abajo el botón queda centrado con margen; el nav, el perfil y
   el carrito siguen centrados verticalmente y juntos a la derecha. Solo escritorio
   (≥782px): el menú/overlay móvil no se toca. */
@media (min-width: 782px) {
	.site-header { padding-block: 14px; }
}

/* ---- Crédito del pie: una sola banda, verde oscuro sobre blanco ----
   Dos mu-plugins imprimen cada uno una banda .karma-credito en wp_footer, de
   modo que el crédito «Web creada y mantenida por Karma Studio» salía DUPLICADO:
   la versión v2 (karma-credito.php, con data-v="2") y la heredada (dentro de
   karma-seo.php, sin data-v). No se pueden editar los mu-plugins (deterministas
   del deploy), así que desde CSS ocultamos la v2 y dejamos una sola banda
   —la heredada, que siempre se imprime— con fondo verde oscuro de marca y texto
   blanco. El !important vence al style inline que fija el plugin. */
.karma-credito[data-v="2"] { display: none !important; }
.karma-credito {
	background: var(--ra-primary-deep) !important;
	color: var(--ra-inverse) !important;
}
.karma-credito a { color: var(--ra-inverse) !important; }