/*
Theme Name: Sara Theme
Template: hello-elementor
Description: Child theme de Hello Elementor para el sitio de Sara Avilés.
Author: Sara Avilés
Version: 2.17.1
Text Domain: sara-theme
*/

/* ==========================================================================
   SISTEMA DE DISEÑO — SARA AVILÉS
   --------------------------------------------------------------------------
   Portado del diseño de Lovable (export del 2026-08-11).

   IDENTIDAD NUEVA: editorial y clara. Fondo crema, morado como color
   principal, lila y lavanda de apoyo, oro solo como acento sobre fondos
   oscuros. Reemplaza la identidad oscura de la 1.x (negro + morado
   eléctrico + turquesa), que ya no se usa.

   --------------------------------------------------------------------------
   DE DÓNDE SALEN LOS COLORES

   Lovable define su paleta en oklch y deja hex en los comentarios. Esos hex
   NO coinciden con su propio oklch — el principal, por ejemplo, decía
   #4A235A pero lo que el navegador realmente pinta es #3F0F49, bastante más
   oscuro. Los valores de acá salen de convertir el oklch real, que es lo que
   se ve en pantalla. Los hex de los comentarios de Lovable están mal;
   no usarlos como referencia.

   Toda la paleta entra en gama sRGB, así que el hex es exacto: se ve igual
   que el oklch original, y además funciona en navegadores viejos.
   ========================================================================== */

:root {

	/* --- Paleta de marca --------------------------------------------------
	   Entre paréntesis, el oklch original de Lovable del que sale cada hex. */

	/* Morado de marca. Reemplaza al ciruela #3F0F49 del diseño de Lovable.
	   El nombre de la variable y de las clases (.sara-seccion-ciruela) se
	   mantienen a propósito: son la interfaz pública del theme y hay páginas
	   y widgets que dependen de esos nombres. */
	--sara-ciruela: #652AD7;        /* morado principal de marca */
	--sara-ciruela-media: #7E4CDD;  /* hover de botones: 8% más claro.
	                                   No aclarar más: el texto blanco encima
	                                   deja de cumplir contraste. */
	--sara-lila: #9B5BB6;           /* oklch(0.58 0.15 315) — decorativo */
	--sara-lavanda: #E0C6ED;        /* oklch(0.86 0.06 315) */
	--sara-crema: #FBF8F3;          /* oklch(0.98 0.007 85) — fondo */
	--sara-carbon: #1B1A1F;         /* oklch(0.22 0.01 300) — texto */
	--sara-bruma: #F1EDF3;          /* oklch(0.95 0.01 315) */
	--sara-oro: #F0CE63;            /* acento. Aclarado respecto del #EDC23E
	                                   original: sobre el morado nuevo aquel
	                                   daba 4.32:1 y el mínimo es 4.5:1. */

	/* Lila oscurecido para TEXTO. El lila decorativo (#9B5BB6) sobre crema
	   da 4.34:1 y el mínimo accesible es 4.5:1. Este da 4.72:1.
	   Regla: texto -> --sara-lila-texto. Bordes, íconos, hovers -> --sara-lila. */
	--sara-lila-texto: #9555B0;

	/* --- Tokens semánticos ------------------------------------------------
	   Nombrados por su función, no por su color. Si algún día cambia la
	   marca, se tocan estos y el resto del CSS sigue funcionando. */

	--sara-fondo: var(--sara-crema);
	--sara-texto: var(--sara-carbon);
	--sara-texto-suave: #59525E;      /* oklch(0.45 0.02 310) */
	--sara-tarjeta-fondo: #ffffff;
	--sara-borde: #E2DBE5;            /* oklch(0.9 0.015 315) */

	--sara-principal: var(--sara-ciruela);
	--sara-principal-texto: var(--sara-crema);  /* texto sobre ciruela */
	--sara-suave: var(--sara-bruma);
	--sara-acento-fondo: var(--sara-lavanda);

	/* --- Tipografía -------------------------------------------------------
	   Plus Jakarta Sans para títulos, Poppins para texto corrido. Se cargan
	   desde functions.php.

	   Pesos disponibles: Plus Jakarta Sans 600, 700 y 800. Poppins 400, 500
	   y 600. Son exactamente los que usa el diseño: pedir más es peso que el
	   visitante descarga sin necesidad, y pedir menos hace que el navegador
	   engrose o afine la letra por su cuenta, que se ve mal.

	   Si hace falta un peso nuevo, agregarlo TAMBIÉN a la URL de Google
	   Fonts en functions.php. Ponerlo solo acá no lo trae. */

	--sara-fuente-titulo: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
	--sara-fuente-texto: 'Poppins', ui-sans-serif, system-ui, sans-serif;

	/* Escala fluida: crece con el ancho de pantalla sin media queries.
	   Evita configurar tamaños por dispositivo en Elementor. */
	--sara-texto-sm: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
	--sara-texto-base: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
	--sara-texto-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--sara-texto-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--sara-texto-2xl: clamp(1.875rem, 1.6rem + 1.2vw, 2.25rem);
	--sara-texto-3xl: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem);

	/* --- Formas y ritmo --------------------------------------------------- */
	--sara-radio: 0.5rem;
	--sara-radio-lg: 0.75rem;
	--sara-radio-xl: 1rem;
	--sara-ancho: 76rem;             /* ancho máximo del contenido */
	--sara-transicion: 200ms ease;

	/* Cuánto crece una tarjeta al pasarle el cursor. Vive acá para que el
	   efecto sea el mismo en todo el sitio y se ajuste en un solo lugar.
	   1.02 es deliberadamente sutil: en una grilla de tarjetas pegadas, un
	   valor alto hace que la que crece se monte sobre las vecinas. */
	--sara-zoom: 1.02;

	/* --- Compatibilidad con la 1.x ---------------------------------------
	   Los widgets de Elementor que ya existen usan estos nombres. Se
	   mantienen apuntando al equivalente más cercano de la marca nueva, así
	   nada queda sin color. NO agregar variables nuevas acá: usar las de
	   arriba. Estas existen solo para no romper lo viejo.

	   Nota: --sara-morado-real y --sara-lila-real se eliminaron. Eran los
	   hex del Canva, referencia de una identidad que ya no se usa. */
	--sara-morado: var(--sara-ciruela);
	--sara-turquesa: var(--sara-lila-texto);
	--sara-negro: var(--sara-carbon);
	--sara-blanco: #ffffff;
	--sara-gris-claro: var(--sara-bruma);
	--sara-fuente: var(--sara-fuente-texto);
}

/* ==========================================================================
   CONTRASTE — LEER ANTES DE ELEGIR COLORES DE TEXTO
   --------------------------------------------------------------------------
   Medido contra WCAG AA (4.5:1 para texto normal):

     carbon     sobre crema    16.33:1  -> seguro para todo
     morado     sobre crema     6.92:1  -> seguro para todo
     crema      sobre morado    6.92:1  -> seguro (secciones oscuras)
     blanco     sobre morado    7.33:1  -> seguro (botones)
     oro        sobre morado     4.79:1  -> seguro para texto normal
     lila-texto sobre crema      4.72:1  -> seguro para texto normal
     lila       sobre crema      4.34:1  -> NO para texto. Solo decorativo.

   El oro es acento sobre fondos oscuros. Sobre crema no llega ni cerca:
   nunca usarlo para texto sobre fondo claro.
   ========================================================================== */

