/* ==========================================================================
   Websy — Servicios Destacados (frontend)

   Tipografía: se toma de los estilos globales del sitio.
   - Títulos, subtítulos, etiquetas y botones -> fuente de encabezados del tema
   - Descripción y checks                      -> fuente de textos del tema
   Se leen las variables de Neve y las de los estilos globales de WordPress,
   con "inherit" como último respaldo.
   ========================================================================== */

.wsy-servicios,
.wsy-servicios * {
	box-sizing: border-box;
}

.wsy-servicios {
	--wsy-bg: #0d0d0d;
	--wsy-panel: #161616;
	--wsy-acento: #f2691b;
	--wsy-titulo: #ffffff;
	--wsy-texto: #b6b6b6;
	--wsy-radio: 30px;  /* fallback hero; Elementor lo pisa con !important */
	--wsy-radio-card: 20px;  /* fallback; Elementor usa !important en el control */
	--wsy-cols: 3;

	/* Variables adicionales usadas por el widget de Elementor (con respaldo
	   hacia las variables clásicas, para no afectar al shortcode antiguo). */
	--wsy-hero-bg: var(--wsy-panel);
	--wsy-card-bg: var(--wsy-panel);
	--wsy-card-bg-hover: var(--wsy-panel);
	--wsy-card-border: var(--wsy-acento);
	--wsy-card-border-hover: var(--wsy-acento);
	--wsy-card-border-width: 1.5px;
	--wsy-card-shadow: 0 0 22px -10px var(--wsy-card-border);
	--wsy-card-shadow-hover: 0 0 30px -6px var(--wsy-card-border-hover);
	--wsy-card-shadow-col: ;
	--wsy-grid-gap: 14px;
	--wsy-card-titulo-color: var(--wsy-titulo);
	--wsy-card-desc-color: var(--wsy-texto);
	--wsy-overlay-color: #0a0a0a;
	--wsy-overlay-opacity: 92;
	--wsy-card-overlay-opacity: 90;

	/* Tamaños (configurables desde Servicios → Ajustes de la sección) */
	--wsy-fs-titulo: 60px;
	--wsy-fs-sub: 40px;
	--wsy-fs-texto: 16px;
	--wsy-fs-etiqueta: 20px;

	/* Fuentes globales del sitio.
	   --wsy-ff-titulo: títulos, subtítulos, etiquetas y botones (estilo global).
	   --wsy-ff-texto:  descripción y checks (se puede fijar desde Ajustes). */
	--wsy-ff-titulo: var(--headingsfontfamily, var(--wp--preset--font-family--heading, inherit));
	--wsy-ff-texto: var(--bodyfontfamily, var(--wp--preset--font-family--body, inherit));

	background: var(--wsy-bg);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-family: inherit;
}

.wsy-servicios .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Banner grande
   -------------------------------------------------------------------------- */
.wsy-heros { position: relative; }

.wsy-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--wsy-radio);
	background: var(--wsy-hero-bg);
	border: 0 solid transparent;
	min-height: 540px;
	display: flex;
	align-items: center;      /* vertical: centro por defecto */
	justify-content: flex-start; /* horizontal: izquierda por defecto */
}

.wsy-hero[hidden] { display: none; }

.wsy-hero__media {
	position: absolute;
	inset: 0 0 0 30%;
	z-index: 1;
	overflow: hidden;
}

.wsy-servicios .wsy-hero__media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	object-fit: cover;
	object-position: center center;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	transform: scale(1);
	transition: transform .6s ease;
}

/* Efecto grow en hover del banner grande */
.wsy-servicios .wsy-hero:hover .wsy-hero__media img {
	transform: scale(var(--wsy-hero-grow, 1));
}

