/**
 * Estilos propios del tema hijo.
 *
 * Todo lo que no se puede resolver con los controles de Elementor vive aquí,
 * no en el CSS personalizado de cada elemento. Los selectores se enganchan al
 * CSS ID que tiene asignado cada elemento en Elementor (#hero-home, etc.).
 */

/* -------------------------------------------------------------------------
 * Home — sección hero (#hero-home)
 * ---------------------------------------------------------------------- */

/* El vídeo de fondo ocupa todo el ancho pero nunca más de 1920px. */
#hero-home > .elementor-background-video-container {
	max-width: 1920px;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

/* Giro continuo y lento del círculo "Scroll down" (#hero-home-scroll).
   Elementor solo permite una rotación fija, así que la animamos aquí. */
#hero-home-scroll .e-text-path > svg {
	transform-origin: 50% 50%;
	animation: gaviota-scroll-spin 30s linear infinite;
}

@keyframes gaviota-scroll-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	#hero-home-scroll .e-text-path > svg {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * Blog — tarjetas de los Loop Item (plantillas "Loop - Post …")
 * Se enganchan por clase (no por ID) porque los elementos se repiten en el grid.
 * ---------------------------------------------------------------------- */

/* Elementor envuelve la imagen enlazada en un <a> inline-block, que limita el
   ancho del <img> a su tamaño natural. Lo pasamos a bloque para que ocupe
   toda la tarjeta (.gaviota-card-image en el widget de imagen destacada). */
.gaviota-card-image a {
	display: block;
}

/* Recorte del extracto a N líneas con puntos suspensivos; Elementor no tiene
   control nativo para esto (.gaviota-clamp-2 / .gaviota-clamp-3). Con el markup
   optimizado de Elementor el texto va directamente en el widget; el selector
   con .elementor-widget-container cubre el markup antiguo. */
.elementor-widget.gaviota-clamp-2,
.elementor-widget.gaviota-clamp-3,
.gaviota-clamp-2 > .elementor-widget-container,
.gaviota-clamp-3 > .elementor-widget-container {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.elementor-widget.gaviota-clamp-2,
.gaviota-clamp-2 > .elementor-widget-container {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.elementor-widget.gaviota-clamp-3,
.gaviota-clamp-3 > .elementor-widget-container {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* -------------------------------------------------------------------------
 * Post individual — cuerpo del post (#post-contenido, widget Contenido del post)
 * El widget solo estiliza el texto base; los encabezados y listas que vienen
 * del editor de WordPress se ajustan aquí con las variables de la kit.
 * ---------------------------------------------------------------------- */

#post-contenido h2,
#post-contenido h3 {
	margin: 48px 0 24px;
	color: var(--e-global-color-primary);
	font-family: var(--e-global-typography-titulo_post-font-family), sans-serif;
	font-size: var(--e-global-typography-titulo_post-font-size);
	font-weight: var(--e-global-typography-titulo_post-font-weight);
	line-height: var(--e-global-typography-titulo_post-line-height);
}

#post-contenido h3 {
	font-family: var(--e-global-typography-titulo_post_pequeno-font-family), sans-serif;
	font-size: var(--e-global-typography-titulo_post_pequeno-font-size);
	line-height: var(--e-global-typography-titulo_post_pequeno-line-height);
}

#post-contenido > :first-child,
#post-contenido .elementor-widget-container > :first-child {
	margin-top: 0;
}

#post-contenido ol,
#post-contenido ul {
	margin: 0 0 12px;
	padding-left: 24px;
}

#post-contenido li + li {
	margin-top: 4px;
}

@media (max-width: 767px) {
	#post-contenido h2,
	#post-contenido h3 {
		margin: 40px 0 16px;
	}
}

/* -------------------------------------------------------------------------
 * Contacto — formulario (#contacto-formulario, widget Formulario de Elementor Pro)
 * Lo que el widget no permite ajustar desde sus controles.
 * ---------------------------------------------------------------------- */

