/* ==========================================================================
   SAYRUF SpA — sistema de diseño del sitio
   Todo el CSS vive bajo .sy / .sy-* para no chocar con Kadence.
   ========================================================================== */

:root {
	/* --- Colores tomados del logo y de los flyers de la empresa ---
	   leaf = verde del engranaje | sun = amarillo del sol
	   sand = beige de las hojas  | mint = verde claro de los flyers      */
	--sy-g900: #0f4a26;
	--sy-g800: #17683a;  /* verde de la tipografia del logo */
	/* Verde claro pedido por el cliente. Con texto BLANCO da 1.96:1 (ilegible),
	   asi que se usa siempre como fondo con texto verde oscuro: 5.27:1. */
	--sy-brand: #50d254;
	/* Base del hero: el mas claro que mantiene el texto blanco sobre 4.5:1 */
	--sy-hero: #1a7440;
	--sy-g700: #1e7d42;
	--sy-g600: #2a9a4d;
	--sy-g500: #43b45c;
	--sy-leaf: #7cc142;  /* engranaje */
	--sy-lime: #a6ee5b;  /* franja de los flyers */
	--sy-lime2: #c2f47d;
	--sy-mint: #a9e5a4;  /* fondo verde claro de los flyers */
	--sy-mint2: #d6f2d0;
	--sy-sun: #f4e04d;   /* sol del logo */
	--sy-sun2: #fbef92;
	--sy-sand: #d9bf9a;  /* hojas del logo */

	/* neutros */
	--sy-ink: #12301d;
	--sy-body: #4a6552;
	--sy-line: #dcecd6;
	--sy-tint: #eaf8e4;
	--sy-white: #fff;
	--sy-wa: #25d366;

	/* sistema */
	--sy-r: 16px;
	--sy-r-lg: 24px;
	--sy-shadow: 0 18px 45px -18px rgba(15, 74, 38, .32);
	--sy-shadow-sm: 0 6px 20px -8px rgba(15, 74, 38, .22);
	--sy-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--sy-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sy-pad: clamp(56px, 7vw, 104px);
}

/* ==========================================================================
   HEADER propio (reemplaza el de Kadence)
   ========================================================================== */
.sy-header, .sy-header *, .sy-foot, .sy-foot *, .sy-drawer, .sy-drawer * { box-sizing: border-box; }

.sy-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: var(--sy-g800); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
	font: 600 .9rem var(--sy-text); text-decoration: none;
}
.sy-skip:focus { left: 0; }

.sy-header {
	position: fixed; inset: 0 0 auto; z-index: 9000;
	font-family: var(--sy-text);
	background: transparent;
	transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s;
}
/* Al hacer scroll pasa al verde claro de la marca (como los flyers), con el
   texto en verde oscuro. Lo mismo cuando el menu movil esta abierto. */
.sy-header.is-stuck,
.sy-header[data-open="true"] {
	background: rgba(180, 236, 173, .96);
	backdrop-filter: saturate(140%) blur(10px);
	box-shadow: 0 8px 26px -14px rgba(15, 74, 38, .5);
}
.sy-header.is-stuck .sy-brand__text strong,
.sy-header[data-open="true"] .sy-brand__text strong { color: var(--sy-g800); }
.sy-header.is-stuck .sy-brand__text small,
.sy-header[data-open="true"] .sy-brand__text small { color: var(--sy-g700); }

.sy-header__inner {
	display: flex; align-items: center; gap: 24px;
	height: 118px;
	transition: height .3s ease;
}
.sy-header.is-stuck .sy-header__inner { height: 94px; }

/* ---------- marca ---------- */
.sy-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; }

/* El PNG es el lockup completo (emblema arriba, "SAYRUF SpA" abajo).
   .sy-brand__crop es una caja al 80% del disco que recorta: dentro, la imagen
   va al 147% y subida un 10%, de modo que solo se ve el emblema y el nombre
   del PNG queda fuera (ya va como texto al lado). Al ser la caja mas chica que
   el disco, el emblema queda con aire en vez de tocar el borde. */
.sy-brand__badge {
	flex: none;
	display: grid; place-items: center;
	width: 88px; height: 88px; border-radius: 50%;
	background: #fff; overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
	transition: width .3s ease, height .3s ease, box-shadow .3s ease;
}
.sy-brand__crop {
	position: relative; overflow: hidden;
	width: 80%; aspect-ratio: 1;
}
.sy-brand__crop img {
	position: absolute; left: 50%; top: -10%;
	width: 147%; height: auto; max-width: none;
	transform: translateX(-50%);
}
.sy-header.is-stuck .sy-brand__badge { width: 70px; height: 70px; }

.sy-brand__text { display: flex; flex-direction: column; line-height: 1.12; }
/* Sin text-transform: "SpA" (Sociedad por Acciones) pierde sentido en
   mayusculas y ademas se lee como "spa". El nombre ya viene capitalizado. */
.sy-brand__text strong {
	font-family: var(--sy-display); font-size: 2.05rem; font-weight: 700;
	letter-spacing: .015em; color: #fff;
	transition: color .3s ease;
}
.sy-brand__text small {
	font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sy-lime2); font-weight: 700;
	transition: color .3s ease;
}

/* ---------- navegación ---------- */
.sy-nav { margin-left: auto; }
.sy-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.sy-nav__list li { position: relative; }
.sy-nav__list a {
	display: block; padding: 10px 15px; border-radius: 999px;
	font-size: .93rem; font-weight: 600; color: #eaf6e6; text-decoration: none;
	transition: color .18s, background .18s;
}
.sy-nav__list a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.sy-nav__list .current-menu-item > a,
.sy-nav__list .current_page_item > a { color: var(--sy-sun); }