.wsy-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg,
			color-mix(in srgb, var(--wsy-overlay-color) calc(var(--wsy-overlay-opacity) * 1%), transparent) 0%,
			color-mix(in srgb, var(--wsy-overlay-color) calc(var(--wsy-overlay-opacity) * 0.85%), transparent) 18%,
			color-mix(in srgb, var(--wsy-overlay-color) calc(var(--wsy-overlay-opacity) * 0.4%), transparent) 48%,
			color-mix(in srgb, var(--wsy-overlay-color) calc(var(--wsy-overlay-opacity) * 0.05%), transparent) 78%,
			transparent 100%),
		linear-gradient(0deg,
			color-mix(in srgb, var(--wsy-overlay-color) calc(var(--wsy-overlay-opacity) * 0.32%), transparent) 0%,
			transparent 45%);
}

.wsy-hero__body {
	position: relative;
	z-index: 2;
	padding: 52px 56px 50px;
	max-width: min(860px, 66%);
}

/* Etiqueta superior */
.wsy-eyebrow {
	margin: 0 0 16px;
	font-family: var(--wsy-ff-titulo);
	color: var(--wsy-eyebrow-color, var(--wsy-acento));
	font-size: clamp(13px, 1.5vw, var(--wsy-fs-etiqueta));
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* Título */
.wsy-servicios .wsy-hero__titulo {
	margin: 0 0 10px;
	font-family: var(--wsy-ff-titulo);
	color: var(--wsy-hero-titulo-color, var(--wsy-titulo));
	font-size: clamp(30px, 4.4vw, var(--wsy-fs-titulo));
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: .005em;
	text-transform: uppercase;
}

/* Subtítulo */
.wsy-hero__sub {
	margin: 0 0 24px;
	font-family: var(--wsy-ff-titulo);
	color: var(--wsy-hero-sub-color, var(--wsy-titulo));
	font-size: clamp(19px, 2.9vw, var(--wsy-fs-sub));
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: .02em;
	text-transform: uppercase;
	opacity: .92;
}

/* Descripción (fuente de textos del sitio) */
.wsy-hero__desc {
	margin: 0 0 32px;
	font-family: var(--wsy-ff-texto);
	color: var(--wsy-hero-desc-color, var(--wsy-texto));
	font-size: clamp(14px, 1.3vw, var(--wsy-fs-texto));
	font-weight: 400;
	line-height: 1.65;
	max-width: 62ch;
}

/* Listas de checks en 2 columnas */
.wsy-listas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 40px;
	margin-bottom: 34px;
}

.wsy-servicios .wsy-lista__tit {
	margin: 0 0 16px;
	font-family: var(--wsy-ff-titulo);
	color: var(--wsy-coltit-color, var(--wsy-acento));
	font-size: clamp(13px, 1.5vw, var(--wsy-fs-etiqueta));
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	line-height: 1.2;
}

.wsy-lista ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

/* Textos de los checks (fuente de textos del sitio) */
.wsy-lista li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-family: var(--wsy-ff-texto);
	color: var(--wsy-check-texto-color, var(--wsy-texto));
	font-size: clamp(13px, 1.3vw, var(--wsy-fs-texto));
	font-weight: 400;
	line-height: 1.45;
}

.wsy-lista li::before,
.wsy-lista li::marker { content: none; }

.wsy-check {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 1.15em;
	margin-top: .16em;
	color: var(--wsy-acento);
}

/* Botones */
.wsy-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.wsy-servicios .wsy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	min-width: 270px;
	padding: 16px 24px;
	font-family: var(--wsy-ff-titulo);
	font-size: clamp(13px, 1.5vw, var(--wsy-fs-etiqueta));
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.1;
	cursor: pointer;
	border: 0 solid transparent;
	border-radius: 4px;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

/* Valores por defecto de cada botón (el widget de Elementor los sobrescribe). */
.wsy-servicios .wsy-btn--1 {
	background-color: var(--wsy-acento);
	color: #ffffff;
	--wsy-b-hbg: #ffffff;
	--wsy-b-hcol: #0d0d0d;
}
.wsy-servicios .wsy-btn--2 {
	background-color: transparent;
	color: #ffffff;
	border-width: 1px;
	border-color: #ffffff;
	--wsy-b-hbg: #ffffff;
	--wsy-b-hcol: #0d0d0d;
}

.wsy-servicios .wsy-btn svg {
	width: 1em;
	height: 1em;
	flex: 0 0 1em;
	transition: transform .25s ease;
}