/* ==========================================================================
   BASE
   ========================================================================== */

body {
	font-family: var(--sara-fuente-texto);
	font-size: var(--sara-texto-base);
	font-weight: 400;
	line-height: 1.65;
	color: var(--sara-texto);
	background-color: var(--sara-fondo);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sara-fuente-titulo);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--sara-principal);
	text-wrap: balance; /* evita títulos con una palabra huérfana al final */
}

h1 { font-size: var(--sara-texto-3xl); font-weight: 800; line-height: 1.02; }
h2 { font-size: var(--sara-texto-2xl); font-weight: 700; }
h3 { font-size: var(--sara-texto-xl); font-weight: 600; }
h4 { font-size: var(--sara-texto-lg); font-weight: 600; }
h5 { font-size: var(--sara-texto-base); font-weight: 600; }
h6 { font-size: var(--sara-texto-sm); font-weight: 600; }

p {
	max-width: 68ch; /* largo de línea cómodo para leer */
}

a {
	color: var(--sara-lila-texto);
	text-underline-offset: 0.18em;
	transition: color var(--sara-transicion);
}

a:hover {
	color: var(--sara-principal);
}

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

/* ==========================================================================
   CLASES DE APOYO PARA ELEMENTOR
   --------------------------------------------------------------------------
   Se aplican desde Elementor en Avanzado -> Clases CSS, para no configurar
   estilos widget por widget.

   NO renombrar ni borrar: hay widgets del sitio que dependen de ellas.
   ========================================================================== */

/* --- Estructura -------------------------------------------------------- */

/* Contenedor de ancho editorial. El equivalente del container-editorial
   de Lovable: centra el contenido y lo limita a 76rem. */
.sara-contenedor {
	width: 100%;
	max-width: var(--sara-ancho);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Aire vertical estándar de sección. */
.sara-seccion {
	padding-block: clamp(4rem, 3rem + 4vw, 7rem);
}

/* --- Secciones por fondo ------------------------------------------------ */

.sara-seccion-crema {
	background-color: var(--sara-fondo);
	color: var(--sara-texto);
}

.sara-seccion-bruma {
	background-color: var(--sara-bruma);
	color: var(--sara-texto);
}

/* Sección oscura: ciruela con texto crema. Es el bloque de mayor contraste
   del sitio (conferencias, CTA final). */
.sara-seccion-ciruela {
	background-color: var(--sara-principal);
	color: var(--sara-principal-texto);
}

.sara-seccion-ciruela h1,
.sara-seccion-ciruela h2,
.sara-seccion-ciruela h3,
.sara-seccion-ciruela h4,
.sara-seccion-ciruela h5,
.sara-seccion-ciruela h6 {
	color: var(--sara-principal-texto);
}

.sara-seccion-ciruela p {
	color: color-mix(in srgb, var(--sara-principal-texto) 80%, transparent);
}

/* --- Texto -------------------------------------------------------------- */

/* Antetítulo en mayúsculas espaciadas. El recurso más reconocible del
   diseño: aparece arriba de casi todos los títulos de sección. */
.sara-antetitulo {
	display: block;
	font-family: var(--sara-fuente-titulo);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sara-lila-texto);
}

/* Sobre fondo ciruela el antetítulo va en oro. */
.sara-seccion-ciruela .sara-antetitulo {
	color: var(--sara-oro);
}

/* Título de display, para el hero. */
.sara-display {
	font-family: var(--sara-fuente-titulo);
	font-size: var(--sara-texto-3xl);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--sara-principal);
}

/* Texto secundario, más suave que el cuerpo. */
.sara-texto-suave {
	color: var(--sara-texto-suave);
}

/* --- Botones ------------------------------------------------------------ */

.sara-btn-principal,
.sara-btn-principal .elementor-button,
.sara-btn-contorno,
.sara-btn-contorno .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-family: var(--sara-fuente-texto);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--sara-transicion),
	            border-color var(--sara-transicion),
	            color var(--sara-transicion);
}

/* Botón sólido: la acción principal de cada sección. */
.sara-btn-principal,
.sara-btn-principal .elementor-button {
	background-color: var(--sara-principal) !important;
	color: var(--sara-principal-texto) !important;
	border: 1px solid var(--sara-principal);
}

.sara-btn-principal:hover,
.sara-btn-principal .elementor-button:hover {
	background-color: var(--sara-ciruela-media) !important;
	border-color: var(--sara-ciruela-media);
}

/* Botón de contorno: la acción secundaria. */
.sara-btn-contorno,
.sara-btn-contorno .elementor-button {
	background-color: transparent !important;
	color: var(--sara-principal) !important;
	border: 1px solid color-mix(in srgb, var(--sara-principal) 25%, transparent);
}

.sara-btn-contorno:hover,
.sara-btn-contorno .elementor-button:hover {
	background-color: color-mix(in srgb, var(--sara-principal) 5%, transparent) !important;
}

/* Variantes para usar DENTRO de una sección ciruela, donde los de arriba
   no se verían. */
.sara-seccion-ciruela .sara-btn-principal,
.sara-seccion-ciruela .sara-btn-principal .elementor-button {
	background-color: var(--sara-fondo) !important;
	color: var(--sara-principal) !important;
	border-color: var(--sara-fondo);
}

.sara-seccion-ciruela .sara-btn-principal:hover,
.sara-seccion-ciruela .sara-btn-principal .elementor-button:hover {
	background-color: var(--sara-bruma) !important;
	border-color: var(--sara-bruma);
}

.sara-seccion-ciruela .sara-btn-contorno,
.sara-seccion-ciruela .sara-btn-contorno .elementor-button {
	color: var(--sara-principal-texto) !important;
	border-color: color-mix(in srgb, var(--sara-principal-texto) 30%, transparent);
}

.sara-seccion-ciruela .sara-btn-contorno:hover,
.sara-seccion-ciruela .sara-btn-contorno .elementor-button:hover {
	background-color: color-mix(in srgb, var(--sara-principal-texto) 10%, transparent) !important;
}

/* --- Tarjetas ----------------------------------------------------------- */

.sara-tarjeta {
	background-color: var(--sara-tarjeta-fondo);
	color: var(--sara-texto);
	border: 1px solid var(--sara-borde);
	border-radius: var(--sara-radio-xl);
	padding: 2rem;
	transition: border-color var(--sara-transicion),
	            transform var(--sara-transicion),
	            box-shadow var(--sara-transicion);
}

.sara-tarjeta:hover {
	border-color: color-mix(in srgb, var(--sara-lila) 50%, transparent);
}

/* El zoom solo donde hay cursor de verdad. En una pantalla táctil el :hover
   se queda pegado después de tocar, y la tarjeta quedaría agrandada hasta que
   se toque otra cosa.

   Alcanza a las tarjetas de Enfoque, Servicios, Metodología, el catálogo y
   los bloques de Isa: todas comparten la clase. */
@media (hover: hover) {
	.sara-tarjeta:hover {
		transform: scale(var(--sara-zoom));
		box-shadow: 0 12px 28px -18px rgba(27, 26, 31, 0.30);
	}
}