/* header claro: enlaces en verde oscuro */
.sy-header.is-stuck .sy-nav__list > li > a { color: var(--sy-g800); }
.sy-header.is-stuck .sy-nav__list > li > a:hover { color: var(--sy-g900); background: rgba(255, 255, 255, .6); }
.sy-header.is-stuck .sy-nav__list .current-menu-item > a,
.sy-header.is-stuck .sy-nav__list .current_page_item > a { color: var(--sy-g900); background: rgba(255, 255, 255, .55); }

/* submenús */
.sy-nav__list .sub-menu {
	position: absolute; top: calc(100% + 10px); left: 0;
	min-width: 210px; padding: 8px; margin: 0; list-style: none;
	background: #fff; border-radius: 14px;
	box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .35);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .18s, transform .18s, visibility .18s;
}
.sy-nav__list li:hover > .sub-menu,
.sy-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sy-nav__list .sub-menu a { color: var(--sy-ink); border-radius: 9px; padding: 9px 13px; }
.sy-nav__list .sub-menu a:hover { background: var(--sy-tint); color: var(--sy-g700); }

/* ---------- acciones ---------- */
.sy-header__actions { display: flex; align-items: center; gap: 16px; flex: none; }
.sy-header__phone {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .88rem; font-weight: 600; color: #eaf6e6; text-decoration: none;
	transition: color .18s;
}
.sy-header__phone:hover { color: var(--sy-lime2); }
.sy-btn--sm { padding: 11px 22px; font-size: .88rem; }