.wsy-servicios .wsy-btn:hover,
.wsy-servicios .wsy-btn:focus-visible {
	background-color: var(--wsy-b-hbg, #fff);
	color: var(--wsy-b-hcol, #0d0d0d);
	border-color: var(--wsy-b-hbg, #fff);
}

.wsy-servicios .wsy-btn:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Banners pequeños
   -------------------------------------------------------------------------- */
.wsy-grid {
	display: grid;
	grid-template-columns: repeat(var(--wsy-cols), minmax(0, 1fr));
	gap: var(--wsy-grid-gap);
}

.wsy-servicios .wsy-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;              /* recorta hijos al border-radius */
	border: var(--wsy-card-border-width) solid var(--wsy-card-border);
	border-radius: var(--wsy-radio-card);
	background: var(--wsy-card-bg);
	text-align: left;
	cursor: pointer;
	appearance: none;
	transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}

/* Glow / sombra en pseudo-elemento para que no quede recortado por overflow:hidden */
.wsy-servicios .wsy-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: var(--wsy-card-shadow);
	transition: box-shadow .3s ease;
	pointer-events: none;
	z-index: -1;
}
.wsy-servicios .wsy-card:hover::before,
.wsy-servicios .wsy-card:focus-visible::before {
	box-shadow: var(--wsy-card-shadow-hover);
}

.wsy-card__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0;  /* padre (overflow:hidden) recorta el radio superior */
}

/* --------------------------------------------------------------------------
   Diseño de la tarjeta: vertical (por defecto), invertido u horizontal.
   El widget agrega una de estas clases (wsy-card--col / col-inv / row / row-inv)
   al bloque completo del widget en Elementor.
   -------------------------------------------------------------------------- */
.wsy-card--col-inv .wsy-servicios .wsy-card {
	flex-direction: column-reverse;
}
.wsy-card--col-inv .wsy-servicios .wsy-card__media {
	border-radius: 0 0 calc(var(--wsy-radio-card) - var(--wsy-card-border-width)) calc(var(--wsy-radio-card) - var(--wsy-card-border-width));
}

.wsy-card--row .wsy-servicios .wsy-card,
.wsy-card--row-inv .wsy-servicios .wsy-card {
	flex-direction: row;
	align-items: stretch;
}
.wsy-card--row-inv .wsy-servicios .wsy-card {
	flex-direction: row-reverse;
}
.wsy-card--row .wsy-servicios .wsy-card__media,
.wsy-card--row-inv .wsy-servicios .wsy-card__media {
	width: 42%;
	flex: 0 0 42%;
	aspect-ratio: unset;
	min-height: 160px;
	align-self: stretch;
}
.wsy-card--row .wsy-servicios .wsy-card__media {
	border-radius: calc(var(--wsy-radio-card) - var(--wsy-card-border-width)) 0 0 calc(var(--wsy-radio-card) - var(--wsy-card-border-width));
}
.wsy-card--row-inv .wsy-servicios .wsy-card__media {
	border-radius: 0 calc(var(--wsy-radio-card) - var(--wsy-card-border-width)) calc(var(--wsy-radio-card) - var(--wsy-card-border-width)) 0;
}
.wsy-card--row .wsy-servicios .wsy-card__body,
.wsy-card--row-inv .wsy-servicios .wsy-card__body {
	min-width: 0;
}
.wsy-card--row .wsy-servicios .wsy-card__icono,
.wsy-card--row-inv .wsy-servicios .wsy-card__icono,
.wsy-card--col-inv .wsy-servicios .wsy-card__icono {
	margin: 0 0 8px 0;
}

/* Difuminado de la imagen hacia el contenido, solo en diseños horizontales
   (usa el mismo color de fondo de la tarjeta para que se sienta continuo,
   en vez de un borde recto y rígido entre imagen y texto). */
