/**
 * SETIN – estilos globales que theme.json no cubre.
 *
 * Índice:
 * 1. Base y accesibilidad
 * 2. Utilidades (eyebrow, botones, texto contorneado)
 * 3. Cabecera y navegación
 * 4. Hero
 * 5. Cifras, pilares y bloques de la portada
 * 6. Formulario de presupuesto (Contact Form 7)
 * 7. Pie
 * 8. Botones flotantes (WhatsApp / llamar)
 */

/* 1. Base y accesibilidad ------------------------------------------------ */

html { scroll-padding-top: calc(var(--wp--custom--header-height) + 1rem); }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { height: auto; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Texto solo para lectores de pantalla */
.setin-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	z-index: 100000;
	padding: 1rem 1.5rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* 2. Utilidades ------------------------------------------------------------ */

.setin-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.setin-eyebrow::before {
	content: "";
	width: 2rem;
	height: 3px;
	background: var(--wp--preset--color--accent);
}

/* Texto contorneado, recogido del claim de la web actual ("concepto", "innovación"). */
/* El trazo necesita un color explícito: currentColor sería el propio "transparent". */
.setin-outline {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--carbon);
	paint-order: stroke fill;
}

.has-base-color .setin-outline,
.has-base-color.setin-outline,
.has-contrast-background-color .setin-outline,
.is-style-section-dark .setin-outline {
	-webkit-text-stroke-color: var(--wp--preset--color--base);
}

.setin-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	min-height: 48px;
	padding: .95rem 1.75rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.setin-btn--accent { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); }
.setin-btn--accent:hover, .setin-btn--accent:focus-visible { background: var(--wp--preset--color--base); }
.setin-btn--ghost { border-color: rgba(255, 255, 255, .5); color: var(--wp--preset--color--base); }
.setin-btn--ghost:hover, .setin-btn--ghost:focus-visible { border-color: var(--wp--preset--color--base); background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }

/* Botón "Déjanos tu reseña en Google" ([setin_resena]) */
.setin-btn--review svg { flex: none; color: var(--wp--preset--color--accent); }

.setin-btn--review-claro {
	border-color: var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.setin-btn--review-claro:hover,
.setin-btn--review-claro:focus-visible {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.setin-btn--review-oscuro {
	border-color: rgba(255, 255, 255, .35);
	color: var(--wp--preset--color--base);
}

.setin-btn--review-oscuro:hover,
.setin-btn--review-oscuro:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Botón secundario de los bloques core (estilo "outline") */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Botón principal sobre fondo claro: al pasar el ratón pasa a negro. */
.has-base-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.has-surface-background-color .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.is-style-section-light .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Lista con check amarillo (se usa en fichas, páginas y patrones) */
.setin-checklist {
	display: grid;
	gap: .85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.setin-checklist li {
	position: relative;
	padding-left: 2.1rem;
	line-height: 1.5;
}

.setin-checklist li::before {
	content: "";
	position: absolute;
	top: .15em;
	left: 0;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23161616' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* 3. Cabecera y navegación -------------------------------------------------- */

.setin-header {
	position: sticky;
	top: 0;
	z-index: 50;
	transition: box-shadow var(--wp--custom--transition), background var(--wp--custom--transition);
}

body.admin-bar .setin-header { top: var(--wp-admin--admin-bar--height, 0); }

.setin-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }

.setin-header__inner { min-height: var(--wp--custom--header-height); }

.setin-header .wp-block-site-logo img { width: auto; max-height: 52px; }

.setin-header .wp-block-navigation a:not(.wp-element-button) { text-decoration: none; }

.setin-header .wp-block-navigation-item__content { padding-block: .4rem; border-bottom: 2px solid transparent; }

/* Sin JavaScript: subrayado estático bajo la sección actual. */
.setin-header .wp-block-navigation__container:not(.has-indicator) .wp-block-navigation-item__content:hover,
.setin-header .wp-block-navigation__container:not(.has-indicator) .current-menu-item > .wp-block-navigation-item__content,
.setin-header .wp-block-navigation__container:not(.has-indicator) .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--accent);
}

/*
 * Barra deslizante (front.js). Se mueve con left/right para poder "estirarse": en cada viaje
 * el extremo delantero arranca antes que el trasero.
 */
.setin-header .wp-block-navigation__container.has-indicator { position: relative; }

.setin-nav-indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 100%;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 12px rgba(232, 196, 47, .55);
	opacity: 0;
	pointer-events: none;
	transition:
		left 520ms cubic-bezier(.65, .05, .25, 1),
		right 520ms cubic-bezier(.65, .05, .25, 1),
		opacity 300ms ease;
}