/* Enlaces del texto legal y de la aceptación: mismo color que el texto y subrayados. */
#contacto-formulario .elementor-field-type-html a,
#contacto-formulario .elementor-field-type-acceptance a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#contacto-formulario .elementor-field-type-html p {
	margin: 0;
}

/* Casilla de aceptación: cuadrado más grande que el nativo, alineado con la primera línea. */
#contacto-formulario .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

#contacto-formulario .elementor-field-type-acceptance input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--e-global-color-accent);
}

#contacto-formulario .elementor-field-type-acceptance label {
	color: var(--e-global-color-secondary);
}

/* Selects con la primera opción vacía ("Perfil", "Cliente/usuario") en gris,
   como un placeholder, hasta que se elige una opción. */
#contacto-formulario select:has(option[value=""]:checked) {
	color: var(--e-global-color-text);
}

/* -------------------------------------------------------------------------
 * Home — carrusel de proyectos (widget PW Media Carousel)
 * Solo para este proyecto: el texto va DEBAJO de la imagen, sin recuadro,
 * en lugar de superpuesto en la parte inferior de la tarjeta. Se engancha
 * por el ID de elemento de Elementor (el widget no tiene CSS ID propio).
 * La tipografía de Estilo › Texto del widget sigue mandando si se rellena.
 * ---------------------------------------------------------------------- */

.elementor-element-67a26db .pwmc-card {
	overflow: visible;
	border-radius: 0;
	background: none;
}

/* La redondez de la tarjeta pasa a la imagen. */
.elementor-element-67a26db .pwmc-media {
	border-radius: var(--pwmc-radius);
}

.elementor-element-67a26db .pwmc-caption {
	position: static;
	margin: 32px 0 0;
	padding: 0;
	gap: 16px;
	border-radius: 0;
	background: none;
	color: var(--e-global-color-primary);
}

.elementor-element-67a26db .pwmc-caption__line--1 {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
}

.elementor-element-67a26db .pwmc-caption__line--2 {
	font-size: 16px;
	line-height: 21px;
}

@media (max-width: 767px) {
	.elementor-element-67a26db .pwmc-caption {
		margin-top: 20px;
		gap: 8px;
	}

	.elementor-element-67a26db .pwmc-caption__line--1 {
		font-size: 18px;
	}
}

/* -------------------------------------------------------------------------
 * Home — Áreas de aplicación (#areas-aplicacion)
 * Recuadro de texto translúcido sobre la imagen de cada tarjeta
 * (.gaviota-glass). Elementor no ofrece backdrop-filter en contenedores.
 * ---------------------------------------------------------------------- */

.gaviota-glass {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* -------------------------------------------------------------------------
 * Sobre Gaviota — Filiales y delegaciones (#sobre-filiales)
 * Ficha de producto — Documentación técnica (#producto-documentacion)
 * En desktop el bloque CTA + imagen (#filiales-media, #producto-docs-media)
 * se sale de la caja azul (#filiales-caja, #producto-docs-caja) por abajo y
 * por la derecha hasta el borde de la pantalla. Elementor no permite
 * posiciones absolutas con offsets negativos por dispositivo, así que se
 * resuelve aquí. En tablet/móvil va apilado (nativo).
 * ---------------------------------------------------------------------- */

@media (min-width: 1025px) {
	/* El texto se alinea con el contenido de 1186px del resto de secciones
	   (la caja empieza 40px dentro del borde izquierdo). */
	#filiales-caja,
	#producto-docs-caja {
		position: relative;
		padding-left: calc(max(24px, (100vw - 1186px) / 2) - 40px);
	}

	#filiales-media,
	#producto-docs-media {
		position: absolute;
		top: 76px;
		right: -80px;
		width: calc(188px + 37.5vw);
	}

	/* En la ficha de producto la caja acaba 110px antes del borde y la imagen
	   solo sobresale 44px de ella. */
	#producto-docs-media {
		right: -44px;
		width: calc(188px + 35vw);
	}

	/* El texto nunca se mete debajo del CTA en pantallas estrechas: le deja
	   48px (100% del contenido + 24px de padding derecho + 44px de desborde
	   − el bloque CTA + imagen − 48px). */
	#producto-docs-texto {
		max-width: calc(100% - 168px - 35vw);
	}
}

/* -------------------------------------------------------------------------
 * Archivo de categoría de producto (plantilla "Archivo - Categoría de producto")
 * ---------------------------------------------------------------------- */

/* El listado tiene dos Loop Grid: subcategorías y productos de la categoría.
   Normalmente solo uno tiene resultados; el vacío pinta un mensaje en blanco
   que ocupa altura y suma el gap del contenedor, así que se oculta. */
#producto-listado > .e-con-inner > .elementor-widget-loop-grid:not(:has(.e-loop-item)) {
	display: none;
}