/* Variante chica, para las tarjetas de pilares y metodología. */
.sara-tarjeta-sm {
	border-radius: var(--sara-radio-lg);
	padding: 1.5rem;
}

/* --- Dato destacado (los "+12 años" del bloque de estadísticas) ---------- */

.sara-dato {
	border-left: 2px solid var(--sara-lila);
	padding-left: 1.25rem;
}

.sara-dato__numero {
	font-family: var(--sara-fuente-titulo);
	font-size: clamp(2rem, 1.7rem + 1.2vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--sara-principal);
}

.sara-dato__etiqueta {
	margin-top: 0.5rem;
	font-size: var(--sara-texto-sm);
	line-height: 1.4;
	color: var(--sara-texto-suave);
}

/* --- Paso numerado (metodología: 01 Escuchar, 02 Analizar...) ------------ */

.sara-paso__numero {
	font-family: var(--sara-fuente-titulo);
	font-size: var(--sara-texto-sm);
	font-weight: 600;
	letter-spacing: 0.22em;
	color: var(--sara-lila-texto);
}

/* --- Forma decorativa --------------------------------------------------- */

.sara-forma-lila {
	background: linear-gradient(135deg, var(--sara-principal), var(--sara-lila));
	border-radius: var(--sara-radio-xl);
}

/* ==========================================================================
   ENCABEZADO
   --------------------------------------------------------------------------
   Mobile primero: el menú arranca oculto y se despliega con el botón. A
   partir de 60rem pasa a ser horizontal y el botón desaparece.

   El estado abierto/cerrado se lee del atributo aria-expanded del botón, el
   mismo que usa el lector de pantalla. Así no hay dos verdades que puedan
   quedar desincronizadas.
   ========================================================================== */

/* Link que aparece solo al navegar con teclado, para saltarse el menú. */
.sara-saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background-color: var(--sara-principal);
	color: var(--sara-principal-texto);
	border-radius: 0 0 var(--sara-radio) 0;
	font-weight: 600;
	text-decoration: none;
}

.sara-saltar:focus {
	left: 0;
}

.sara-encabezado {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: color-mix(in srgb, var(--sara-fondo) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--sara-borde);
}

.sara-encabezado__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.875rem;
}

/* --- Logo -----------------------------------------------------------------
   El archivo del logo es blanco sobre transparente, la versión para fondos
   oscuros. En el encabezado el fondo es crema, así que sería invisible.

   Se resuelve usándolo como MÁSCARA: la forma la aporta el canal alfa del
   archivo y el color lo pone background-color. Un filter no alcanza —
   brightness(0) lleva a negro, pero no hay forma simple de llegar a un
   morado concreto.
   -------------------------------------------------------------------------- */

.sara-encabezado__marca-enlace {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.sara-encabezado__logo {
	display: block;
	width: clamp(9rem, 18vw, 12rem);
	aspect-ratio: 690 / 145;
	background-color: var(--sara-principal);
	-webkit-mask-image: var(--sara-logo);
	mask-image: var(--sara-logo);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: left center;
	mask-position: left center;
	transition: background-color var(--sara-transicion);
}

.sara-encabezado__marca-enlace:hover .sara-encabezado__logo {
	background-color: var(--sara-ciruela-media);
}

/* Texto que solo leen los lectores de pantalla. El logo va como máscara, así
   que no hay <img> ni alt: sin esto, el enlace al inicio no tendría nombre. */
.sara-solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sara-encabezado__nombre {
	font-family: var(--sara-fuente-titulo);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sara-principal);
	text-decoration: none;
}

.sara-encabezado__marca img {
	max-height: 48px;
	width: auto;
}

/* --- Botón del menú (solo en pantallas chicas) --------------------------- */

.sara-encabezado__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.875rem;
	background: transparent;
	border: 1px solid var(--sara-borde);
	border-radius: 999px;
	font-family: var(--sara-fuente-texto);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sara-principal);
	cursor: pointer;
}

.sara-encabezado__toggle-icono {
	position: relative;
	display: block;
	width: 16px;
	height: 2px;
	background-color: currentColor;
}

.sara-encabezado__toggle-icono::before,
.sara-encabezado__toggle-icono::after {
	content: "";
	position: absolute;
	left: 0;
	width: 16px;
	height: 2px;
	background-color: currentColor;
}

.sara-encabezado__toggle-icono::before { top: -5px; }
.sara-encabezado__toggle-icono::after  { top: 5px; }

/* --- Navegación ---------------------------------------------------------- */

.sara-navegacion {
	display: none;
	width: 100%;
	padding-block: 0.5rem 1rem;
}

.sara-encabezado__toggle[aria-expanded="true"] + .sara-navegacion {
	display: block;
}

.sara-navegacion__lista {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sara-navegacion__lista a {
	display: block;
	padding: 0.625rem 0;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--sara-texto);
	text-decoration: none;
	transition: color var(--sara-transicion);
}

.sara-navegacion__lista a:hover,
.sara-navegacion__lista .current-menu-item > a {
	color: var(--sara-principal);
}

.sara-encabezado__cta {
	margin-top: 0.75rem;
}

@media (min-width: 60rem) {

	.sara-encabezado__toggle {
		display: none;
	}

	/* En escritorio el menú se muestra siempre, esté como esté el botón. */
	.sara-navegacion,
	.sara-encabezado__toggle[aria-expanded="true"] + .sara-navegacion {
		display: flex;
		align-items: center;
		gap: 2rem;
		width: auto;
		padding-block: 0;
	}

	.sara-navegacion__lista {
		flex-direction: row;
		align-items: center;
		gap: 1.75rem;
	}

	.sara-navegacion__lista a {
		padding: 0;
		font-size: 0.875rem;
	}

	.sara-encabezado__cta {
		margin-top: 0;
	}
}

/* ==========================================================================
   ENCABEZADO DE PÁGINA INTERNA — shortcode [sara_hero]
   ========================================================================== */

/* El contenedor conserva el ancho de 76rem para que el texto del hero
   arranque en la MISMA línea vertical que el resto de la página. Antes acá
   había un max-width de 52rem, y como el contenedor se centra solo, el hero
   quedaba corrido hacia adentro respecto de los títulos de abajo. El límite
   de línea va en el título y la bajada, que es donde hace falta. */
.sara-hero__interior {
	padding-block: clamp(3rem, 2.5rem + 3vw, 5.5rem);
}

.sara-hero__titulo {
	margin-top: 1rem;
	max-width: 52rem;
	font-size: var(--sara-texto-2xl);
	text-wrap: balance;
}

.sara-hero__texto {
	margin-top: 1.5rem;
	max-width: 46rem;
	font-size: var(--sara-texto-lg);
	line-height: 1.6;
	color: var(--sara-texto-suave);
}

/* ==========================================================================
   FORMULARIO — shortcode [sara_formulario]
   ========================================================================== */

