/* ==========================================================================
   GrupoDW · custom.css (tema hijo astra-child)
   Clases propias con prefijo gdw-. Los textos, colores y tipografías se
   editan en Elementor; aquí solo va lo que Elementor gratis no permite.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografía global
   Plus Jakarta Sans con letter-spacing negativo deja el espacio entre
   palabras en ~4 px y parecen pegadas («Encifras»).
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	word-spacing: 0.08em;
}

/* Texto en el color de marca dentro de un título:
   <span class="gdw-text-accent">crecer online</span> */
.gdw-text-accent {
	color: var(--e-global-color-primary, #E82828);
}

/* --------------------------------------------------------------------------
   2. Home · hero
   Segunda línea grande del H1: Diseño que <span class="gdw-hero__big">conecta</span>
   -------------------------------------------------------------------------- */
.gdw-hero__title .gdw-hero__big {
	display: block;
	font-size: 2.05em;
	line-height: 0.88;
	letter-spacing: -0.045em;
	margin-top: 0.04em;
}

/* --------------------------------------------------------------------------
   3. Marquee (.gdw-marquee)
   Estructura en Elementor:
     contenedor .gdw-marquee
       contenedor .gdw-marquee__track   (añadir --reverse para ir al revés)
         títulos .gdw-marquee__item     (una palabra cada uno)
   custom.js duplica las palabras y añade .is-animated. En el editor no se
   anima, para que se pueda editar.
   -------------------------------------------------------------------------- */
.gdw-marquee {
	overflow: hidden;
}

.gdw-marquee .gdw-marquee__track {
	flex-wrap: nowrap !important;
	width: max-content !important;
	max-width: none !important;
	align-self: flex-start;
}

.gdw-marquee .gdw-marquee__item {
	flex: none !important;
	width: auto !important;
}

.gdw-marquee .gdw-marquee__item .elementor-heading-title {
	white-space: nowrap;
}

.gdw-marquee .gdw-marquee__item .elementor-heading-title::after {
	content: "\2192"; /* → */
	color: var(--e-global-color-primary, #E82828);
	margin: 0 0.6em;
}

.gdw-marquee .gdw-marquee__track--reverse .gdw-marquee__item .elementor-heading-title::after {
	content: "\2190"; /* ← */
}

/* Variante de una sola frase: sin flechas, solo un hueco entre repeticiones */
.gdw-marquee .gdw-marquee__track--plain .gdw-marquee__item .elementor-heading-title::after {
	content: "";
	display: inline-block;
	width: 6vw;
	margin: 0;
}

/* Variante con estrella que gira entre palabras */
.gdw-marquee .gdw-marquee__track--star .gdw-marquee__item .elementor-heading-title::after {
	content: "\2733"; /* ✳ */
	display: inline-block;
	margin: 0 0.35em;
	font-size: 0.6em;
	vertical-align: middle;
	color: var(--e-global-color-primary, #E82828);
	animation: gdw-spin 8s linear infinite;
}

@keyframes gdw-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.gdw-marquee .gdw-marquee__track--star .gdw-marquee__item .elementor-heading-title::after {
		animation: none;
	}
}

/* Texto en gris dentro de un título: <span class="gdw-text-muted">…</span> */
.gdw-text-muted {
	color: #8A8A86;
}

.gdw-marquee.is-animated .gdw-marquee__track {
	animation: gdw-marquee var(--gdw-marquee-duration, 45s) linear infinite;
}

.gdw-marquee.is-animated .gdw-marquee__track--reverse {
	animation-direction: reverse;
}

@keyframes gdw-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.gdw-marquee.is-animated .gdw-marquee__track {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   3b. Título relleno con imagen (.gdw-text-fill en un widget Título)
   La imagen se pone en Elementor: widget → Avanzado → Fondo (clásico).
   Sin imagen de fondo el texto no se vería: poner siempre la imagen.
   -------------------------------------------------------------------------- */
.gdw-text-fill,
.gdw-text-fill > .elementor-widget-container {
	-webkit-background-clip: text;
	background-clip: text;
}

.gdw-text-fill .elementor-heading-title {
	color: transparent !important;
	-webkit-text-fill-color: transparent;
	/* Con interlineado < 1 las colas (g, p, y) salen de la caja y no se pintan */
	padding-bottom: 0.18em;
}

/* --------------------------------------------------------------------------
   4. FAQ (.gdw-faq sobre el widget Acordeón anidado de Elementor)
   Numeración 01, 02… automática e icono dentro de un círculo.
   -------------------------------------------------------------------------- */
.gdw-faq .e-n-accordion {
	counter-reset: gdw-faq;
	border-top: 1px solid var(--e-global-color-secondary, #1D1D1B);
}

.gdw-faq .e-n-accordion-item {
	counter-increment: gdw-faq;
}

.gdw-faq .e-n-accordion-item-title-header {
	display: flex;
	align-items: center;
	gap: 16px;
}

.gdw-faq .e-n-accordion-item-title-header::before {
	content: counter(gdw-faq, decimal-leading-zero);
	flex: 0 0 clamp(44px, 9vw, 140px);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 300;
	color: #8A8A86;
}

.gdw-faq .e-n-accordion-item[open] .e-n-accordion-item-title-header::before {
	color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-faq .e-n-accordion-item-title-icon > span {
	width: 32px;
	height: 32px;
	border: 1px solid currentColor;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: background-color 0.2s, color 0.2s;
}

.gdw-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon > span {
	background: var(--e-global-color-secondary, #1D1D1B);
	border-color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg,
.gdw-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon i {
	fill: #FFFFFF;
	color: #FFFFFF;
}

/* Respuesta alineada con la pregunta, no con el número */
.gdw-faq .e-n-accordion-item > .e-con {
	padding-left: calc(clamp(44px, 9vw, 140px) + 16px);
}

@media (max-width: 767px) {
	.gdw-faq .e-n-accordion-item > .e-con {
		padding-left: 0;
	}
}

/* --------------------------------------------------------------------------
   4b. Acordeón en tarjetas (.gdw-accordion--cards en el Acordeón anidado)
   Al abrirse, título y contenido forman una sola tarjeta: el título solo
   queda redondeado arriba y el contenido abajo (su borde y su radio se
   ponen en Elementor: Estilo → Contenido).
   -------------------------------------------------------------------------- */
.gdw-accordion--cards .e-n-accordion-item[open] > .e-n-accordion-item-title {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-bottom-color: transparent !important;
}

/* --------------------------------------------------------------------------
   4c. Carrusel (.gdw-carousel > .gdw-carousel__track > .gdw-carousel__slide)
   Lo mueve custom.js. En el editor las diapositivas se apilan para editarlas.
   -------------------------------------------------------------------------- */
.gdw-carousel {
	overflow: hidden;
}

.gdw-carousel .gdw-carousel__track {
	flex-wrap: nowrap !important;
}

.gdw-carousel.is-ready .gdw-carousel__track {
	transition: transform 0.6s ease;
	touch-action: pan-y;
}

.gdw-carousel .gdw-carousel__slide {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}

.elementor-editor-active .gdw-carousel .gdw-carousel__track {
	flex-wrap: wrap !important;
	row-gap: 30px;
}

.gdw-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
}

.gdw-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #E2E1DC;
	cursor: pointer;
	transition: width 0.3s, background-color 0.3s;
}

.gdw-carousel__dot.is-active {
	width: 28px;
	background: var(--e-global-color-primary, #E82828);
}

@media (prefers-reduced-motion: reduce) {
	.gdw-carousel.is-ready .gdw-carousel__track {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   5. Cabecera fija (Ultimate Addons: #masthead)
   Astra pone overflow-x:hidden en body, y eso impide position:sticky;
   overflow-x:clip también evita el scroll lateral, pero deja fija la cabecera.
   -------------------------------------------------------------------------- */
html body {
	overflow-x: clip;
}

#masthead {
	position: sticky !important; /* Ultimate Addons pone position:relative */
	top: 0;
	z-index: 999;
	transition: box-shadow 0.2s;
}

.admin-bar #masthead {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar #masthead {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar #masthead {
		top: 0;
	}
}

body.gdw-is-scrolled #masthead {
	box-shadow: 0 6px 24px rgba(18, 18, 18, 0.08);
}

/* Los enlaces a secciones (#servicios) no quedan tapados por la cabecera */
.elementor-element[id] {
	scroll-margin-top: 110px;
}

/* --------------------------------------------------------------------------
   6. Formularios de Contact Form 7 (.gdw-form en el widget que lo contiene)
   Plantilla del formulario: filas .gdw-form__row (2 columnas), campos
   .gdw-form__field, casilla .gdw-form__privacy y botón .gdw-form__submit.
   -------------------------------------------------------------------------- */
.gdw-form .gdw-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

@media (max-width: 767px) {
	.gdw-form .gdw-form__row {
		grid-template-columns: 1fr;
	}
}

.gdw-form .wpcf7-form p {
	margin: 0 0 18px;
}

.gdw-form .gdw-form__field label {
	display: block;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-form input[type="text"],
.gdw-form input[type="email"],
.gdw-form input[type="tel"],
.gdw-form textarea {
	width: 100%;
	margin-top: 8px;
	padding: 14px 16px;
	border: 1px solid #E2E1DC;
	border-radius: 12px;
	background: #FFFFFF;
	font-family: "DM Sans", sans-serif;
	font-size: 16px;
	color: var(--e-global-color-secondary, #1D1D1B);
	box-shadow: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.gdw-form textarea {
	min-height: 150px;
	resize: vertical;
}

.gdw-form input:focus,
.gdw-form textarea:focus {
	border-color: var(--e-global-color-secondary, #1D1D1B);
	box-shadow: 0 0 0 3px rgba(232, 40, 40, 0.18);
	outline: none;
}

.gdw-form .gdw-form__privacy {
	font-size: 14px;
	color: var(--e-global-color-text, #494945);
}

.gdw-form .gdw-form__privacy .wpcf7-list-item {
	margin: 0;
}

.gdw-form .gdw-form__privacy a {
	color: #C41E1E;
}

.gdw-form .gdw-form__submit {
	background: #C41E1E;
	color: #FFFFFF;
	border: 0;
	border-radius: 999px;
	padding: 16px 34px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
}

.gdw-form .gdw-form__submit:hover,
.gdw-form .gdw-form__submit:focus {
	background: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	color: #C41E1E;
}

.gdw-form .wpcf7 form .wpcf7-response-output {
	margin: 10px 0 0;
	padding: 12px 16px;
	border-radius: 12px;
}

/* Sello de reCAPTCHA oculto (chocaba con el botón de WhatsApp). Google lo
   permite si junto al formulario está su aviso: widget .gdw-form__recaptcha */
.grecaptcha-badge {
	visibility: hidden !important;
}

.gdw-form__recaptcha,
.gdw-form__recaptcha p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #8A8A86;
}

.gdw-form__recaptcha a {
	color: inherit;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Enlaces sin subrayado (Astra los subraya dentro del contenido)
   -------------------------------------------------------------------------- */
.gdw-blog__grid a,
.gdw-contacto__datos a {
	text-decoration: none !important; /* Astra: .entry-content a { underline } */
}

.gdw-blog__grid .eael-entry-title a:hover,
.gdw-contacto__datos a:hover {
	color: #C41E1E;
}

/* --------------------------------------------------------------------------
   7b. Animaciones de entrada de Elementor (fadeInUp en los widgets)
   Si el sistema pide reducir movimiento, todo se muestra sin animar.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
	}

	.elementor-element.animated {
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   7c. Equipo (Conócenos): fotos en formato retrato 4:5 y columna de texto
   fija al hacer scroll (altura de la cabecera + 30 px). --gdw-header-h lo
   calcula custom.js. Solo en escritorio.
   -------------------------------------------------------------------------- */
.gdw-equipo__foto img {
	width: 100%;
	height: auto !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (min-width: 1025px) {
	.gdw-equipo__intro {
		position: sticky !important;
		top: calc(var(--gdw-header-h, 85px) + 30px + var(--wp-admin--admin-bar--height, 0px));
		align-self: flex-start;
	}
}

/* --------------------------------------------------------------------------
   8. Entradas del blog: ancho completo con el padding lateral de la home
   (50 px; 15 px en móvil). El banner con la imagen destacada sale de
   functions.php (gdw_child_single_post_banner).
   -------------------------------------------------------------------------- */
body.single-post .site-content > .ast-container {
	padding-left: 50px;
	padding-right: 50px;
}

body.single-post .site-content article.post,
body.single-post .site-content .ast-article-single {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 767px) {
	body.single-post .site-content > .ast-container {
		padding-left: 15px;
		padding-right: 15px;
	}
}
/* ==========================================================================
   9. HOME 2 (.gdw-h2) · versión oscura con animaciones ligadas al scroll
   custom.js pone en cada [data-gdw-scroll] las variables:
     --p  avance de 0 a 1 mientras la sección pasa por la pantalla
     --ps seno de p (0 → 1 → 0): para desplegar y volver a contraer
   y añade .is-in a .gdw-h2-reveal y .gdw-split al entrar en pantalla.
   ========================================================================== */

/* --- Página oscura: fondo, cabecera y logo (body.gdw-theme-dark lo pone custom.js) --- */
body.gdw-theme-dark,
body.gdw-theme-dark #page,
body.gdw-theme-dark .site-content {
	background: #0B0B0A;
}

/* El desenfoque va en una capa ::before y no en la barra: un backdrop-filter en
   la barra encerraría dentro de ella el panel fijo del menú móvil */
body.gdw-theme-dark .gdw-header__bar {
	position: relative;
	isolation: isolate;
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

body.gdw-theme-dark .gdw-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(11, 11, 10, 0.78);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	pointer-events: none;
}

/* Menú móvil (panel lateral) en la página oscura */
body.gdw-theme-dark #masthead .hfe-side,
body.gdw-theme-dark #masthead .hfe-flyout-content {
	background-color: #151514 !important;
}

body.gdw-theme-dark #masthead .hfe-flyout-close,
body.gdw-theme-dark #masthead .hfe-flyout-close svg {
	color: #F4F3EF !important;
	fill: #F4F3EF !important;
}

body.gdw-theme-dark #masthead .hfe-nav-menu a.hfe-menu-item,
body.gdw-theme-dark #masthead .hfe-nav-menu a.hfe-sub-menu-item,
body.gdw-theme-dark #masthead .hfe-nav-menu .sub-arrow {
	color: #F4F3EF !important;
}

body.gdw-theme-dark #masthead .hfe-nav-menu a.hfe-menu-item:hover,
body.gdw-theme-dark #masthead .hfe-nav-menu .current-menu-item > a.hfe-menu-item,
body.gdw-theme-dark #masthead .hfe-nav-menu .current-menu-ancestor > a.hfe-menu-item,
body.gdw-theme-dark #masthead .hfe-nav-menu a.hfe-sub-menu-item-active,
body.gdw-theme-dark #masthead .hfe-nav-menu a.hfe-sub-menu-item:hover {
	color: #E82828 !important;
}

body.gdw-theme-dark #masthead .sub-menu,
body.gdw-theme-dark #masthead .hfe-dropdown,
body.gdw-theme-dark #masthead .hfe-dropdown .menu-item a {
	background-color: #151514 !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

body.gdw-theme-dark #masthead .hfe-nav-menu__toggle,
body.gdw-theme-dark #masthead .hfe-nav-menu-icon,
body.gdw-theme-dark #masthead .hfe-nav-menu-icon svg {
	color: #F4F3EF !important;
	fill: #F4F3EF !important;
}

body.gdw-theme-dark.gdw-is-scrolled #masthead {
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* --- Base --- */
.gdw-h2 {
	--h2-bg: #0B0B0A;
	--h2-surface: #151514;
	--h2-line: rgba(255, 255, 255, 0.09);
	--h2-text: #F4F3EF;
	--h2-muted: #8A8A86;
	--h2-red: #E82828;
	--h2-coral: #FF7A5C;
	--gutter: 50px;
	position: relative;
	color: var(--h2-text);
	background-color: var(--h2-bg);
	font-family: "DM Sans", sans-serif;
}

@media (max-width: 767px) {
	.gdw-h2 {
		--gutter: 15px;
	}
}

.gdw-h2 h1,
.gdw-h2 h2,
.gdw-h2 h3,
.gdw-h2 .gdw-h2-title {
	font-family: "Plus Jakarta Sans", sans-serif;
	color: var(--h2-text);
}

.gdw-h2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font: 600 13px/1.2 "DM Sans", sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--h2-coral);
}

.gdw-h2-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

.gdw-h2-grad,
.gdw-h2-grad span {
	background: linear-gradient(95deg, #E82828 0%, #FF7A5C 55%, #FFB199 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}

.gdw-h2-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 17px 30px;
	border-radius: 999px;
	font: 600 16px/1 "Plus Jakarta Sans", sans-serif;
	text-decoration: none !important;
	color: #FFFFFF !important;
	background: linear-gradient(95deg, #C41E1E, #E82828 60%, #FF5A3C);
	box-shadow: 0 10px 40px rgba(232, 40, 40, 0.35);
	transition: transform 0.25s, box-shadow 0.25s;
}

.gdw-h2-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 50px rgba(232, 40, 40, 0.5);
}

.gdw-h2-btn--ghost {
	background: transparent;
	box-shadow: none;
	border: 1px solid rgba(255, 255, 255, 0.22);
}

.gdw-h2-btn--ghost:hover {
	border-color: #E82828;
	box-shadow: none;
}

.gdw-h2-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 10px;
}

/* --- Aparición al entrar en pantalla --- */
.gdw-h2-reveal {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: calc(var(--d, 0) * 90ms);
}

.gdw-h2-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Titular palabra a palabra (.gdw-split en un widget Título) */
.gdw-split .gdw-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.gdw-split .gdw-w > span {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.gdw-split.is-in .gdw-w > span {
	transform: none;
}

/* --- 1. Hero --- */
.gdw-h2-hero {
	overflow: hidden;
}

.gdw-h2-hero > .elementor-element:not(.gdw-h2-bg) {
	position: relative;
	z-index: 1;
}

.elementor-widget-html.gdw-h2-bg {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	z-index: 0;
	pointer-events: none;
}

.gdw-h2-bg__inner {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.gdw-h2-grid {
	position: absolute;
	inset: -10% 0;
	background-image:
		linear-gradient(var(--h2-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--h2-line) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 72%);
	mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 72%);
	transform: translate3d(0, calc(var(--p, 0) * 120px), 0);
}

.gdw-h2-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	transform: translate3d(0, calc(var(--p, 0) * var(--speed, 200px)), 0) scale(calc(1 + var(--p, 0) * 0.3));
	animation: gdw-h2-breathe 9s ease-in-out infinite alternate;
}

.gdw-h2-orb--1 {
	width: 620px;
	height: 620px;
	top: -180px;
	right: -140px;
	background: radial-gradient(circle, rgba(232, 40, 40, 0.75), transparent 68%);
	--speed: 320px;
}

.gdw-h2-orb--2 {
	width: 460px;
	height: 460px;
	bottom: -160px;
	left: -120px;
	background: radial-gradient(circle, rgba(255, 122, 92, 0.45), transparent 70%);
	--speed: -220px;
	animation-delay: -4s;
}

.gdw-h2-orb--3 {
	width: 260px;
	height: 260px;
	top: 38%;
	left: 42%;
	background: radial-gradient(circle, rgba(196, 30, 30, 0.55), transparent 70%);
	--speed: 480px;
	animation-delay: -2s;
}

@keyframes gdw-h2-breathe {
	to { opacity: 0.55; }
}

.gdw-h2-hero__title {
	transform: translate3d(0, calc(var(--p, 0) * -90px), 0);
	opacity: calc(1 - var(--p, 0) * 1.2);
}

/* Diagrama isométrico que se despliega al bajar */
.gdw-h2-stack {
	height: 560px;
	display: grid;
	place-items: center;
	perspective: 1600px;
}

.gdw-h2-stack__scene {
	position: relative;
	width: min(360px, 70vw);
	aspect-ratio: 1;
	transform-style: preserve-3d;
	transform: rotateX(58deg) rotateZ(-42deg) translate3d(0, 0, calc(var(--p, 0) * -60px));
	animation: gdw-h2-float 6s ease-in-out infinite;
}

@keyframes gdw-h2-float {
	50% { translate: 0 -14px; }
}

.gdw-h2-stack__layer,
.gdw-h2-iso__layer {
	position: absolute;
	inset: 0;
	border-radius: 30px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
	transform: translateZ(calc(var(--i) * (26px + var(--p, 0) * 110px)));
}

.gdw-h2-stack__layer::before,
.gdw-h2-iso__layer::before {
	content: "";
	position: absolute;
	inset: 18px;
	border-radius: 18px;
	border: 1px dashed rgba(255, 255, 255, 0.12);
}

.gdw-h2-stack__layer:last-child {
	background: linear-gradient(135deg, #E82828, #7E1010);
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow: 0 40px 90px rgba(232, 40, 40, 0.45);
}

.gdw-h2-stack__layer span,
.gdw-h2-iso__layer span {
	position: absolute;
	left: 26px;
	bottom: 24px;
	font: 700 15px/1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

/* Figuras vectoriales que cambian de forma sin parar (morph SVG, custom.js)
   .gdw-h2-morph > svg con dos trazados, enlaces entre nodos y nodos. */
.gdw-h2-morph {
	width: min(540px, 88vw);
	aspect-ratio: 1;
	margin: 0 auto;
	transform: translate3d(0, calc(var(--p, 0) * -70px), 0) rotate(calc(var(--p, 0) * 30deg)) scale(calc(1 + var(--p, 0) * 0.15));
}

.gdw-h2-morph svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.gdw-h2-morph__rot {
	transform-origin: 0 0;
	animation: gdw-spin 70s linear infinite;
}

.gdw-h2-morph__outer {
	fill: url(#gdw-morph-fill);
	stroke: url(#gdw-morph-stroke);
	stroke-width: 2.2;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 22px rgba(232, 40, 40, 0.55));
}

.gdw-h2-morph__inner {
	fill: none;
	stroke: rgba(255, 255, 255, 0.35);
	stroke-width: 1.2;
	stroke-dasharray: 4 6;
}

.gdw-h2-morph__links line {
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 1;
}

.gdw-h2-morph__nodes circle {
	fill: #0B0B0A;
	stroke: #FF7A5C;
	stroke-width: 1.8;
}

.gdw-h2-morph__nodes circle.is-inner {
	fill: #E82828;
	stroke: none;
}

@media (prefers-reduced-motion: reduce) {
	.gdw-h2-morph__rot {
		animation: none;
	}
}

/* --- 3. Líneas de texto gigantes que avanzan y retroceden con el scroll --- */
.gdw-h2-lines {
	padding: 120px 0;
	overflow: hidden;
}

.gdw-h2-lines__row {
	display: flex;
	align-items: center;
	white-space: nowrap;
	width: max-content;
	margin-left: -25vw;
	font: 700 clamp(56px, 9vw, 170px)/1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -0.045em;
	transform: translate3d(calc((var(--p, 0) - 0.5) * var(--dir, 1) * 55vw), 0, 0);
	will-change: transform;
}

.gdw-h2-lines__row + .gdw-h2-lines__row {
	margin-top: 0.08em;
}

.gdw-h2-lines__row .is-outline {
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(244, 243, 239, 0.45);
}

.gdw-h2-lines__row i {
	display: inline-block;
	margin: 0 0.35em;
	font-size: 0.45em;
	font-style: normal;
	color: var(--h2-red);
	transform: rotate(calc(var(--p, 0) * 540deg));
}

/* --- 4. Sección fija: cinco capas que se despliegan y se contraen --- */
.gdw-h2-pin {
	position: relative;
	height: 420vh;
}

.gdw-h2-pin__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 60px;
	padding: 0 var(--gutter);
	overflow: hidden;
}

.gdw-h2-pin__title {
	margin: 0 0 34px;
	font-size: clamp(34px, 4vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-weight: 700;
}

.gdw-h2-pin__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: gdw-step;
}

.gdw-h2-pin__steps li {
	counter-increment: gdw-step;
	position: relative;
	padding: 16px 0 16px 58px;
	border-top: 1px solid var(--h2-line);
	opacity: 0.35;
	transition: opacity 0.4s;
}

.gdw-h2-pin__steps li::before {
	content: counter(gdw-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 17px;
	font: 600 15px "Plus Jakarta Sans", sans-serif;
	color: var(--h2-muted);
}

.gdw-h2-pin__steps li strong {
	display: block;
	font: 600 21px/1.3 "Plus Jakarta Sans", sans-serif;
	color: var(--h2-text);
}

.gdw-h2-pin__steps li span {
	display: block;
	max-height: 0;
	overflow: hidden;
	color: var(--h2-muted);
	transition: max-height 0.5s ease, margin 0.5s ease;
}

.gdw-h2-pin__steps li.is-active {
	opacity: 1;
}

.gdw-h2-pin__steps li.is-active::before {
	color: var(--h2-red);
}

.gdw-h2-pin__steps li.is-active span {
	max-height: 120px;
	margin-top: 8px;
}

.gdw-h2-pin__bar {
	height: 2px;
	margin-top: 26px;
	background: var(--h2-line);
}

.gdw-h2-pin__bar span {
	display: block;
	height: 100%;
	width: calc(var(--p, 0) * 100%);
	background: linear-gradient(90deg, #E82828, #FF7A5C);
}

.gdw-h2-iso {
	position: relative;
	width: min(380px, 70vw);
	aspect-ratio: 1;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(58deg) rotateZ(-42deg);
}

.gdw-h2-pin__visual {
	perspective: 1600px;
	display: grid;
	place-items: center;
}

.gdw-h2-iso__layer {
	transform: translateZ(calc(var(--i) * (16px + var(--ps, 0) * var(--spread, 120px))));
	transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.gdw-h2-iso__layer.is-active {
	background: linear-gradient(135deg, #E82828, #7E1010);
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0 40px 100px rgba(232, 40, 40, 0.5);
}

@media (max-width: 1024px) {
	.gdw-h2-pin__sticky {
		grid-template-columns: 1fr;
		gap: 10px;
		align-content: center;
		padding-top: calc(var(--gdw-header-h, 85px) + 20px);
		--spread: 55px;
		/* La columna no crece con el navegador isométrico (560 px sin escalar) */
		grid-template-columns: minmax(0, 1fr);
	}

	.gdw-h2-pin__visual {
		min-width: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.gdw-h2-pin__visual {
		order: -1;
	}

	.gdw-h2-iso {
		width: min(240px, 60vw);
	}

	.gdw-h2-pin__steps li {
		padding: 10px 0 10px 44px;
	}

	.gdw-h2-pin__steps li strong {
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.gdw-h2-pin__sticky {
		align-content: start;
		--spread: 24px;
	}

	.gdw-h2-pin__visual {
		height: 270px;
		padding-top: 84px;
	}

	.gdw-h2-pin__steps li {
		padding: 7px 0 7px 40px;
	}

	.gdw-h2-pin__steps li::before {
		top: 9px;
	}

	.gdw-h2-pin__steps li strong {
		font-size: 16px;
	}

	.gdw-h2-iso {
		width: 165px;
	}

	.gdw-h2-pin__title {
		font-size: 28px;
		margin-bottom: 16px;
	}

	.gdw-h2-pin__text .gdw-h2-eyebrow {
		margin-bottom: 10px;
	}
}

/* Navegador isométrico con el esquema de una web (sección «cinco capas»)
   La página de dentro sube con --p; los bloques del paso activo se iluminan
   ([data-step] con .is-active); las dos copias de debajo se separan con --ps. */
.gdw-h2-browser {
	--bw: 560px;
	--bh: 410px;
	--s: 1;
	position: relative;
	width: var(--bw);
	height: var(--bh);
	flex: none;
	transform-style: preserve-3d;
	transform: rotateX(55deg) rotateZ(-38deg) scale(var(--s));
	animation: gdw-h2-float 7s ease-in-out infinite;
}

.gdw-h2-browser__ghost,
.gdw-h2-browser__window {
	position: absolute;
	inset: 0;
	border-radius: 22px;
}

.gdw-h2-browser__ghost {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.025);
	transform: translateZ(calc(var(--g) * (-22px - var(--ps, 0) * 80px)));
	opacity: calc(0.7 - var(--g) * 0.22);
}

.gdw-h2-browser__ghost::after {
	content: "";
	position: absolute;
	inset: 50px 22px 22px;
	border-radius: 14px;
	border: 1px dashed rgba(255, 255, 255, 0.12);
}

.gdw-h2-browser__window {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #151514;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 50px 100px rgba(0, 0, 0, 0.6), 0 0 80px rgba(232, 40, 40, calc(0.08 + var(--ps, 0) * 0.2));
	transform: translateZ(calc(var(--ps, 0) * 30px));
}

.gdw-h2-browser__bar {
	flex: none;
	display: flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px;
	background: #1C1C1B;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gdw-h2-browser__bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #3A3A38;
}

.gdw-h2-browser__bar i:first-child {
	background: #E82828;
}

.gdw-h2-browser__bar i:nth-child(2) {
	background: #FF7A5C;
}

.gdw-h2-browser__url {
	flex: 1;
	height: 20px;
	margin-left: 10px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	font: 500 11px/20px "DM Sans", sans-serif;
	color: #8A8A86;
}

.gdw-h2-browser__viewport {
	position: relative;
	flex: 1;
	overflow: hidden;
}

.gdw-h2-browser__page {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	transform: translate3d(0, calc(var(--p, 0) * -63%), 0);
}

.gdw-h2-b-row {
	display: flex;
	gap: 12px;
}

.gdw-h2-b {
	flex: 1;
	position: relative;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: background 0.45s, border-color 0.45s, box-shadow 0.45s, transform 0.45s;
}

.gdw-h2-b.is-active {
	background: linear-gradient(135deg, #E82828, #8C1212);
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 10px 30px rgba(232, 40, 40, 0.45);
	transform: translateY(-3px);
}

.gdw-h2-b i,
.gdw-h2-b b,
.gdw-h2-b span,
.gdw-h2-b s {
	display: block;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
}

.gdw-h2-b--nav {
	flex: none;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 0 12px;
}

.gdw-h2-b--nav::before {
	content: "";
	width: 46px;
	height: 10px;
	margin-right: auto;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.3);
}

.gdw-h2-b--nav span {
	width: 26px;
	height: 6px;
}

.gdw-h2-b--hero {
	flex: none;
	height: 124px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.gdw-h2-b--hero b {
	height: 14px;
	width: 70%;
	background: rgba(255, 255, 255, 0.32);
}

.gdw-h2-b--hero b + b {
	width: 48%;
}

.gdw-h2-b--hero em {
	display: block;
	width: 74px;
	height: 22px;
	margin-top: auto;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
}

.gdw-h2-b--card {
	height: 72px;
}

.gdw-h2-b--card::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 12px;
	width: 20px;
	height: 20px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.22);
}

.gdw-h2-b--card::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 18px;
	bottom: 14px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
}

.gdw-h2-b--text {
	flex: none;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gdw-h2-b-row .gdw-h2-b--text {
	flex: 1;
}

.gdw-h2-b--text i {
	height: 6px;
}

.gdw-h2-b--text i:nth-child(2) {
	width: 86%;
}

.gdw-h2-b--text i:nth-child(3) {
	width: 62%;
}

.gdw-h2-b--img {
	height: 96px;
	background-image: radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.18) 0 10px, transparent 11px), linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.12));
}

.gdw-h2-b--chart {
	flex: none;
	height: 96px;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 14px 16px;
}

.gdw-h2-b--chart s {
	flex: 1;
	height: calc(var(--h) * 100%);
	border-radius: 6px 6px 3px 3px;
}

.gdw-h2-b--cta {
	flex: none;
	height: 54px;
}

.gdw-h2-b--cta::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 70px;
	height: 20px;
	margin-top: -10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
}

.gdw-h2-b--footer {
	flex: none;
	height: 44px;
}

/* Versión «diagrama que se abre»: la página de dentro no se mueve; la ventana
   es la capa base y los bloques con [data-layer] (--lz = altura final) se
   elevan con --ps (0 → 1 → 0) mientras la sección está fija. */
.gdw-h2-browser--layers .gdw-h2-browser__window,
.gdw-h2-browser--layers .gdw-h2-browser__viewport,
.gdw-h2-browser--layers .gdw-h2-browser__page,
.gdw-h2-browser--layers .gdw-h2-b-row {
	overflow: visible;
	transform-style: preserve-3d;
}

.gdw-h2-browser--layers .gdw-h2-browser__window {
	transform: none;
}

.gdw-h2-browser--layers .gdw-h2-browser__bar {
	border-radius: 21px 21px 0 0;
}

.gdw-h2-browser--layers .gdw-h2-browser__page {
	height: 100%;
	gap: 10px;
	transform: none;
}

/* --open: se abre en el primer 45 % de la sección y se queda abierto */
.gdw-h2-browser--layers {
	--open: min(1, calc(var(--p, 0) * 2.2));
}

.gdw-h2-browser--layers [data-layer] {
	transform: translateZ(calc(var(--open, 0) * var(--lz, 60px)));
	transition: background 0.45s, border-color 0.45s, box-shadow 0.45s;
}

.gdw-h2-browser--layers .gdw-h2-b[data-layer] {
	box-shadow: 0 calc(var(--open, 0) * 40px) calc(var(--open, 0) * 50px) rgba(0, 0, 0, 0.55);
}

.gdw-h2-browser--layers .gdw-h2-b.is-active {
	transform: translateZ(calc(var(--open, 0) * var(--lz, 60px) + 16px));
	box-shadow: 0 20px 50px rgba(232, 40, 40, 0.5);
}

.gdw-h2-browser--layers .gdw-h2-b-row[data-layer] .gdw-h2-b {
	box-shadow: 0 calc(var(--open, 0) * 40px) calc(var(--open, 0) * 50px) rgba(0, 0, 0, 0.55);
}

.gdw-h2-browser--layers .gdw-h2-b-row[data-layer] .gdw-h2-b.is-active {
	transform: translateZ(16px);
}

.gdw-h2-browser--layers .gdw-h2-b--hero {
	height: 96px;
	padding: 16px 18px;
}

.gdw-h2-browser--layers .gdw-h2-b--card {
	height: 64px;
}

.gdw-h2-browser--layers .gdw-h2-b--chart {
	height: 70px;
	padding: 12px 16px;
}

@media (max-width: 1024px) {
	.gdw-h2-browser {
		--s: 0.66;
	}
}

@media (max-width: 767px) {
	.gdw-h2-browser {
		--s: 0.46;
	}

	.gdw-h2-pin__visual {
		overflow: visible;
	}
}

/* --- 5. Cifras con texto circular que gira --- */
.gdw-h2-stats {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 70px;
	padding: 110px var(--gutter);
}

.gdw-h2-circle {
	position: relative;
	width: 220px;
	height: 220px;
}

.gdw-h2-circle svg {
	width: 100%;
	height: 100%;
	transform: rotate(calc(var(--p, 0) * 540deg));
}

.gdw-h2-circle text {
	font: 600 13.5px "Plus Jakarta Sans", sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	fill: var(--h2-text);
}

.gdw-h2-circle__core {
	position: absolute;
	inset: 50%;
	width: 78px;
	height: 78px;
	margin: -39px 0 0 -39px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-size: 34px;
	color: #FFFFFF;
	background: linear-gradient(135deg, #E82828, #7E1010);
	box-shadow: 0 0 60px rgba(232, 40, 40, 0.55);
}

.gdw-h2-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.gdw-h2-stat {
	padding: 30px 0 0;
	border-top: 1px solid var(--h2-line);
}

.gdw-h2-stat strong {
	display: block;
	font: 600 clamp(48px, 5vw, 84px)/1 "Plus Jakarta Sans", sans-serif;
	letter-spacing: -0.04em;
	color: var(--h2-text);
}

.gdw-h2-stat span {
	display: block;
	margin-top: 12px;
	color: var(--h2-muted);
}

@media (max-width: 1024px) {
	.gdw-h2-stats {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 50px;
	}

	.gdw-h2-stats__grid {
		grid-template-columns: repeat(2, 1fr);
		width: 100%;
	}
}

/* --- 6. Proceso con línea que se rellena --- */
.gdw-h2-process {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	padding: 20px var(--gutter) 110px;
}

.gdw-h2-process__line {
	position: absolute;
	top: 49px;
	left: var(--gutter);
	right: var(--gutter);
	height: 2px;
	background: var(--h2-line);
}

.gdw-h2-process__line span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #E82828, #FF7A5C);
	transform-origin: left;
	transform: scaleX(clamp(0, calc((var(--p, 0) - 0.2) * 2.4), 1));
}

.gdw-h2-process__step {
	position: relative;
	opacity: clamp(0.2, calc((var(--p, 0) - var(--t)) * 7 + 0.2), 1);
	transform: translate3d(0, calc(clamp(0, (var(--t) - var(--p, 0)) * 300, 40) * 1px), 0);
}

.gdw-h2-process__dot {
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	margin-bottom: 28px;
	border-radius: 50%;
	font: 700 18px "Plus Jakarta Sans", sans-serif;
	color: #FFFFFF;
	background: var(--h2-surface);
	border: 1px solid var(--h2-line);
	position: relative;
	z-index: 1;
}

.gdw-h2-process__step h3 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 600;
}

.gdw-h2-process__step p {
	margin: 0;
	color: var(--h2-muted);
}

@media (max-width: 1024px) {
	.gdw-h2-process {
		grid-template-columns: 1fr 1fr;
		row-gap: 50px;
	}

	.gdw-h2-process__line {
		display: none;
	}
}

@media (max-width: 767px) {
	.gdw-h2-process {
		grid-template-columns: 1fr;
	}
}

/* --- 7. Proyectos en horizontal, guiados por el scroll vertical --- */
.gdw-h2-hscroll {
	position: relative;
	height: 320vh;
}

.gdw-h2-hscroll__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	overflow: hidden;
}

.gdw-h2-hscroll__head {
	padding: 0 var(--gutter);
	max-width: 900px;
}

.gdw-h2-hscroll__head h2,
.gdw-h2-section-title {
	margin: 0;
	font-size: clamp(34px, 4vw, 64px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.gdw-h2-hscroll__track {
	display: flex;
	gap: 30px;
	width: max-content;
	padding: 0 var(--gutter);
	transform: translate3d(calc(var(--p, 0) * var(--dist, 0) * -1px), 0, 0);
	will-change: transform;
}

.gdw-h2-card {
	position: relative;
	width: clamp(280px, 34vw, 520px);
	flex: none;
	margin: 0;
	border-radius: 26px;
	overflow: hidden;
	background: var(--h2-surface);
	border: 1px solid var(--h2-line);
}

.gdw-h2-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gdw-h2-card:hover img {
	transform: scale(1.06);
}

.gdw-h2-card figcaption {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	padding: 22px 24px 24px;
}

.gdw-h2-card figcaption span {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--h2-coral);
}

.gdw-h2-card figcaption h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
}

.gdw-h2-card figcaption b {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--h2-line);
	font-weight: 400;
	transition: background 0.3s, border-color 0.3s;
}

.gdw-h2-card:hover figcaption b {
	background: var(--h2-red);
	border-color: var(--h2-red);
}

/* --- 8. Sectores con brillo que sigue al ratón --- */
.gdw-h2-sectors {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.gdw-h2-sector {
	--mx: 50%;
	--my: 50%;
	position: relative;
	padding: 36px 30px;
	border-radius: 26px;
	background: var(--h2-surface);
	border: 1px solid var(--h2-line);
	overflow: hidden;
	isolation: isolate;
}

.gdw-h2-sector::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(360px circle at var(--mx) var(--my), rgba(232, 40, 40, 0.28), transparent 60%);
	opacity: 0;
	transition: opacity 0.4s;
}

.gdw-h2-sector:hover::before {
	opacity: 1;
}

.gdw-h2-sector i {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 26px;
	border-radius: 16px;
	font-style: normal;
	font-size: 24px;
	background: rgba(232, 40, 40, 0.12);
	color: var(--h2-red);
}

.gdw-h2-sector h3 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 600;
}

.gdw-h2-sector p {
	margin: 0;
	color: var(--h2-muted);
}

@media (max-width: 1024px) {
	.gdw-h2-sectors {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.gdw-h2-sectors {
		grid-template-columns: 1fr;
	}
}

/* --- 9. Opiniones en oscuro (carrusel .gdw-carousel) --- */
.gdw-h2 .gdw-carousel__dot {
	background: rgba(255, 255, 255, 0.18);
}

/* --- 10. CTA final que crece al acercarse --- */
.gdw-h2-cta {
	position: relative;
	padding: 170px var(--gutter);
	text-align: center;
	overflow: hidden;
}

.gdw-h2-cta__glow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 900px;
	height: 900px;
	margin: -450px 0 0 -450px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 40, 40, 0.45), transparent 62%);
	filter: blur(30px);
	transform: scale(calc(0.4 + var(--p, 0) * 0.9));
	pointer-events: none;
}

