/* ============================================================
   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 ---- */
.section {
	padding-block: var(--ra-space-3xl);
}
.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; }

/* ---- 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; }
}

@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; }
}