.sara-formulario {
	background-color: var(--sara-tarjeta-fondo);
	border: 1px solid var(--sara-borde);
	border-radius: var(--sara-radio-xl);
	padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.sara-formulario__titulo {
	margin: 0 0 1.25rem;
	font-family: var(--sara-fuente-titulo);
	font-size: var(--sara-texto-lg);
	font-weight: 600;
	color: var(--sara-principal);
}

/* La trampa anti-robots. Se saca de la vista sin usar display:none, porque
   algunos bots detectan display:none y saltean el campo. */
.sara-formulario__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sara-formulario__campos {
	display: grid;
	gap: 1rem;
}

@media (min-width: 40rem) {
	.sara-formulario__campos:not(.sara-formulario__campos--compacto) {
		grid-template-columns: 1fr 1fr;
	}

	.sara-formulario__campo--ancho {
		grid-column: 1 / -1;
	}
}

.sara-formulario__campo {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}

.sara-formulario__campo label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sara-texto);
}

.sara-formulario__campo input,
.sara-formulario__campo select,
.sara-formulario__campo textarea {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	font-family: var(--sara-fuente-texto);
	font-size: 0.9375rem;
	color: var(--sara-texto);
	background-color: var(--sara-fondo);
	border: 1px solid var(--sara-borde);
	border-radius: var(--sara-radio);
	transition: border-color var(--sara-transicion);
}

.sara-formulario__campo input:focus,
.sara-formulario__campo select:focus,
.sara-formulario__campo textarea:focus {
	border-color: var(--sara-lila);
}

.sara-formulario__campo textarea {
	resize: vertical;
	min-height: 7rem;
}

.sara-formulario .sara-btn-principal {
	margin-top: 1.25rem;
	border: 0;
	cursor: pointer;
}

.sara-formulario__nota {
	margin-top: 1rem;
	max-width: none;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--sara-texto-suave);
}

/* --- Avisos de resultado ------------------------------------------------- */

.sara-formulario__aviso {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	border-radius: var(--sara-radio);
	border: 1px solid;
	font-size: 0.875rem;
	max-width: none;
}

.sara-formulario__aviso ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.sara-formulario__aviso p {
	margin: 0;
	max-width: none;
}

.sara-formulario__aviso--ok {
	color: #1F5136;
	background-color: #E8F5EE;
	border-color: #9ED2B6;
}

.sara-formulario__aviso--error {
	color: #7A1F2B;
	background-color: #FCEDEF;
	border-color: #E7A9B1;
}

/* ==========================================================================
   BLOQUE DE CONTACTO DIRECTO — shortcode [sara_datos_contacto]
   ========================================================================== */

.sara-contacto-directo {
	display: grid;
	gap: 2rem;
}

.sara-contacto-directo__lista {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--sara-texto);
	max-width: none;
}

.sara-enlace-fuerte {
	font-weight: 600;
	color: var(--sara-lila-texto);
	text-decoration: none;
}

.sara-enlace-fuerte:hover {
	color: var(--sara-principal);
}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

.sara-wa {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 200;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	background-color: #25D366; /* verde oficial de WhatsApp */
	color: #ffffff;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
	transition: transform var(--sara-transicion);
}

.sara-wa:hover {
	color: #ffffff;
	transform: translateY(-2px);
}

.sara-wa__icono {
	width: 1.75rem;
	height: 1.75rem;
}

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */

.sara-pie {
	margin-top: clamp(3rem, 2rem + 4vw, 6rem);
	background-color: var(--sara-principal);
	color: var(--sara-principal-texto);
}

.sara-pie__interior {
	display: grid;
	gap: 2.5rem;
	padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem);
}

@media (min-width: 48rem) {
	.sara-pie__interior {
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
		gap: 2rem;
	}
}

/* En el pie el logo va tal cual: es blanco y el fondo es morado, que es el
   contexto para el que fue hecho. */
.sara-pie__logo {
	display: block;
	width: clamp(11rem, 22vw, 15rem);
	height: auto;
}

.sara-pie__nombre {
	margin: 0;
	font-family: var(--sara-fuente-titulo);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	max-width: none;
}

.sara-pie__tagline {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: color-mix(in srgb, var(--sara-principal-texto) 85%, transparent);
	max-width: 34ch;
}

.sara-pie__rol {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--sara-principal-texto) 80%, transparent);
	max-width: 34ch;
}

/* Sobre ciruela, el antetítulo del pie va en oro. */
.sara-pie .sara-antetitulo {
	color: var(--sara-oro);
}

.sara-pie__lista {
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.sara-pie__lista li + li {
	margin-top: 0.5rem;
}

.sara-pie__lista a,
.sara-pie__legal a {
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--sara-principal-texto) 85%, transparent);
	text-decoration: none;
	transition: color var(--sara-transicion);
}

.sara-pie__lista a:hover,
.sara-pie__legal a:hover {
	color: var(--sara-principal-texto);
	text-decoration: underline;
}

.sara-pie__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	padding-block: 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--sara-principal-texto) 15%, transparent);
}

.sara-pie__legal p {
	margin: 0;
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--sara-principal-texto) 80%, transparent);
	max-width: none;
}

/* ==========================================================================
   REJILLAS Y PIEZAS COMPARTIDAS
   --------------------------------------------------------------------------
   Se usan en la página de inicio y quedan disponibles para las páginas
   internas que se armen en Elementor.
   ========================================================================== */

.sara-rejilla {
	display: grid;
	gap: 1.25rem;
}

.sara-rejilla--separada {
	margin-top: 3rem;
}

@media (min-width: 40rem) {
	.sara-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
	.sara-rejilla--3 { grid-template-columns: repeat(3, 1fr); }
	.sara-rejilla--4 { grid-template-columns: repeat(2, 1fr); }
	.sara-rejilla--6 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
	.sara-rejilla--4 { grid-template-columns: repeat(4, 1fr); }
	.sara-rejilla--6 { grid-template-columns: repeat(6, 1fr); }
}

/* Título de sección con un link alineado a la derecha. */
.sara-encabezado-seccion {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 48rem) {
	.sara-encabezado-seccion {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.sara-tarjeta__titulo {
	margin: 0 0 0.75rem;
	font-size: var(--sara-texto-lg);
	font-weight: 600;
	color: var(--sara-principal);
}

.sara-tarjeta p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* --- Marco de imagen ---------------------------------------------------- */

.sara-marco {
	overflow: hidden;
	border: 1px solid var(--sara-borde);
	border-radius: var(--sara-radio-xl);
}

.sara-marco__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sara-marco--sombra {
	box-shadow: 0 30px 80px -40px rgba(101, 42, 215, 0.30);
}

/* Marco invisible para imágenes recortadas sin fondo.
   Un borde, una sombra y unas esquinas redondeadas alrededor de una figura
   recortada dibujan el rectángulo que la imagen justamente no tiene: se ve
   como si la persona flotara dentro de una caja vacía.
   Se resuelve con :has() para no tener que tocar la plantilla. En navegadores
   sin soporte el marco sigue ahí, que es un detalle estético, no una falla. */
.sara-marco:has(.sara-marco__img--recorte) {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.sara-marco--claro {
	border-color: color-mix(in srgb, var(--sara-principal-texto) 12%, transparent);
}

/* La portada del cuento se muestra entera sobre este celeste, no recortada.
   El espacio interior evita que toque los bordes: así el celeste se lee como
   un fondo elegido y no como un error de encuadre. */
.sara-marco--isa {
	background-color: #C7EAFF; /* oklch(0.92 0.05 240) */
	padding: clamp(1.5rem, 5%, 3rem);
}

/* --- Foto todavía no cargada --------------------------------------------
   Ocupa exactamente el espacio de la foto que va a ir ahí, así el diseño no
   se mueve cuando Sara la suba. */
.sara-foto-pendiente {
	display: grid;
	place-items: center;
	width: 100%;
	padding: 1.5rem;
	text-align: center;
	background: repeating-linear-gradient(
		45deg,
		var(--sara-bruma),
		var(--sara-bruma) 10px,
		var(--sara-fondo) 10px,
		var(--sara-fondo) 20px
	);
	color: var(--sara-texto-suave);
}

.sara-foto-pendiente__texto {
	font-family: var(--sara-fuente-titulo);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
}

.sara-foto-pendiente small {
	font-weight: 400;
	opacity: 0.7;
}

/* ==========================================================================
   PÁGINA DE INICIO
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------- */

.sara-inicio__hero {
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--sara-bruma) 50%, transparent),
		var(--sara-fondo) 60%);
	overflow: hidden;
}

