/*
Theme Name: Franco Salomone Referente
Theme URI: https://francosalomone.com/
Author: Franco Salomone
Description: Tema de bloques de Franco Salomone para el Método Referente: LinkedIn para profesionales de la salud. La portada abre en azul con un perfil de ejemplo que pasa de "Hoy" a "Al día 14" y se va armando con cada etapa. Los perfiles y las maquetas son bloques: cada campo se edita en el editor. Trae adentro el buscador, la auditoría de perfil, el formulario del diagnóstico y la barra de especialidades.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.2
Version: 2.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: franco-salomone-referente
Tags: full-site-editing, block-patterns, block-styles, custom-colors, editor-style, wide-blocks, one-column
*/

/* La paleta, las fuentes, la escala y los espacios viven en theme.json y se
   editan en Apariencia > Editor > Estilos. Acá va solo lo que theme.json no
   alcanza a decir. Cada regla cuelga de una clase fsr- que está puesta en el
   bloque: si se saca la clase en el editor, la regla deja de aplicarse.
   Ver docs/18-tema-referente.md. */

*,
*::before,
*::after { box-sizing: inherit; }

html {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body { margin: 0; overflow-x: clip; }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Cabecera, contenido y pie van pegados: el espacio lo pone cada sección. */
.wp-site-blocks { position: relative; }
.wp-site-blocks > * { margin-block-start: 0; }

/* El salto a una sección no queda pegado al borde de la ventana. */
main [id] { scroll-margin-top: 24px; }

/* =========================================================================
   Texto
   ========================================================================= */

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.fsr-seccion h2 { max-width: 20ch; }

/* El título de la portada se ajusta al ancho de su columna: "profesionales"
   tiene que entrar entero en cualquier pantalla. */
.fsr-portada h1 { font-size: clamp(2.5rem, 6.6vw + 0.2rem, 6.125rem); }

/* Texto corrido: 68 caracteres por línea como máximo. Medido con Inter.
   Los párrafos de ancho amplio (el remate y la posdata) no entran, ni los
   de las piezas, los perfiles y las maquetas. */
.fsr-seccion p:not(.alignwide) { max-width: 48ch; }
.fsr-seccion .fsl p,
.fsr-seccion .fsr-perfil-zona p,
.fsr-seccion .fsr-maqueta p { max-width: none; }

/* El rótulo de cada sección: celeste, con el texto en azul. */
.fsr-rotulo { width: fit-content; max-width: 100%; border-radius: 8px; }

/* Una línea con la barra a la izquierda, como en los carruseles. */
.fsr-con-barra { position: relative; padding-left: 20px; font-weight: 600; }
.fsr-con-barra::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	border-radius: 3px;
	background: var(--wp--preset--color--secondary);
}
.fsr-azul .fsr-con-barra::before { background: var(--wp--preset--color--secondary-light); }

/* =========================================================================
   Cabecera y pie
   ========================================================================= */

.fsr-marca a,
.fsr-nav a,
.fsr-pie-enlace a { color: inherit; text-decoration: none; }
.fsr-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.fsr-pie-enlace a:hover { text-decoration: underline; }

/* En la portada, la cabecera va encima del azul de la primera pantalla. En
   las demás páginas lleva su propio fondo azul. */
.home .wp-site-blocks > header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
}
.home .fsr-barra { background: transparent !important; }

/* Los enlaces del pie y los que van solos en un renglón se tocan con el
   dedo: el relleno agranda el área. */
.fsr-pie-enlace a,
.fsr-enlace-solo a { display: inline-block; padding: 7px 0; }

/* Los enlaces a las secciones no entran en pantallas medianas. En teléfono
   queda la marca sola: el botón de la portada está a la vista y la barra de
   especialidades ya lleva al formulario. */
@media (max-width: 1099px) {
	.fsr-nav { display: none !important; }
}
@media (max-width: 781px) {
	.fsr-barra-boton { display: none !important; }
}

/* =========================================================================
   Tarjetas, fotos e íconos
   ========================================================================= */

.fsr-tarjeta,
main .fsl .card { box-shadow: var(--wp--preset--shadow--suave); }

.fsr-marco { margin: 0; }
.fsr-marco img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: var(--wp--preset--shadow--elevada);
}

/* La captura larga se recorta: queda a la vista la cabecera del perfil. */
.fsr-recorte img { aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }

.fsr-icono { margin: 0; line-height: 0; }

/* Sobre azul, los enlaces de texto toman el color del texto. También sobre
   el fondo azulado, donde el azul vivo no llega a 4,5:1: ahí se marcan con
   el subrayado. */