/* Sección de FAQs (#producto-faqs): si la categoría no tiene preguntas, el
   shortcode [gaviota_faqs] no pinta nada y se oculta la sección entera. */
body:not(.elementor-editor-active) #producto-faqs:not(:has(.gaviota-faqs)) {
	display: none;
}

/* -------------------------------------------------------------------------
 * Ficha de producto (plantilla "Producto individual")
 * Las secciones y bloques sin contenido no se pintan (gaviota-productos,
 * includes/ficha-producto.php), así que aquí se usan :first-child /
 * :last-child para ajustar lo que queda.
 * ---------------------------------------------------------------------- */

/* Compatibilidad: línea vertical entre "Áreas de aplicación / Sujeción" y
   "Esquema técnico", solo si están las dos columnas. La línea va en el borde
   de la columna izquierda y la derecha se separa 72px (40px en tablet); las
   dos columnas quedan con el mismo ancho útil. */
@media (min-width: 768px) {
	#producto-compat-aplicacion:not(:last-child) {
		--width: calc(50% - 36px);
		border-right: 1px solid var(--e-global-color-primary);
	}

	#producto-compat-esquema:not(:first-child) {
		--width: calc(50% + 36px);
		padding-left: 72px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	#producto-compat-aplicacion:not(:last-child) {
		--width: calc(50% - 20px);
		padding-right: 24px;
	}

	#producto-compat-esquema:not(:first-child) {
		--width: calc(50% + 20px);
		padding-left: 40px;
	}
}

/* Documentación técnica: la imagen se sale 84px por abajo de la caja azul
   (cabe en el padding inferior). Si no hay relacionados detrás, deja también
   el aire final de la página. */
@media (min-width: 1025px) {
	#producto-documentacion:last-child {
		padding-bottom: 204px;
	}
}

/* Carrusel de relacionados: los puntos solo en tablet y móvil, donde caben
   menos tarjetas y hacen falta para saber que hay más (en desktop el diseño
   no los lleva). */
@media (min-width: 1025px) {
	#producto-relacionados .swiper-pagination {
		display: none;
	}
}

/* Tarjetas de producto relacionado (plantilla "Loop - Producto relacionado"):
   imagen siempre en proporción 4:5, recortada. */
.gaviota-ratio-4-5 img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
 * Header de la home (#header-home, plantilla "Header - home")
 * Fijo arriba y superpuesto al hero, máximo 1440px. Por defecto transparente
 * con textos y logo en blanco; al hacer scroll (assets/js/custom.js añade
 * .is-scrolled) o con el menú móvil abierto, pasa a fondo blanco con logo y
 * textos oscuros. Elementor no tiene estados por scroll, por eso va aquí.
 * En el editor no se fija, para poder editarlo con normalidad.
 * ---------------------------------------------------------------------- */

body:not(.elementor-editor-active) #header-home {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
}