.gdw-h2-cta__title {
	position: relative;
	margin: 0 0 26px;
	font-size: clamp(48px, 9vw, 150px) !important;
	line-height: 0.95;
	font-weight: 700;
	letter-spacing: -0.05em;
	transform: scale(clamp(0.7, calc(0.62 + var(--p, 0) * 0.8), 1.05));
}

.gdw-h2-cta__title span {
	display: block;
}

.gdw-h2-cta p {
	position: relative;
	max-width: 620px;
	margin: 0 auto 34px;
	font-size: 19px;
	color: #C9C8C3;
}

/* --- Sin movimiento si el sistema lo pide --- */
@media (prefers-reduced-motion: reduce) {
	.gdw-h2 *,
	.gdw-h2 *::before {
		animation: none !important;
		transition: none !important;
	}

	.gdw-h2-reveal,
	.gdw-split .gdw-w > span {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   10. Páginas legales (.gdw-legal): aviso legal, privacidad y cookies
   Los datos de cada cliente van como <strong>[MARCADOR]</strong>.
   ========================================================================== */
.gdw-legal .gdw-legal__body h2 {
	margin: 2.2em 0 0.7em;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.3px;
	color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-legal .gdw-legal__body h3 {
	margin: 1.6em 0 0.5em;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 19px;
	font-weight: 600;
	color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-legal .gdw-legal__body p,
.gdw-legal .gdw-legal__body li {
	line-height: 1.75;
}

.gdw-legal .gdw-legal__body ul {
	margin: 0 0 1.2em 1.2em;
}

.gdw-legal .gdw-legal__body strong {
	color: var(--e-global-color-secondary, #1D1D1B);
}

.gdw-legal .gdw-legal__body a {
	color: #C41E1E;
}

.gdw-legal .gdw-legal__body table {
	width: 100%;
	margin: 1em 0 1.6em;
	border-collapse: collapse;
	font-size: 15px;
}

.gdw-legal .gdw-legal__body th,
.gdw-legal .gdw-legal__body td {
	padding: 12px 14px;
	border: 1px solid #E2E1DC;
	text-align: left;
	vertical-align: top;
}

.gdw-legal .gdw-legal__body th {
	background: #F4F3EF;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 600;
	color: var(--e-global-color-secondary, #1D1D1B);
}

@media (max-width: 767px) {
	.gdw-legal .gdw-legal__body table {
		display: block;
		overflow-x: auto;
	}
}

/* ==========================================================================
   11. Texto circular (.gdw-circle-text): imagen redonda con un anillo de
   texto que gira. El texto sale del widget Título .gdw-circle-text__label
   (custom.js lo convierte en SVG, con su color). El ancho lo marca el
   contenedor.
   ========================================================================== */
.gdw-circle-text {
	position: relative;
	aspect-ratio: 1;
	flex-shrink: 0;
}

.gdw-circle-text > .elementor-widget-image {
	position: absolute;
	inset: 16%;
	width: auto !important;
	margin: 0 !important;
}

.gdw-circle-text > .elementor-widget-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50% !important;
}

.gdw-circle-text__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	animation: gdw-circle-spin 22s linear infinite;
}

.gdw-circle-text__ring text {
	font: 600 13px "Plus Jakarta Sans", sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	fill: currentColor;
}

/* El título queda para lectores de pantalla cuando ya está el anillo */
.gdw-circle-text.is-built .gdw-circle-text__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* En el editor (sin anillo) el título se ve debajo del círculo */
.gdw-circle-text:not(.is-built) .gdw-circle-text__label {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	text-align: center;
}

@keyframes gdw-circle-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gdw-circle-text__ring {
		animation: none;
	}
}