.fsr-azul a:where(:not(.wp-element-button)),
.fsr-tarjeta-azul a:where(:not(.wp-element-button)),
.fsr-enlace-tinta a:where(:not(.wp-element-button)) { color: inherit; }

/* =========================================================================
   El perfil de ejemplo
   Cada campo es un bloque. assets/js/perfil.js decide qué capa se ve.
   ========================================================================= */

.fsr-perfil-zona p,
.fsr-perfil-zona figure { margin: 0; }

.fsr-conmutador {
	width: fit-content;
	padding: 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
}
.fsr-estado {
	padding: 9px 18px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	user-select: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.fsr-estado[aria-pressed="true"] {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

.fsr-perfil { overflow: hidden; box-shadow: 0 30px 70px rgba(8, 15, 40, 0.35); }
.fsr-por-etapas .fsr-perfil { box-shadow: var(--wp--preset--shadow--elevada); border: 1px solid var(--wp--preset--color--rule); }

.fsr-pf-banda:not(.has-background) {
	background: var(--wp--preset--color--background-dark);
	transition: background 0.6s ease;
}

.fsr-pf-fotos { position: relative; width: 92px; margin-top: -46px !important; }
.fsr-pf-foto img {
	display: block;
	width: 92px;
	height: 92px;
	border: 4px solid var(--wp--preset--color--white);
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--white);
}

.fsr-pf-nombre {
	margin-top: 12px !important;
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--heading-text);
}

.fsr-capa { margin-top: 10px !important; }
.fsr-capa > * + * { margin-top: 14px !important; }

.fsr-pf-titular { font-size: 15px; line-height: 1.45; color: var(--wp--preset--color--paragraph-text); }
.fsr-capa-d14 .fsr-pf-titular {
	font-family: var(--wp--preset--font-family--merriweather);
	font-size: 17px;
	line-height: 1.4;
	color: var(--wp--preset--color--heading-text);
}

/* La presentación. Vacía, muestra el recuadro; con texto, lo muestra. */
.fsr-pf-acerca {
	min-height: 60px;
	padding: 14px;
	border: 1px dashed var(--wp--preset--color--muted-text);
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--paragraph-text);
}
.fsr-capa-d14 .fsr-pf-acerca {
	border: 1px solid var(--wp--preset--color--rule);
	background-color: var(--wp--preset--color--background-light);
}
.fsr-capa-d14 .fsr-pf-acerca:empty {
	background-image:
		linear-gradient(var(--wp--preset--color--muted-text), var(--wp--preset--color--muted-text)),
		linear-gradient(var(--wp--preset--color--muted-text), var(--wp--preset--color--muted-text)),
		linear-gradient(var(--wp--preset--color--muted-text), var(--wp--preset--color--muted-text));
	background-repeat: no-repeat;
	background-size: 86% 7px, 78% 7px, 54% 7px;
	background-position: 14px 15px, 14px 27px, 14px 39px;
}

.fsr-pf-exp { padding: 14px 16px; border-radius: 14px; }
.fsr-pf-exp-antes { background: var(--wp--preset--color--background-light); }
.fsr-pf-exp-ok,
.fsr-mq-puesto.fsr-mq-despues {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--rule);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--secondary);
}
.fsr-exp-t { font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--paragraph-text); }
.fsr-pf-exp-ok .fsr-exp-t,
.fsr-mq-despues .fsr-exp-t {
	font-family: var(--wp--preset--font-family--merriweather);
	font-size: 16px;
	line-height: 1.35;
	color: var(--wp--preset--color--heading-text);
}
.fsr-exp-l,
.fsr-exp-f,
.fsr-exp-d { font-size: 13px; line-height: 1.4; color: var(--wp--preset--color--paragraph-text); font-variant-numeric: tabular-nums; }
.fsr-exp-d { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid var(--wp--preset--color--rule); }

/* Las ocho piezas del mes, en una tira. */
.fsr-pf-pieza img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }

.fsr-red-fila { padding: 9px 0; border-bottom: 1px solid var(--wp--preset--color--rule); }
.fsr-red-fila:first-child { border-top: 1px solid var(--wp--preset--color--rule); }
.fsr-red-t { font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--heading-text); }
.fsr-red-n {
	flex: none;
	font-family: var(--wp--preset--font-family--merriweather);
	font-size: 16px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--heading-text);
}

