/* Estilos del tema Inanna. */

@font-face {
	font-family: 'Special Gothic';
	/*
	 * format('truetype') a secas: 'truetype-variations' se retiro de la
	 * especificacion (ahora seria format('truetype') tech(variations)) y un
	 * navegador que no reconoce la cadena de formato descarta la fuente entera
	 * y cae al tipo de respaldo.
	 */
	src: url('../fonts/SpecialGothic-VariableFont_wdth,wght.ttf') format('truetype');
	/*
	 * Rangos reales del archivo, segun su tabla fvar: wght 400-700 y wdth
	 * 75-125. Antes decia 100-900 y 62.5%-100%, ejes que la fuente no tiene.
	 */
	font-weight: 400 700;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Marcellus';
	src: url('../fonts/Marcellus-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--inanna-color-texto: var(--inanna-negro);
	--inanna-color-fondo: var(--inanna-crema);
	--inanna-ancho-max: 1200px;

	/* Marcellus para titulares; Special Gothic para texto y formularios. */
	--inanna-fuente-titulos: 'Marcellus', Georgia, 'Times New Roman', serif;
	--inanna-fuente-texto: 'Special Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/*
	 * Paleta de marca. Estos tres son los colores oficiales de Inanna; el resto
	 * de tonos de este archivo sale de ellos, asi que se cambian solo aqui.
	 */
	--inanna-negro: #151517;  /* negro azulado */
	--inanna-crema: #f4f1e9;  /* blanco atenuado */
	--inanna-dorado: #e6bb5d;

	/*
	 * Medidas de la cabecera. Van aqui porque ahora flota sobre el contenido y
	 * su alto hace falta en dos sitios mas: el freno de los enlaces del menu y
	 * el calculo del salto entre transparente y solida.
	 */
	--inanna-cabecera-logo: clamp(3rem, 5.22vw, 6.3rem);
	/*
	 * Aire de arriba y de abajo del logo. Es lo unico que decide el alto de la
	 * barra, porque el logo es la pieza mas alta que lleva dentro. En el diseno
	 * la barra mide 127px sobre 1920 y el logo 99, o sea 14px por lado: eso es
	 * este 0.73vw. Antes era 1.8vw y la barra salia casi 170px de alto.
	 */
	--inanna-cabecera-aire: clamp(0.55rem, 0.73vw, 0.88rem);
	/*
	 * Margen lateral de la cabecera. No es el 5% del resto de las secciones: el
	 * titular del hero lleva ese 5% pero medido sobre su columna, que es 1.1fr
	 * de 2.1fr, o sea 5% x 52.381% = 2.62% del ancho de la pagina. Poniendo ese
	 * mismo numero aqui, el logo cae justo encima de la T de "TU POTENCIAL" a
	 * cualquier ancho, porque los dos son porcentajes del mismo ancho.
	 *
	 * Lo comparten la cabecera y el texto descriptivo, que son las dos piezas
	 * que en el diseno arrancan a la altura del logo.
	 */
	--inanna-margen-borde: 2.62%;
	--inanna-alto-cabecera: calc(var(--inanna-cabecera-logo) + 2 * var(--inanna-cabecera-aire));

	/*
	 * Respiro entre secciones. Se suma al relleno que ya tiene cada seccion, y
	 * mide justo lo que la barra de la cabecera: es la referencia que se pidio
	 * para que el salto de una seccion a otra se note a simple vista.
	 */
	--inanna-aire-seccion: var(--inanna-alto-cabecera);

	/*
	 * Curva de todas las entradas de la pagina: sale rapido y llega frenando,
	 * sin rebote. Es la misma para el hero, las secciones y el panel de gracias,
	 * que es lo que hace que todo se sienta de la misma mano.
	 */
	--inanna-salida: cubic-bezier(0.22, 1, 0.36, 1);

	/* Derivados. Guardan la misma distancia que tenian con los colores viejos. */
	--inanna-dorado-claro: #f5cd71;      /* hover del boton de envio */
	--inanna-negro-elevado: #2b2b2d;     /* opciones del desplegable */
	--inanna-gris-placeholder: #dad6cb;  /* hueco de la foto mientras carga */
}

/*
 * Zoom de salida y viewports ultraanchos.
 *
 * Al alejar el navegador, el viewport CSS se hace mas grande: a 25%, una
 * pantalla de 1920px pasa a medir cerca de 7680px CSS. Las piezas basadas en
 * vw/vh (fotos y secciones) conservan su proporcion, pero los limites en rem de
 * los clamp() se quedaban congelados y logo, textos y espacios terminaban a un
 * cuarto de su tamano visual.
 *
 * Por encima del lienzo de referencia (1920x947), el rem crece con la menor de
 * las dos dimensiones. Asi todos esos limites avanzan junto con el viewport y
 * la composicion conserva sus proporciones al 80%, 50% o 25%. El max(100%, ...)
 * garantiza que al 100%, al acercar el zoom y en movil el tamano base nunca se
 * reduzca. La clase inanna-js solo existe en esta landing, por lo que el ajuste
 * no afecta otras paginas de WordPress.
 */
html.inanna-js {
	font-size: max(100%, min(0.833333vw, 1.68955vh));
}

/*
 * En un escritorio con zoom muy alto el viewport baja del breakpoint movil,
 * aunque el dispositivo siga siendo un monitor. En ese caso se permite que el
 * rem baje en la misma proporcion: a 400% queda cerca de 4px CSS, que el zoom
 * vuelve a pintar como los 16px visuales del 100%.
 */
@media (max-width: 782px) and (min-device-width: 1025px) {
	html.inanna-js {
		font-size: min(0.833333vw, 1.68955vh);
	}
}

/* Reset minimo para la landing, no afecta al resto del sitio (blog, paginas). */
.inanna-landing,
.inanna-landing * {
	box-sizing: border-box;
}

.inanna-landing {
	margin: 0;
	font-family: var(--inanna-fuente-texto);
	color: var(--inanna-crema);
	background: var(--inanna-negro);
}

.inanna-landing h1,
.inanna-landing h2,
.inanna-landing h3 {
	margin: 0;
	font-family: var(--inanna-fuente-titulos);
	line-height: 1.15;
	text-transform: uppercase;
	font-weight: 400;
	color: inherit;
}

.inanna-acento {
	color: var(--inanna-dorado);
}

/*
 * Botones propios de la landing: foco y raton.
 *
 * Astra imprime en la cabecera
 *
 *   button:focus, button:hover, .ast-button:hover, ... { color: #fff;
 *     background-color: var(--ast-global-color-1) }
 *
 * o sea el azul de su paleta. 'button:focus' pesa mas que una clase suelta, y
 * por eso el "Cerrar" del panel de gracias salia en blanco sobre azul: main.js
 * le da el foco nada mas abrirlo, asi que se veia asi siempre, en telefono y en
 * escritorio. Lo mismo le pasaba a la hamburguesa y al "Cerrar" del menu al
 * pasar el raton o al tocarlos.
 *
 * Se declaran aqui los dos estados con el color que ya tenian; el aro de foco
 * se conserva para quien navega con el teclado, solo que dibujado con la letra
 * de la marca y no con el azul del tema.
 */
.inanna-landing .inanna-nav-toggle:hover,
.inanna-landing .inanna-nav-toggle:focus,
.inanna-landing .inanna-nav__cerrar:hover,
.inanna-landing .inanna-nav__cerrar:focus,
.inanna-gracias-overlay .inanna-gracias-overlay__cerrar:hover,
.inanna-gracias-overlay .inanna-gracias-overlay__cerrar:focus {
	background: none;
	box-shadow: none;
	outline: none;
}

.inanna-landing .inanna-nav-toggle:hover,
.inanna-landing .inanna-nav-toggle:focus {
	color: inherit;
}

.inanna-landing .inanna-nav__cerrar:hover,
.inanna-landing .inanna-nav__cerrar:focus {
	color: var(--inanna-crema);
}

.inanna-gracias-overlay .inanna-gracias-overlay__cerrar:hover,
.inanna-gracias-overlay .inanna-gracias-overlay__cerrar:focus {
	color: var(--inanna-dorado);
}

.inanna-landing .inanna-nav-toggle:focus-visible,
.inanna-landing .inanna-nav__cerrar:focus-visible,
.inanna-gracias-overlay .inanna-gracias-overlay__cerrar:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/*
 * Texto seleccionado.
 *
 * Astra imprime en la cabecera '::selection { background-color:
 * var(--ast-global-color-0); color: #fff }', que es el azul de su paleta y no
 * pinta nada aqui. Se nota sobre todo en el panel de gracias: al abrirse, el
 * navegador deja seleccionado el "Cerrar" y la palabra salia en blanco sobre
 * una caja azul, como si fuera un boton de sistema.
 */
.inanna-landing ::selection {
	background-color: var(--inanna-dorado);
	color: var(--inanna-negro);
}

.inanna-landing ::-moz-selection {
	background-color: var(--inanna-dorado);
	color: var(--inanna-negro);
}

/*
 * Boton de "volver arriba" de Astra. Es una opcion del tema y viene con el
 * azul de su paleta; aqui se le pone el dorado de la marca. Si se prefiere que
 * no aparezca, se apaga en Personalizar > Diseno > Boton de ir arriba.
 */
.inanna-landing #ast-scroll-top {
	background-color: var(--inanna-dorado);
	color: var(--inanna-negro);
	/* Astra usa 15px y separaciones de 30px fijas. En zoom alto esos pixeles se
	 * multiplican; expresados en rem siguen la compensacion de esta landing. */
	font-size: 0.9375rem;
	border-radius: 0.125rem;
}

.inanna-landing .ast-scroll-to-top-right {
	right: 1.875rem;
	bottom: 1.875rem;
}

/*
 * Special Gothic explicito en las secciones de texto corrido.
 *
 * Astra declara su tipografia directamente sobre los elementos
 * (body, button, input, select, textarea), y una regla directa siempre gana a
 * lo heredado, por especifico que sea el ancestro. Declararlo aqui evita
 * depender de que la herencia desde .inanna-landing llegue intacta.
 *
 * Los titulares no se ven afectados: h1/h2/h3 tienen su propia regla con
 * Marcellus, que por ser directa manda sobre lo que herede la seccion.
 */
.inanna-about,
.inanna-faq,
.inanna-form {
	font-family: var(--inanna-fuente-texto);
}

.inanna-logo {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}

/*
 * Logo: un unico SVG horizontal (simbolo + INANNA + AGENCY). Antes la palabra
 * se componia aqui con tipografia y rayas; ahora viene dibujada dentro del
 * archivo, asi que solo hace falta darle alto. El ancho sale de su proporcion.
 */
.inanna-marca {
	display: block;
	width: auto;
	height: 2.75rem;
}

/* En la cabecera el logo va algo mas chico que en el pie. */
.inanna-header .inanna-marca {
	height: var(--inanna-cabecera-logo);
}

/*
 * El color de las letras vive dentro del SVG, asi que no se puede cambiar con
 * CSS al pasar de transparente a solida: la cabecera lleva los dos archivos y
 * aqui se cruza el uno con el otro.
 *
 * Van superpuestos (uno en el flujo, el otro encima en absoluto) y lo que
 * cambia es la opacidad, para que el relevo dure lo mismo que el del fondo y
 * el de las letras. Con display:none el logo daba un parpadeo seco justo en
 * mitad de un cambio que en todo lo demas es un fundido.
 */