.sara-inicio__hero-rejilla {
	display: grid;
	gap: 3rem;
}

@media (min-width: 64rem) {
	.sara-inicio__hero-rejilla {
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
		gap: 4rem;
	}
}

.sara-inicio__titulo {
	margin: 1.5rem 0 0;
}

.sara-inicio__entrada {
	margin-top: 1.5rem;
	max-width: 36rem;
	font-size: var(--sara-texto-lg);
	line-height: 1.6;
	color: var(--sara-texto-suave);
}

.sara-inicio__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.sara-inicio__acciones--centradas {
	justify-content: center;
}

.sara-inicio__rol {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sara-borde);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sara-texto-suave);
	max-width: none;
}

.sara-inicio__retrato {
	position: relative;
}

/* El halo lavanda detrás del retrato. */
.sara-inicio__resplandor {
	position: absolute;
	inset: -1.5rem;
	z-index: -1;
	border-radius: 2rem;
	background-color: color-mix(in srgb, var(--sara-lavanda) 50%, transparent);
	filter: blur(2rem);
}

.sara-inicio__tarjeta-flotante {
	display: none;
}

@media (min-width: 48rem) {
	.sara-inicio__tarjeta-flotante {
		display: block;
		position: absolute;
		left: -1rem;
		bottom: -1.5rem;
		max-width: 15rem;
		padding: 1rem;
		background-color: color-mix(in srgb, var(--sara-fondo) 95%, transparent);
		backdrop-filter: blur(6px);
		border: 1px solid var(--sara-borde);
		border-radius: var(--sara-radio-lg);
		box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.35);
	}

	.sara-inicio__tarjeta-flotante p {
		margin: 0.35rem 0 0;
		font-size: 0.8125rem;
		line-height: 1.45;
		font-weight: 500;
		max-width: none;
	}
}

/* --- 2. Enfoque ---------------------------------------------------------- */

.sara-inicio__enfoque {
	border-block: 1px solid color-mix(in srgb, var(--sara-borde) 60%, transparent);
}

.sara-inicio__enfoque-rejilla {
	display: grid;
	gap: 3rem;
}

@media (min-width: 64rem) {
	.sara-inicio__enfoque-rejilla {
		grid-template-columns: 1fr 1.1fr;
		gap: 3.5rem;
	}
}

.sara-inicio__enfoque h2 {
	margin: 1rem 0 1.5rem;
}

/* --- 3. Servicios -------------------------------------------------------- */

.sara-servicio {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
}

.sara-servicio__cta {
	align-self: flex-start;
}

/* --- 4. Datos ------------------------------------------------------------ */

.sara-inicio__datos {
	padding-block: clamp(3rem, 2.5rem + 2vw, 4rem);
}

/* --- 5. Sobre Sara ------------------------------------------------------- */

.sara-inicio__sobre {
	display: grid;
	gap: 3rem;
}

/* En móvil el texto va primero y la foto debajo. Estas dos reglas tienen que
   ir ANTES del media query: si van después, lo pisan y el orden de escritorio
   nunca se aplica. */
.sara-inicio__sobre-foto { order: 2; }
.sara-inicio__sobre-texto { order: 1; }

@media (min-width: 64rem) {
	.sara-inicio__sobre {
		grid-template-columns: 1fr 1.2fr;
		align-items: center;
	}

	/* En pantalla ancha la foto pasa a la izquierda. */
	.sara-inicio__sobre-foto { order: 1; }
	.sara-inicio__sobre-texto { order: 2; }
}

.sara-inicio__sobre-texto h2 {
	margin: 1rem 0 1.5rem;
}

.sara-inicio__sobre-texto .sara-btn-contorno {
	margin-top: 1rem;
}

/* --- 6. Metodología ------------------------------------------------------ */

.sara-inicio__titulo-ancho {
	max-width: 44rem;
	margin: 1rem 0 0;
}

.sara-pasos {
	margin-block: 3rem 0;
	padding: 0;
	list-style: none;
}

.sara-pasos .sara-tarjeta__titulo {
	margin-top: 1rem;
}

/* --- 7. Conferencias ----------------------------------------------------- */

.sara-inicio__speaker {
	display: grid;
	gap: 3rem;
}

@media (min-width: 64rem) {
	.sara-inicio__speaker {
		grid-template-columns: 1.1fr 1fr;
		align-items: center;
	}
}

.sara-inicio__speaker h2 {
	margin: 1rem 0 1.5rem;
	max-width: 34rem;
}

.sara-charlas {
	display: grid;
	gap: 0.75rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--sara-principal-texto) 85%, transparent);
}

@media (min-width: 40rem) {
	.sara-charlas {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Cada tema en su propio contenedor.
   ---------------------------------------------------------------------------
   El contenedor se define con BORDE y no con un relleno claro. Medido: un
   fondo blanco translúcido sobre el morado aclara lo que hay detrás del
   texto, y con apenas 8% la viñeta dorada cae a 4.10:1, por debajo del
   mínimo. Con borde, el fondo sigue siendo el morado de la sección y el
   contraste se mantiene en 5.41:1 el texto y 4.79:1 la viñeta.

   Por lo mismo, el relleno del hover OSCURECE en vez de aclarar: oscurecer
   sube el contraste. Al 10% de negro el texto sube a 6.15:1. */
.sara-charlas li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.75rem 1rem 0.75rem 0.875rem;
	border: 1px solid color-mix(in srgb, var(--sara-principal-texto) 18%, transparent);
	border-radius: var(--sara-radio-lg);
	line-height: 1.4;
	transition: transform var(--sara-transicion),
	            border-color var(--sara-transicion),
	            background-color var(--sara-transicion),
	            box-shadow var(--sara-transicion);
}

/* La viñeta pasa de ::before absoluto a un elemento del flex: así el texto
   de dos líneas alinea contra el borde en vez de meterse debajo del punto. */
.sara-charlas li::before {
	content: "";
	flex-shrink: 0;
	width: 5px;
	height: 5px;
	margin-top: 0.5em;
	border-radius: 999px;
	background-color: var(--sara-oro);
	transition: transform var(--sara-transicion);
}

/* El zoom solo donde hay cursor de verdad. En una pantalla táctil el :hover
   se queda pegado después de tocar, y el contenedor quedaría agrandado hasta
   que se toque otra cosa. */
@media (hover: hover) {
	.sara-charlas li:hover {
		/* Mismo gesto que las tarjetas: solo escala, sin desplazamiento
		   vertical. Antes llevaba un translateY que hacía que este bloque se
		   comportara distinto al resto del sitio. */
		transform: scale(var(--sara-zoom));
		border-color: var(--sara-oro);
		background-color: color-mix(in srgb, #000 10%, transparent);
		/* La sombra es más marcada que la de las tarjetas a propósito: sobre
		   el morado, la sombra suave del fondo crema no se vería. */
		box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.55);
	}

	.sara-charlas li:hover::before {
		transform: scale(1.6);
	}
}

/* --- 8. Testimonios ------------------------------------------------------ */

.sara-testimonio {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin: 0;
}

.sara-testimonio__cita {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--sara-texto);
}