/* Sin JavaScript se ve el perfil terminado y no hay botones de estado. */
.fsr-perfil-zona:not(.fsr-vivo) .fsr-capa-hoy,
.fsr-perfil-zona:not(.fsr-vivo) .fsr-solo-hoy,
.fsr-perfil-zona:not(.fsr-vivo) .fsr-conmutador { display: none; }

/* Con JavaScript, las capas de un mismo lugar se apilan y se cruzan. */
.fsr-vivo .fsr-pila { display: grid; }
.fsr-vivo .fsr-pila > * {
	grid-area: 1 / 1;
	margin-top: 0 !important;
	transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s;
}
.fsr-vivo .fsr-pila > .fsr-capa { margin-top: 10px !important; }
.fsr-vivo[data-etapa="0"] .fsr-capa-d14,
.fsr-vivo[data-etapa="0"] .fsr-solo-d14 {
	opacity: 0;
	transform: translateY(8px);
	visibility: hidden;
	transition-delay: 0s, 0s, 0.5s;
}
.fsr-vivo:not([data-etapa="0"]) .fsr-capa-hoy,
.fsr-vivo:not([data-etapa="0"]) .fsr-solo-hoy {
	opacity: 0;
	transform: translateY(-8px);
	visibility: hidden;
	transition-delay: 0s, 0s, 0.5s;
}
.fsr-vivo:not([data-etapa="0"]) .fsr-pf-banda:not(.has-background) {
	background:
		radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--secondary) 80%, transparent), transparent),
		var(--wp--preset--color--primary);
}
.fsr-vivo .fsr-capa-piezas,
.fsr-vivo .fsr-capa-red {
	overflow: hidden;
	max-height: 0;
	margin-top: 0 !important;
	opacity: 0;
	transition: max-height 0.6s ease, opacity 0.5s ease, margin-top 0.5s ease;
}
.fsr-vivo[data-etapa="2"] .fsr-capa-piezas,
.fsr-vivo[data-etapa="3"] .fsr-capa-piezas { max-height: 460px; margin-top: 16px !important; opacity: 1; }
.fsr-vivo[data-etapa="3"] .fsr-capa-red { max-height: 340px; margin-top: 16px !important; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.fsr-vivo .fsr-pila > *,
	.fsr-vivo .fsr-capa-piezas,
	.fsr-vivo .fsr-capa-red,
	.fsr-pf-banda,
	.fsr-estado { transition: none; }
}

/* =========================================================================
   Filas con raya: "Quién te busca" y "Lo que esto no es"
   ========================================================================= */

.fsr-filas > .fsr-fila:last-child { border-bottom: 1px solid var(--wp--preset--color--rule); }
.fsr-azul .fsr-filas > .fsr-fila:last-child { border-bottom-color: rgba(255, 255, 255, 0.25); }

/* =========================================================================
   Cómo funciona
   ========================================================================= */

.fsr-num {
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}
.fsr-pasos > .fsr-paso:last-child { border-bottom: 1px solid var(--wp--preset--color--rule); }

/* El perfil acompaña mientras se leen las tres etapas, y cada etapa tiene
   lugar para que el cambio se vea. Solo si el script está andando. */