.wsy-card--row .wsy-servicios .wsy-card__media::after,
.wsy-card--row-inv .wsy-servicios .wsy-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
}
.wsy-card--row .wsy-servicios .wsy-card,
.wsy-card--row-inv .wsy-servicios .wsy-card {
	--wsy-card-media-overlay: var(--wsy-card-bg);
}
.wsy-card--row .wsy-servicios .wsy-card:hover,
.wsy-card--row-inv .wsy-servicios .wsy-card:hover {
	--wsy-card-media-overlay: var(--wsy-card-bg-hover);
}
.wsy-card--row .wsy-servicios .wsy-card__media::after {
	background: linear-gradient(to left,
		var(--wsy-card-media-overlay) 0%,
		color-mix(in srgb, var(--wsy-card-media-overlay) calc(var(--wsy-card-overlay-opacity) * 0.9%), transparent) 14%,
		color-mix(in srgb, var(--wsy-card-media-overlay) calc(var(--wsy-card-overlay-opacity) * 0.55%), transparent) 32%,
		color-mix(in srgb, var(--wsy-card-media-overlay) calc(var(--wsy-card-overlay-opacity) * 0.18%), transparent) 55%,
		transparent 82%);
}
.wsy-card--row-inv .wsy-servicios .wsy-card__media::after {
	background: linear-gradient(to right,
		var(--wsy-card-media-overlay) 0%,
		color-mix(in srgb, var(--wsy-card-media-overlay) calc(var(--wsy-card-overlay-opacity) * 0.9%), transparent) 14%,
		color-mix(in srgb, var(--wsy-card-media-overlay) calc(var(--wsy-card-overlay-opacity) * 0.55%), transparent) 32%,
		color-mix(in srgb, var(--wsy-card-media-overlay) calc(var(--wsy-card-overlay-opacity) * 0.18%), transparent) 55%,
		transparent 82%);
}

.wsy-servicios .wsy-card__media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	object-fit: cover;
	object-position: center center;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	transition: transform .5s ease;
}

.wsy-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 42%);
}

/* Insignia circular: superpuesta entre la imagen y el panel de texto */
.wsy-card__icono {
	position: relative;
	z-index: 5;
	width: var(--wsy-icon-size, 48px);
	height: var(--wsy-icon-size, 48px);
	margin: calc(var(--wsy-icon-size, 48px) / -2) 0 0 18px;
	border-radius: 50%;
	background: var(--wsy-icon-bg, var(--wsy-panel));
	border: var(--wsy-icon-border-width, 1.5px) solid var(--wsy-icon-border-color, var(--wsy-acento));
	box-shadow: 0 0 12px -4px var(--wsy-icon-border-color, var(--wsy-acento));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex: 0 0 auto;
}

.wsy-servicios .wsy-card__icono img {
	width: 60%;
	height: 60%;
	object-fit: contain;
	display: block;
}

.wsy-card__body {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	padding: 12px 18px 18px;
}

.wsy-card__titulo {
	font-family: var(--wsy-ff-titulo);
	color: var(--wsy-card-titulo-color);
	font-size: clamp(13px, 1.05vw, calc(var(--wsy-fs-titulo) * .27));
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.3;
	text-transform: uppercase;
}

.wsy-card__desc {
	font-family: var(--wsy-ff-texto);
	color: var(--wsy-card-desc-color);
	font-size: clamp(11px, .95vw, calc(var(--wsy-fs-texto) * .85));
	font-weight: 400;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wsy-card__flecha {
	margin-top: auto;
	align-self: flex-end;
	padding-top: 6px;
	color: var(--wsy-flecha-color, var(--wsy-acento));
	opacity: .9;
	transition: transform .25s ease, opacity .25s ease;
}

.wsy-card__flecha svg { width: 18px; height: 18px; display: block; }

.wsy-servicios .wsy-card:hover,
.wsy-servicios .wsy-card:focus-visible {
	transform: translateY(-4px);
	background: var(--wsy-card-bg-hover);
	border-color: var(--wsy-card-border-hover);
	/* radio ya lo tiene .wsy-card siempre; glow va en ::before */
}

/* overflow:hidden en .wsy-card hace el recorte, __media no necesita border-radius propio */

.wsy-servicios .wsy-card:focus-visible {
	outline: 2px solid var(--wsy-acento);
	outline-offset: 2px;
}

.wsy-card:hover .wsy-card__media img { transform: scale(1.06); }

.wsy-card:hover .wsy-card__flecha {
	opacity: 1;
	color: var(--wsy-flecha-color-hover, var(--wsy-flecha-color, var(--wsy-acento)));
	transform: translateX(4px);
}

.wsy-card.is-oculta { display: none; }

/* Banner de "próximos servicios": ocupa el hueco vacío de la última fila */
.wsy-proximo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
	height: 100%;
	min-height: 100%;
	padding: 26px;
	background: transparent;
	border-radius: var(--wsy-radio-card);
	box-sizing: border-box;
}