.inanna-header .inanna-logo {
	position: relative;
	display: block;
}

.inanna-header .inanna-marca {
	transition: opacity 250ms ease-out;
}

.inanna-header .inanna-marca--sobre-claro {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.inanna-header--solido .inanna-marca--sobre-oscuro {
	opacity: 0;
}

.inanna-header--solido .inanna-marca--sobre-claro {
	opacity: 1;
}

/* Fotos */
.inanna-picture {
	display: block;
}

.inanna-img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: var(--inanna-gris-placeholder);
}

/*
 * La foto destacada es apaisada y va a todo el ancho de la seccion: manda la
 * proporcion del archivo, no el 2/3 vertical de .inanna-img.
 */
.inanna-img--destacada {
	max-width: none;
	height: auto;
	aspect-ratio: auto;
}

/* Header */
/*
 * Cabecera. Las medidas van en clamp() y no fijas: a 1920px dan el tamano del
 * diseno (logo de ~100px, enlaces de ~31px, barra de ~128px de alto) y se
 * encogen solas entre ese ancho y el punto de quiebre del movil, donde si no
 * el logo y los cuatro enlaces no caben en una linea.
 *
 * Flota sobre el contenido y tiene dos estados, nada mas: sobre la portada va
 * transparente, con las letras y el logo en crema; en cuanto la portada se
 * acaba pasa a fondo crema con las letras en negro (ver .inanna-header--solido,
 * la clase la pone main.js). El paso de uno a otro es un fundido de 250ms en el
 * que fondo, letras y logo cruzan a la vez.
 */
.inanna-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: var(--inanna-cabecera-aire) var(--inanna-margen-borde);
	background-color: rgba(244, 241, 233, 0);
	color: var(--inanna-crema);
	visibility: visible;
	/*
	 * La barra nunca se desliza: solo cambia de color. Fondo, letras y logo
	 * cruzan a la vez y en el mismo cuarto de segundo, asi que el paso de la
	 * portada a la seccion de abajo se lee como un fundido, no como un salto.
	 */
	transition:
		background-color 250ms ease-out,
		color 250ms ease-out,
		opacity 250ms ease-out,
		visibility 0s;
}

.inanna-header--solido {
	background-color: var(--inanna-crema);
	color: var(--inanna-color-texto);
}

/*
 * Al llegar al pie la cabecera se aparta para dejarselo entero. Se va con un
 * fundido y no deslizandose hacia arriba: en esta pagina la barra no se mueve
 * nunca de sitio. La 'visibility' espera a que termine el fundido (de ahi el
 * retardo igual a su duracion) y sirve para que, ya invisible, el teclado no
 * pueda enfocar unos enlaces que no se ven.
 */
.inanna-header--oculta {
	opacity: 0;
	visibility: hidden;
	transition:
		background-color 250ms ease-out,
		color 250ms ease-out,
		opacity 250ms ease-out,
		visibility 0s linear 250ms;
}

/*
 * Con la cabecera flotando, un enlace del menu dejaria el principio de la
 * seccion tapado. Esto le dice al navegador donde frenar.
 */
.inanna-landing section[id] {
	scroll-margin-top: var(--inanna-alto-cabecera);
}

/* Destino visible del enlace Servicios en la composicion movil. */
#servicios-contenido {
	scroll-margin-top: var(--inanna-alto-cabecera);
}

#servicios-desktop {
	/* El encuadre de referencia deja una pequena franja de la foto bajo la
	 * cabecera para alcanzar a mostrar completa la ultima linea del texto. */
	scroll-margin-top: calc(var(--inanna-alto-cabecera) - 1.5rem);
}

#filosofia-mobile {
	scroll-margin-top: var(--inanna-alto-cabecera);
}

#filosofia-contenido {
	scroll-margin-top: calc(var(--inanna-alto-cabecera) + 0.75rem);
}

.inanna-nav {
	display: flex;
}

.inanna-nav__enlaces {
	display: flex;
	align-items: center;
	gap: clamp(1.35rem, 3.06vw, 3.83rem);
}

/* Logo + "Cerrar": solo existen cuando el menu es pantalla completa (movil). */
.inanna-nav__cabecera {
	display: none;
}

.inanna-nav a {
	color: inherit;
	text-decoration: none;
	font-size: clamp(0.95rem, 1.65vw, 1.96rem);
}

/* "Aplicar" cierra el menu en caja, para que pese mas que los otros tres. */
.inanna-nav__cta {
	/*
	 * Solo el alto se aprieta; el ancho se queda como estaba. El 'line-height'
	 * explicito es lo que mas cuenta: sin el, el enlace hereda el interlineado
	 * largo del cuerpo de texto y la caja crecia hasta empujar el alto de toda
	 * la cabecera. Asi la caja mide ~58px sobre 1920, como en el diseno.
	 */
	padding: 0.28em 1.4em;
	line-height: 1.2;
	border: 0.0625rem solid currentColor;
}

/* Boton hamburguesa: solo aparece en movil (ver media query del final). */
.inanna-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/*
 * Astra conserva una caja redondeada alrededor de algunos <button> en Chrome
 * movil. Se neutraliza sobre el elemento real y en todos sus estados; el foco
 * de teclado accesible sigue viniendo de :focus-visible mas arriba.
 */
.inanna-landing .inanna-header button.inanna-nav-toggle,
.inanna-landing .inanna-header button.inanna-nav-toggle:hover,
.inanna-landing .inanna-header button.inanna-nav-toggle:focus,
.inanna-landing .inanna-header button.inanna-nav-toggle:active {
	-webkit-appearance: none;
	appearance: none;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}

.inanna-nav-toggle__barra {
	display: block;
	width: 1.9rem;
	height: 0.125rem;
	background: currentColor;
}

/* Con el menu abierto no se puede desplazar la pagina de fondo. */
.inanna-landing.inanna-menu-abierto {
	overflow: hidden;
}


/* Hero */
.inanna-hero {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: stretch;
	min-height: 72vh;
	color: var(--inanna-color-fondo);
}

/* El texto lleva el padding; la foto va a sangre contra el borde derecho. */
.inanna-hero__texto {
	display: flex;
	align-items: center;
	padding: 3rem 5%;
}

/*
 * El titular crece hasta casi llenar su columna, como en el diseno: a 1920px la
 * linea larga ("TU POTENCIAL") ocupa ~94% del ancho util. El 6% que queda es el
 * margen para que ninguna metrica de la fuente la parta en dos lineas.
 */
.inanna-hero h1 {
	font-size: clamp(2.5rem, 6.5vw, 8rem);
}

.inanna-hero__foto .inanna-picture,
.inanna-hero__foto .inanna-img {
	height: 100%;
}

.inanna-hero__foto .inanna-img {
	aspect-ratio: auto;
}

/*
 * Parrafo de apoyo y boton de la portada: piezas de la version movil. En
 * escritorio la portada es titular y foto, asi que aqui no se pintan y el
 * bloque de texto sigue siendo una sola pieza centrada en su columna.
 */
.inanna-hero__descripcion,
.inanna-hero__cta {
	display: none;
}

/* Manifiesto */
.inanna-manifesto {
	/*
	 * Al navegar a Filosofia, la seccion ocupa exactamente todo el espacio que
	 * queda bajo la cabecera. De este modo la fotografia siguiente empieza por
	 * debajo del pliegue y nunca se cuela en el encuadre de #nosotros.
	 *
	 * El pixel adicional absorbe el redondeo de subpixeles que hacen algunos
	 * navegadores al calcular el alto fluido de la cabecera.
	 */
	min-height: calc(100vh - var(--inanna-alto-cabecera) + 0.0625rem);

	/*
	 * Aire de arriba del titular. Se saca a una variable porque lo usan las dos
	 * reglas de abajo y tienen que moverse juntos.
	 */
	--inanna-manifiesto-aire: clamp(2rem, 4vh, 3rem);
	--inanna-manifiesto-tamano: clamp(1.75rem, 6.65vw, 9rem);

	/*
	 * Marcellus deja un pequeno espacio interno por encima de las mayusculas.
	 * Se descuenta antes de la caja del titulo para que el hueco negro que se
	 * percibe (hasta el primer pixel de la N) mida lo mismo que la cabecera.
	 * Los tres valores son el 20.8% del tamano fluido del titular.
	 */
	--inanna-manifiesto-ajuste-optico: clamp(0.365rem, 1.385vw, 1.875rem);

	/* La mitad exacta del alto fluido de la cabecera: 50% del logo + un aire. */
	--inanna-manifiesto-extra: calc(clamp(1.5rem, 2.61vw, 3.15rem) + var(--inanna-cabecera-aire));

	/*
	 * Bajando con el dedo o la rueda, el titular arrancaba casi pegado al final
	 * de la portada. El hueco negro visible mide una barra y media del menu,
	 * incluido el 50% adicional y la compensacion optica de la tipografia.
	 *
	 * Va en margen y no en relleno a proposito: el salto de "Filosofia" se
	 * calcula desde el borde de la seccion (main.js usa offsetTop, y el
	 * scroll-margin del ancla mide igual), y el margen queda por fuera de ese
	 * borde. Asi este respiro solo se ve al recorrer la pagina y el enlace
	 * sigue aterrizando exactamente donde estaba.
	 */
	margin-top: calc(var(--inanna-alto-cabecera) + var(--inanna-manifiesto-extra) - var(--inanna-manifiesto-aire) - var(--inanna-manifiesto-ajuste-optico));
	padding: var(--inanna-manifiesto-aire) var(--inanna-margen-borde) clamp(2.5rem, 6vh, 4rem);
	text-align: left;
	color: var(--inanna-color-fondo);
}

/*
 * El manifiesto va a todo el ancho de la seccion, como en el diseno: la linea
 * mas larga ("CONSTRUIMOS UNIVERSOS") ocupa ~92% del ancho util a cualquier
	 * tamano de pantalla, porque letra y hueco crecen los dos con vw.
 *
 * Se quita el max-width de 1000px justamente por eso: con la letra a este
	 * tamano cortaba el titular a menos de la mitad de la seccion. Los cuatro
	 * renglones se fijan con <br> en la plantilla para conservar exactamente la
	 * distribucion de la referencia a cualquier ancho de escritorio.
 */
.inanna-manifesto h2 {
	/*
	 * El tamano se liga al ancho para conservar las cuatro lineas de la
	 * composicion: dos blancas y dos doradas. Limitarlo tambien por la altura
	 * encogia el titular a tres lineas en monitores panoramicos y dejaba casi un
	 * tercio de la seccion como un bloque negro vacio.
	 */
	font-size: var(--inanna-manifiesto-tamano);
}