/* header claro: el boton lima no contrasta sobre el verde claro */
.sy-header.is-stuck .sy-header__phone { color: var(--sy-g800); }
.sy-header.is-stuck .sy-header__phone:hover { color: var(--sy-g600); }
.sy-header.is-stuck .sy-btn--lime { background: var(--sy-g700); color: #fff; box-shadow: 0 10px 24px -12px rgba(30, 125, 66, .8); }
.sy-header.is-stuck .sy-btn--lime:hover { background: var(--sy-g800); color: #fff; }

/* ---------- burger ---------- */
.sy-burger {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 46px; height: 46px; padding: 0 11px;
	background: rgba(255, 255, 255, .12); border: 0; border-radius: 12px; cursor: pointer;
}
.sy-burger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .25s, opacity .2s, background .3s; }
.sy-header.is-stuck .sy-burger,
.sy-header[data-open="true"] .sy-burger { background: rgba(15, 74, 38, .14); }
.sy-header.is-stuck .sy-burger span,
.sy-header[data-open="true"] .sy-burger span { background: var(--sy-g800); }
.sy-header[data-open="true"] .sy-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sy-header[data-open="true"] .sy-burger span:nth-child(2) { opacity: 0; }
.sy-header[data-open="true"] .sy-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- drawer móvil ---------- */
.sy-drawer {
	position: fixed; inset: 118px 0 0; z-index: 8999;
	background: var(--sy-mint);
	padding: 26px 6vw 40px;
	overflow-y: auto;
	font-family: var(--sy-text);
	opacity: 0; transform: translateY(-12px);
	transition: opacity .25s, transform .25s;
}
.sy-drawer[hidden] { display: none; }
.sy-drawer.is-open { opacity: 1; transform: none; }
.sy-drawer__list { list-style: none; margin: 0 0 30px; padding: 0; }
.sy-drawer__list li { border-bottom: 1px solid rgba(15, 74, 38, .16); }
.sy-drawer__list a {
	display: block; padding: 17px 4px;
	font-family: var(--sy-display); font-size: 1.6rem; font-weight: 600;
	text-transform: uppercase; color: var(--sy-g800); text-decoration: none;
}
.sy-drawer__list a:hover, .sy-drawer__list .current-menu-item > a { color: var(--sy-g600); }
.sy-drawer__list .sub-menu { list-style: none; margin: 0 0 10px; padding: 0 0 0 14px; }
.sy-drawer__list .sub-menu a { font-size: 1.1rem; padding: 11px 4px; }
.sy-drawer__list .sub-menu li { border: 0; }
.sy-drawer__foot { display: grid; gap: 12px; }
.sy-drawer__phone {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px; border-radius: 14px;
	background: rgba(255, 255, 255, .65); color: var(--sy-g800); text-decoration: none;
}
.sy-drawer__phone .sy-ico { color: var(--sy-g600); }
.sy-drawer__phone span { display: flex; flex-direction: column; line-height: 1.3; }
.sy-drawer__phone small { color: var(--sy-g700); font-size: .82rem; }
.sy-drawer .sy-btn--lime { background: var(--sy-g700); color: #fff; }
.sy-drawer .sy-btn--lime:hover { background: var(--sy-g800); color: #fff; }
body.sy-locked { overflow: hidden; }

/* ==========================================================================
   FOOTER propio (reemplaza el de Kadence)
   ========================================================================== */
/* Footer en el verde claro de los flyers, con texto en verde oscuro. */
.sy-foot {
	background: var(--sy-mint); color: var(--sy-g800);
	font-family: var(--sy-text);
	padding: clamp(54px, 6vw, 82px) 0 0;
}
.sy-foot__grid {
	display: grid; grid-template-columns: 1.6fr 1.1fr 1.2fr .9fr;
	gap: clamp(28px, 4vw, 54px);
	padding-bottom: clamp(38px, 4.5vw, 58px);
}
.sy-foot h3 {
	font-family: var(--sy-display); font-size: 1.22rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .02em;
	color: var(--sy-g900); margin: 0 0 18px;
}
.sy-foot p { font-size: .93rem; line-height: 1.7; margin: 0; color: var(--sy-g800); }
.sy-foot__col--brand p { margin-top: 18px; max-width: 38ch; }

.sy-brand--foot { align-items: center; }
.sy-brand--foot .sy-brand__badge { width: 100px; height: 100px; box-shadow: 0 8px 22px rgba(15, 74, 38, .18); }
.sy-brand--foot .sy-brand__text strong { font-size: 2.2rem; color: var(--sy-g800); }
.sy-brand--foot .sy-brand__text small { color: var(--sy-g700); }

.sy-foot__links, .sy-foot__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sy-foot__links a, .sy-foot__contact a { color: var(--sy-g800); text-decoration: none; font-size: .93rem; transition: color .16s; }
.sy-foot__links a:hover, .sy-foot__contact a:hover { color: var(--sy-g600); text-decoration: underline; }
.sy-foot__contact li { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; }
.sy-foot__contact .sy-ico { color: var(--sy-g600); margin-top: 2px; }

.sy-foot__social { list-style: none; margin: 24px 0 0; padding: 0; display: flex; gap: 10px; }
.sy-foot__social a {
	display: inline-flex; align-items: center; gap: 9px;
	min-width: 44px; height: 44px; padding: 0 14px;
	border-radius: 13px; background: rgba(255, 255, 255, .6); color: var(--sy-g800);
	text-decoration: none;
	transition: background .18s, transform .18s, color .18s;
}
.sy-foot__handle { font-size: .88rem; font-weight: 700; letter-spacing: .01em; }
.sy-foot__social a:hover { background: var(--sy-g700); color: #fff; transform: translateY(-3px); }

.sy-foot__bar {
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
	padding: 22px 0 26px;
	border-top: 1px solid rgba(15, 74, 38, .18);
	font-size: .85rem;
}
.sy-foot__tag { color: var(--sy-g700); }

/* ---------- contenido del editor y páginas legales ---------- */
.sy-prose { max-width: 760px; margin-inline: auto; color: var(--sy-body); }
.sy-prose > p:first-child {
	font-size: 1.08rem; color: var(--sy-ink);
	padding: 20px 24px; margin-bottom: 2.2em;
	background: var(--sy-tint); border-left: 4px solid var(--sy-leaf);
	border-radius: 0 var(--sy-r) var(--sy-r) 0;
}
.sy-prose h2 {
	font-size: clamp(1.3rem, 2.1vw, 1.62rem);
	margin: 2.4em 0 .7em; padding-bottom: .4em;
	border-bottom: 2px solid var(--sy-line);
}
.sy-prose h2:first-of-type { margin-top: 0; }
.sy-prose h3 { margin: 1.8em 0 .5em; }
.sy-prose p { margin: 0 0 1.1em; }
.sy-prose ul, .sy-prose ol { margin: 0 0 1.4em; padding-left: 1.35em; line-height: 1.8; }
.sy-prose li { margin-bottom: .5em; }
.sy-prose li::marker { color: var(--sy-leaf); }
.sy-prose strong { color: var(--sy-ink); }
.sy-prose a { color: var(--sy-g600); text-decoration: underline; text-underline-offset: 2px; }
.sy-prose a:hover { color: var(--sy-g700); }

/* ficha de identificación de la empresa */
.sy-prose__data {
	list-style: none; padding: 22px 26px !important; margin: 0 0 1.6em;
	background: #fff; border: 1px solid var(--sy-line); border-radius: var(--sy-r);
	display: grid; gap: 9px;
}
.sy-prose__data li { margin: 0; font-size: .96rem; }

.sy-prose__date {
	margin-top: 2.6em; padding-top: 1.2em;
	border-top: 1px solid var(--sy-line);
	font-size: .87rem; color: var(--sy-body); font-style: italic;
}

/* ---------- reset acotado ---------- */
.sy, .sy * { box-sizing: border-box; }
.sy { font-family: var(--sy-text); color: var(--sy-body); overflow-x: clip; }
.sy img { max-width: 100%; height: auto; display: block; }
.sy p { line-height: 1.7; margin: 0 0 1em; }
.sy p:last-child { margin-bottom: 0; }

.sy h1, .sy h2, .sy h3 {
	font-family: var(--sy-display);
	font-weight: 700;
	color: var(--sy-g900);
	line-height: 1.06;
	letter-spacing: -.01em;
	margin: 0 0 .45em;
	text-wrap: balance;
}
.sy h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); text-transform: uppercase; }
.sy h2 { font-size: clamp(1.9rem, 3.9vw, 3.1rem); text-transform: uppercase; }
.sy h3 { font-size: 1.24rem; letter-spacing: 0; }

.sy-wrap { width: min(1180px, 92vw); margin-inline: auto; }

/* fondo blanco explicito: el corte curvo del hero se rellena con el mismo color */
.sy-sec { padding: var(--sy-pad) 0; position: relative; background: var(--sy-white); }
.sy-sec--sm { padding: clamp(38px, 4.5vw, 64px) 0; }
.sy-sec--pt0 { padding-top: clamp(76px, 8vw, 118px); }
.sy-sec--tint { background: var(--sy-tint); }

.sy-ico { width: 26px; height: 26px; flex: none; }
.sy-ico--sm { width: 17px; height: 17px; }

/* ---------- eyebrow ---------- */
.sy-eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: .74rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--sy-g600);
	margin-bottom: 16px;
}
.sy-eyebrow::before {
	content: ""; width: 26px; height: 3px; border-radius: 3px;
	background: var(--sy-sun);
}
.sy-eyebrow--light { color: var(--sy-lime2); }