.setin-nav-indicator.is-shown { opacity: 1; }

/* Hacia la derecha: primero avanza el borde derecho y el izquierdo le sigue (y al revés). */
.setin-nav-indicator.is-going-right { transition-delay: 110ms, 0ms, 0ms; }
.setin-nav-indicator.is-going-left { transition-delay: 0ms, 110ms, 0ms; }

.setin-nav-indicator.is-instant { transition: none !important; }

/* Vista previa al pasar el ratón: más fina y translúcida, por debajo de la barra principal. */
.setin-nav-indicator--ghost {
	height: 2px;
	background: rgba(232, 196, 47, .5);
	box-shadow: none;
	transition-duration: 380ms, 380ms, 200ms;
}

.setin-nav-indicator--ghost.is-shown { opacity: .9; }

/* En el menú móvil a pantalla completa no hay barra. */
.setin-header .is-menu-open .setin-nav-indicator { display: none; }

/* Menú móvil a pantalla completa */
.setin-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
}

.setin-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.setin-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start !important;
	gap: 1.25rem;
	font-size: 2rem;
}

.setin-header .wp-block-navigation__responsive-container-open svg,
.setin-header .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }


/* 4. Hero ---------------------------------------------------------------- */

.setin-hero { min-height: min(92vh, 860px) !important; }

/*
 * El contenedor interno del cover ocupa todo el ancho y usa el mismo margen lateral que la
 * web, así el texto queda alineado con el logo de la cabecera (el grupo "ancho" se centra solo).
 */
.setin-hero,
.setin-page-hero {
	padding-right: var(--wp--style--root--padding-right) !important;
	padding-left: var(--wp--style--root--padding-left) !important;
}

/* !important: el CSS del bloque cover (cargado después) fija width:auto con la misma especificidad. */
.wp-block-cover.setin-hero .wp-block-cover__inner-container,
.wp-block-cover.setin-page-hero .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: none;
	margin: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.setin-hero .wp-block-cover__inner-container > *,
.setin-page-hero .wp-block-cover__inner-container > * {
	width: 100%;
	max-width: var(--wp--style--global--wide-size) !important;
	margin-inline: auto !important;
}

.setin-hero h1 { max-width: 13ch; }

.setin-hero__lead { max-width: 42ch; font-size: var(--wp--preset--font-size--large); }

/* Cabecera de páginas interiores */
.setin-page-hero { min-height: 380px !important; }
.setin-page-hero h1 { max-width: 18ch; }

/* 5. Secciones de portada ------------------------------------------------- */

/* Cifras */
.setin-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: rgba(255, 255, 255, .12);
}

@media (min-width: 900px) {
	.setin-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.setin-stats > .wp-block-group {
	margin: 0 !important;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--wp--preset--color--contrast);
}

.setin-stat__value {
	margin: 0;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.75rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1;
}

.setin-stat__label { margin: .5rem 0 0; color: #d6d6d2; font-size: .975rem; }

/* Pilares (Montajes, Instalaciones, Mantenimiento, Desmontajes) */
.setin-pillars { gap: 1.5rem !important; }

.setin-pillar {
	height: 100%;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.setin-pillar:hover { border-color: var(--wp--preset--color--contrast); transform: translateY(-4px); }

.setin-pillar .wp-block-image img { width: 64px; height: 64px; border-radius: 0; }

.setin-pillar h3 { margin-top: 1rem; text-transform: uppercase; }

/*
 * Las secciones a todo el ancho van pegadas entre sí (cada una trae su propio relleno):
 * se anula el espaciado por defecto entre bloques, que dejaba franjas blancas.
 */
.wp-site-blocks > * + * { margin-block-start: 0; }

main > .alignfull,
main > .wp-block-post-content > .alignfull,
main .wp-block-post-content > .alignfull + * {
	margin-block: 0 !important;
}

/* Sin clientes publicados, la sección de logos no deja hueco (el bloque no pinta nada). */
.setin-clients-section:not(:has(.setin-clients)) { display: none; }

/* Cobertura */
.setin-map img { border-radius: 0 !important; }

.setin-places {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.25rem 0 0 !important;
	padding: 0;
	list-style: none;
}

.setin-places li {
	padding: .4rem .9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: .9375rem;
	font-weight: 500;
}

/* Proceso de trabajo */
.setin-steps { counter-reset: setin-step; }

.setin-step {
	position: relative;
	padding-top: 3.25rem !important;
	border-top: 2px solid rgba(255, 255, 255, .18);
}

.setin-step::before {
	counter-increment: setin-step;
	content: "0" counter(setin-step);
	position: absolute;
	top: 1rem;
	left: 0;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: .08em;
}

.setin-step h3 { margin: 0 0 .5rem; font-size: 1.5rem; text-transform: uppercase; }

/* Claim con comillas grandes */
.setin-claim { position: relative; }

.setin-claim::before {
	content: "\201C";
	position: absolute;
	top: -.35em;
	left: 50%;
	z-index: 0;
	color: var(--wp--preset--color--line);
	font-family: Georgia, serif;
	font-size: clamp(10rem, 22vw, 18rem);
	line-height: 1;
	transform: translateX(-50%);
	pointer-events: none;
}

.setin-claim > * { position: relative; z-index: 1; }

/* Imágenes redondeadas en columnas */
.setin-rounded img { border-radius: var(--wp--custom--radius--card) !important; }

/* 6. Formulario de presupuesto -------------------------------------------- */

.setin-form-card {
	padding: clamp(1.5rem, 4vw, 3rem);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}

.wpcf7-form .setin-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem 1.25rem;
}

@media (min-width: 700px) {
	.wpcf7-form .setin-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wpcf7-form .setin-form .is-full { grid-column: 1 / -1; }
}

.wpcf7-form .setin-form p { margin: 0; }

.wpcf7-form label {
	display: grid;
	gap: .4rem;
	font-size: .9375rem;
	font-weight: 600;
}

.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
	box-sizing: border-box;
	max-width: 100%;
}