/* Los tres pilares van a todo lo ancho, bajo una linea fina. */
.inanna-pilares {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	/* Con el titular nuevamente en cuatro lineas, este espacio corto mantiene
	 * la raya y los pilares dentro del primer encuadre, como en la referencia. */
	margin: 2rem 0 0;
	padding-top: 2.25rem;
	/*
	 * El borde se queda transparente y la raya la dibuja el ::before de abajo,
	 * que es lo unico que se puede animar. Se conserva para que el hueco de
	 * arriba mida exactamente lo mismo que antes.
	 */
	border-top: 0.0625rem solid transparent;
}

/* La raya de arriba de los pilares. Crece de izquierda a derecha al entrar. */
.inanna-pilares::before {
	content: '';
	position: absolute;
	top: -0.0625rem;
	left: 0;
	width: 100%;
	height: 0.0625rem;
	background: rgba(244, 241, 233, 0.25);
	transform-origin: left center;
	transition: transform 600ms var(--inanna-salida);
}

.inanna-pilar {
	font-size: clamp(1.15rem, 1.8vw, 1.6rem);
	font-weight: 400;
	color: var(--inanna-crema);
}

.inanna-pilar:nth-child(2) {
	text-align: center;
}

.inanna-pilar:nth-child(3) {
	text-align: right;
}

/* Foto destacada a todo lo ancho */
/*
 * La foto destacada va a sangre, de borde a borde y pegada a la seccion de
 * abajo: el archivo mide 1920x748, o sea que en una pantalla de 1920 se ve a
 * tamano real, sin escalar. Por eso no lleva ningun margen.
 */
.inanna-feature {
	padding: 0;
}

/*
 * En escritorio la panoramica conserva su proporcion mientras haya altura.
 * En monitores bajos o con zoom se limita a 62vh para que el texto de
 * Servicios entre en la misma vista; el recorte se hace dentro de la foto.
 */
@media (min-width: 783px), (min-device-width: 1025px) {
	.inanna-feature .inanna-picture {
		height: min(38.9583vw, 62vh);
		overflow: hidden;
	}

	.inanna-feature .inanna-img--destacada {
		height: 100%;
		object-fit: cover;
	}
}

/* Texto descriptivo */
.inanna-about {
	background: var(--inanna-crema);
	color: var(--inanna-color-texto);
	padding: 3.5rem var(--inanna-margen-borde) 6rem;
}

.inanna-about p {
	/* Sin tope de ancho: el parrafo ocupa todo el ancho de la seccion. */
	max-width: none;
	margin: 0;
	font-size: clamp(1.15rem, 2.7vw, 3.4rem);
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	color: var(--inanna-negro);
}

/*
 * Titular, frase de entrada y foto de esta seccion: solo movil. Alli este
 * bloque hace de portada de la parte clara, papel que en escritorio cumple el
 * manifiesto; aqui el texto entra directo, como hasta ahora.
 */
.inanna-about__titulo,
.inanna-about__foto,
.inanna-about__entrada {
	display: none;
}

/* Galeria: mosaico de 3 columnas. Columna alta a la izquierda, foto ancha
   arriba a la derecha y dos fotos abajo. */
.inanna-galeria {
	background: var(--inanna-crema);
	/* Abajo lleva ademas el respiro de seccion, antes de las preguntas. */
	padding: 0 var(--inanna-margen-borde) calc(4rem + var(--inanna-aire-seccion));
}

/*
 * Mosaico. Las cuatro fotos vienen ya recortadas para su hueco (458x1417,
 * 1371x494, 681x914 y 680x926), asi que las medidas de la rejilla no se eligen
 * a ojo: se despejan de esas cuatro proporciones para que cada celda tenga
 * exactamente la forma de su archivo y ninguna foto pierda cabeza ni pies.
 *
 * El sistema es: la foto de la izquierda ocupa todo el alto; la de arriba a la
 * derecha ocupa las dos columnas de la derecha mas el hueco de en medio; y las
 * dos de abajo comparten fila, o sea el mismo alto. Con el hueco fijado en
 * 0.465vw (los 9px del diseno sobre 1920) la solucion es la de abajo, y da a
 * 1920 los mismos 458 / 1371 / 681 / 680 px de ancho que tienen los archivos.
 *
 * Las proporciones van escritas tomando la primera pista como 1fr. Importa
 * que ninguna suma de fracciones baje de 1: por debajo de eso el navegador no
 * reparte todo el hueco, sino solo esa fraccion, y la rejilla se queda corta.
 *
 * Si se cambia una foto por otra de distinta proporcion hay que rehacer estos
 * numeros; con los de antes (columnas 1/1.45/1.45 sobre un 16:9) las celdas
 * salian mas apaisadas que las fotos y 'cover' recortaba por arriba y abajo.
 */
.inanna-galeria__mosaico {
	display: grid;
	grid-template-columns: 1fr 1.4907fr 1.4692fr;
	grid-template-rows: 1fr 1.8636fr;
	gap: 0.465vw;
	/* A todo el ancho de la seccion; esta proporcion controla el alto. */
	aspect-ratio: 1.2926;
}

/*
 * Las fotos llenan su celda: manda la grilla, no la proporcion del archivo.
 * El min-height/min-width en 0 es imprescindible: sin eso el tamano intrinseco
 * del archivo (1200x1800) estira la fila y el mosaico se dispara de alto.
 */
.inanna-galeria .inanna-picture,
.inanna-galeria .inanna-img {
	height: 100%;
	min-height: 0;
	min-width: 0;
	width: 100%;
	overflow: hidden;
}

.inanna-galeria .inanna-img {
	aspect-ratio: auto;
	object-fit: cover;
}

.inanna-galeria .inanna-picture--3 {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.inanna-galeria .inanna-picture--4 {
	grid-column: 2 / span 2;
	grid-row: 1;
}

.inanna-galeria .inanna-picture--5 {
	grid-column: 2;
	grid-row: 2;
}

.inanna-galeria .inanna-picture--6 {
	grid-column: 3;
	grid-row: 2;
}

/* FAQ */
.inanna-faq {
	display: grid;
	/*
	 * En el diseno manda la columna del titular, no la de las preguntas: ocupa
	 * de la izquierda hasta el 55% del ancho. Antes era al reves (1fr 1.5fr).
	 */
	grid-template-columns: 1.24fr 1fr;
	/* El bloque de la izquierda va centrado contra la lista, no pegado arriba. */
	align-items: center;
	gap: 3rem;
	background: var(--inanna-crema);
	color: var(--inanna-color-texto);
	padding: 4rem var(--inanna-margen-borde);

	/*
	 * Ancho de la columna del numero. Vive aqui porque lo usan dos reglas: la
	 * rejilla del titular de cada pregunta y la sangria de la respuesta, que
	 * tiene que caer justo debajo de la pregunta y no del numero.
	 */
	--inanna-faq-num: clamp(2.2rem, 2.13vw, 2.55rem);
}

/* Etiqueta de seccion con la raya dorada a la izquierda. */
.inanna-faq__etiqueta,
.inanna-manifesto__etiqueta {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0 0 2.5rem;
	font-size: clamp(0.85rem, 1vw, 1.2rem);
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--inanna-color-texto);
}

.inanna-faq__etiqueta::before,
.inanna-manifesto__etiqueta::before {
	content: '';
	flex: 0 0 auto;
	width: clamp(2.6rem, 5.95vw, 7.2rem);
	height: 1px;
	background: var(--inanna-dorado);
}

/*
 * En el manifiesto la etiqueta solo hace falta en movil: alli el hero y el
 * manifiesto se apilan sobre el mismo fondo negro y, sin nada en medio, los dos
 * titulares se leen como uno solo. En escritorio son bloques distintos y la
 * etiqueta sobraria, asi que se oculta (se enciende en el media query).
 */
.inanna-manifesto__etiqueta {
	display: none;
	margin: 0 0 1.75rem;
	color: var(--inanna-crema);
}

.inanna-faq h2 {
	font-size: clamp(2.25rem, 6.8vw, 8.5rem);
	line-height: 1.05;
	letter-spacing: 0.005em;
}

.inanna-faq__item {
	border-top: 1px solid rgba(21, 21, 23, 0.15);
	padding: clamp(1.2rem, 2.07vw, 2.46rem) 0;
}

.inanna-faq__item:last-child {
	border-bottom: 1px solid rgba(21, 21, 23, 0.15);
}

.inanna-faq__item summary {
	cursor: pointer;
	list-style: none;
	display: grid;
	grid-template-columns: var(--inanna-faq-num) 1fr auto;
	align-items: baseline;
	gap: 0 0.75rem;
	font-size: clamp(1rem, 1.33vw, 1.62rem);
	font-weight: 600;
	color: var(--inanna-color-texto);
}

.inanna-faq__item summary::-webkit-details-marker {
	display: none;
}

.inanna-faq__num {
	font-size: clamp(0.7rem, 1vw, 1.2rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: rgba(21, 21, 23, 0.45);
}

/*
 * Signo de abrir/cerrar. Ya no es un caracter ('+' que se cambiaba por '-')
 * sino dos rayas cruzadas: la vertical gira hasta tumbarse sobre la horizontal
 * y el mas se convierte en un menos sin parpadeo, en el mismo tiempo que tarda
 * la respuesta en desplegarse.
 *
 * En negro, no en dorado: sobre el crema el dorado da 1.6:1 de contraste y el
 * signo, que es lo unico que dice si la pregunta abre o cierra, no se ve.
 */
.inanna-faq__icono {
	position: relative;
	display: block;
	width: clamp(0.85rem, 0.95vw, 1.15rem);
	height: clamp(0.85rem, 0.95vw, 1.15rem);
	color: var(--inanna-color-texto);
}

.inanna-faq__icono::before,
.inanna-faq__icono::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	margin-top: -0.5px;
	background: currentColor;
}

/*
 * La raya que gira. La vuelta la manda el atributo [open], salvo mientras se
 * esta cerrando: ahi el atributo sigue puesto (la respuesta aun se esta
 * plegando) y es la clase la que adelanta el giro, para que el signo y el alto
 * viajen juntos.
 */
.inanna-faq__icono::after {
	transform: rotate(90deg);
	transition: transform 350ms ease-out;
}

.inanna-faq__item[open]:not(.esta-cerrando) .inanna-faq__icono::after {
	transform: rotate(0deg);
}

/*
 * Caja de la respuesta. El recorte es lo que permite animarle el alto: durante
 * el despliegue el texto ya esta escrito entero y lo que crece es la ventana
 * por la que se ve.
 */
.inanna-faq__cuerpo {
	overflow: hidden;
}

.inanna-faq__item p {
	margin: 0.6rem 0 0.2rem;
	/* Cae bajo la pregunta: ancho del numero mas el hueco de la rejilla. */
	padding-left: calc(var(--inanna-faq-num) + 0.75rem);
	max-width: none;
	font-size: clamp(0.9rem, 1.06vw, 1.28rem);
	line-height: 1.65;
	color: rgba(21, 21, 23, 0.65);
}

/* Contacto */
.inanna-contacto {
	display: grid;
	/*
	 * Casi mitad y mitad, con el formulario apenas mas ancho. Antes el titular
	 * se llevaba solo 1 de 2.35 y con la letra a este tamano no le cabia.
	 */
	grid-template-columns: 1fr 1.12fr;
	align-items: center;
	gap: 4rem;
	background: var(--inanna-negro);
	color: var(--inanna-crema);
	/*
	 * Vertical corto a proposito: es la ultima seccion antes del pie y con la
	 * cabecera flotando encima, si crece mas el formulario no cabe entero en
	 * pantalla y hay que subir y bajar para leerlo.
	 */
	padding: calc(3rem + var(--inanna-aire-seccion)) var(--inanna-margen-borde) 3rem;
}