.sara-testimonio__pie {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--sara-borde);
}

.sara-testimonio__nombre {
	margin: 0;
	font-family: var(--sara-fuente-titulo);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sara-principal);
}

.sara-testimonio__cargo {
	margin: 0.125rem 0 0;
	font-size: 0.75rem;
	color: var(--sara-texto-suave);
}

.sara-testimonio__servicio {
	margin: 0.5rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sara-lila-texto);
}

/* --- 9. Clientes --------------------------------------------------------- */

.sara-inicio__clientes {
	padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.sara-inicio__clientes-titulo {
	text-align: center;
}

.sara-cliente {
	display: grid;
	place-items: center;
	height: 4rem;
	padding: 0.5rem;
	border: 1px dashed var(--sara-borde);
	border-radius: var(--sara-radio);
	font-size: 0.75rem;
	text-align: center;
	color: var(--sara-texto-suave);
}

.sara-cliente img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

/* --- 10. Isa y la Red Segura --------------------------------------------- */

.sara-inicio__isa {
	display: grid;
	gap: 3rem;
}

@media (min-width: 64rem) {
	.sara-inicio__isa {
		grid-template-columns: 1fr 1.2fr;
		align-items: center;
	}
}

/* Azul propio del proyecto Isa, distinto de la paleta de Sara.
   Oscurecido respecto del original: el de Lovable daba 4.46:1 sobre crema y
   el mínimo accesible es 4.5:1. Este da 4.83:1. */
.sara-antetitulo--isa {
	color: #0073B3;
}

.sara-inicio__isa h2 {
	margin: 1rem 0 1.5rem;
	max-width: 34rem;
}

/* --- 11. Captura --------------------------------------------------------- */

.sara-inicio__captura {
	display: grid;
	gap: 3rem;
}

@media (min-width: 64rem) {
	.sara-inicio__captura {
		grid-template-columns: 1fr 1.1fr;
	}
}

.sara-inicio__captura h2 {
	margin: 1rem 0 1.5rem;
	max-width: 30rem;
}

/* --- 12. Cierre ---------------------------------------------------------- */

.sara-inicio__cierre {
	text-align: center;
}

.sara-inicio__cierre-titulo {
	max-width: 46rem;
	margin: 1rem auto 0;
}

.sara-inicio__cierre-texto {
	max-width: 40rem;
	margin: 1.5rem auto 0;
}

/* ==========================================================================
   PIEZAS DE LAS PÁGINAS INTERNAS
   --------------------------------------------------------------------------
   Las dibujan los shortcodes de sara-features. Ver SARA-PAGINAS.md.
   ========================================================================== */

/* --- Listas — shortcode [sara_lista] ------------------------------------- */

.sara-lista {
	display: grid;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--sara-texto);
	max-width: none;
}

@media (min-width: 40rem) {
	.sara-lista--dos {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Estilo "barra": línea lila al costado. */
.sara-lista--barra li {
	border-left: 2px solid var(--sara-lila);
	padding-left: 1rem;
}

/* Estilo "caja": cada punto en su recuadro. */
.sara-lista--caja li {
	padding: 0.75rem 1rem;
	background-color: var(--sara-tarjeta-fondo);
	border: 1px solid var(--sara-borde);
	border-radius: var(--sara-radio);
	font-size: 0.875rem;
}

/* Estilo "check": tilde lila al inicio. */
.sara-lista--check li {
	position: relative;
	padding-left: 1.75rem;
}

.sara-lista--check li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--sara-lila-texto);
}

/* Estilo "numerada": 01, 02, 03... */
.sara-lista--numerada li {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1rem;
	background-color: var(--sara-bruma);
	border: 1px solid var(--sara-borde);
	border-radius: var(--sara-radio-lg);
}

.sara-lista__numero {
	flex-shrink: 0;
	font-family: var(--sara-fuente-titulo);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--sara-lila-texto);
}

/* --- Catálogo — shortcode [sara_catalogo] -------------------------------- */

/* La tarjeta entera es un enlace. El subrayado se quita con un selector
   descendente porque el theme padre subraya los enlaces del contenido con
   `.page-content a`, que le gana a una clase sola. */
.sara-catalogo__item,
.page-content .sara-catalogo__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	text-decoration: none;
	color: var(--sara-texto);
}

.sara-catalogo__item:hover,
.page-content .sara-catalogo__item:hover {
	color: var(--sara-texto);
	text-decoration: none;
}

.sara-catalogo__publico {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--sara-lila-texto);
}

.sara-catalogo__item .sara-tarjeta__titulo {
	margin: 0.25rem 0 0;
}

.sara-catalogo__cta {
	margin-top: auto;
	padding-top: 1.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sara-principal);
}

/* --- Cierre — shortcode [sara_cta] --------------------------------------- */

.sara-cta {
	text-align: center;
}

.sara-cta__titulo {
	max-width: 42rem;
	margin: 0 auto;
}

.sara-cta__texto {
	max-width: 36rem;
	margin: 1rem auto 0;
	color: var(--sara-texto-suave);
}

/* Sobre ciruela el texto suave no se leería: se aclara. */
.sara-seccion-ciruela .sara-cta__texto {
	color: color-mix(in srgb, var(--sara-principal-texto) 80%, transparent);
}

.sara-cta__accion {
	margin: 2rem 0 0;
	max-width: none;
}

/* --- Cita destacada — shortcode [sara_cita] ------------------------------ */

.sara-cita {
	margin: 2rem 0 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--sara-lila);
	font-family: var(--sara-fuente-titulo);
	font-size: var(--sara-texto-lg);
	/* Peso explícito: de la fuente de títulos solo se cargan 600, 700 y 800.
	   Sin esto heredaría 400, que no existe, y el navegador usaría otro. */
	font-weight: 600;
	font-style: italic;
	line-height: 1.5;
	color: var(--sara-principal);
}

/* ==========================================================================
   SECCIONES DENTRO DE UNA PÁGINA DE WORDPRESS
   --------------------------------------------------------------------------
   La página de inicio (front-page.php) pone sus secciones sueltas en el body,
   así que ocupan todo el ancho. En una página normal, en cambio, el contenido
   va dentro de .page-content, que está centrado y con ancho limitado: las
   secciones de color quedaban como recuadros flotando en el medio en vez de
   bandas de lado a lado.

   Esto las saca de ese ancho. El truco: se estiran a todo el viewport y se
   corrige el centrado con un margen negativo calculado.
   ========================================================================== */