.wsy-proximo__titulo {
	margin: 0;
	font-family: var(--wsy-ff-titulo);
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.wsy-proximo .wsy-btn {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Animaciones
   -------------------------------------------------------------------------- */
.wsy-anim .wsy-hero,
.wsy-anim .wsy-card,
.wsy-anim .wsy-proximo {
	opacity: 0;
	transform: translateY(26px);
}

.wsy-anim.wsy-visible .wsy-hero {
	animation: wsyIn .7s cubic-bezier(.22, .8, .3, 1) forwards;
}

.wsy-anim.wsy-visible .wsy-card,
.wsy-anim.wsy-visible .wsy-proximo {
	animation: wsyIn .55s cubic-bezier(.22, .8, .3, 1) forwards;
	animation-delay: calc(.5s + var(--i, 0) * .1s);
}

.wsy-hero.is-cambiando {
	animation: wsySwap .45s cubic-bezier(.22, .8, .3, 1) forwards;
}

@keyframes wsyIn {
	to { opacity: 1; transform: translateY(0); }
}

@keyframes wsySwap {
	from { opacity: 0; transform: translateY(14px) scale(.995); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.wsy-anim .wsy-hero,
	.wsy-anim .wsy-card,
	.wsy-anim .wsy-proximo { opacity: 1; transform: none; animation: none !important; }
	.wsy-hero.is-cambiando { animation: none; }
	.wsy-servicios * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.wsy-servicios { padding: 20px; }

	.wsy-hero { min-height: 0; }

	.wsy-hero__media { inset: 0; }

	.wsy-hero__media::after {
		background:
			linear-gradient(90deg,
				color-mix(in srgb, var(--wsy-overlay-color) calc(var(--wsy-overlay-opacity) * 1%), transparent) 0%,
				color-mix(in srgb, var(--wsy-overlay-color) calc(var(--wsy-overlay-opacity) * 0.9%), transparent) 45%,
				color-mix(in srgb, var(--wsy-overlay-color) calc(var(--wsy-overlay-opacity) * 0.62%), transparent) 100%),
			linear-gradient(0deg,
				color-mix(in srgb, var(--wsy-overlay-color) calc(var(--wsy-overlay-opacity) * 0.5%), transparent) 0%,
				transparent 60%);
	}

	.wsy-hero__body { max-width: 100%; padding: 38px 32px; }

	.wsy-servicios .wsy-hero__titulo { font-size: clamp(28px, 5vw, 44px); }
	.wsy-hero__sub { font-size: clamp(18px, 3.4vw, 28px); }

	.wsy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Celular
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
	.wsy-servicios { padding: 16px; gap: 12px; }

	.wsy-hero__body { padding: 28px 20px 30px; }

	.wsy-servicios .wsy-hero__titulo { font-size: 28px; }
	.wsy-hero__sub { font-size: 18px; margin-bottom: 18px; }
	.wsy-hero__desc { font-size: 15px; margin-bottom: 26px; }
	.wsy-eyebrow { font-size: 13px; }
	.wsy-servicios .wsy-lista__tit { font-size: 14px; }
	.wsy-lista li { font-size: 14px; }

	.wsy-listas { grid-template-columns: 1fr; gap: 20px; margin-bottom: 26px; }

	.wsy-botones { flex-direction: column; align-items: stretch; }

	.wsy-servicios .wsy-btn {
		width: 100%;
		min-width: 0;
		font-size: 14px;
		padding: 15px 20px;
	}

	.wsy-grid { grid-template-columns: 1fr; }
}