.inanna-contacto h2 {
	font-size: clamp(2.25rem, 6.2vw, 7.75rem);
	/*
	 * Mas suelto que el resto de titulares (1.02 antes): la cola de las dos "Q"
	 * de "QUE QUIERES" baja bastante del renglon y con el interlineado cerrado
	 * casi tocaba la "C" de "CONSTRUIR".
	 */
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.inanna-form__aviso {
	color: var(--inanna-dorado);
	font-size: 0.9rem;
}

/*
 * El formulario lo pinta WPForms (motor "modern"), asi que aqui se reescribe
 * su markup para que coincida con el diseno: campos sin caja, linea inferior,
 * etiquetas en crema y boton dorado. Las variables --wpforms-* cubren los
 * estados que el plugin resuelve por su cuenta (foco, error, casillas).
 */
.inanna-form .wpforms-container {
	--wpforms-field-border-color: rgba(244, 241, 233, 0.3);
	--wpforms-field-background-color: transparent;
	--wpforms-field-text-color: var(--inanna-crema);
	--wpforms-label-color: var(--inanna-crema);
	--wpforms-label-sublabel-color: rgba(244, 241, 233, 0.6);
	--wpforms-label-error-color: #e08a6a;
	--wpforms-button-background-color: var(--inanna-dorado);
	--wpforms-button-text-color: var(--inanna-negro);
	--wpforms-field-border-radius: 0;
	--wpforms-button-border-radius: 0;

	margin: 0;
}

.inanna-form .wpforms-field-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem 4rem;
	align-items: end;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field {
	padding: 0;
}

/* Desplegable, mensaje y casilla ocupan la fila completa. */
.inanna-form .wpforms-field-select,
.inanna-form .wpforms-field-textarea,
.inanna-form .wpforms-field-checkbox {
	grid-column: 1 / -1;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field-label {
	display: block;
	margin: 0 0 0.65rem;
	font-family: var(--inanna-fuente-texto);
	font-size: clamp(0.95rem, 1.15vw, 1.4rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--inanna-crema);
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-required-label {
	color: var(--inanna-dorado);
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field input,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field select,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field textarea {
	width: 100%;
	max-width: none;
	height: auto;
	padding: 0.35rem 0 0.6rem;
	border: 0;
	border-bottom: 1px solid rgba(244, 241, 233, 0.3);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--inanna-crema);
	/*
	 * El navegador pinta el texto autocompletado desde su propia hoja de estilos
	 * con 'color: ... !important', que gana a cualquier regla del sitio y deja la
	 * letra negra. Lo que no fija es -webkit-text-fill-color: por eso el color
	 * real del texto se declara aqui, en la regla base, para que valga tambien
	 * mientras se previsualiza o se elige una sugerencia.
	 */
	-webkit-text-fill-color: var(--inanna-crema);
	caret-color: var(--inanna-crema);
	font-family: var(--inanna-fuente-texto);
	font-size: clamp(1.05rem, 1.25vw, 1.5rem);
	/*
	 * Al enfocar solo cambia el color de la linea de abajo, de gris a dorado.
	 * El campo no se mueve ni cambia de tamano: en un formulario largo cualquier
	 * desplazamiento al pasar de un campo a otro se nota como un tic.
	 */
	transition: border-color 200ms ease-out;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field input:focus,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field select:focus,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field textarea:focus {
	outline: none;
	border-bottom-color: var(--inanna-dorado);
	background-color: transparent;
	box-shadow: none;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field textarea {
	min-height: 7rem;
	padding-top: 0.35rem;
	resize: vertical;
}

/*
 * Pista de ejemplo dentro del campo (el "FB, IG, TIKTOK, X" de la red social).
 * Va en gris sobre la linea y se apaga al enfocar, no al empezar a escribir,
 * que es como se pidio: en cuanto el campo esta seleccionado el hueco queda
 * limpio.
 *
 * Los dos colores no son un duplicado. El campo declara
 * "-webkit-text-fill-color" (lo necesita para el autorrelleno, ver mas abajo),
 * esa propiedad se hereda hasta aqui y, donde existe, es la que pinta la letra:
 * gana a "color". Sin repetirla en este gris, la pista sale en crema puro por
 * mucho que se baje el "color", que es justo lo que pasaba. El "color" se
 * queda para los navegadores que no la entienden.
 */
.inanna-form div.wpforms-container .wpforms-form .wpforms-field input::placeholder,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field textarea::placeholder {
	color: rgba(244, 241, 233, 0.38);
	-webkit-text-fill-color: rgba(244, 241, 233, 0.38);
	opacity: 1;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field input:focus::placeholder,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field textarea:focus::placeholder {
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* El texto guia de Solicitud conserva la misma jerarquia en PC y movil. */
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field-textarea textarea::placeholder {
		font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
}

/* Select con flecha propia para que se vea igual en todos los navegadores. */
.inanna-form div.wpforms-container .wpforms-form .wpforms-field select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-right: 1.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23f4f1e9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	background-size: 12px 7px;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field select option {
	background: var(--inanna-negro-elevado);
	color: var(--inanna-crema);
}

/*
 * El autocompletado del navegador pinta un fondo claro sobre el campo. Ese
 * fondo no se quita con background-color, se tapa con una sombra interior del
 * color del fondo.
 *
 * Los selectores repiten el prefijo largo a proposito: la regla base de los
 * campos y la de :focus ya declaran box-shadow, y con mas especificidad que la
 * version corta, asi que la sombra nunca llegaba a aplicarse y el campo se veia
 * blanco al enfocarlo o al rellenarlo.
 */
.inanna-form div.wpforms-container .wpforms-form .wpforms-field input:-webkit-autofill,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field input:-webkit-autofill:hover,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field input:-webkit-autofill:focus,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field input:-webkit-autofill:active,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field select:-webkit-autofill,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field textarea:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 100px var(--inanna-negro) inset;
	box-shadow: 0 0 0 100px var(--inanna-negro) inset;
	-webkit-text-fill-color: var(--inanna-crema);
	caret-color: var(--inanna-crema);
	/* Chrome vuelve a pintar el fondo al soltar el foco: la transicion eterna
	   deja el cambio siempre a medio camino, es decir, nunca llega a verse. */
	transition: background-color 100000s ease-in-out 0s;
}

/*
 * Version estandar del selector, en bloque aparte: un selector que el navegador
 * no entiende invalida la regla entera, y no queremos perder la de arriba.
 */
.inanna-form div.wpforms-container .wpforms-form .wpforms-field input:autofill,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field select:autofill,
.inanna-form div.wpforms-container .wpforms-form .wpforms-field textarea:autofill {
	box-shadow: 0 0 0 100px var(--inanna-negro) inset;
	-webkit-text-fill-color: var(--inanna-crema);
	caret-color: var(--inanna-crema);
	transition: background-color 100000s ease-in-out 0s;
}

/*
 * Signo de interrogacion de ayuda al lado de una etiqueta, con su globo.
 *
 * El boton se imprime desde inc/formulario.php, como hermano de la etiqueta.
 *
 * Ojo con los selectores: WPForms trae un reset global
 * ("div.wpforms-container-full, div.wpforms-container-full *") que pone
 * position, fondo, ancho, margenes y relleno a cero. Pesa mas que una sola
 * clase, asi que todas las reglas de aqui llevan el prefijo largo del
 * formulario; con ".inanna-ayuda" a secas el globo se quedaba estatico, sin
 * fondo y ocupando sitio dentro del signo, que era lo que empujaba el signo
 * debajo de la etiqueta y dejaba el texto negro sobre el fondo negro.
 *
 * La etiqueta va en linea y el signo detras, como una palabra mas: asi el
 * signo queda pegado al final del texto, parta la etiqueta en una linea o en
 * tres. Con el campo en "flex" no valia: el reparto en filas se decide con el
 * ancho de la etiqueta sin encoger, asi que en la columna estrecha del
 * escritorio el signo saltaba de fila igual.
 *
 * El margen de abajo de la etiqueta no cuenta estando en linea, asi que ese
 * aire lo pone el campo por arriba.
 */
.inanna-form div.wpforms-container .wpforms-form .inanna-campo--ayuda {
	position: relative;
}

.inanna-form div.wpforms-container .wpforms-form .inanna-campo--ayuda .wpforms-field-label {
	display: inline;
	margin: 0;
	-webkit-hyphens: none;
	hyphens: none;
	word-break: normal;
	overflow-wrap: normal;
}

.inanna-form div.wpforms-container .wpforms-form .inanna-campo--ayuda .inanna-ayuda {
	display: inline-block;
	margin-left: 0.4rem;
	vertical-align: middle;
}

.inanna-form div.wpforms-container .wpforms-form .inanna-campo--ayuda input,
.inanna-form div.wpforms-container .wpforms-form .inanna-campo--ayuda select,
.inanna-form div.wpforms-container .wpforms-form .inanna-campo--ayuda textarea {
	margin-top: 0.65rem;
}

.inanna-form div.wpforms-container .wpforms-form .inanna-ayuda__boton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.45em;
	height: 1.45em;
	padding: 0;
	border: 1px solid rgba(244, 241, 233, 0.45);
	border-radius: 50%;
	background: none;
	color: var(--inanna-crema);
	font-family: var(--inanna-fuente-texto);
	font-size: clamp(0.8rem, 0.95vw, 1.15rem);
	line-height: 1;
	cursor: pointer;
}

.inanna-form div.wpforms-container .wpforms-form .inanna-ayuda__boton:hover,
.inanna-form div.wpforms-container .wpforms-form .esta-abierta .inanna-ayuda__boton {
	border-color: var(--inanna-dorado);
	color: var(--inanna-dorado);
}

/*
 * El globo. Se coloca respecto al campo y no respecto al signo: colgado del
 * signo se salia de la pantalla cuando la etiqueta larga lo empuja contra el
 * borde derecho. Asi sale siempre encima del campo, alineado a su izquierda y
 * sin pasarse de su ancho.
 */
.inanna-form div.wpforms-container .wpforms-form .inanna-ayuda__burbuja {
	display: none;
	position: absolute;
	bottom: calc(100% + 0.6rem);
	left: 0;
	z-index: 10;
	width: 100%;
	max-width: 22rem;
	padding: 0.7rem 0.9rem;
	background: var(--inanna-crema);
	color: var(--inanna-negro);
	font-size: clamp(0.78rem, 0.85vw, 1rem);
	font-weight: 400;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: 0;
}

	/*
 * Piquito del globo. Apunta al signo: main.js mide donde cayo el signo dentro
 * del globo y deja la medida en "--inanna-piquito". Sin javascript se queda
 * cerca de la esquina izquierda, que es donde empieza la etiqueta.
 */
.inanna-form div.wpforms-container .wpforms-form .inanna-ayuda__burbuja::after {
	content: '';
	position: absolute;
	top: 100%;
	left: var(--inanna-piquito, 1.4rem);
	width: 0;
	height: 0;
	margin-left: -0.35rem;
	border: 0.35rem solid transparent;
	border-top-color: var(--inanna-crema);
}

.inanna-form div.wpforms-container .wpforms-form .esta-abierta .inanna-ayuda__burbuja {
	display: block;
}

/* Casilla de confirmacion. */
.inanna-form div.wpforms-container .wpforms-form .wpforms-field-checkbox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field-checkbox li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	cursor: pointer;
}

/*
 * WPForms no pinta la casilla en el propio <input>: lo deja transparente y
 * dibuja el cuadro en su ::before y la palomita en su ::after, los dos
 * colocados a -2px y con el tamano de su variable
 * --wpforms-field-size-checkbox-size. Como aqui la casilla es mas grande que
 * la suya, al marcarla aparecia ese segundo cuadro encima del nuestro, corrido
 * y de otra medida. Se apaga el suyo; el cuadro lo dibuja el input y la
 * palomita su ::after (ver mas abajo).
 */
.inanna-form div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"]::before {
	content: none;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: clamp(1.1rem, 1.35vw, 1.65rem);
	height: clamp(1.1rem, 1.35vw, 1.65rem);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: var(--inanna-crema);
	box-shadow: none;
	cursor: pointer;
	/* El cuadro se rellena de dorado al mismo tiempo que entra la palomita. */
	transition: background-color 120ms ease-out;
}

/*
 * La palomita. Va en el ::after y no en el fondo del propio input porque asi es
 * una capa aparte, que puede aparecer con su propio fundido mientras el cuadro
 * se rellena de dorado. Crece con la casilla (mide un 72% de ella) y no puede
 * descuadrarse.
 */
.inanna-form div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"]::after {
	content: '';
	position: absolute;
	inset: 0;
	/* WPForms dibuja aqui su propia palomita: se apaga lo que podria colarse. */
	border: 0;
	box-shadow: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.4 3.4L13 5.2' fill='none' stroke='%23151517' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 72% 72%;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 120ms ease-out, transform 120ms ease-out;
}

/* Marcada: el cuadro se rellena de dorado y la palomita entra creciendo un poco. */
.inanna-form div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"]:checked {
	background-color: var(--inanna-dorado);
	box-shadow: none;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"]:checked::after {
	opacity: 1;
	transform: none;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--inanna-dorado);
	outline-offset: 2px;
}