@media (min-width: 782px) {
	.fsr-por-etapas { position: sticky; top: 28px; }
	.fsr-con-pasos .fsr-paso { min-height: 62vh; opacity: 0.45; transition: opacity 0.4s ease; }
	.fsr-con-pasos .fsr-paso.fsr-activo { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.fsr-con-pasos .fsr-paso { transition: none; }
}

/* =========================================================================
   Programas
   ========================================================================= */

.fsr-plan { height: 100%; }
.fsr-plan > .fsr-plan-lista { margin: 0; }
.fsr-plan > .fsr-plan-precio { margin-top: auto; }
.fsr-precio { font-variant-numeric: tabular-nums; }
.fsr-tarjeta-azul .wp-block-list li::marker { color: var(--wp--preset--color--secondary-light); }

/* =========================================================================
   Lo que queda armado: las cuatro maquetas
   HTML y CSS, sin imágenes y sin nada que parezca una plataforma. Lo de
   antes va atenuado; lo de después, en blanco con la raya azul.
   ========================================================================= */

.fsr-maqueta { height: 100%; }
.fsr-maqueta p { margin: 0; }
.fsr-maqueta > .fsr-mq-cuerpo { flex: 1 0 auto; }
.fsr-maqueta > .fsr-mq-pie { color: var(--wp--preset--color--paragraph-text); }

.fsr-mq-fila { padding: 16px 20px; border-radius: 16px; }
.fsr-mq-fila.fsr-mq-antes { background: var(--wp--preset--color--background-light); color: var(--wp--preset--color--paragraph-text); }
.fsr-mq-fila.fsr-mq-despues {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--rule);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--heading-text);
}
.fsr-mq-etiqueta {
	flex: none;
	padding: 2px 12px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	color: var(--wp--preset--color--paragraph-text);
}
.fsr-mq-despues .fsr-mq-etiqueta {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.fsr-mq-texto { flex: 1 1 180px; font-size: 15px; line-height: 1.45; }
.fsr-mq-despues .fsr-mq-texto { font-family: var(--wp--preset--font-family--merriweather); font-size: 18px; line-height: 1.4; }

.fsr-mq-dos { display: grid; gap: 12px; }
.fsr-mq-dos > * { margin: 0 !important; }
@media (min-width: 620px) {
	.fsr-mq-dos { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.fsr-mq-puesto { padding: 20px; border-radius: 16px; }
.fsr-mq-puesto.fsr-mq-antes { background: var(--wp--preset--color--background-light); }
.fsr-mq-puesto .fsr-exp-t { font-size: 16px; }
.fsr-mq-puesto.fsr-mq-despues .fsr-exp-t { font-size: 18px; }
.fsr-mq-puesto .fsr-exp-l { font-size: 15px; }

/* El CV: dos hojas superpuestas, dibujadas. */
.fsr-mq-cv { position: relative; aspect-ratio: 4 / 3; min-height: 200px; }
.fsr-mq-cv::before,
.fsr-mq-cv::after {
	content: "";
	position: absolute;
	top: 8%;
	left: 50%;
	height: 84%;
	aspect-ratio: 1 / 1.414;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(15, 26, 58, 0.08);
	background-image:
		linear-gradient(var(--wp--preset--color--paragraph-text), var(--wp--preset--color--paragraph-text)),
		repeating-linear-gradient(to bottom, var(--wp--preset--color--muted-text) 0 6px, transparent 6px 15px);
	background-repeat: no-repeat;
	background-size: 58% 10px, 74% calc(100% - 76px);
	background-position: 16px 20px, 16px 48px;
}
.fsr-mq-cv::before { background-color: var(--wp--preset--color--background-light); translate: -78% 0; rotate: -6deg; }
.fsr-mq-cv::after { background-color: var(--wp--preset--color--white); translate: -30% 3%; rotate: 3deg; }

/* La hoja de ruta */
.fsr-mq-ruta-fila { padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--rule); }
.fsr-mq-ruta-fila:first-child { border-top: 1px solid var(--wp--preset--color--rule); }
.fsr-mq-ruta-t { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.4; color: var(--wp--preset--color--paragraph-text); }
.fsr-hecha .fsr-mq-ruta-t { font-weight: 600; color: var(--wp--preset--color--heading-text); }
.fsr-hecha .fsr-mq-ruta-t::before {
	content: "\2713";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}
.fsr-mq-ruta-n {
	flex: none;
	font-family: var(--wp--preset--font-family--merriweather);
	font-size: 17px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--heading-text);
}

/* =========================================================================
   El buscador de "La prueba": un bloque "Buscar" con la clase fsr-prueba.
   El rótulo, el texto de ejemplo y el botón se editan en el editor. Grande,
   con la lupa adentro. El botón es blanco con borde: no es la acción de la
   página. inc/piezas-bloques.php lo manda a LinkedIn.
   ========================================================================= */

.wp-block-search.fsr-prueba .wp-block-search__label {
	display: block;
	width: 100%;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--heading-text);
}
.wp-block-search.fsr-prueba .wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
	padding: 0;
	border: 0;
}
.wp-block-search.fsr-prueba .wp-block-search__input {
	flex: 1 1 220px;
	min-width: 0;
	min-height: 60px;
	margin: 0;
	padding: 12px 16px 12px 52px;
	border: 2px solid var(--wp--preset--color--heading-text);
	border-radius: 999px;
	background: var(--wp--preset--color--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230F1A3A' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='M13.5 13.5 17 17'/%3E%3C/svg%3E") no-repeat 20px 50% / 22px 22px;
	color: var(--wp--preset--color--heading-text);
	font-family: inherit;
	font-size: 18px;
	line-height: 1.3;
}
.wp-block-search.fsr-prueba .wp-block-search__input::placeholder { color: var(--wp--preset--color--paragraph-text); opacity: 1; }
.wp-block-search.fsr-prueba .wp-block-search__button {
	min-height: 60px;
	margin: 0;
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--heading-text);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--paragraph-text);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.16s ease;
}
.wp-block-search.fsr-prueba .wp-block-search__button:hover,
.wp-block-search.fsr-prueba .wp-block-search__button:focus {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--heading-text);
	opacity: 0.88;
}
.wp-block-search.fsr-prueba .wp-block-search__button:disabled { cursor: not-allowed; opacity: 0.45; }
@media (max-width: 479px) {
	.wp-block-search.fsr-prueba .wp-block-search__button { width: 100%; }
}

