/**
 * UpBizErp-Consulting — estilos extra del front.
 *
 * El diseño principal vive en theme.json (colores, tipografía, espaciado,
 * layout). Aquí solo va lo que theme.json no cubre: accesibilidad, estados
 * de interacción, utilidades y la capa de WooCommerce.
 *
 * Convención: las clases propias del tema van con prefijo `ub-`.
 */

/* ------------------------------------------------------------------ */
/* Base y accesibilidad                                                */
/* ------------------------------------------------------------------ */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	border-radius: 0 0 6px 0;
}

.skip-link:focus {
	left: 0;
}

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

img {
	max-width: 100%;
	height: auto;
}

a,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button {
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

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

/* ------------------------------------------------------------------ */
/* Cabecera                                                            */
/* ------------------------------------------------------------------ */

/* La cabecera se queda pegada arriba: en un sitio de servicios el CTA de
   contacto debe estar siempre a un clic. */
.site-header {
	background-color: var(--wp--preset--color--base);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ */
/* Logotipo                                                            */
/* ------------------------------------------------------------------ */

/* El lockup va incrustado en línea (no como imagen de la mediateca) por dos
   razones: no obliga a permitir la subida de SVG —un formato que puede
   transportar scripts— y ahorra una petición. */

.ub-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* Lockup oficial del sistema de marca («Rejilla modular»).
   Trae sus propios colores: petróleo + naranja en claro, hueso + naranja
   claro en oscuro. Por eso son dos archivos y no uno con currentColor: la guía
   define un color distinto por contexto, no el mismo teñido.
   Proporción del arte: 351 × 100 → 3.51. */
.ub-lockup {
	display: block;
	height: 51px;
	width: auto;
}

.site-footer .ub-lockup {
	height: 46px;
}

/* Escalado del lockup, medido en cada tramo.
   La franja 600–782 px es la más apretada y no es intuitiva: ahí el menú
   desplegable de WordPress (`overlayMenu: mobile`) todavía NO ha entrado, así
   que se ven los cuatro enlaces completos (272 px) más el botón. Por debajo
   de 600 px aparece la hamburguesa y vuelve a sobrar sitio — por eso el logo
   es MÁS pequeño en esa franja intermedia que en móvil. */
@media (max-width: 1023px) {
	.ub-lockup {
		height: 42px;
	}
}

@media (max-width: 782px) {
	.ub-lockup {
		height: 27px;
	}
}

@media (max-width: 599px) {
	.ub-lockup {
		height: 34px;
	}
}

/* Pantallas muy estrechas (iPhone SE y similares): a 34 px el logo empuja al
   botón «Hablemos» a una segunda fila. */
@media (max-width: 400px) {
	.ub-lockup {
		height: 28px;
	}
}

/* Texto solo para lectores de pantalla y buscadores: el nombre del sitio
   sigue existiendo como texto aunque lo que se vea sea el SVG. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/* Hero — el isotipo como elemento gráfico                             */
/* ------------------------------------------------------------------ */

/* Deliberadamente NO es una marca de agua centrada detrás del texto: eso
   baja el contraste de la lectura y se lee como relleno. Aquí el arte va
   grande y sangrado por el borde, en la mitad que el texto deja libre.
   Por eso el hero pasa a alineación izquierda: es lo que abre el hueco. */

.ub-hero {
	position: relative;
	overflow: hidden;
}

.ub-hero__art {
	position: absolute;
	top: 50%;
	right: 2%;
	transform: translateY(-50%);
	width: min(30vw, 340px);
	opacity: 0.16;
	pointer-events: none;
	z-index: 1;
}

.ub-hero__art img {
	display: block;
	width: 100%;
	height: auto;
}

.ub-hero > .wp-block-group,
.ub-hero__contenido {
	position: relative;
	z-index: 2;
}

/* En móvil el arte estorbaría: el texto ocupa todo el ancho. */
@media (max-width: 781px) {
	.ub-hero__art {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Pie                                                                 */
/* ------------------------------------------------------------------ */

.site-footer a {
	color: var(--wp--preset--color--haze);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--highlight);
	text-decoration: underline;
}

.site-footer .wp-block-social-links {
	margin-top: var(--wp--preset--spacing--s);
}

.site-footer .wp-block-social-link {
	transition: transform 0.15s ease;
}

.site-footer .wp-block-social-link:hover {
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* Utilidades del tema                                                 */
/* ------------------------------------------------------------------ */

/* Listas sin viñetas (columnas del pie, listas de servicios). */
.is-style-none {
	list-style: none;
	padding-left: 0;
}

.is-style-none li {
	margin-bottom: 0.45rem;
}

/* Texto técnico monoespaciado: métricas, stacks, referencias. */
.ub-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

/* Antetítulo: la etiqueta pequeña en mayúsculas sobre un titular. */
.ub-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Tarjeta genérica: servicios, casos, artículos. El realce del borde en
   hover da respuesta sin mover el layout. */
.ub-card {
	background-color: var(--wp--preset--color--base);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ub-card:hover {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 6px 24px rgba(11, 18, 32, 0.07);
}

/* Tarjetas a la misma altura dentro de una fila.
   `height: 100%` sobre la tarjeta no basta: .wp-block-column es un elemento
   flex que se estira, pero no es contenedor flex, así que su hijo no hereda
   la altura. Hay que hacer flex la columna y dejar que la tarjeta crezca.
   `flex-direction: column` es imprescindible: sin ella la columna coloca sus
   hijos en fila y las rejillas de varios bloques —la banda de cifras— se
   descomponen. */
.ub-grid > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.ub-grid > .wp-block-column > .ub-card {
	flex: 1 1 auto;
}

/* Las columnas de WordPress se apilan solas por debajo de 782 px, pero una
   rejilla de 3-4 tarjetas queda mejor en 2 columnas en tablet. */
@media (min-width: 601px) and (max-width: 781px) {
	.ub-grid.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.ub-grid.wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--m)) !important;
		flex-grow: 0;
	}
}

/* La rejilla de publicaciones usa post-template (flex), no columnas: el core
   solo la colapsa a 1 columna por debajo de 600 px, así que entre 600 y 781
   quedaban 3 tarjetas demasiado estrechas para un titular. */
@media (min-width: 601px) and (max-width: 781px) {
	.wp-block-post-template.is-flex-container.is-flex-container > li {
		width: calc(50% - var(--wp--preset--spacing--m) / 2) !important;
	}
}

/* Rejilla de tarjetas que envuelve.
   El bloque de columnas de WordPress reparte todo en una sola fila: con cinco
   servicios salían tarjetas de 230 px. Se pasa a CSS Grid para que envuelvan
   en 3 + 2, que además da un bloque de altura pareja. */
.ub-grid--cards {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--m);
}

.ub-grid--cards > .wp-block-column {
	flex-basis: auto !important;
	margin-left: 0 !important;
}

@media (max-width: 1023px) {
	.ub-grid--cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.ub-grid--cards { grid-template-columns: 1fr; }
}

/* Los títulos de las tarjetas de servicio son enlaces: heredan el color del
   texto y solo se tiñen al pasar por encima, para no convertir la rejilla en
   un muro azul. */
.ub-card h3 a {
	color: inherit;
	text-decoration: none;
}

.ub-card:hover h3 a {
	color: var(--wp--preset--color--accent);
}

/* Lista de módulos del ERP: dos columnas para no hacer una tira larga. */
.ub-modulos {
	columns: 2;
	column-gap: var(--wp--preset--spacing--m);
}

@media (max-width: 600px) {
	.ub-modulos { columns: 1; }
}

/* Bloque de cifra grande (métricas de la home). */
.ub-stat__value {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* ------------------------------------------------------------------ */
/* Contenido de artículo                                               */
/* ------------------------------------------------------------------ */

.wp-block-post-content > * + * {
	margin-top: var(--wp--preset--spacing--m);
}

.wp-block-code {
	overflow-x: auto;
	padding: var(--wp--preset--spacing--s);
}

/* Las tablas anchas se desplazan dentro de su caja, nunca desbordan la página. */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table th,
.wp-block-table td {
	border-color: var(--wp--preset--color--border);
}

/* ------------------------------------------------------------------ */
/* WooCommerce (capa mínima)                                           */
/* ------------------------------------------------------------------ */

/* El soporte de WooCommerce está declarado pero el sitio aún no vende nada:
   esto es solo lo justo para que la tienda no se vea sin estilo si se
   instala. Ver la nota en inc/setup.php. */

.woocommerce ul.products li.product {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--s);
	text-align: left;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--wp--preset--color--accent);
}