/* El hueco entre casilla y texto lo pone el 'gap' del <li>, no el plugin. */
.inanna-form div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"] + label {
	padding-inline-start: 0;
}

.inanna-form div.wpforms-container .wpforms-form .wpforms-field-label-inline {
	font-family: var(--inanna-fuente-texto);
	font-size: clamp(0.9rem, 1.15vw, 1.4rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--inanna-crema);
	cursor: pointer;
}

/* Boton de envio. */
.inanna-form div.wpforms-container .wpforms-form .wpforms-submit-container {
	padding: 1.5rem 0 0;
}

.inanna-form div.wpforms-container .wpforms-form button.wpforms-submit {
	/*
	 * WPForms le pone al boton 'height: var(--wpforms-button-size-height)', un
	 * alto fijo pensado para su letra, no para la nuestra: con la tipografia a
	 * este tamano la caja no daba y la palabra salia recortada por abajo. Con
	 * height auto vuelve a mandar el padding.
	 */
	height: auto;
	padding: 1rem 2.5rem;
	line-height: 1.2;
	border: none;
	border-radius: 0;
	background: var(--inanna-dorado);
	color: var(--inanna-negro);
	font-family: var(--inanna-fuente-texto);
	font-size: clamp(0.95rem, 1.3vw, 1.55rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition:
		background-color 150ms ease-out,
		transform 150ms ease-out;
}

/*
 * Al pasar por encima el boton sube un pixel y aclara el dorado lo justo para
 * que se note que responde. Al pulsar se hunde un poco. Nada mas: es el ultimo
 * gesto de la pagina y no tiene que llamar la atencion mas que el titular.
 */
.inanna-form div.wpforms-container .wpforms-form button.wpforms-submit:hover {
	background: var(--inanna-dorado-claro);
	color: var(--inanna-negro);
	transform: translateY(-1px);
}

.inanna-form div.wpforms-container .wpforms-form button.wpforms-submit:active {
	transform: scale(0.98);
}

/* Errores y mensaje de confirmacion sobre fondo oscuro. */
.inanna-form div.wpforms-container .wpforms-form label.wpforms-error {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: #e08a6a;
}

/*
 * El aviso de error no empuja el resto de la pagina.
 *
 * En escritorio el titular ("CUENTANOS QUE QUIERES CONSTRUIR") va centrado
 * contra la columna del formulario, asi que cualquier cosa que cambie el alto
 * de esa columna lo recoloca: al aparecer un aviso, el titular entero daba un
 * salto de unos veinte pixeles. El aviso pasa a ir colgado del campo, fuera del
 * flujo, y cabe de sobra en el hueco que la rejilla ya deja entre filas (2.5rem
 * de separacion, y el aviso mide una linea).
 *
 * Solo en escritorio: apilado en movil no hay titular al lado que descuadrar, y
 * ahi es mejor que el aviso ocupe su sitio y separe un campo del siguiente.
 */
@media (min-width: 783px), (min-device-width: 1025px) {
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field {
		position: relative;
	}

	.inanna-form div.wpforms-container .wpforms-form label.wpforms-error {
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 0.35rem;
	}

	/*
	 * Versiones recientes de WPForms pueden imprimir el error como <em> en vez
	 * de <label>. Se cubre la clase directamente para que el aviso no cambie la
	 * altura de la rejilla ni mueva el titulo o los campos al marcar la casilla.
	 */
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field > .wpforms-error {
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 0.35rem;
	}
}

/*
 * Mensaje de gracias tras enviar.
 *
 * WPForms trae de fabrica una caja verde para la confirmacion:
 *   div.wpforms-container-full .wpforms-confirmation-container-full
 *     { background: #e0ffc7; border: 1px solid #b4d39b }
 *   div.wpforms-container-full .wpforms-confirmation-container-full p
 *     { color: #333333 }
 * Los selectores de abajo repiten el prefijo largo para superar esa
 * especificidad y quitar la caja sin recurrir a !important. El segundo
 * selector cubre el envio por AJAX, donde el mensaje cuelga de div[submit-success].
 *
 * El texto vive en la confirmacion del formulario (WPForms > Solicitud Inanna >
 * Ajustes > Confirmaciones), no en esta plantilla.
 */
.inanna-landing .inanna-form div.wpforms-container .wpforms-confirmation-container-full,
.inanna-landing .inanna-form div[submit-success] > .wpforms-confirmation-container-full {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--inanna-crema);
}

.inanna-landing .inanna-form .wpforms-confirmation-container-full .inanna-gracias {
	max-width: 34rem;
	margin: 0 auto;
	padding: 2rem 0 1rem;
	text-align: center;
}

.inanna-landing .inanna-form .wpforms-confirmation-container-full .inanna-gracias__titulo {
	margin: 0;
	font-family: var(--inanna-fuente-titulos);
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--inanna-color-fondo);
}

.inanna-landing .inanna-form .wpforms-confirmation-container-full .inanna-gracias__texto {
	margin: 2rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--inanna-crema);
}

.inanna-landing .inanna-form .wpforms-confirmation-container-full .inanna-gracias__firma {
	margin: 3rem 0 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--inanna-color-fondo);
}

/*
 * El mismo mensaje, a pantalla completa.
 *
 * Al enviar, main.js copia el bloque .inanna-gracias dentro de este panel y lo
 * cuelga del <body>. El original se queda donde estaba (dentro del formulario)
 * para quien cierre el panel o llegue sin JavaScript; el panel es solo la
 * puesta en grande que pide el diseno, con su "Cerrar" arriba a la derecha.
 */
.inanna-gracias-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(3.5rem, 8vh, 5.5rem) clamp(1.5rem, 5vw, 6rem) clamp(2rem, 6vh, 4rem);
	background: var(--inanna-negro);
	color: var(--inanna-crema);
	overflow: hidden;
	overscroll-behavior: contain;
	/*
	 * El panel entra con un fundido largo mientras la pagina de detras se apaga
	 * (ver .inanna-gracias-abierto). Los dos duran lo mismo y llevan la misma
	 * curva, asi que se lee como un relevo y no como dos cosas a la vez.
	 */
	opacity: 0;
	transition: opacity 600ms var(--inanna-salida);
}

.inanna-gracias-overlay.esta-visible {
	opacity: 1;
}

/*
 * El contenido llega un poco despues que el fondo y subiendo diez pixeles: es
 * lo unico que se mueve en toda la transicion.
 */
.inanna-gracias-overlay .inanna-gracias,
.inanna-gracias-overlay__cerrar {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 600ms var(--inanna-salida) 80ms,
		transform 600ms var(--inanna-salida) 80ms;
}

.inanna-gracias-overlay.esta-visible .inanna-gracias,
.inanna-gracias-overlay.esta-visible .inanna-gracias-overlay__cerrar {
	opacity: 1;
	transform: none;
}

.inanna-gracias-overlay__cerrar {
	/*
	 * Sin seleccionar: al abrirse el panel el navegador deja el foco aqui y, con
	 * el, la palabra seleccionada. No es un problema de color sino de que no hay
	 * nada que seleccionar en un boton.
	 */
	-webkit-user-select: none;
	user-select: none;
	position: absolute;
	top: clamp(1.25rem, 3vh, 2.5rem);
	right: clamp(1.25rem, 4vw, 4rem);
	padding: 0;
	border: 0;
	background: none;
	color: var(--inanna-dorado);
	font-family: 'Century Gothic', var(--inanna-fuente-texto);
	font-size: clamp(1rem, 1.45vw, 1.5rem);
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
}

.inanna-gracias-overlay .inanna-gracias {
	width: 100%;
	max-width: min(82vw, 60rem);
	margin: 0 auto;
	text-align: center;
}

.inanna-gracias-overlay .inanna-gracias__titulo {
	margin: 0;
	font-family: var(--inanna-fuente-titulos);
	font-size: clamp(2.75rem, 5vw, 5.5rem);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--inanna-color-fondo);
}

.inanna-gracias-overlay .inanna-gracias__texto {
	margin: clamp(2.5rem, 9vh, 6rem) auto 0;
	max-width: 52rem;
	font-family: var(--inanna-fuente-texto);
	font-size: clamp(1rem, 1.65vw, 1.7rem);
	font-weight: 400;
	line-height: 1.35;
	color: var(--inanna-crema);
}

.inanna-gracias-overlay .inanna-gracias__firma {
	margin: clamp(2.5rem, 9vh, 6rem) 0 0;
	font-family: var(--inanna-fuente-texto);
	font-size: clamp(1rem, 1.65vw, 1.7rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--inanna-color-fondo);
}

.inanna-gracias-overlay .inanna-gracias__firma .inanna-acento {
	color: var(--inanna-dorado);
	font-weight: 700;
}