/* Hello Elementor anida dos envoltorios: main.site-main y, adentro,
   .page-content. Los dos limitan el ancho, así que el texto quedaba corrido
   respecto del hero y de las secciones a ancho completo.
   Se anula el de afuera y se deja UN solo contenedor, con las mismas medidas
   que .sara-contenedor, para que todo el sitio alinee en la misma línea. */
/* El selector lleva `main` además de las dos clases a propósito. Elementor
   define el ancho de contenido de su kit (1140px por defecto) sobre
   .site-main, y su hoja se carga DESPUÉS de esta. Con la misma especificidad
   ganaba Elementor por orden de aparición; sumando el nombre de la etiqueta,
   esta regla gana siempre sin necesidad de !important. */
.sara-principal main.site-main {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.page-content {
	width: 100%;
	max-width: var(--sara-ancho);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.page-content .sara-hero,
.page-content .sara-cta {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* `clip` y no `hidden`: hidden convierte al elemento en contenedor de scroll
   y rompe el position:sticky del encabezado. */
.sara-principal {
	overflow-x: clip;
}

/* --- Aire entre lo que escribe Sara y los bloques ------------------------
   Los títulos que Sara escribe en el editor no traen clase. Los de los
   shortcodes sí (.sara-cta__titulo, .sara-hero__titulo) y ya tienen sus
   propios márgenes, por eso el :not([class]) los deja afuera: si no, les
   pisaría el espaciado. */

.page-content h2:not([class]) {
	margin: 3rem 0 1.25rem;
}

.page-content h3:not([class]) {
	margin: 2rem 0 0.75rem;
}

.page-content p:not([class]) {
	margin: 0 0 1.25rem;
}

/* ==========================================================================
   ARCO DE HERRAMIENTAS — shortcode [sara_orbita]
   --------------------------------------------------------------------------
   Fichas repartidas sobre un arco abierto abajo, con una frase en el centro.

   Cada ficha se coloca con tres transformaciones encadenadas: se la rota
   hasta su ángulo, se la empuja hacia afuera el radio, y se la contrarrota
   para que quede derecha. Cambiando --radio se agranda o achica todo el
   conjunto sin tocar nada más.
   ========================================================================== */

/* El arco deja un hueco natural abajo: la parte baja del cuadrado queda
   vacía porque el arco no cierra. Si además se le suma el aire estándar de
   sección, la separación con lo que sigue se vuelve enorme. Por eso el
   relleno inferior es mucho menor que el de arriba. */
.sara-orbita-seccion {
	overflow: hidden;
	padding-bottom: 0;
}

.sara-orbita {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 56rem;
	margin-inline: auto;

	/* Alto atado al radio, no a una proporción fija: así la caja acompaña al
	   arco cuando este se achica en pantallas chicas. La mitad del alto es
	   justo lo que necesita la ficha más alta (la de arriba del todo). */
	height: calc((var(--radio) + var(--ficha) / 2) * 2);

	/* El arco no cierra abajo: va de -140 a +140 grados. */
	--apertura: 280deg;
	/* Radio generoso a propósito: con uno más chico las fichas se apoyan
	   sobre la frase y el centro deja de respirar. */
	--radio: clamp(9.5rem, 34vw, 21rem);
	--ficha: clamp(3rem, 8vw, 5rem);

	/* Las fichas de abajo quedan a 0.766 del radio por debajo del centro
	   (el coseno de 140 grados). Todo lo que sobra entre ese punto y el borde
	   de la caja es aire muerto: se lo resta con margen negativo, y como la
	   sección recorta lo que se desborda, esas fichas quedan cortadas justo
	   por la mitad. Es la referencia: el arco se mete por debajo del corte. */
	margin-bottom: calc(var(--radio) * -0.234 - var(--ficha) / 2);
}

/* El anillo entero gira. Al ser un giro constante y muy lento, la lectura no
   se entorpece: se percibe como movimiento de fondo, no como algo que exige
   atención. */
.sara-orbita__anillo {
	position: absolute;
	inset: 0;
	animation: sara-orbitar 90s linear infinite;

	/* Las fichas se desvanecen hacia abajo, así entran y salen del corte en
	   vez de aparecer de golpe. Antes esto se hacía con una opacidad por
	   ficha, que con el anillo girando dejaba de tener sentido: una ficha
	   quedaba pálida arriba y opaca abajo. */
	-webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
	mask-image: linear-gradient(to bottom, #000 58%, transparent 96%);
}

/* Punto de anclaje sobre la circunferencia. No se ve: solo coloca. */
.sara-orbita__punto {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;

	--angulo: calc((360deg / var(--total)) * var(--i));

	transform:
		rotate(var(--angulo))
		translateY(calc(var(--radio) * -1))
		rotate(calc(var(--angulo) * -1));
}

/* La ficha contragira exactamente lo mismo que el anillo. Sin esto, a media
   vuelta los iconos quedarían de cabeza. */
.sara-orbita__ficha {
	display: grid;
	place-items: center;
	width: var(--ficha);
	height: var(--ficha);
	padding: calc(var(--ficha) * 0.18);
	background-color: #ffffff;
	border-radius: 28%;
	box-shadow: 0 10px 24px -12px rgba(27, 26, 31, 0.28),
	            0 2px 6px -2px rgba(27, 26, 31, 0.12);
	animation: sara-contraorbitar 90s linear infinite;
}

@keyframes sara-orbitar {
	to { transform: rotate(360deg); }
}

@keyframes sara-contraorbitar {
	to { transform: rotate(-360deg); }
}

/* Quieto para quien pidió menos movimiento. Anular el nombre desactiva la
   animación de verdad; la regla global solo acorta la duración, que acá
   dejaría el anillo congelado en una posición cualquiera. */
@media (prefers-reduced-motion: reduce) {
	.sara-orbita__anillo,
	.sara-orbita__ficha {
		animation-name: none;
	}
}

.sara-orbita__logo {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	/* La inclinación se aplica acá y no en la ficha, porque la ficha tiene
	   tomada la propiedad transform por la animación de contragiro. */
	transform: rotate(var(--inclinacion, 0deg));
	/* Los iconos usan fill="currentColor", así que el color se decide acá.
	   Van en el morado de marca: a diferencia de los logos de clientes del
	   marquee, estos no representan a nadie más, así que pueden llevar el
	   color del sitio. */
	color: var(--sara-principal);
}

.sara-orbita__logo svg {
	width: 100%;
	height: 100%;
}

/* Ficha sin logo todavía: se ve la forma pero no finge tener contenido. */
.sara-orbita__vacia {
	width: 55%;
	height: 55%;
	border-radius: 22%;
	background-color: var(--sara-bruma);
}

.sara-orbita__titulo {
	position: relative;
	z-index: 1;
	/* Título angosto: el arco necesita el aire de los costados. */
	max-width: 16ch;
	margin: 0;
	text-align: center;
	font-size: clamp(1.5rem, 1rem + 2.6vw, 3rem);
	line-height: 1.12;
}

/* La cursiva marca la parte que se quiere resaltar, como en la referencia.
   Va con la tipografía de títulos y no con una serif: el sitio no tiene
   ninguna cargada y sumar una familia entera por dos palabras no compensa. */
.sara-orbita__titulo em {
	font-style: italic;
	font-weight: 600;
	color: var(--sara-lila-texto);
}

/* En pantallas chicas el arco se cierra y las fichas se agolpan sobre el
   texto. Se achica el radio y se reduce la apertura para que el centro
   quede despejado. */
@media (max-width: 40rem) {
	.sara-orbita {
		--apertura: 210deg;
		--radio: clamp(8rem, 40vw, 12rem);
		aspect-ratio: 1 / 1.1;
	}

	.sara-orbita__titulo {
		max-width: 12ch;
	}
}

/* ==========================================================================
   TIRA DE MARCAS — shortcode [sara_marcas]
   --------------------------------------------------------------------------
   Etiqueta fija a la izquierda, logos rodando a la derecha.
   ========================================================================== */

.sara-marcas {
	padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	border-bottom: 1px solid color-mix(in srgb, var(--sara-borde) 60%, transparent);
	overflow: hidden;
}

.sara-marcas__interior {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

@media (min-width: 48rem) {
	.sara-marcas__interior {
		grid-template-columns: 13rem 1fr;
		gap: 3rem;
	}
}

.sara-marcas__intro {
	margin: 0;
	max-width: 22ch;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--sara-texto-suave);
}

/* El desvanecido de los bordes: los logos aparecen y desaparecen en lugar de
   cortarse de golpe contra el borde del contenedor. */
.sara-marcas__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.sara-marcas__pista {
	display: flex;
	width: max-content;
	animation: sara-rodar 45s linear infinite;
}

/* El espacio entre logos va como padding DENTRO de cada grupo, no como gap
   entre los dos. Si fuera gap, el ancho total no sería exactamente el doble
   de un grupo y el -50% de la animación dejaría un salto visible en cada
   vuelta. */
.sara-marcas__grupo {
	display: flex;
	align-items: center;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	padding-right: clamp(2.5rem, 5vw, 4.5rem);
}

.sara-marcas__logo {
	height: clamp(1.5rem, 3.5vw, 2.25rem);
	width: auto;
	flex-shrink: 0;
	/* El tratamiento en negro. brightness(0) lleva a negro cualquier color
	   conservando la transparencia, así que sirve para todos los logos sin
	   tener que editarlos uno por uno. */
	filter: brightness(0);
	opacity: 0.65;
	transition: opacity var(--sara-transicion);
}

.sara-marcas:hover .sara-marcas__logo {
	opacity: 0.85;
}

@media (hover: hover) {
	.sara-marcas:hover .sara-marcas__pista {
		animation-play-state: paused;
	}
}

@keyframes sara-rodar {
	to { transform: translateX(-50%); }
}

/* Sin movimiento: la tira queda quieta y se puede recorrer con el dedo o la
   rueda. La regla global de prefers-reduced-motion acorta la duración, que
   acá dejaría la animación congelada a mitad de camino; anular el nombre la
   desactiva de verdad. */
@media (prefers-reduced-motion: reduce) {
	.sara-marcas__pista {
		animation-name: none;
	}

	.sara-marcas__viewport {
		overflow-x: auto;
	}
}

/* ==========================================================================
   PÁGINA 404
   ========================================================================== */

.sara-404 {
	min-height: 55vh;
	display: grid;
	align-items: center;
}

.sara-404__titulo {
	margin: 1rem 0 0;
	max-width: 30rem;
}

.sara-404__texto {
	margin-top: 1.25rem;
	max-width: 42rem;
	color: var(--sara-texto-suave);
}

.sara-404__atajos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.sara-404__atajos a {
	font-weight: 600;
	font-size: 0.9375rem;
}

/* ==========================================================================
   ALIAS DE LA 1.x
   --------------------------------------------------------------------------
   Clases de la identidad anterior que pueden estar aplicadas en widgets ya
   existentes. Se reapuntan al equivalente de la marca nueva para que nada
   quede sin estilo. No usarlas en contenido nuevo: usar las de arriba.
   ========================================================================== */

.sara-acento {
	color: var(--sara-lila-texto) !important;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-weight: 600;
}

.sara-destacado {
	color: var(--sara-principal) !important;
	font-weight: 800;
}

/* La 1.x tenía un solo botón. Hereda el estilo del principal. */
.sara-btn,
.sara-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--sara-principal) !important;
	color: var(--sara-principal-texto) !important;
	border: 1px solid var(--sara-principal);
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-family: var(--sara-fuente-texto);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--sara-transicion);
}

.sara-btn:hover,
.sara-btn .elementor-button:hover {
	background-color: var(--sara-ciruela-media) !important;
}

/* "Sección negra" de la 1.x: ahora es la sección ciruela. */
.sara-seccion-negra {
	background-color: var(--sara-principal);
	color: var(--sara-principal-texto);
}

.sara-seccion-negra h1,
.sara-seccion-negra h2,
.sara-seccion-negra h3,
.sara-seccion-negra h4,
.sara-seccion-negra h5,
.sara-seccion-negra h6 {
	color: var(--sara-principal-texto);
}

/* "Sección blanca" de la 1.x: ahora es la crema de fondo. */
.sara-seccion-blanca {
	background-color: var(--sara-fondo);
	color: var(--sara-texto);
}

.sara-seccion-blanca h1,
.sara-seccion-blanca h2,
.sara-seccion-blanca h3,
.sara-seccion-blanca h4,
.sara-seccion-blanca h5,
.sara-seccion-blanca h6 {
	color: var(--sara-principal);
}

.sara-seccion-blanca p {
	color: var(--sara-texto);
}

/* ==========================================================================
   ACCESIBILIDAD
   --------------------------------------------------------------------------
   Cosas que Elementor no resuelve solo y que después cuestan caro arreglar.
   ========================================================================== */

/* Foco visible para quien navega con teclado. No quitar. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--sara-lila);
	outline-offset: 3px;
}

::selection {
	background-color: var(--sara-lavanda);
	color: var(--sara-ciruela);
}

/* Respeta a quien pidió menos animación en su sistema operativo. */
@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;
	}
}

/* ==========================================================================
   PUENTE CON ELEMENTOR — kit 6
   --------------------------------------------------------------------------
   Elementor guarda su paleta en la base de datos (Site Settings > Global
   Colors) y la publica como variables --e-global-color-*. Esa paleta es la
   que Sara ve en el selector de color de cada widget.

   El bloque de abajo forzaría la paleta de Elementor a los colores de acá.
   Queda COMENTADO a propósito: si Sara ya configuró Global Colors a mano,
   activarlo le cambiaría los colores del sitio de golpe. Conviene revisar
   primero qué tiene configurado en Site Settings y recién entonces decidir.

   Lo recomendable es lo contrario: cargar estos valores a mano en Site
   Settings, para que ella trabaje sin depender de código.
   ========================================================================== */

/*
.elementor-kit-6 {
	--e-global-color-primary: #652AD7;
	--e-global-color-secondary: #9555B0;
	--e-global-color-accent: #EDC23E;
	--e-global-color-text: #1B1A1F;
}
*/