.woocommerce ul.products li.product a {
	text-decoration: none;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.wp-block-woocommerce-product-price .woocommerce-Price-amount {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 6px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
	padding: 0.85rem 1.6rem;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--base);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 0.7rem 0.9rem;
}

/* ------------------------------------------------------------------ */
/* Iconos                                                              */
/* ------------------------------------------------------------------ */

.ub-icono {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 auto;
}

/* Icono de la tarjeta de servicio: dentro de una caja tenue, para que se lea
   como marca de sección y no como adorno suelto. */
.ub-card__icono {
	align-items: center;
	background-color: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	height: 2.75rem;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--s);
	transition: background-color 0.15s ease, border-color 0.15s ease;
	width: 2.75rem;
}

.ub-card:hover .ub-card__icono {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Lista de puntos concretos dentro de la tarjeta. Sustituye a un párrafo
   corrido: el visitante escanea, no lee. */
.ub-card__puntos {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	list-style: none;
	margin: var(--wp--preset--spacing--s) 0 0;
	padding: 0;
}

.ub-card__puntos li {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	padding-left: 1.1rem;
	position: relative;
}

.ub-card__puntos li::before {
	background-color: var(--wp--preset--color--highlight);
	border-radius: 50%;
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	top: 0.62em;
	width: 5px;
}

/* ------------------------------------------------------------------ */
/* Tecnologías                                                         */
/* ------------------------------------------------------------------ */

.ub-tech__grupos {
	display: grid;
	gap: var(--wp--preset--spacing--l);
	grid-template-columns: repeat(3, 1fr);
}

.ub-tech__titulo {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.14em;
	margin: 0 0 var(--wp--preset--spacing--s);
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-transform: uppercase;
}

.ub-tech__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ub-tech__item {
	align-items: center;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: var(--wp--preset--color--secondary);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	gap: 0.45rem;
	padding: 0.4rem 0.85rem 0.4rem 0.65rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ub-tech__item:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.ub-tech__icono {
	height: 1rem;
	width: 1rem;
	opacity: 0.85;
}

@media (max-width: 781px) {
	.ub-tech__grupos { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Rejilla de servicios                                                */
/* ------------------------------------------------------------------ */

/* Rejilla propia en vez del bloque de columnas: con siete servicios el bloque
   de WordPress los metía todos en una fila. `auto-fit` reparte solo y la
   última fila queda alineada a la izquierda, no centrada con huecos. */
.ub-servicios {
	display: grid;
	gap: var(--wp--preset--spacing--m);
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.ub-card--servicio {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--m);
}

.ub-card__titulo {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0;
}

.ub-card__titulo a {
	color: inherit;
	text-decoration: none;
}

.ub-card:hover .ub-card__titulo a {
	color: var(--wp--preset--color--accent);
}

/* `margin-top:auto` deja el enlace pegado abajo aunque las tarjetas tengan
   distinta cantidad de puntos: así todas las flechas quedan a la misma altura. */
.ub-card__enlace {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin: var(--wp--preset--spacing--m) 0 0;
	padding-top: var(--wp--preset--spacing--s);
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: auto;
}

.ub-card__enlace a {
	text-decoration: none;
}

.ub-card__enlace span {
	display: inline-block;
	transition: transform 0.15s ease;
}

.ub-card:hover .ub-card__enlace span {
	transform: translateX(3px);
}

/* ------------------------------------------------------------------ */
/* Profundidad                                                         */
/* ------------------------------------------------------------------ */

/* Escala de sombra propia. Sombras de radio grande y opacidad baja: dan
   relieve sin ensuciar. El tono no es negro puro sino la tinta de la paleta,
   que sobre fondos fríos se integra mejor que un gris neutro. */
:root {
	--ub-sombra-1: 0 1px 2px rgba(11, 18, 32, 0.04), 0 2px 8px rgba(11, 18, 32, 0.04);
	--ub-sombra-2: 0 2px 4px rgba(11, 18, 32, 0.04), 0 12px 32px rgba(11, 18, 32, 0.09);
}

.ub-card {
	box-shadow: var(--ub-sombra-1);
}

/* El realce en hover levanta ligeramente la tarjeta. 2 px bastan: más se
   convierte en un salto y distrae al recorrer la rejilla. */
.ub-card:hover {
	box-shadow: var(--ub-sombra-2);
	transform: translateY(-2px);
}

.ub-card {
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ub-card:hover { transform: none; }
}

/* Botones: algo de relieve para que se lean como pulsables. */
.wp-element-button:not(.is-style-outline .wp-element-button) {
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.10);
}

/* ------------------------------------------------------------------ */
/* Aparición al desplazar                                              */
/* ------------------------------------------------------------------ */

/* Un solo gesto, corto y una sola vez por elemento. La referencia usa una
   librería entera de animaciones; aquí basta con esto y sin dependencias.
   Solo se activa si el JS marca el documento, para que sin JS todo se vea. */
.js-reveal .ub-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js-reveal .ub-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal .ub-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Contacto                                                            */
/* ------------------------------------------------------------------ */

/* El rojo de error no está en la paleta de theme.json a propósito: es un color
   de estado del formulario, no una decisión de marca, y exponerlo en el
   selector de color del editor invita a usarlo como acento. 5,9:1 sobre
   blanco, pasa AA. */
.ub-contacto {
	--ub-error: #B3261E;
	align-items: start;
	display: grid;
	gap: var(--wp--preset--spacing--xl);
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}

/* La columna lateral se va abajo antes que las tarjetas de servicios: el
   formulario necesita ancho para que los campos en pareja quepan. */
@media (max-width: 960px) {
	.ub-contacto {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--l);
	}
}

.ub-form__fila {
	display: grid;
	gap: var(--wp--preset--spacing--m);
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
	.ub-form__fila {
		grid-template-columns: 1fr;
	}
}

.ub-form__campo {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0 0 var(--wp--preset--spacing--m);
}

.ub-form__fila .ub-form__campo {
	margin-bottom: 0;
}

.ub-form__fila {
	margin-bottom: var(--wp--preset--spacing--m);
}

.ub-form__campo label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.ub-form__req {
	color: var(--ub-error);
}

.ub-form__opt {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

/* 1rem exacto en el campo: por debajo de 16px Safari en iOS hace zoom al
   enfocar y descoloca la página entera. */
.ub-form input,
.ub-form select,
.ub-form textarea {
	background-color: var(--wp--preset--color--base);
	/* Sin esto los campos son `content-box`: el 100% de ancho se suma al
	   relleno y al borde, y la página se desborda en móvil. */
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--primary);
	font-family: inherit;
	font-size: 1rem;
	padding: 0.7rem 0.85rem;
	width: 100%;
}

.ub-form textarea {
	line-height: 1.6;
	resize: vertical;
}

.ub-form input:hover,
.ub-form select:hover,
.ub-form textarea:hover {
	border-color: var(--wp--preset--color--muted);
}

.ub-form [aria-invalid="true"] {
	border-color: var(--ub-error);
}

.ub-form__error {
	color: var(--ub-error);
	font-size: var(--wp--preset--font-size--small);
}

/* Trampa de miel: fuera de pantalla, no `display:none`. Muchos bots ignoran
   los campos ocultos con display, pero rellenan los que están posicionados. */
.ub-form__trampa {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.ub-form__acciones {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--m);
	margin: 0;
}

.ub-form__enviar {
	cursor: pointer;
	font-weight: 600;
}

.ub-form__nota {
	color: var(--wp--preset--color--muted);
	flex: 1 1 16rem;
	font-size: var(--wp--preset--font-size--small);
}

/* Avisos de resultado. El borde lateral da el estado sin depender solo del
   color de fondo, que casi no se distingue. */
.ub-aviso {
	border: 1px solid var(--wp--preset--color--border);
	border-left-width: 4px;
	border-radius: 8px;
	margin-bottom: var(--wp--preset--spacing--l);
	padding: var(--wp--preset--spacing--m);
}

.ub-aviso p {
	margin: 0;
}

.ub-aviso__titulo {
	font-weight: 600;
	margin-bottom: 0.25rem !important;
}

.ub-aviso--ok {
	background-color: rgba(21, 128, 61, 0.06);
	background-color: color-mix(in srgb, var(--wp--preset--color--success) 6%, transparent);
	border-color: var(--wp--preset--color--border);
	border-left-color: var(--wp--preset--color--success);
}

.ub-aviso--fallo {
	background-color: rgba(179, 38, 30, 0.05);
	border-left-color: #B3261E;
}

.ub-contacto__aparte {
	display: grid;
	gap: var(--wp--preset--spacing--m);
}

.ub-contacto__caja {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--m);
}

.ub-contacto__subtitulo {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.ub-contacto__correo {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0 0 0.5rem;
	word-break: break-word;
}

.ub-contacto__texto,
.ub-contacto__pasos {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.ub-contacto__pasos {
	padding-left: 1.1rem;
}

.ub-contacto__pasos li + li {
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Páginas interiores — cabecera                                       */
/* ------------------------------------------------------------------ */

/* Antes, cada página interior empezaba con un titular negro sobre blanco y
   nada más. Esta banda oscura le da entrada a la página, repite la marca y
   separa la cabecera del contenido sin necesidad de una imagen de archivo. */
.ub-phero {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	overflow: hidden;
	padding-block: clamp(3rem, 7vw, 5.25rem);
	position: relative;
}

.ub-phero__interior {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--style--root--padding-left);
	position: relative;
	z-index: 3;
}

/* Retícula técnica de fondo. Se difumina con una máscara radial para que no
   parezca un papel cuadriculado: solo se intuye detrás del texto. */
.ub-phero__trama {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 64px 64px;
	inset: 0;
	position: absolute;
	z-index: 1;
}

@supports (mask-image: radial-gradient(#000, transparent)) {
	.ub-phero__trama {
		mask-image: radial-gradient(ellipse 80% 100% at 15% 50%, #000 10%, transparent 70%);
	}
}

.ub-phero__brillo {
	aspect-ratio: 1;
	/* Reserva en rgba para navegadores sin color-mix; la segunda declaracion
	   manda donde exista y sigue a la paleta sola. */
	background: radial-gradient(circle, rgba(194, 65, 12, 0.30) 0%, rgba(251, 146, 60, 0.10) 45%, transparent 65%);
	background: radial-gradient(circle,
		color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--highlight) 10%, transparent) 45%,
		transparent 65%);
	position: absolute;
	right: -12%;
	top: -45%;
	width: 62%;
	z-index: 1;
}

.ub-phero__marca {
	height: auto;
	opacity: 0.10;
	position: absolute;
	right: 3%;
	top: 50%;
	transform: translateY(-50%);
	width: min(22vw, 220px);
	z-index: 2;
}

.ub-phero__antetitulo {
	color: var(--wp--preset--color--highlight);
	margin: 0 0 var(--wp--preset--spacing--s);
}

.ub-phero__antetitulo a {
	color: inherit;
	text-decoration: none;
}

.ub-phero__antetitulo a:hover {
	text-decoration: underline;
}

.ub-phero__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0;
	max-width: 20ch;
}

.ub-phero__lead {
	color: var(--wp--preset--color--haze);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	margin: var(--wp--preset--spacing--m) 0 0;
	max-width: 58ch;
}

@media (max-width: 782px) {
	.ub-phero__marca {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Encabezado de sección reutilizable                                  */
/* ------------------------------------------------------------------ */

/* Antetítulo + titular + entradilla, siempre con la misma proporción. Repetir
   esta unidad en todas las secciones es lo que hace que una página larga se
   lea como un documento diseñado y no como bloques sueltos. */
.ub-seccion__cabeza {
	margin-bottom: var(--wp--preset--spacing--l);
	max-width: 62ch;
}

.ub-seccion__antetitulo {
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.75rem;
}

.ub-seccion__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0;
}

.ub-seccion__intro {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
	margin: var(--wp--preset--spacing--s) 0 0;
}

/* Sobre fondo oscuro cambian antetítulo y entradilla: el azul de acento y el
   gris `muted` no llegan a 4,5:1 contra la tinta. */
.ub-oscuro .ub-seccion__antetitulo {
	color: var(--wp--preset--color--highlight);
}

.ub-oscuro .ub-seccion__intro {
	color: var(--wp--preset--color--muted-invert);
}

/* ------------------------------------------------------------------ */
/* Fichas, pasos numerados y listas de especificación                  */
/* ------------------------------------------------------------------ */

/* Ficha con filo de acento: aparece al pasar el ratón desde el borde
   izquierdo. Da respuesta sin mover nada de sitio. */
.ub-ficha {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	padding: var(--wp--preset--spacing--l);
	position: relative;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ub-ficha::before {
	background: linear-gradient(180deg, var(--wp--preset--color--accent), var(--wp--preset--color--highlight));
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.25s ease;
	width: 3px;
}

.ub-ficha:hover {
	border-color: var(--wp--preset--color--haze);
	box-shadow: var(--ub-sombra-2);
	transform: translateY(-2px);
}

.ub-ficha:hover::before {
	transform: scaleY(1);
}

.ub-ficha__titulo {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 0.6rem;
}

.ub-ficha__texto {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 0;
}

.ub-ficha__texto + .ub-ficha__texto {
	margin-top: 0.8rem;
}

/* Rejilla genérica de fichas. `auto-fit` con mínimo generoso evita las
   columnas estrechas donde un titular se parte en cuatro líneas. */
.ub-rejilla {
	display: grid;
	gap: var(--wp--preset--spacing--m);
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.ub-rejilla--dos {
	grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

/* Pasos numerados. El número va en grande y semitransparente detrás del
   titular: ordena la lectura sin robarle protagonismo al texto. */
.ub-pasos {
	counter-reset: paso;
	display: grid;
	gap: var(--wp--preset--spacing--m);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ub-pasos > li {
	border-top: 1px solid var(--wp--preset--color--border);
	counter-increment: paso;
	display: grid;
	gap: var(--wp--preset--spacing--m);
	grid-template-columns: 3.5rem 1fr;
	padding-top: var(--wp--preset--spacing--m);
}

.ub-pasos > li::before {
	color: var(--wp--preset--color--accent);
	content: counter(paso, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1;
	opacity: 0.55;
}

.ub-pasos__titulo {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin: 0 0 0.35rem;
}

.ub-pasos__texto {
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
	margin: 0;
}

@media (max-width: 600px) {
	.ub-pasos > li {
		gap: 0.75rem;
		grid-template-columns: 2.5rem 1fr;
	}
}

/* Etiquetas de módulo o capacidad. Una lista de veinte nombres en texto
   corrido no se escanea; en pastillas sí. */
.ub-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ub-chips > li {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 0.5rem 1rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ub-chips > li:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Ficha técnica: etiqueta en monoespaciada a la izquierda, valor a la
   derecha. Es la convención de las hojas de especificación y se lee rápido. */
.ub-specs {
	border-top: 1px solid var(--wp--preset--color--border);
	margin: 0;
}

.ub-specs > div {
	border-bottom: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: var(--wp--preset--spacing--s);
	grid-template-columns: minmax(9rem, 15rem) 1fr;
	padding: var(--wp--preset--spacing--s) 0;
}

.ub-specs dt {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ub-specs dd {
	margin: 0;
}

@media (max-width: 600px) {
	.ub-specs > div {
		gap: 0.35rem;
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* Bloques de página                                                   */
/* ------------------------------------------------------------------ */

/* Sección a todo el ancho con el interior alineado a la rejilla del tema.
   Los patrones de estas páginas son HTML propio, así que no reciben el layout
   de los bloques de WordPress y hay que darles aquí el ancho y el margen. */
.ub-bloque {
	padding-block: clamp(3rem, 6vw, 5rem);
	position: relative;
}

/* Alternar fondo cada dos secciones marca dónde termina una idea y empieza
   otra. Es lo que separa una página larga de un texto interminable. */
.ub-bloque--alt {
	background-color: var(--wp--preset--color--base-alt);
	border-block: 1px solid var(--wp--preset--color--border);
}

.ub-bloque > .alignwide {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--style--root--padding-left);
}

/* Dos columnas asimétricas: el encabezado a la izquierda acompaña al
   contenido mientras se lee. En una sola columna todo empieza en el mismo
   sitio y la página se vuelve monótona. */
.ub-dividido {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.ub-dividido__lado {
	align-self: start;
	position: sticky;
	top: calc(84px + var(--wp--preset--spacing--l));
}

@media (max-width: 900px) {
	.ub-dividido {
		grid-template-columns: 1fr;
	}

	/* Pegado arriba solo tiene sentido con dos columnas: apilado, dejaría el
	   titular flotando sobre su propio texto. */
	.ub-dividido__lado {
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ub-dividido__lado {
		position: static;
	}
}

.ub-parrafo {
	line-height: 1.7;
	margin: 0 0 var(--wp--preset--spacing--m);
	max-width: 68ch;
}

.ub-parrafo:last-child {
	margin-bottom: 0;
}

.ub-parrafo--destacado {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
}

.ub-nota {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin: var(--wp--preset--spacing--m) 0 0;
}

/* Frase destacada: el argumento central de la página, con una barra de acento
   a la izquierda. Una sola por página, o deja de destacar nada. */
.ub-destacado {
	border-left: 3px solid var(--wp--preset--color--accent);
	padding-left: clamp(1.25rem, 3vw, 2.5rem);
}

.ub-destacado__texto {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 0;
	max-width: 28ch;
}

.ub-destacado__pie {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--lead);
	margin: var(--wp--preset--spacing--s) 0 0;
}

/* Ficha de misión/visión: más aire y la etiqueta arriba en monoespaciada. */
.ub-ficha--alta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
}

.ub-ficha__etiqueta {
	color: var(--wp--preset--color--accent);
	margin: 0;
}

/* Variante ancha: el bloque destacado manda y la ficha lateral acompaña. */
.ub-dividido--ancho {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
	align-items: center;
}

@media (max-width: 900px) {
	.ub-dividido--ancho {
		grid-template-columns: 1fr;
	}
}

.ub-sello {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ub-sello__icono {
	height: 3rem;
	margin-bottom: 0.25rem;
	width: 3rem;
}

.ub-sello__nombre {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin: 0;
}

/* Cierre de página: titular a la izquierda, acciones a la derecha. */
.ub-bloque--cierre {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.ub-bloque--cierre .ub-seccion__intro {
	color: var(--wp--preset--color--muted-invert);
}

.ub-cierre {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--l);
	grid-template-columns: minmax(0, 1fr) auto;
}

.ub-cierre__acciones {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--m);
	margin: 0;
}

.ub-enlace-fuerte {
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ub-enlace-fuerte:hover {
	text-decoration: underline;
}

@media (max-width: 782px) {
	.ub-cierre {
		grid-template-columns: 1fr;
	}
}

/* Pastillas compactas para una banda lateral estrecha. */
.ub-chips--compacto > li {
	font-size: var(--wp--preset--font-size--x-small);
	padding: 0.35rem 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Tarjetas de servicio — mismo tratamiento que las fichas             */
/* ------------------------------------------------------------------ */

/* El relleno `l` fijo dejaba las tarjetas de cuatro en fila con el texto
   partido en demasiadas líneas. Escala con el ancho disponible. */
.ub-ficha {
	padding: clamp(1.25rem, 2vw, 1.9rem);
}

.ub-card--servicio {
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ub-card--servicio::before {
	background: linear-gradient(180deg, var(--wp--preset--color--accent), var(--wp--preset--color--highlight));
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.25s ease;
	width: 3px;
}

.ub-card--servicio:hover {
	box-shadow: var(--ub-sombra-2);
	transform: translateY(-2px);
}

.ub-card--servicio:hover::before {
	transform: scaleY(1);
}

/* El icono manda más: tinte de acento en vez de gris, y algo más grande. */
.ub-card__icono {
	background-color: rgba(194, 65, 12, 0.07);
	border-color: rgba(194, 65, 12, 0.16);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 7%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
	height: 3rem;
	width: 3rem;
}

.ub-card:hover .ub-card__icono {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------ */
/* Banda de cifras                                                     */
/* ------------------------------------------------------------------ */

/* Las cifras son el único dato duro de la página: merecen la tipografía de
   titulares y un tamaño que se lea de lejos, no el cuerpo de texto. */
.ub-stat__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.04em;
	line-height: 1;
}

/* Filetes entre columnas: agrupan las tres cifras como una sola unidad en vez
   de tres párrafos sueltos. Solo entre ellas, nunca en los extremos. */
@media (min-width: 782px) {
	.ub-grid > .wp-block-column + .wp-block-column:has(.ub-stat__value) {
		border-left: 1px solid var(--wp--preset--color--border);
	}
}

/* ------------------------------------------------------------------ */
/* Blog — listado y entrada                                            */
/* ------------------------------------------------------------------ */

/* El listado era una columna vertical con imágenes grandes: sin fotos —que es
   el caso hoy— quedaba como un documento de texto. En rejilla de tarjetas se
   escanea, y funciona igual con imagen o sin ella. */
.ub-lista-posts .wp-block-post-template {
	gap: var(--wp--preset--spacing--m) !important;
}

.ub-lista-posts .wp-block-post-template > li {
	display: flex;
}

.ub-post {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ub-post::before {
	background: linear-gradient(180deg, var(--wp--preset--color--accent), var(--wp--preset--color--highlight));
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.25s ease;
	width: 3px;
	z-index: 2;
}

.ub-post:hover {
	box-shadow: var(--ub-sombra-2);
	transform: translateY(-2px);
}

.ub-post:hover::before {
	transform: scaleY(1);
}

.ub-post__imagen {
	margin: 0 !important;
}

.ub-post__imagen img {
	display: block;
	height: 190px;
	object-fit: cover;
	width: 100%;
}

/* `margin-top:auto` en la fecha la deja abajo del todo: con titulares de
   distinto largo, todas las fechas quedan alineadas entre tarjetas. */
.ub-post__cuerpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--wp--preset--spacing--m);
}

.ub-post__categoria {
	color: var(--wp--preset--color--accent) !important;
	margin: 0 0 0.6rem !important;
}

.ub-post__categoria a {
	color: inherit;
	text-decoration: none;
}

.ub-post__titulo {
	font-size: var(--wp--preset--font-size--lead) !important;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0 !important;
}

.ub-post__titulo a {
	color: inherit;
	text-decoration: none;
}

.ub-post:hover .ub-post__titulo a {
	color: var(--wp--preset--color--accent);
}

.ub-post__extracto {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	margin: 0.6rem 0 0 !important;
}

.ub-post__extracto .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: none;
}

.ub-post__fecha {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	margin: var(--wp--preset--spacing--m) 0 0 !important;
	padding-top: var(--wp--preset--spacing--s);
	border-top: 1px solid var(--wp--preset--color--haze);
	margin-top: auto !important;
}

/* Paginación: números como pastillas, coherente con el resto del sitio. */
.ub-paginacion {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--l);
}

.ub-paginacion .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.4rem;
}

.ub-paginacion .page-numbers {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	display: inline-flex;
	justify-content: center;
	min-width: 2.4rem;
	padding: 0.4rem 0.6rem;
	text-decoration: none;
}

.ub-paginacion .page-numbers.current {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.ub-paginacion .wp-block-query-pagination-previous,
.ub-paginacion .wp-block-query-pagination-next {
	font-weight: 600;
	text-decoration: none;
}

/* Entrada: columna de lectura algo más ancha que el resto y con más
   interlineado. Un artículo se lee seguido; una página de servicio se escanea. */
.ub-entrada__meta {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
}

.ub-entrada__cuerpo {
	line-height: 1.75;
}

.ub-entrada__cuerpo > p {
	margin-bottom: var(--wp--preset--spacing--m);
}

.ub-entrada__cuerpo > h2,
.ub-entrada__cuerpo > h3 {
	margin-top: var(--wp--preset--spacing--xl);
}

/* ------------------------------------------------------------------ */
/* Chat de WhatsApp                                                    */
/* ------------------------------------------------------------------ */

/* El verde es el de la marca WhatsApp: aquí no aplica la paleta del tema,
   porque el botón se reconoce justamente por ese color. */
.ub-wa {
	--ub-wa-verde: #25D366;
	--ub-wa-verde-oscuro: #128C7E;
	bottom: clamp(1rem, 3vw, 1.75rem);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	z-index: 200;
}

.ub-wa__boton {
	align-items: center;
	background-color: var(--ub-wa-verde);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(11, 18, 32, 0.22);
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 3.5rem;
	justify-content: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	width: 3.5rem;
}

.ub-wa__boton .ub-icono {
	height: 1.85rem;
	width: 1.85rem;
}

.ub-wa__boton:hover {
	box-shadow: 0 6px 20px rgba(11, 18, 32, 0.28);
	transform: scale(1.05);
}

/* Panel. `hidden` lo mantiene fuera del árbol de accesibilidad mientras está
   cerrado; la animación solo entra al abrirlo. */
.ub-wa__panel[hidden] {
	display: none;
}

.ub-wa__panel {
	animation: ub-wa-entrar 0.18s ease-out;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(11, 18, 32, 0.18);
	overflow: hidden;
	width: min(20rem, calc(100vw - 2rem));
}

@keyframes ub-wa-entrar {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ub-wa__panel {
		animation: none;
	}
}

.ub-wa__cabecera {
	align-items: center;
	background-color: var(--ub-wa-verde-oscuro);
	color: #fff;
	display: flex;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
}

.ub-wa__avatar {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	display: inline-flex;
	height: 2.4rem;
	justify-content: center;
	width: 2.4rem;
}

.ub-wa__avatar .ub-icono {
	height: 1.35rem;
	width: 1.35rem;
}

.ub-wa__nombre {
	font-weight: 600;
	margin: 0;
}

.ub-wa__estado {
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0.1rem 0 0;
	opacity: 0.85;
}

.ub-wa__estado.is-abierto::before {
	background-color: #6EE7A8;
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 7px;
	margin-right: 0.4rem;
	width: 7px;
}

.ub-wa__cerrar {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	margin-left: auto;
	padding: 0.15rem 0.35rem;
}

/* Fondo de conversación: la trama tenue que todo el mundo asocia a WhatsApp,
   hecha con un degradado para no cargar ninguna imagen. */
.ub-wa__cuerpo {
	background-color: #ECE5DD;
	background-image: radial-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px);
	background-size: 14px 14px;
	padding: 1.1rem 1rem;
}

.ub-wa__globo {
	background-color: #fff;
	border-radius: 0 10px 10px 10px;
	box-shadow: 0 1px 2px rgba(11, 18, 32, 0.12);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	margin: 0;
	padding: 0.7rem 0.85rem;
}

.ub-wa__cta {
	align-items: center;
	background-color: var(--ub-wa-verde);
	color: #073B24;
	display: flex;
	font-weight: 600;
	gap: 0.5rem;
	justify-content: center;
	padding: 0.85rem;
	text-decoration: none;
}

.ub-wa__cta .ub-icono {
	height: 1.15rem;
	width: 1.15rem;
}

.ub-wa__cta:hover {
	background-color: #1FBE5B;
}

/* En móvil el botón sube para no taparse con la barra de navegación del
   navegador ni con el pie. */
@media (max-width: 599px) {
	.ub-wa {
		bottom: 0.9rem;
		right: 0.9rem;
	}

	.ub-wa__boton {
		height: 3.1rem;
		width: 3.1rem;
	}
}

@media print {
	.ub-wa {
		display: none;
	}
}

/* Acceso a WhatsApp desde la página de contacto, para quien no quiere
   rellenar un formulario. */
.ub-contacto__wa {
	align-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--m);
	padding: 0.6rem 0.9rem;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.ub-contacto__wa .ub-icono {
	color: #25D366;
	height: 1.15rem;
	width: 1.15rem;
}

.ub-contacto__wa:hover {
	border-color: #25D366;
	color: #128C7E;
}

/* ------------------------------------------------------------------ */
/* Página de un servicio o módulo                                      */
/* ------------------------------------------------------------------ */

/* Los mismos puntos de la tarjeta, pero a tamaño de lectura: en la ficha
   del módulo dejan de ser un resumen escaneable y pasan a ser el contenido
   principal de la página. */
.ub-detalle__lista {
	gap: 0.9rem;
}

.ub-detalle__lista li {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	padding-left: 1.5rem;
}

.ub-detalle__lista li::before {
	height: 7px;
	top: 0.6em;
	width: 7px;
}