/* En pantallas de poca altura se comprimen solo los espacios, no el contenido. */
@media (max-height: 620px) and (min-width: 783px),
	(max-height: 620px) and (min-device-width: 1025px) {
	.inanna-gracias-overlay .inanna-gracias__texto,
	.inanna-gracias-overlay .inanna-gracias__firma {
		margin-top: 2rem;
	}

	.inanna-gracias-overlay .inanna-gracias__titulo {
		font-size: clamp(2.5rem, 8vh, 4.5rem);
	}
}

/*
 * Con el panel abierto la pagina de fondo no se desplaza y, ademas, se apaga
 * casi del todo. No se oculta: el panel es opaco y la tapa entera, pero
 * apagarla es lo que hace que el envio se sienta como un cambio de escena y no
 * como una ventana que se abre encima.
 */
.inanna-landing.inanna-gracias-abierto {
	overflow: hidden;
}

.inanna-landing > section,
.inanna-landing > footer {
	transition: opacity 600ms var(--inanna-salida);
}

.inanna-landing.inanna-gracias-abierto > section,
.inanna-landing.inanna-gracias-abierto > footer {
	opacity: 0.04;
}

/*
 * La cabecera se apaga con el resto, pero su transicion propia es la de los
 * 250ms del cambio de color: se le repite aqui la larga para que no se vaya
 * antes que la pagina que tiene debajo.
 */
.inanna-landing.inanna-gracias-abierto > .inanna-header {
	opacity: 0.04;
	transition: opacity 600ms var(--inanna-salida);
}

/* Footer */
.inanna-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: clamp(1.75rem, 2.5vw, 3rem) var(--inanna-margen-borde);
	border-top: 1px solid rgba(244, 241, 233, 0.15);
}

/* En el pie el logo va al tamano grande: es lo ultimo que se ve de la marca. */
.inanna-footer .inanna-marca {
	height: clamp(3rem, 4.6vw, 5.5rem);
}

.inanna-footer__legal {
	margin: 0;
	font-size: clamp(0.72rem, 0.95vw, 1.15rem);
	letter-spacing: 0.02em;
	color: var(--inanna-crema);
}

/*
 * El bloque final del pie: los iconos y el aviso legal viajan juntos a la
 * derecha, con el logo solo al otro extremo.
 */
.inanna-footer__final {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2.3vw, 2.4rem);
}

/*
 * Redes sociales del pie. Los SVG ya traen la caja dorada y el icono negro,
 * asi que aqui solo se controla el tamano y el gesto al pasar el raton.
 */
.inanna-footer__redes {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(0.6rem, 1.1vw, 1.05rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.inanna-footer__red {
	display: block;
}

.inanna-footer__red a {
	display: block;
	line-height: 0;
	border-radius: 22%;
	transition: transform 220ms var(--inanna-salida), opacity 220ms var(--inanna-salida);
}

.inanna-footer__red img {
	display: block;
	width: clamp(2rem, 2.9vw, 2.75rem);
	height: auto;
}

.inanna-footer__red a:hover,
.inanna-footer__red a:focus-visible {
	transform: translateY(-2px);
	opacity: 0.85;
}

/* Animaciones */
/*
 * Entradas al hacer scroll.
 *
 * Todas funcionan igual: la pieza empieza apagada y unos pixeles mas abajo, y
 * main.js le pone la clase "esta-visible" la primera vez que su seccion asoma
 * por la ventana. Solo la primera: al volver a subir no se repite nada.
 *
 * Lo que cambia de una seccion a otra son tres numeros, y por eso van en
 * variables en vez de en una regla por seccion:
 *
 *   --inanna-anima-y       cuanto sube (0 = solo fundido)
 *   --inanna-anima-dur     cuanto tarda
 *   --inanna-anima-espera  cuanto se retrasa respecto a sus hermanas
 *
 * Todo el estado inicial cuelga de .inanna-js, la clase que la plantilla pone
 * en <html> nada mas empezar: si no hay javascript no hay nada que encienda las
 * piezas, asi que sin esa clase se quedan visibles desde el principio.
 */
.inanna-js .inanna-anima {
	opacity: 0;
	transform: translateY(var(--inanna-anima-y, 8px));
	transition:
		opacity var(--inanna-anima-dur, 800ms) var(--inanna-salida) var(--inanna-anima-espera, 0ms),
		transform var(--inanna-anima-dur, 800ms) var(--inanna-salida) var(--inanna-anima-espera, 0ms);
}

.inanna-js .inanna-anima.esta-visible {
	opacity: 1;
	transform: none;
}

/*
 * Portada. Entra al cargar, no al hacer scroll. El titular sube ocho pixeles y
 * la foto solo se enciende: una foto a sangre que ademas se desplaza deja ver
 * el borde por el que entra, y aqui no hay margen donde esconderlo.
 */
.inanna-anima--titulo {
	--inanna-anima-y: 8px;
	--inanna-anima-dur: 900ms;
}

.inanna-anima--foto-hero {
	--inanna-anima-y: 0px;
	--inanna-anima-dur: 900ms;
}

/*
 * Parrafo y boton de la portada (solo movil). Entran detras del titular y uno
 * detras de otro: la portada se lee de arriba abajo y el boton es lo ultimo
 * que aparece, que es donde tiene que quedarse la vista.
 */
.inanna-anima--hero-apoyo {
	--inanna-anima-y: 8px;
	--inanna-anima-dur: 850ms;
	--inanna-anima-espera: 140ms;
}

.inanna-hero__cta.inanna-anima--hero-apoyo {
	--inanna-anima-espera: 260ms;
}

/* Titulares de seccion: el manifiesto y el del formulario. */
.inanna-anima--seccion {
	--inanna-anima-y: 15px;
	--inanna-anima-dur: 1000ms;
}

/*
 * Los tres pilares se encienden uno detras de otro, no a la vez: el retraso es
 * largo (220ms) porque son tres palabras sueltas y se leen de izquierda a
 * derecha, como una frase.
 */
.inanna-anima--pilar {
	--inanna-anima-y: 8px;
	--inanna-anima-dur: 850ms;
}

.inanna-pilar:nth-child(2) {
	--inanna-anima-espera: 220ms;
}

.inanna-pilar:nth-child(3) {
	--inanna-anima-espera: 440ms;
}

/* La raya de los pilares crece desde la izquierda, a la vez que el primero. */
.inanna-js .inanna-pilares:not(.esta-visible)::before {
	transform: scaleX(0);
}

/*
 * Foto apaisada. Es la pieza mas grande de la pagina y entra sola con el
 * desplazamiento: lo unico que se le anade es un fundido largo, tan lento que
 * mas que verse se nota que la foto no aparece de golpe.
 */
.inanna-anima--foto {
	--inanna-anima-y: 0px;
	--inanna-anima-dur: 1100ms;
}

/* Texto editorial de debajo de la foto. */
.inanna-anima--editorial {
	--inanna-anima-y: 10px;
	--inanna-anima-dur: 900ms;
}

/*
 * Mosaico. Entra entero, como un bloque: las cuatro fotos forman una sola
 * composicion y animarlas por separado la rompe justo cuando se esta mirando.
 */
.inanna-anima--bloque {
	--inanna-anima-y: 20px;
	--inanna-anima-dur: 1000ms;
}

/*
 * Preguntas. Tambien entra el bloque entero; el escalonado entre la etiqueta,
 * el titular y la lista es minimo, lo justo para que no se lea como una sola
 * placa que sube.
 */
.inanna-anima--faq {
	--inanna-anima-y: 25px;
	--inanna-anima-dur: 1000ms;
}

.inanna-faq h2.inanna-anima {
	--inanna-anima-espera: 70ms;
}

.inanna-faq__lista.inanna-anima {
	--inanna-anima-espera: 140ms;
}

/*
 * Campos del formulario. La clase se la pone PHP a cada campo
 * (inc/formulario.php) y el retraso lo reparte main.js. Es corto a proposito:
 * el formulario tiene que aparecer entero, no montarse delante de quien va a
 * rellenarlo.
 */
.inanna-anima--campo {
	--inanna-anima-y: 8px;
	--inanna-anima-dur: 800ms;
}

/*
 * Desplegable propio.
 *
 * El <select> del navegador no deja pintar ni animar su lista: el sistema
 * operativo la dibuja por su cuenta, con sus colores. Asi que main.js lo deja
 * en su sitio (es el que viaja en el envio y el que valida WPForms) pero lo
 * tapa con este boton y esta lista, que si son parte de la pagina.
 *
 * Sin javascript no se monta nada y se queda el <select> de siempre, que ya
 * tiene su estilo mas arriba.
 *
 * Todas las reglas de aqui abajo llevan el prefijo largo, como el resto del
 * formulario, y no es adorno: la hoja de WPForms abre con un reset
 *
 *   div.wpforms-container-full, div.wpforms-container-full * { position: static;
 *     padding: 0; width: auto; height: auto; overflow: visible; visibility:
 *     visible; background: none; box-shadow: none; ... }
 *
 * que vale mas que una clase suelta. Escritas como '.inanna-select__panel' se
 * perdian justo esas propiedades: la lista se quedaba dentro del flujo (dejaba
 * un hueco vacio de unos 120px entre el desplegable y el campo siguiente),
 * las opciones sin su relleno y la flecha en 0x0, o sea invisible.
 */
.inanna-form div.wpforms-container .wpforms-form .inanna-select {
	position: relative;
}

/*
 * El <select> de verdad, debajo del boton. Ni se ve ni recibe clics, pero
 * sigue estando: por eso el formulario se envia y se valida como siempre, y
 * por eso el error de "campo obligatorio" cae donde tiene que caer.
 */
.inanna-form div.wpforms-container .wpforms-form .wpforms-field .inanna-select__nativo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.inanna-form div.wpforms-container .wpforms-form .inanna-select__disparador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	height: auto;
	padding: 0.35rem 0 0.6rem;
	border: 0;
	border-bottom: 1px solid rgba(244, 241, 233, 0.3);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--inanna-crema);
	font-family: var(--inanna-fuente-texto);
	font-size: clamp(1.05rem, 1.25vw, 1.5rem);
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	/* El mismo cambio de linea que los demas campos al enfocarse. */
	transition: border-color 200ms ease-out;
}

.inanna-form div.wpforms-container .wpforms-form .inanna-select__disparador:focus-visible,
.inanna-form div.wpforms-container .wpforms-form .inanna-select.esta-abierto .inanna-select__disparador {
	outline: none;
	border-bottom-color: var(--inanna-dorado);
}