/* =========================================================================
   La auditoría de perfil: una tarjeta con un título, una lista y las frases
   del resultado, todo editable. inc/piezas-bloques.php le pone una casilla
   a cada punto y assets/js/piezas.js elige la frase.
   ========================================================================= */

@media (max-width: 781px) {
	.fsr-auditoria { padding: 24px !important; }
}

.fsr-auditoria .fsr-aud-lista {
	display: grid;
	column-gap: 48px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) {
	/* Dos columnas parejas, con la primera mitad a la izquierda. El teclado
	   sigue yendo en el orden de la lista. */
	.fsr-auditoria .fsr-aud-lista {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: repeat(var(--fsr-filas, 4), auto);
		grid-auto-flow: column;
	}
}
.fsr-auditoria .fsr-aud-lista > li {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	font-size: 17px;
	line-height: 1.5;
	color: var(--wp--preset--color--heading-text);
}
.fsr-aud-item {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding-block: 16px;
	cursor: pointer;
}
.fsr-aud-item input {
	width: 18px;
	height: 18px;
	margin: 0.2em 0 0;
	padding: 0;
	accent-color: var(--wp--preset--color--primary);
	cursor: pointer;
}

/* Las frases: ninguna a la vista hasta que se marca o desmarca un punto.
   Las tres con el mismo tratamiento, sin recuadro ni puntaje. */
.fsr-auditoria p.fsr-aud-frase {
	display: none;
	max-width: 44ch;
	margin: 32px 0 0;
	font-family: var(--wp--preset--font-family--merriweather);
	font-size: var(--wp--preset--font-size--heading-h-5);
	line-height: 1.35;
	color: var(--wp--preset--color--heading-text);
}
.fsr-auditoria p.fsr-aud-frase.fsr-visible { display: block; }

/* =========================================================================
   Preguntas
   ========================================================================= */

.fsr-pregunta { border-bottom: 1px solid var(--wp--preset--color--rule); }
.fsr-preguntas > .fsr-pregunta:first-child { border-top: 1px solid var(--wp--preset--color--rule); }

/* El relleno va en el título de la pregunta: se toca en todo el renglón. */
.fsr-pregunta > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 22px 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--heading-text);
	cursor: pointer;
	list-style: none;
}
.fsr-pregunta > summary::-webkit-details-marker { display: none; }
.fsr-pregunta > summary::after {
	content: "+";
	flex: none;
	font-size: 24px;
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--secondary);
	transition: transform 0.2s ease;
}
.fsr-pregunta[open] > summary::after { transform: rotate(45deg); }
.fsr-pregunta > :not(summary) { margin: 0 0 22px; }

/* =========================================================================
   Botones
   ========================================================================= */

.wp-block-button__link { text-align: center; }

/* El botón blanco, sobre azul. */
.fsr-boton-blanco .wp-block-button__link:hover,
.fsr-boton-blanco .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--tint) !important;
	color: var(--wp--preset--color--primary) !important;
}

/* En teléfono, los botones de la portada van a lo ancho. */
@media (max-width: 600px) {
	main .wp-block-buttons,
	main .wp-block-button,
	main .wp-block-button__link { width: 100%; }
	main .wp-block-button__link { display: block; }
}

/* =========================================================================
   Salto al contenido y foco visible
   ========================================================================= */

.skip-link { position: absolute; top: -9999px; left: -9999px; z-index: 999999; text-decoration: none; }
.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

:where(a, button, input, select, textarea, summary, .wp-block-button__link, [role="button"]):focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 3px;
}
.fsr-azul :where(a, summary, [role="button"], .wp-block-button__link):focus-visible,
.fsr-tarjeta-azul :where(a, summary):focus-visible,
.fsr-barra :where(a, .wp-block-button__link):focus-visible { outline-color: var(--wp--preset--color--white); }

/* Desvanecer barra flotante de cupos al llegar al formulario final */
.fsl-cupos--corrido,
.fsl-cupos--fuera {
	transform: translateY(calc(100% + 40px)) !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: transform 0.35s ease, opacity 0.35s ease !important;
}