/* Los fondos ocupan todo el ancho de la pantalla; el contenido se limita a
   1440px (40px de margen interior) con el padding lateral de cada barra. */
@media (min-width: 1025px) {
	#header-home-top,
	#header-home-main,
	#header-site-top,
	#header-site-main {
		padding-inline: max(40px, (100% - 1440px) / 2 + 40px);
	}
}

body.admin-bar:not(.elementor-editor-active) #header-home {
	top: var(--wp-admin--admin-bar--height, 32px);
}

#header-home,
#header-home-top,
#header-home-main {
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Logo: el oscuro va encima del blanco y se intercambian por opacidad. */
#header-home-logo {
	position: relative;
}

#header-home .gaviota-logo {
	transition: opacity 0.3s ease;
}

#header-home .gaviota-logo--dark {
	position: absolute;
	inset: 0;
	opacity: 0;
}

/* Estado "sólido": con scroll o con el menú móvil abierto. */
#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) {
	box-shadow: 0 1px 0 var(--e-global-color-gris_claro);
}

#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) #header-home-top,
#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) #header-home-main {
	background-color: var(--e-global-color-blanco);
}

#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-logo--light {
	opacity: 0;
}

#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-logo--dark {
	opacity: 1;
}

#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-header-text .elementor-icon-list-text,
#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-header-lang .cpel-switcher__lang a,
#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-header-lang .cpel-switcher__icon,
#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-header-search .elementor-search-form__toggle,
#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-header-menu .elementor-nav-menu--main .elementor-item,
#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-header-menu .elementor-menu-toggle,
#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-header-menu .elementor-menu-toggle svg,
#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-header-search .elementor-search-form__toggle svg {
	--e-search-form-toggle-color: var(--e-global-color-primary);
	color: var(--e-global-color-primary);
	fill: var(--e-global-color-primary);
}

#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-header-text a:hover .elementor-icon-list-text,
#header-home:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) .gaviota-header-menu .elementor-nav-menu--main .elementor-item:hover {
	color: var(--e-global-color-accent);
}

#header-home .gaviota-header-text .elementor-icon-list-text,
#header-home .gaviota-header-menu .elementor-item {
	transition: color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	#header-home,
	#header-home-top,
	#header-home-main,
	#header-home .gaviota-logo,
	#header-home .gaviota-header-text .elementor-icon-list-text,
	#header-home .gaviota-header-menu .elementor-item {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Header del resto de páginas (#header-site, plantilla "Header - general")
 * Mismo header que el de la home pero con logo oscuro siempre, barra superior
 * #030D180D y barra principal transparente. Ocupa su sitio en el flujo y se
 * queda pegado arriba (sticky); al hacer scroll (.is-scrolled, custom.js) o
 * con el menú móvil abierto pasa a fondo blanco. La barra superior conserva su
 * tono sobre blanco opaco para que no se transparente el contenido.
 * Los fondos ocupan todo el ancho; el contenido, 1440px (regla de arriba).
 * ---------------------------------------------------------------------- */

body:not(.elementor-editor-active) .elementor-location-header:has(#header-site) {
	position: sticky;
	top: 0;
	z-index: 100;
}

body.admin-bar:not(.elementor-editor-active) .elementor-location-header:has(#header-site) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

#header-site,
#header-site-top,
#header-site-main {
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#header-site:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) {
	box-shadow: 0 1px 0 var(--e-global-color-gris_claro);
}

#header-site:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) #header-site-top {
	background: linear-gradient(#030d180d, #030d180d), var(--e-global-color-blanco);
}

#header-site:is(.is-scrolled, :has(.elementor-menu-toggle.elementor-active)) #header-site-main {
	background-color: var(--e-global-color-blanco);
}

@media (prefers-reduced-motion: reduce) {
	#header-site,
	#header-site-top,
	#header-site-main {
		transition: none;
	}
}