/* ---------- head de sección ---------- */
.sy-head { text-align: center; max-width: 720px; margin: 0 auto clamp(38px, 4.5vw, 62px); }
.sy-head p { font-size: 1.06rem; }
.sy-head--light h2 { color: #fff; }
.sy-head--light p { color: #cfe7cd; }

/* ---------- botones ---------- */
.sy-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.sy-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 15px 30px;
	border: 2px solid transparent; border-radius: 999px;
	font-family: var(--sy-text); font-size: .97rem; font-weight: 700;
	line-height: 1; text-decoration: none; cursor: pointer;
	transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s;
}
.sy-btn:hover { transform: translateY(-3px); }
.sy-btn .sy-ico { transition: transform .18s; }
.sy-btn:hover .sy-ico { transform: translateX(3px); }

.sy-btn--lime { background: var(--sy-lime); color: var(--sy-g900); box-shadow: 0 12px 30px -10px rgba(166, 238, 91, .75); }
.sy-btn--lime:hover { background: var(--sy-lime2); color: var(--sy-g900); }
/* Fondo verde claro con texto verde oscuro: en blanco daba 2.20:1. */
.sy-btn--green { background: var(--sy-brand); color: var(--sy-g900); box-shadow: 0 12px 30px -12px rgba(80, 210, 84, .85); }
.sy-btn--green:hover { background: #6ee070; color: var(--sy-g900); }
.sy-btn--outline { border-color: rgba(255, 255, 255, .55); color: #fff; background: rgba(255, 255, 255, .06); backdrop-filter: blur(4px); }
.sy-btn--outline:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
.sy-btn--wa { background: var(--sy-wa); color: #06301a; }
.sy-btn--wa:hover { background: #1fbb59; color: #06301a; }
.sy-btn--full { width: 100%; }

/* ==========================================================================
   HERO portada
   ========================================================================== */
.sy-hero {
	position: relative;
	padding: clamp(96px, 13vw, 172px) 0 0;
	color: #fff;
	isolation: isolate;
}
.sy-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background: var(--sy-bg) center / cover no-repeat;
}
/* Velo mas claro y mas verde que antes: deja ver la foto y evita que el hero
   se lea como negro en lugar de como el verde de la marca. */
.sy-hero__veil {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(120% 90% at 12% 0%, rgba(26, 116, 64, .38) 0%, rgba(20, 92, 50, .88) 68%),
		linear-gradient(180deg, rgba(26, 116, 64, .34) 0%, rgba(23, 104, 58, .78) 52%, rgba(20, 92, 50, .95) 100%);
}
.sy-hero__grid {
	position: absolute; inset: 0; z-index: -1; opacity: .16;
	background-image:
		linear-gradient(rgba(244, 224, 77, .45) 1px, transparent 1px),
		linear-gradient(90deg, rgba(244, 224, 77, .45) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(75% 60% at 50% 35%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(75% 60% at 50% 35%, #000 0%, transparent 78%);
}
/* espacio inferior para que el corte curvo no toque los botones */
.sy-hero__inner { max-width: 900px; padding-bottom: clamp(112px, 13vw, 184px); }
.sy-hero h1 { color: #fff; margin-bottom: .3em; }
/* palabra destacada en el amarillo del sol del logo */
.sy-hero h1 em {
	display: block; font-style: normal;
	color: var(--sy-sun);
	text-shadow: 0 6px 34px rgba(244, 224, 77, .3);
}
.sy-hero__lead {
	font-size: clamp(1rem, 1.3vw, 1.14rem);
	color: #d6ecd2; max-width: 62ch; margin-bottom: 34px;
}

/* ---------- corte curvo hacia la seccion siguiente ---------- */
.sy-cut {
	position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
	height: clamp(58px, 7vw, 120px);
	pointer-events: none;
	line-height: 0;
}
.sy-cut svg { display: block; width: 100%; height: 100%; }
.sy-cut__fill { fill: var(--sy-white); }
.sy-cut__line { fill: none; stroke: var(--sy-lime); stroke-width: 2.5; }
/* halo difuso sobre la linea */
.sy-cut__glow { fill: none; stroke: var(--sy-lime); stroke-width: 12; opacity: .18; }


/* --------------------------------------------------------------------------
   Variante de hero CLARO (config: home.hero_light)
   El verde claro de la marca no admite texto blanco: 1.96:1. Aqui se invierte
   todo el hero a texto verde oscuro, que sobre ese fondo da 7.1:1.
   -------------------------------------------------------------------------- */
/* La foto se aclara y desatura por filtro. Eso sube tanto el contraste del
   texto oscuro que el velo puede ser mucho mas transparente y la foto se
   sigue viendo: al 78% el peor caso (la sombra del camion) da 5.6:1. */
.sy-hero--light::before {
	filter: saturate(.4) brightness(1.12) contrast(.95);
}
/* UNA sola capa: dos gradientes apilados multiplican sus opacidades y el
   velo terminaba casi opaco aunque cada capa pareciera translucida. */
.sy-hero--light .sy-hero__veil {
	background: linear-gradient(100deg,
		rgba(169, 229, 164, .86) 0%,
		rgba(169, 229, 164, .78) 38%,
		rgba(169, 229, 164, .56) 70%,
		rgba(180, 236, 173, .40) 100%);
}
/* la retícula amarilla desaparece sobre verde claro */
.sy-hero--light .sy-hero__grid {
	opacity: .1;
	background-image:
		linear-gradient(rgba(15, 74, 38, .5) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 74, 38, .5) 1px, transparent 1px);
}
/* un halo claro detras del bloque de texto, por si la foto se asoma ahi */
.sy-hero--light .sy-hero__inner {
	position: relative;
}
.sy-hero--light .sy-hero__inner::before {
	content: ""; position: absolute; z-index: -1;
	inset: -4% -18% -4% -12%;
	background: radial-gradient(60% 60% at 32% 45%, rgba(196, 240, 190, .5), transparent 72%);
	pointer-events: none;
}
.sy-hero--light h1 { color: var(--sy-g900); }
/* "entrar a faena": en amarillo sobre verde claro daba 1.08:1, asi que el
   amarillo pasa a ser el resalte y el texto va oscuro encima (7.70:1). */
.sy-hero--light h1 em {
	color: var(--sy-g900);
	background: var(--sy-sun);
	width: fit-content;
	padding: .04em .22em .1em;
	border-radius: 8px;
	text-shadow: none;
	box-shadow: 0 8px 24px -10px rgba(244, 224, 77, .9);
}
.sy-hero--light .sy-hero__lead { color: #1c5e38; }
.sy-hero--light .sy-eyebrow--light { color: var(--sy-g800); }
.sy-hero--light .sy-eyebrow--light::before { background: var(--sy-g700); }
/* el boton fantasma tenia borde y texto blancos */
.sy-hero--light .sy-btn--outline {
	border-color: var(--sy-g800); color: var(--sy-g800);
	background: rgba(255, 255, 255, .45);
}
.sy-hero--light .sy-btn--outline:hover { background: #fff; border-color: var(--sy-g900); color: var(--sy-g900); }
/* el filete lima del corte no se ve sobre verde claro */
.sy-hero--light .sy-cut__line { stroke: var(--sy-g600); }
.sy-hero--light .sy-cut__glow { stroke: var(--sy-g600); opacity: .12; }

/* Header transparente sobre un hero claro: pasa a textos oscuros. */
body.sy-top-light .sy-header:not(.is-stuck) .sy-brand__text strong { color: var(--sy-g800); }
body.sy-top-light .sy-header:not(.is-stuck) .sy-brand__text small { color: var(--sy-g700); }
body.sy-top-light .sy-header:not(.is-stuck) .sy-nav__list > li > a { color: var(--sy-g800); }
body.sy-top-light .sy-header:not(.is-stuck) .sy-nav__list > li > a:hover { color: var(--sy-g900); background: rgba(255, 255, 255, .55); }
body.sy-top-light .sy-header:not(.is-stuck) .sy-nav__list .current-menu-item > a,
body.sy-top-light .sy-header:not(.is-stuck) .sy-nav__list .current_page_item > a { color: var(--sy-g900); background: rgba(255, 255, 255, .5); }
body.sy-top-light .sy-header:not(.is-stuck) .sy-header__phone { color: var(--sy-g800); }
body.sy-top-light .sy-header:not(.is-stuck) .sy-btn--lime { background: var(--sy-g700); color: #fff; }
body.sy-top-light .sy-header:not(.is-stuck) .sy-burger { background: rgba(15, 74, 38, .14); }
body.sy-top-light .sy-header:not(.is-stuck) .sy-burger span { background: var(--sy-g800); }

/* ==========================================================================
   HERO páginas internas
   ========================================================================== */
.sy-phero {
	position: relative; isolation: isolate; color: #fff;
	padding: clamp(88px, 11vw, 150px) 0 clamp(72px, 9vw, 118px);
}
.sy-phero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background: var(--sy-bg) center / cover no-repeat;
}
.sy-phero__veil {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(105deg, rgba(20, 92, 50, .93) 18%, rgba(26, 116, 64, .60) 100%);
}
.sy-phero__fade {
	position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
	background: linear-gradient(180deg, transparent, var(--sy-white));
}
.sy-phero__inner { max-width: 820px; }
.sy-phero h1 { color: #fff; }
.sy-phero p { color: #d6ecd2; font-size: 1.08rem; max-width: 58ch; }

/* ==========================================================================
   Tarjetas
   ========================================================================== */
.sy-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sy-cards--4 { grid-template-columns: repeat(4, 1fr); }

.sy-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--sy-line);
	border-radius: var(--sy-r);
	padding: 30px 26px 26px;
	overflow: hidden;
	transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.sy-card::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, var(--sy-leaf), var(--sy-sun));
	transform: scaleX(0); transform-origin: left;
	transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.sy-card:hover { transform: translateY(-6px); box-shadow: var(--sy-shadow); border-color: transparent; }
.sy-card:hover::before { transform: scaleX(1); }

.sy-card__chip {
	display: inline-grid; place-items: center;
	width: 58px; height: 58px; margin-bottom: 18px;
	border-radius: 16px;
	background: linear-gradient(140deg, var(--sy-brand), var(--sy-lime));
	color: var(--sy-g900);
	box-shadow: 0 10px 22px -10px rgba(80, 210, 84, .9);
}
.sy-card--plain .sy-card__chip {
	background: var(--sy-tint); color: var(--sy-g700);
	border: 1px solid var(--sy-line); box-shadow: none;
}
.sy-card p { font-size: .96rem; }

.sy-card__link {
	display: inline-flex; align-items: center; gap: 7px;
	margin-top: 16px;
	font-size: .89rem; font-weight: 700; color: var(--sy-g600);
	text-decoration: none;
}
.sy-card__link .sy-ico { transition: transform .18s; }
.sy-card__link:hover { color: var(--sy-g700); }
.sy-card__link:hover .sy-ico { transform: translateX(4px); }

.sy-line { margin: 0 0 10px; font-weight: 600; color: var(--sy-ink); }
.sy-line a { color: var(--sy-g700); text-decoration: none; }
.sy-line a:hover { text-decoration: underline; }
.sy-line small { display: block; font-weight: 500; color: var(--sy-body); font-size: .82rem; margin-top: 2px; }

/* ==========================================================================
   Split (imagen + texto)
   ========================================================================== */
.sy-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 68px); align-items: center; }
.sy-split--rev .sy-shot { order: 2; }
.sy-split--form { grid-template-columns: .85fr 1.15fr; align-items: start; }
.sy-split__body h2 { margin-bottom: .5em; }
.sy-split__body .sy-btn { margin-top: 24px; }

.sy-shot { position: relative; margin: 0; isolation: isolate; }
.sy-shot img {
	position: relative; z-index: 1;
	border-radius: var(--sy-r-lg); box-shadow: var(--sy-shadow);
	width: 100%; object-fit: cover; aspect-ratio: 4 / 3;
}
/* marco lima desplazado detras de la foto */
.sy-shot::after {
	content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: 0;
	border: 2px solid var(--sy-lime); border-radius: var(--sy-r-lg);
}
.sy-split--rev .sy-shot::after { inset: 18px 18px -18px -18px; }
.sy-shot__tag {
	position: absolute; left: 18px; bottom: 18px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px; border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(6px);
	font-size: .82rem; font-weight: 700; color: var(--sy-g800);
	box-shadow: var(--sy-shadow-sm);
}

/* ---------- checklist ---------- */
.sy-check { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 13px; }
.sy-check li {
	position: relative; padding-left: 36px;
	font-size: .99rem; font-weight: 600; color: var(--sy-ink);
}
.sy-check li::before {
	content: ""; position: absolute; left: 0; top: 1px;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--sy-brand);
	box-shadow: 0 0 0 4px rgba(80, 210, 84, .2);
}
.sy-check li::after {
	content: ""; position: absolute; left: 6px; top: 8px;
	width: 10px; height: 5px;
	border-left: 2px solid var(--sy-g900); border-bottom: 2px solid var(--sy-g900);
	transform: rotate(-45deg);
}

/* ---------- logo line ---------- */
.sy-logoline {
	display: flex; align-items: center; gap: 16px;
	margin-top: 30px; padding: 18px 22px;
	background: var(--sy-tint); border-radius: var(--sy-r);
	border-left: 4px solid var(--sy-lime);
}
.sy-logoline img { width: 56px; height: 56px; object-fit: contain; }
.sy-logoline span { font-family: var(--sy-display); font-size: 1.22rem; font-weight: 600; color: var(--sy-g800); line-height: 1.2; }

/* ==========================================================================
   Chips de navegación (página servicios)
   ========================================================================== */
.sy-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.sy-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 20px; border-radius: 999px;
	background: #fff; border: 1px solid var(--sy-line);
	font-size: .88rem; font-weight: 600; color: var(--sy-ink);
	text-decoration: none;
	transition: all .18s;
}
.sy-chip .sy-ico { color: var(--sy-g600); }
.sy-chip:hover { background: var(--sy-g600); border-color: var(--sy-g600); color: #fff; transform: translateY(-2px); }
.sy-chip:hover .sy-ico { color: #fff; }

/* ==========================================================================
   Pasos
   ========================================================================== */
.sy-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: s; }
.sy-step { position: relative; padding: 34px 24px 28px; background: var(--sy-tint); border-radius: var(--sy-r); }
.sy-step::after {
	content: ""; position: absolute; top: 50%; right: -14px; width: 12px; height: 2px;
	background: var(--sy-lime);
}
.sy-step:last-child::after { display: none; }
.sy-step__n {
	display: block; font-family: var(--sy-display); font-size: 2.6rem; line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--sy-lime);
	margin-bottom: 12px;
}
.sy-step p { font-size: .93rem; }

/* ==========================================================================
   Banda CTA
   ========================================================================== */
.sy-cta {
	position: relative; isolation: isolate; color: #fff; text-align: center;
	padding: clamp(70px, 9vw, 118px) 0;
}
.sy-cta::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background: var(--sy-bg) center / cover no-repeat;
	background-attachment: fixed;
}
.sy-cta__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 92, 50, .90), rgba(26, 116, 64, .86)); }
.sy-cta__inner { max-width: 760px; margin-inline: auto; }
.sy-cta h2 { color: #fff; }
.sy-cta p { color: #d6ecd2; font-size: 1.06rem; margin-bottom: 30px; }
.sy-cta .sy-btns { justify-content: center; }

/* ==========================================================================
   Formulario
   ========================================================================== */
.sy-form {
	background: #fff; border-radius: var(--sy-r-lg);
	padding: clamp(26px, 3vw, 38px);
	box-shadow: var(--sy-shadow);
	border: 1px solid var(--sy-line);
}
.sy-field { display: flex; flex-direction: column; margin-bottom: 18px; }
.sy-field label { font-size: .85rem; font-weight: 700; color: var(--sy-ink); margin-bottom: 7px; }
.sy-field label span { color: var(--sy-g500); }
.sy-field input, .sy-field textarea {
	font: inherit; font-size: .96rem; color: var(--sy-ink);
	padding: 13px 15px;
	border: 1.5px solid var(--sy-line); border-radius: 12px;
	background: #fbfdfa;
	transition: border-color .16s, box-shadow .16s, background .16s;
}
.sy-field textarea { resize: vertical; min-height: 118px; }
.sy-field input::placeholder, .sy-field textarea::placeholder { color: #9fb3a8; }
.sy-field input:focus, .sy-field textarea:focus {
	outline: none; background: #fff;
	border-color: var(--sy-g500);
	box-shadow: 0 0 0 4px rgba(124, 193, 66, .2);
}
.sy-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sy-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.sy-form__status { margin: 16px 0 0; font-size: .93rem; font-weight: 600; min-height: 1.3em; text-align: center; }
.sy-form__status.is-ok { color: var(--sy-g600); }
.sy-form__status.is-err { color: #c0392b; }

/* ==========================================================================
   Widget WhatsApp
   ========================================================================== */
.sy-wa { position: fixed; right: 22px; bottom: 22px; z-index: 99990; }

.sy-wa__btn {
	position: relative; z-index: 2;
	width: 62px; height: 62px; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--sy-wa); color: #fff; cursor: pointer;
	display: grid; place-items: center;
	box-shadow: 0 10px 28px -6px rgba(37, 211, 102, .6);
	transition: transform .2s cubic-bezier(.2,.8,.3,1), background .2s;
}
.sy-wa__btn:hover { transform: scale(1.07); }
.sy-wa__icon, .sy-wa__x { grid-area: 1 / 1; transition: opacity .2s, transform .25s; }
.sy-wa__icon { width: 33px; height: 33px; }
.sy-wa__x { font-size: 30px; line-height: 1; opacity: 0; transform: rotate(-90deg); font-weight: 300; }
.sy-wa[data-open="true"] .sy-wa__btn { background: var(--sy-g700); }
.sy-wa[data-open="true"] .sy-wa__icon { opacity: 0; transform: rotate(90deg) scale(.6); }
.sy-wa[data-open="true"] .sy-wa__x { opacity: 1; transform: rotate(0); }

/* pulso */
.sy-wa__ping {
	position: absolute; right: 0; bottom: 0;
	width: 62px; height: 62px; border-radius: 50%;
	background: var(--sy-wa); opacity: .45; z-index: 1;
	animation: sy-ping 2.6s cubic-bezier(0, 0, .2, 1) infinite;
	pointer-events: none;
}
@keyframes sy-ping { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(1.85); opacity: 0; } }
.sy-wa[data-open="true"] .sy-wa__ping { display: none; }

.sy-wa__panel {
	position: absolute; right: 0; bottom: 78px;
	width: 310px; max-width: calc(100vw - 44px);
	background: #fff; border-radius: 18px;
	box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .35);
	overflow: hidden;
	opacity: 0; visibility: hidden;
	transform: translateY(14px) scale(.96); transform-origin: bottom right;
	transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1), visibility .22s;
}
.sy-wa[data-open="true"] .sy-wa__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.sy-wa__head {
	display: flex; align-items: center; gap: 11px;
	padding: 15px 16px;
	background: var(--sy-g700); color: #fff;
}
.sy-wa__avatar { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.sy-wa__avatar img { width: 34px; height: 34px; object-fit: contain; }
.sy-wa__headtext { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sy-wa__headtext strong { font-size: .95rem; }
.sy-wa__headtext small { font-size: .74rem; opacity: .85; }
.sy-wa__close {
	margin-left: auto; background: none; border: 0; color: #fff;
	font-size: 24px; line-height: 1; cursor: pointer; opacity: .8; padding: 0 2px;
}
.sy-wa__close:hover { opacity: 1; }

.sy-wa__body { padding: 14px 12px 12px; background: #f4f6f2; }
.sy-wa__bubble {
	background: #fff; border-radius: 4px 14px 14px 14px;
	padding: 11px 14px; margin: 0 0 12px;
	font-size: .88rem; color: #3a4a42;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.sy-wa__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sy-wa__list a {
	display: flex; align-items: center; gap: 11px;
	padding: 11px 12px; border-radius: 12px;
	background: #fff; text-decoration: none; color: var(--sy-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
	transition: background .16s, transform .16s;
}
.sy-wa__list a:hover { background: #eaf7ee; transform: translateX(3px); }
.sy-wa__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sy-wa); flex: none; box-shadow: 0 0 0 3px rgba(37, 211, 102, .2); }
.sy-wa__meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sy-wa__name { font-size: .91rem; font-weight: 700; }
.sy-wa__role { font-size: .77rem; color: var(--sy-body); }
.sy-wa__go { margin-left: auto; color: var(--sy-g600); display: grid; place-items: center; }

/* ==========================================================================
   Galería
   ========================================================================== */
.sy-gal {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.sy-gal__item {
	position: relative; display: block; padding: 0; border: 0; cursor: pointer;
	border-radius: var(--sy-r); overflow: hidden;
	background: var(--sy-line);
	aspect-ratio: 4 / 3;
	box-shadow: var(--sy-shadow-sm);
	transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.sy-gal__item img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.sy-gal__item::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 45%, rgba(15, 74, 38, .55));
	opacity: 0; transition: opacity .25s;
}
.sy-gal__item:hover { transform: translateY(-5px); box-shadow: var(--sy-shadow); }
.sy-gal__item:hover img { transform: scale(1.07); }
.sy-gal__item:hover::after { opacity: 1; }
.sy-gal__zoom {
	position: absolute; right: 12px; bottom: 12px; z-index: 2;
	display: grid; place-items: center; width: 38px; height: 38px;
	border-radius: 50%; background: var(--sy-brand); color: var(--sy-g900);
	opacity: 0; transform: translateY(8px);
	transition: opacity .25s, transform .25s;
}
.sy-gal__item:hover .sy-gal__zoom,
.sy-gal__item:focus-visible .sy-gal__zoom { opacity: 1; transform: none; }

/* ---------- visor a pantalla completa ---------- */
.sy-lb {
	position: fixed; inset: 0; z-index: 99995;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 4vh 4vw;
	background: rgba(8, 40, 21, .93);
	backdrop-filter: blur(6px);
	opacity: 0; transition: opacity .25s;
}
.sy-lb[hidden] { display: none; }
.sy-lb.is-open { opacity: 1; }
.sy-lb__fig { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.sy-lb__fig img {
	max-width: 100%; max-height: 78vh;
	border-radius: var(--sy-r); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
}
.sy-lb__fig figcaption {
	margin-top: 16px; color: #d9f0d6; font-size: .93rem; font-family: var(--sy-text);
}
.sy-lb__close, .sy-lb__nav {
	border: 0; cursor: pointer; color: var(--sy-g900);
	background: var(--sy-brand);
	display: grid; place-items: center; flex: none;
	transition: background .18s, transform .18s;
}
.sy-lb__close {
	position: absolute; top: 18px; right: 18px;
	width: 46px; height: 46px; border-radius: 50%; font-size: 30px; line-height: 1;
}
.sy-lb__nav { width: 52px; height: 52px; border-radius: 50%; font-size: 32px; line-height: 1; }
.sy-lb__close:hover, .sy-lb__nav:hover { background: #6ee070; transform: scale(1.08); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Por defecto TODO es visible. La animacion solo se activa si el JS confirma
   que IntersectionObserver funciona (clase .sy-anim en <html>), de modo que
   el contenido nunca puede quedar invisible por un fallo de JS. */
.sy-reveal { opacity: 1; transform: none; }

html.sy-anim .sy-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s cubic-bezier(.2,.8,.3,1) var(--d, 0ms), transform .6s cubic-bezier(.2,.8,.3,1) var(--d, 0ms);
}
html.sy-anim .sy-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
	.sy-header__phone { display: none; }
	.sy-foot__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
	.sy-foot__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
	.sy-cards, .sy-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.sy-steps { grid-template-columns: repeat(2, 1fr); }
	.sy-gal { grid-template-columns: repeat(2, 1fr); }
	.sy-step:nth-child(2)::after { display: none; }
}
/* menú móvil */
@media (max-width: 940px) {
	.sy-nav { display: none; }
	.sy-burger { display: flex; }
	.sy-header__actions { margin-left: auto; }
	.sy-header__inner { gap: 14px; }
}
@media (max-width: 900px) {
	.sy-split, .sy-split--form { grid-template-columns: 1fr; }
	.sy-split--rev .sy-shot { order: 0; }
	.sy-shot::after { display: none; }
	.sy-cut__glow { stroke-width: 8; }
	.sy-cta::before { background-attachment: scroll; }
}
@media (max-width: 620px) {
	.sy-cards, .sy-cards--4, .sy-steps { grid-template-columns: 1fr; }
	.sy-gal { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.sy-lb { padding: 3vh 3vw; }
	.sy-lb__nav { width: 42px; height: 42px; font-size: 26px; }
	.sy-step::after { display: none; }
	.sy-field-row { grid-template-columns: 1fr; }
	.sy-btns { flex-direction: column; align-items: stretch; }
	.sy-btns .sy-btn { width: 100%; }
	.sy-hero__inner { padding-bottom: 96px; }
	.sy-cut__line { stroke-width: 2; }
	.sy-wa { right: 16px; bottom: 16px; }

	.sy-header__inner { height: 90px; }
	.sy-header.is-stuck .sy-header__inner { height: 78px; }
	.sy-drawer { inset: 90px 0 0; }
	/* el recorte del emblema depende de width:147% + top:-10%, no fijar aqui la
	   medida de la imagen: basta con cambiar el tamano del disco */
	.sy-brand__badge { width: 64px; height: 64px; }
	.sy-header.is-stuck .sy-brand__badge { width: 56px; height: 56px; }
	.sy-brand--foot .sy-brand__badge { width: 78px; height: 78px; }
	.sy-brand__text strong { font-size: 1.48rem; }
	.sy-brand--foot .sy-brand__text strong { font-size: 1.55rem; }
	.sy-brand__text small { display: none; }
	.sy-header__actions .sy-btn { display: none; }
	.sy-foot__grid { grid-template-columns: 1fr; }
	.sy-foot__bar { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.sy *, .sy-wa * { transition: none !important; animation: none !important; }
	html.sy-anim .sy-reveal { opacity: 1 !important; transform: none !important; }
	.sy-cta::before { background-attachment: scroll; }
}