.inanna-form div.wpforms-container .wpforms-form .inanna-select__valor {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Sin elegir nada, el texto va del gris del placeholder de los otros campos. */
.inanna-form div.wpforms-container .wpforms-form .inanna-select.esta-vacio .inanna-select__valor {
	color: rgba(244, 241, 233, 0.38);
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* La flecha no gira ni se mueve: es la misma que tenia el <select>. */
.inanna-form div.wpforms-container .wpforms-form .inanna-select__flecha {
	flex: 0 0 auto;
	width: 12px;
	height: 7px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23f4f1e9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/*
 * La lista. Se abre con un fundido corto bajando cuatro pixeles y se cierra
 * haciendo el camino contrario; la 'visibility' es la que la saca del alcance
 * del raton y del teclado cuando esta cerrada, y espera a que acabe el fundido
 * (de ahi el retardo).
 */
.inanna-form div.wpforms-container .wpforms-form .inanna-select__panel {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 15rem;
	overflow-y: auto;
	padding: 0.35rem 0;
	background: var(--inanna-negro-elevado);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px);
	visibility: hidden;
	transition:
		opacity 150ms ease-out,
		transform 150ms ease-out,
		visibility 0s linear 150ms;
}

.inanna-form div.wpforms-container .wpforms-form .inanna-select.esta-abierto .inanna-select__panel {
	opacity: 1;
	pointer-events: auto;
	transform: none;
	visibility: visible;
	transition:
		opacity 150ms ease-out,
		transform 150ms ease-out,
		visibility 0s;
}

.inanna-form div.wpforms-container .wpforms-form .inanna-select__opcion {
	padding: 0.55rem 0.9rem;
	color: var(--inanna-crema);
	font-size: clamp(0.95rem, 1.1vw, 1.3rem);
	line-height: 1.35;
	cursor: pointer;
	transition: color 150ms ease-out, background-color 150ms ease-out;
}

/*
 * "esta-activa" es la opcion sobre la que esta el raton o el cursor del
 * teclado; aria-selected, la que ya esta elegida. Las dos van en dorado, que
 * es el unico color con el que esta pagina senala algo.
 */
.inanna-form div.wpforms-container .wpforms-form .inanna-select__opcion:hover,
.inanna-form div.wpforms-container .wpforms-form .inanna-select__opcion.esta-activa {
	background-color: rgba(230, 187, 93, 0.08);
	color: var(--inanna-dorado);
}

.inanna-form div.wpforms-container .wpforms-form .inanna-select__opcion[aria-selected="true"] {
	color: var(--inanna-dorado);
}

/*
 * Accesibilidad: con el sistema puesto en "reducir movimiento" no se anima
 * nada. Las piezas se quedan donde tienen que estar y los cambios de estado
 * (cabecera, respuestas, panel de gracias) siguen ocurriendo, pero de una vez.
 *
 * El 0.01ms en lugar de 0s no es un capricho: deja que los eventos de fin de
 * transicion se sigan disparando, que es de lo que dependen algunos cierres.
 */
@media (prefers-reduced-motion: reduce) {
	.inanna-js .inanna-anima {
		opacity: 1;
		transform: none;
	}

	.inanna-js .inanna-pilares:not(.esta-visible)::before {
		transform: none;
	}

	.inanna-landing *,
	.inanna-landing *::before,
	.inanna-landing *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	/*
	 * Excepcion. La transicion eterna de los campos autorrellenados no es una
	 * animacion, es lo que impide que Chrome vuelva a pintar el campo de blanco
	 * al soltar el foco (ver ":-webkit-autofill" mas arriba). Acortarla aqui
	 * dejaria esos campos ilegibles, asi que se le devuelve su duracion.
	 */
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field input:-webkit-autofill,
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field select:-webkit-autofill,
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field textarea:-webkit-autofill {
		transition-duration: 100000s !important;
	}

	.inanna-form div.wpforms-container .wpforms-form .wpforms-field input:autofill,
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field select:autofill,
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field textarea:autofill {
		transition-duration: 100000s !important;
	}
}

/* Responsive */
/*
 * Movil. No es el escritorio encogido: tiene su propio recorrido, asi que aqui
 * no solo cambian medidas, tambien se enciende y se apaga contenido.
 *
 *   portada  ->  foto, titular, parrafo de apoyo y boton "Aplicar a Inanna"
 *   claro    ->  "UNA ESTRATEGIA DISENADA PARA TI", texto, foto y mosaico
 *   cierre   ->  preguntas y formulario, apilados
 *
 * Lo que en movil no aparece (manifiesto, pilares y la foto apaisada suelta)
 * se apaga al final del bloque; en escritorio sigue igual que siempre.
 */
/*
 * La anchura del viewport tambien cae por debajo de 782px al ampliar un
 * escritorio al 250%-400%. El limite de dispositivo evita confundir ese caso
 * con un telefono o una tableta real y conserva la composicion de escritorio.
 */
@media (max-width: 782px) and (max-device-width: 1024px) {
	:root {
		/*
		 * Aire de arriba y de abajo del logo en la barra. Es mas del doble que en
		 * escritorio (alli son ~14px) porque en movil la cabecera es una franja
		 * crema con el logo suelto en medio: con el aire de escritorio la barra
		 * queda estrecha y el logo la toca por arriba y por abajo.
		 */
		--inanna-cabecera-aire: 1.75rem;
		/* Apilado, el texto del hero vuelve al 5% del ancho completo. */
		--inanna-margen-borde: 5%;
	}

	/*
	 * La barra deja de flotar sobre la foto: ocupa su sitio y la portada empieza
	 * justo debajo. 'sticky' es lo que mantiene lo unico que se conserva de la
	 * cabecera fija, que siga a la vista al bajar.
	 */
	.inanna-header {
		position: sticky;
		background-color: var(--inanna-crema);
		color: var(--inanna-color-texto);
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 250ms ease-out;
	}

	.inanna-header--oculta {
		opacity: 1;
		visibility: visible;
	}

	.inanna-header > .inanna-logo,
	.inanna-header > .inanna-nav-toggle {
		transition: opacity 250ms ease-out;
	}

	.inanna-menu-visible .inanna-header > .inanna-logo,
	.inanna-menu-visible .inanna-header > .inanna-nav-toggle {
		opacity: 0;
	}

	/*
	 * Con la barra en crema desde el primer momento, el logo que vale es el de
	 * letras negras. El cruce entre los dos archivos (transparente -> solida)
	 * aqui no tiene nada que cruzar, asi que se deja fijo el estado final.
	 */
	.inanna-header .inanna-marca--sobre-oscuro {
		opacity: 0;
	}

	.inanna-header .inanna-marca--sobre-claro {
		opacity: 1;
	}

	.inanna-nav-toggle {
		display: flex;
	}

	/*
	 * El menu deja de ser una fila y pasa a ser un overlay negro que cubre toda
	 * la pantalla. Se muestra al pulsar la hamburguesa (clase la pone main.js).
	 */
	.inanna-nav {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 100;
		flex-direction: column;
		padding: 1.75rem 6% 3rem;
		background: var(--inanna-negro);
		color: var(--inanna-crema);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: none;
		transition:
			opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 420ms;
	}

	.inanna-nav.esta-abierto {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition:
			opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s;
	}

	.inanna-nav__cabecera {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		opacity: 0;
		transition: opacity 250ms ease-out;
	}

	.inanna-nav.esta-abierto .inanna-nav__cabecera {
		opacity: 1;
	}

	/* Dentro del overlay el logo va a su tamano completo, no al de la cabecera. */
	.inanna-nav__logo .inanna-marca {
		height: 2.5rem;
	}

	.inanna-nav__cerrar {
		flex: 0 0 auto;
		padding: 0.5rem 0 0.5rem 1rem;
		border: 0;
		background: none;
		color: rgba(244, 241, 233, 0.65);
		font-family: inherit;
		font-size: 0.9rem;
		cursor: pointer;
	}

	.inanna-nav__enlaces {
		flex-direction: column;
		align-items: flex-start;
		gap: 2.75rem;
		margin-top: 3.5rem;
	}

	.inanna-nav__enlaces a {
		opacity: 0;
		transform: translateY(5px);
		transition:
			opacity 350ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.inanna-nav.esta-abierto .inanna-nav__enlaces a {
		opacity: 1;
		transform: none;
	}

	.inanna-nav.esta-abierto .inanna-nav__enlaces a:nth-child(2) { transition-delay: 35ms; }
	.inanna-nav.esta-abierto .inanna-nav__enlaces a:nth-child(3) { transition-delay: 70ms; }
	.inanna-nav.esta-abierto .inanna-nav__enlaces a:nth-child(4) { transition-delay: 105ms; }

	.inanna-nav a {
		font-size: 1.35rem;
		letter-spacing: 0.01em;
		color: var(--inanna-crema);
	}

	/*
	 * En el menu de pantalla completa "Aplicar" va como un enlace mas. La caja
	 * es cosa de la cabecera de escritorio, donde los cuatro enlaces van en fila
	 * y hace falta algo que distinga al ultimo; aqui van uno debajo de otro y la
	 * caja solo rompe la lista.
	 */
	.inanna-nav__cta {
		padding: 0;
		border: 0;
	}

	/* Portada */
	.inanna-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	/* En movil manda la foto: va arriba y el titular queda debajo. */
	.inanna-hero__foto {
		order: -1;
	}

	.inanna-hero__foto .inanna-img {
		height: auto;
		aspect-ratio: 7 / 8;
	}

	.inanna-hero__foto .inanna-picture {
		height: auto;
	}

	/*
	 * Bajo la foto, los tres bloques van uno debajo de otro y alineados a la
	 * izquierda: titular, parrafo de apoyo y boton.
	 */
	.inanna-hero__texto {
		flex-direction: column;
		align-items: flex-start;
		/*
		 * 4% y no el 5% del resto: en el diseno el titular arranca mas pegado al
		 * borde que las demas secciones, y es lo que le da sitio para llenar el
		 * renglon de lado a lado.
		 */
		padding: 2.5rem 4% 4rem;
	}

	/*
	 * La portada se mide en vw, no en rem.
	 *
	 * Con rem el titular se queda del mismo tamano en cualquier telefono, asi
	 * que cuanto mas ancha la pantalla mas pequeno se ve respecto a ella: en un
	 * movil normal "TU POTENCIAL" ocupaba el 80% del ancho y en el diseno ocupa
	 * el 89%, o sea la caja de texto entera. En vw la proporcion se mantiene.
	 *
	 * 13.2vw es justo esa medida: "TU POTENCIAL" son 6.81 anchos de letra de
	 * Marcellus, y 6.81 x 13.2vw = 90% del ancho de pantalla, que es la caja de
	 * texto (100% menos el 4% de cada lado). El tope en rem es para que en una
	 * tableta pequena, ya cerca del salto a escritorio, no se dispare.
	 */
	.inanna-hero h1 {
		font-size: min(13.2vw, 4.75rem);
	}

	/*
	 * El hueco entre el titular y el parrafo es la mitad del bloque negro: en el
	 * diseno la portada respira ahi, no en los bordes. Va en vw para que crezca
	 * con la pantalla, con tope arriba y abajo para que no se coma la pagina en
	 * una tableta ni se cierre en un telefono pequeno.
	 */
	/*
	 * El parrafo va por la misma regla que el titular: en vw, para que guarde
	 * con el la proporcion del diseno, y sin tope de ancho, para que sean los
	 * bordes de la caja los que decidan donde corta cada linea (asi salen los
	 * cinco renglones del diseno).
	 *
	 * El hueco de arriba es el del diseno, casi la mitad del ancho de pantalla:
	 * la portada respira ahi, entre el titular y el texto, no en los bordes.
	 */
	.inanna-hero__descripcion {
		display: block;
		margin: min(18vw, 5rem) 0 0;
		font-size: min(5vw, 1.75rem);
		line-height: 1.6;
		color: rgba(244, 241, 233, 0.85);
	}

	/* Divisor dorado incorporado en el mockup movil final. */
	.inanna-hero__descripcion::before {
		content: '';
		display: block;
		width: 5rem;
		height: 2px;
		margin-bottom: 1.75rem;
		background: var(--inanna-dorado);
	}

	/*
	 * El boton tambien crece con la pantalla. Los rellenos van en em (es decir,
	 * en multiplos de su propia letra) para que la caja guarde su forma: en el
	 * diseno mide poco menos de la mitad del ancho de pantalla y es bastante
	 * mas alta que la linea de texto que lleva dentro.
	 */
	.inanna-hero__cta {
		display: inline-block;
		margin-top: min(13vw, 3.75rem);
		padding: 1.5em 1.45em;
		background: var(--inanna-dorado);
		color: var(--inanna-negro);
		font-size: min(3.4vw, 1.2rem);
		font-weight: 600;
		letter-spacing: 0.1em;
		line-height: 1;
		text-transform: uppercase;
		text-decoration: none;
	}

	/*
	 * Manifiesto y foto apaisada no van en movil. El manifiesto se queda en el
	 * documento, vacio y sin altura, porque es el destino de "Filosofia" en el
	 * menu: asi el enlace sigue llevando al principio de la parte clara.
	 */
	.inanna-manifesto {
		min-height: 0;
		/* Vacia y sin altura: el respiro de escritorio dejaria una franja negra
		 * suelta entre la portada y la seccion clara. */
		margin-top: 0;
		padding: 0;
	}

	.inanna-manifesto__etiqueta,
	.inanna-manifesto h2,
	.inanna-pilares,
	.inanna-feature {
		display: none;
	}

	/* Seccion clara: aqui es la portada del bloque en crema. */
	.inanna-about {
		padding: 3rem 5% 3.5rem;
	}

	.inanna-about__titulo {
		display: block;
		font-size: clamp(1.9rem, 9vw, 2.6rem);
		color: var(--inanna-color-texto);
	}

	/* Raya dorada corta entre el titular y el texto. */
	.inanna-about__titulo::after {
		content: '';
		display: block;
		width: 5rem;
		height: 2px;
		margin-top: 1.35rem;
		background: var(--inanna-dorado);
	}

	.inanna-about__entrada {
		display: inline;
	}

	.inanna-about p {
		margin-top: 1.75rem;
		font-size: 0.95rem;
		line-height: 1.7;
		color: rgba(21, 21, 23, 0.75);
	}

	/*
	 * La foto de la seccion. Manda la proporcion del archivo (es la apaisada,
	 * que en movil solo se ve aqui): recortarla a vertical partiria a la modelo.
	 */
	.inanna-about__foto {
		display: block;
		margin-top: 2.25rem;
	}

	/*
	 * El mosaico conserva su composicion (foto alta a la izquierda, una arriba a
	 * la derecha y dos abajo) pero con otras proporciones: con las del
	 * escritorio, en un ancho de telefono las tres de la derecha quedan en tiras
	 * demasiado bajas. Estos numeros salen de la version movil del diseno.
	 */
	.inanna-galeria__mosaico {
		grid-template-columns: 1fr 0.755fr 0.828fr;
		grid-template-rows: 1fr 1.37fr;
		gap: 0.2rem;
		aspect-ratio: 0.666;
	}

	/* La separacion completa entre el mosaico y FAQ la pone la propia FAQ. */
	.inanna-galeria {
		padding-bottom: 0;
	}

	/* Preguntas */
	.inanna-faq {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: var(--inanna-alto-cabecera) 5% 4rem;
		/* La columna del numero se aprieta: en movil 2.5rem se comen la pregunta. */
		--inanna-faq-num: 1.9rem;
	}

	.inanna-faq__etiqueta {
		display: none;
	}

	/* El titular replica la alineacion y escala del titulo de Estrategia. */
	.inanna-faq h2 {
		font-size: clamp(1.9rem, 9vw, 2.6rem);
		text-align: left;
	}

	.inanna-faq h2 br {
		display: none;
	}


	.inanna-faq h2::after {
		content: '';
		display: block;
		width: 5rem;
		height: 2px;
		margin-top: 1.35rem;
		background: var(--inanna-dorado);
	}

	.inanna-faq__item summary {
		font-size: 0.95rem;
	}

	.inanna-faq__num {
		font-size: 0.7rem;
	}

	.inanna-faq__item p {
		font-size: 0.82rem;
		line-height: 1.6;
	}

	/* Contacto */
	.inanna-contacto {
		grid-template-columns: 1fr;
		gap: 3rem;
		padding: calc(3.5rem + var(--inanna-aire-seccion)) 5% 3.5rem;
	}

	/*
	 * El relleno de arriba ya reserva el alto de la cabecera, asi que aqui no
	 * hay que reservarlo otra vez con scroll-margin: sumaba dos veces y "Aplicar"
	 * frenaba con una franja negra vacia sobre el titular. Con 0 la cabecera se
	 * apoya justo sobre ese relleno y el titular queda pegado debajo.
	 */
	#aplicar {
		scroll-margin-top: 0;
	}

	/* Sin formulario al lado, el titular se centra sobre el. */
	.inanna-contacto h2 {
		font-size: min(13.2vw, 4.75rem);
		text-align: center;
	}

	.inanna-form .wpforms-field-container {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	/* La ayuda queda junto a su etiqueta; nunca pegada al encabezado. */
	.inanna-form div.wpforms-container .wpforms-form .inanna-ayuda__burbuja {
		position: absolute;
		top: calc(1.45em + 0.85rem);
		bottom: auto;
		left: 0 !important;
		z-index: 30;
		width: 100%;
		max-width: none;
		padding: 0.8rem 0.9rem;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	}

	.inanna-form div.wpforms-container .wpforms-form .inanna-ayuda__burbuja::after {
		content: none;
	}

	/* Al abrirla, el campo crece para que el mensaje no tape el input. */
	.inanna-form div.wpforms-container .wpforms-form .inanna-campo--ayuda:has(.inanna-ayuda.esta-abierta) input {
		margin-top: 3.5rem;
	}

	/*
	 * En movil la lista forma parte del flujo del formulario. Si se deja
	 * absoluta, como en escritorio, cae encima de la etiqueta y del textarea
	 * siguientes (y estos terminan tapando parte de las opciones). Al abrirla
	 * se expande el campo y desplaza hacia abajo todo lo que viene despues.
	 */
	.inanna-form div.wpforms-container .wpforms-form .inanna-select__panel {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		z-index: auto;
		max-height: 0;
		overflow: hidden;
		margin-top: 0;
		padding: 0;
		transform: none;
		transition:
			max-height 100ms ease-out,
			margin-top 100ms ease-out,
			padding 100ms ease-out,
			opacity 100ms ease-out,
			visibility 0s linear 100ms;
	}

	.inanna-form div.wpforms-container .wpforms-form .inanna-select.esta-abierto .inanna-select__panel {
		max-height: 22rem;
		overflow-y: auto;
		margin-top: 0.35rem;
		padding: 0.35rem 0;
		transition:
			max-height 130ms ease-out,
			margin-top 130ms ease-out,
			padding 130ms ease-out,
			opacity 130ms ease-out,
			visibility 0s;
	}

	/*
	 * En movil casi todo entra por el scroll natural. Las clases que PHP y JS
	 * comparten con escritorio quedan visibles y sin movimiento por defecto.
	 */
	.inanna-js .inanna-anima {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Unico gesto de carga del hero: el titulo hace un fade corto. */
	.inanna-js .inanna-hero .inanna-anima--titulo {
		opacity: 0;
		transform: translateY(6px);
		transition:
			opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.inanna-js .inanna-hero .inanna-anima--titulo.esta-visible {
		opacity: 1;
		transform: none;
	}

	/* Estrategia entra completa con un reveal lento y contenido. */
	.inanna-js .inanna-about .inanna-about__titulo,
	.inanna-js .inanna-about > p,
	.inanna-js .inanna-about .inanna-about__foto {
		opacity: 0;
		transform: translateY(6px);
		transition:
			opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.inanna-js .inanna-about.esta-visible .inanna-about__titulo,
	.inanna-js .inanna-about.esta-visible > p,
	.inanna-js .inanna-about.esta-visible .inanna-about__foto {
		opacity: 1;
		transform: none;
	}

	/* La galeria se revela como una sola pieza, nunca foto por foto. */
	.inanna-js .inanna-galeria__mosaico.inanna-anima--bloque {
		opacity: 0;
		transform: none;
		transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.inanna-js .inanna-galeria__mosaico.inanna-anima--bloque.esta-visible {
		opacity: 1;
	}

	/* Interacciones tactiles cortas y sin depender de hover. */
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field input,
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field select,
	.inanna-form div.wpforms-container .wpforms-form .wpforms-field textarea,
	.inanna-form div.wpforms-container .wpforms-form .inanna-select__disparador {
		transition: border-color 180ms ease-out;
	}

	.inanna-faq__icono::after {
		transition-duration: 200ms;
	}

	.inanna-form div.wpforms-container .wpforms-form button.wpforms-submit:hover {
		background: var(--inanna-dorado);
		transform: none;
	}

	.inanna-form div.wpforms-container .wpforms-form button.wpforms-submit:active {
		transform: scale(0.98);
		transition-duration: 90ms;
	}

	/* Confirmacion: crossfade puro, sin el desplazamiento de escritorio. */
	.inanna-gracias-overlay {
		transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.inanna-gracias-overlay .inanna-gracias,
	.inanna-gracias-overlay__cerrar {
		transform: none;
		transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.inanna-landing > section,
	.inanna-landing > footer,
	.inanna-landing.inanna-gracias-abierto > .inanna-header {
		transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	/*
	 * En movil el pie se apila sobre un solo eje: la marca arriba, las redes
	 * al centro y el aviso legal al final.
	 */
	.inanna-footer {
		/*
		 * El emblema pesa mucho mas que las letras, asi que la marca se lee
		 * corrida a la izquierda aunque su caja este centrada al pixel. Este
		 * empujon corrige el centro optico, y lo comparten los tres bloques
		 * para que queden a plomo entre si.
		 */
		--inanna-pie-empuje: min(2.1vw, 0.63rem);

		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: clamp(1.75rem, 8vw, 3rem);
		padding-top: clamp(2.25rem, 9vw, 3.5rem);

		/* Aire de sobra abajo: la flecha de "subir" flota en esa esquina y no
		   debe leerse como parte de la linea del aviso legal. */
		padding-bottom: clamp(4.5rem, 15vw, 5.5rem);
	}

	.inanna-footer .inanna-marca {
		width: min(60vw, 18rem);
		height: auto;
		transform: translateX(var(--inanna-pie-empuje));
	}

	.inanna-footer__final {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		transform: translateX(var(--inanna-pie-empuje));
	}

	.inanna-footer__redes {
		gap: 2rem;
	}

	.inanna-footer__legal {
		width: 100%;
	}

	.inanna-footer__red img {
		width: clamp(2.1rem, 9vw, 2.6rem);
	}
}