.wpcf7-form .wpcf7-form-control-wrap { display: block; }

.wpcf7-form input:not([type="checkbox"]):not([type="submit"]):not([type="file"]),
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	min-height: 52px;
	padding: .8rem 1rem;
	border: 1.5px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 400;
	transition: border-color var(--wp--custom--transition);
}

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

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	border-color: var(--wp--preset--color--contrast);
	outline: none;
	box-shadow: 0 0 0 3px rgba(232, 196, 47, .55);
}

.wpcf7-form input[type="file"] {
	width: 100%;
	padding: 1rem;
	border: 1.5px dashed var(--wp--preset--color--graphite);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	font: inherit;
	font-weight: 400;
}

.setin-form__hint { color: var(--wp--preset--color--graphite); font-size: .875rem; font-weight: 400; }

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

.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-weight: 400;
}

.wpcf7-form .wpcf7-acceptance input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--wp--preset--color--contrast); }

.setin-form__legal {
	color: var(--wp--preset--color--graphite);
	font-size: .8125rem;
	line-height: 1.5;
}

.wpcf7-form .wpcf7-submit {
	min-height: 56px;
	padding: 1rem 2.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--wp--custom--transition), color var(--wp--custom--transition);
}

.wpcf7-form .wpcf7-submit:hover,
.wpcf7-form .wpcf7-submit:focus-visible {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.wpcf7-not-valid-tip { margin-top: .3rem; color: #b42318; font-size: .875rem; font-weight: 500; }

.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 1rem 1.25rem;
	border-width: 2px;
	border-radius: 12px;
}

/* 7. Pie ------------------------------------------------------------------- */

/* Hueco final para que el botón flotante de WhatsApp no tape los enlaces legales. */
.setin-footer { padding-bottom: calc(var(--wp--preset--spacing--40) + 4.5rem) !important; }

.setin-footer a { text-decoration: none; }
.setin-footer a:hover, .setin-footer a:focus-visible { text-decoration: underline; }

.setin-footer .wp-block-site-logo img { width: auto; max-height: 70px; }

.setin-plain-list { padding-left: 0; line-height: 1.9; list-style: none; }

.setin-footer__title {
	margin-bottom: 1rem;
	color: #a3a3a0 !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: .8125rem !important;
	font-weight: 600 !important;
	letter-spacing: .1em;
	text-transform: uppercase !important;
}

.setin-footer .wp-block-navigation { font-family: var(--wp--preset--font-family--body); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* 8. Botones flotantes ---------------------------------------------------- */

.setin-float {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 60;
	display: grid;
	gap: .75rem;
}

.setin-float__btn {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	color: #fff;
	transition: transform var(--wp--custom--transition);
}

.setin-float__btn:hover, .setin-float__btn:focus-visible { transform: scale(1.08); }

.setin-float__btn--wa { background: #1a8f4c; }
.setin-float__btn--tel { background: var(--wp--preset--color--contrast); }

/* El botón de llamada solo tiene sentido en móvil. */
@media (min-width: 900px) {
	.setin-float__btn--tel { display: none; }
}

.setin-float__btn svg { width: 28px; height: 28px; }