/*
 * Segmentador WAAD.
 *
 * Los colores y la tipografia salen de los tokens de theme.json: el
 * segmentador tiene que verse como la web, no como un widget pegado. Si el tema
 * cambia de paleta, esto cambia con el. Los respaldos son los valores de
 * wa-ad.com por si el bloque acaba fuera del tema.
 */

/*
 * La fuente viaja con el plugin. Antes salia del tema, asi que en cualquier
 * tema que no fuera el de WAAD el segmentador caia a la del sistema y se veia
 * como otro producto. El respaldo del tema se mantiene primero: si el tema la
 * declara con sus propios ajustes, mandan los suyos.
 */
@font-face {
	font-family: "Outfit WAAD";
	src: url("../fonts/outfit-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
}

/*
 * Los controles van anclados a .waad-seg a proposito.
 *
 * Un tema clasico -Softec, por ejemplo- estiliza los formularios con
 * `input[type=text]`, que tiene especificidad (0,1,1) y gana a una clase suelta
 * (0,1,0) por mucho que nuestra hoja cargue despues. Con el ancla subimos a
 * (0,2,0) y mandamos nosotros, que es lo que corresponde: son controles
 * nuestros dentro de nuestro bloque.
 *
 * Comprobado con Twenty Twenty-One: sin el ancla, el buscador de negocio salia
 * con el borde grueso del tema en vez de con su pildora.
 */

.waad-seg {
	--seg-blanco: var(--wp--preset--color--base, #fff);
	--seg-crema: var(--wp--preset--color--crema, #f8f8f6);
	--seg-tinta: var(--wp--preset--color--contrast, #111827);
	--seg-marca: var(--wp--preset--color--primary, #fe3b1f);
	--seg-suave: var(--wp--preset--color--accent, #ff8672);
	--seg-gris: var(--wp--preset--color--apagado, #6b7280);
	--seg-borde: var(--wp--preset--color--borde, #e5e7eb);
	--seg-radio: 1.25rem;
	--seg-sombra: 0 1px 2px rgb(17 24 39 / 4%), 0 12px 32px -12px rgb(17 24 39 / 10%);

	padding: clamp(3rem, 8vw, 6rem) 1.25rem;
	font-family: var(--tp-ff-body, var(--wp--preset--font-family--outfit, "Outfit WAAD")), "Outfit WAAD", ui-sans-serif, system-ui, sans-serif;
	color: var(--seg-tinta);
	background: var(--seg-crema);
	letter-spacing: -0.011em;
}

.waad-seg *,
.waad-seg *::before,
.waad-seg *::after {
	box-sizing: border-box;
}

.waad-seg__caja {
	max-width: 46rem;
	margin-inline: auto;
}

/* Tipografia -------------------------------------------------------------- */

/*
 * Ni una cursiva.
 *
 * No basta con font-style: el tema declara `em, i { font-family: 'Instrument
 * Serif'; font-style: italic }` y de esa fuente solo carga la variante
 * cursiva -ital@1-, asi que el navegador la sigue pintando inclinada aunque le
 * pidamos normal. Hay que devolverle tambien la familia.
 *
 * Solo dentro de .waad-seg: esa serif es un recurso de marca que el resto de
 * la web usa a proposito.
 */
.waad-seg,
.waad-seg * {
	font-family: inherit;
	font-style: normal;
}

/*
 * El guiño en color de los claims. El motor marca la parte que pesa y aqui se
 * pinta; no se inclina, se colorea.
 */
.waad-seg .waad-seg__titulo em,
.waad-seg .waad-seg__veredicto-titular em {
	font-family: inherit;
	font-style: normal;
	color: var(--seg-marca);
}


.waad-seg__antetitulo {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .35rem .85rem .35rem .6rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--seg-marca);
	background: color-mix(in srgb, var(--seg-marca) 10%, transparent);
	border-radius: 999px;
}

.waad-seg__antetitulo::before {
	content: "";
	width: .5rem;
	height: .5rem;
	background: var(--seg-marca);
	border-radius: 50%;
}

.waad-seg__titulo {
	font-family: var(--tp-ff-heading, inherit);
	margin: 0 0 .75rem;
	font-size: clamp(1.9rem, 5.2vw, 3rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.032em;
	text-wrap: balance;
}

.waad-seg__entradilla {
	margin: 0 0 2rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--seg-gris);
	text-wrap: pretty;
}

.waad-seg__ayuda {
	margin: -.25rem 0 1.75rem;
	color: var(--seg-gris);
}

.waad-seg__ayuda:empty {
	display: none;
}

/* Buscador ---------------------------------------------------------------- */

.waad-seg__buscador {
	position: relative;
}

.waad-seg .waad-seg__input {
	width: 100%;
	padding: 1.05rem 1.4rem;
	font: inherit;
	font-size: 1.0625rem;
	/*
	 * Explicito, NO heredado. Un control de formulario no puede heredar su
	 * color: la caja de captura es oscura con texto blanco, asi que con
	 * `inherit` el input salia en blanco sobre fondo blanco y no se veia lo
	 * que se escribia. Lo mismo pasaria dentro de cualquier bloque oscuro.
	 */
	color: var(--seg-tinta);
	background: var(--seg-blanco);
	border: 1px solid var(--seg-borde);
	border-radius: 999px;
	box-shadow: var(--seg-sombra);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.waad-seg .waad-seg__input::placeholder {
	color: #9ca3af;
}

.waad-seg .waad-seg__input:focus {
	border-color: var(--seg-marca);
	outline: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--seg-marca) 16%, transparent);
}

.waad-seg .waad-seg__sugerencias {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	margin: .5rem 0 0;
	padding: .4rem;
	list-style: none;
	background: var(--seg-blanco);
	border: 1px solid var(--seg-borde);
	border-radius: var(--seg-radio);
	box-shadow: 0 20px 44px -16px rgb(17 24 39 / 22%);
}

.waad-seg .waad-seg__sugerencia {
	padding: .75rem .9rem;
	font-weight: 500;
	border-radius: .8rem;
	cursor: pointer;
	transition: background .12s ease;
}

.waad-seg .waad-seg__sugerencia:hover,
.waad-seg .waad-seg__sugerencia:focus-visible {
	background: var(--seg-crema);
	outline: none;
}

/*
 * Mientras se resuelve el negocio elegido hay espera de verdad: hay que
 * preguntarle a Google por su ficha para saber el sector. La lista se queda
 * puesta con la elegida marcada, en vez de desaparecer y dejar la pantalla
 * muerta un segundo y medio.
 */
.waad-seg .waad-seg__sugerencias--esperando {
	pointer-events: none;
}

.waad-seg .waad-seg__sugerencia--apagada {
	opacity: .35;
}

.waad-seg .waad-seg__sugerencia--elegida {
	font-weight: 600;
	color: var(--seg-marca);
}

.waad-seg .waad-seg__sugerencia--elegida::after {
	content: "";
	display: inline-block;
	width: .85rem;
	height: .85rem;
	margin-inline-start: .6rem;
	vertical-align: -2px;
	border: 2px solid color-mix(in srgb, var(--seg-marca) 30%, transparent);
	border-top-color: var(--seg-marca);
	border-radius: 50%;
	animation: waad-seg-girar .7s linear infinite;
}

/*
 * La salida de la lista no es un negocio: es la puerta para quien no esta en
 * Google. Sin distinguirla, se leia como una sugerencia mas.
 */
.waad-seg .waad-seg__sugerencia--salida {
	font-weight: 600;
	color: var(--seg-marca);
	border-top: 1px solid var(--seg-borde);
}

.waad-seg .waad-seg__sugerencia--salida::before {
	content: "+";
	display: inline-block;
	width: 1.1rem;
	margin-inline-end: .5rem;
	font-weight: 700;
	text-align: center;
}

.waad-seg .waad-seg__sugerencia small {
	display: block;
	margin-top: .1rem;
	font-weight: 400;
	color: var(--seg-gris);
}

/* Preguntas --------------------------------------------------------------- */

.waad-seg__progreso {
	height: 5px;
	margin-bottom: 2rem;
	overflow: hidden;
	background: var(--seg-borde);
	border-radius: 999px;
}

.waad-seg__progreso-barra {
	display: block;
	height: 100%;
	background: var(--seg-marca);
	border-radius: 999px;
	transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.waad-seg__progreso--indeterminado .waad-seg__progreso-barra {
	width: 30%;
	animation: waad-seg-vaiven 1.15s ease-in-out infinite alternate;
}

@keyframes waad-seg-vaiven {
	from { transform: translateX(-30%); }
	to   { transform: translateX(330%); }
}

@media (prefers-reduced-motion: reduce) {
	.waad-seg__progreso-barra { transition: none; animation: none; }

	.waad-seg__paso--entra,
	.waad-seg__pregunta--entra,
	.waad-seg__pregunta--entra .waad-seg__opcion,
	.waad-seg__abierto--entra { animation: none; }

	.waad-seg__pregunta--sale { transition: none; opacity: 1; transform: none; }
}

.waad-seg__negocio {
	display: block;
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* Sandra 01/10: en naranja corporativo. Venia con var(--seg-marca), que
	   cae a --wp--preset--color--primary y en este sitio el tema la define
	   gris, asi que el fallback naranja no llegaba a aplicarse nunca. */
	color: #fe3b1f;
}

/* Cambio de pregunta ------------------------------------------------------
 *
 * No hay ida y vuelta al servidor entre preguntas: llegan todas juntas al
 * elegir el negocio. Esto no disimula una espera, le da continuidad a un
 * cambio que antes era un corte seco.
 */

.waad-seg__paso--entra {
	animation: waad-seg-paso-entra .32s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes waad-seg-paso-entra {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.waad-seg__pregunta--entra {
	animation: waad-seg-pregunta-entra .3s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes waad-seg-pregunta-entra {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.waad-seg__pregunta--sale {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .13s ease, transform .13s ease;
}

.waad-seg__pregunta--entra .waad-seg__opcion {
	animation: waad-seg-opcion-entra .3s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes waad-seg-opcion-entra {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.waad-seg .waad-seg__opciones {
	display: grid;
	gap: .65rem;
}

.waad-seg .waad-seg__opcion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 1.4rem;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 500;
	text-align: start;
	/* Explicito por lo mismo: fondo blanco propio, color propio. */
	color: var(--seg-tinta);
	cursor: pointer;
	background: var(--seg-blanco);
	border: 1px solid var(--seg-borde);
	border-radius: var(--seg-radio);
	box-shadow: var(--seg-sombra);
	transition: border-color .14s ease, transform .14s ease;
}

.waad-seg .waad-seg__opcion::after {
	content: "→";
	color: var(--seg-borde);
	transition: color .14s ease, transform .14s ease;
}

.waad-seg .waad-seg__opcion:hover,
.waad-seg .waad-seg__opcion:focus-visible {
	border-color: var(--seg-marca);
	outline: none;
	transform: translateY(-1px);
}

.waad-seg .waad-seg__opcion:hover::after,
.waad-seg .waad-seg__opcion:focus-visible::after {
	color: var(--seg-marca);
	transform: translateX(3px);
}

/* Acuse de recibo: la pulsada se marca, las demas se apagan. */

.waad-seg .waad-seg__opcion--elegida {
	border-color: var(--seg-marca);
	box-shadow: inset 0 0 0 1px var(--seg-marca), var(--seg-sombra);
	transform: translateY(-1px);
}

.waad-seg .waad-seg__opcion--elegida::after {
	content: "\2713";
	color: var(--seg-marca);
}

.waad-seg .waad-seg__opcion--apagada {
	opacity: .4;
}

.waad-seg .waad-seg__atras {
	margin-top: 1.5rem;
	padding: 0;
	font: inherit;
	font-size: .9375rem;
	color: var(--seg-gris);
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: 0;
}

.waad-seg .waad-seg__atras:hover {
	color: var(--seg-tinta);
}

/* Veredicto --------------------------------------------------------------- */

.waad-seg__veredicto-titular {
	margin: 0 0 1.5rem;
	font-size: clamp(1.75rem, 4.6vw, 2.6rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.waad-seg__redaccion {
	margin: 0 0 2rem;
	padding: 1.25rem 1.4rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--seg-tinta);
	background: var(--seg-blanco);
	border: 1px solid var(--seg-borde);
	border-inline-start: 4px solid var(--seg-marca);
	border-radius: var(--seg-radio);
}

.waad-seg__cifras {
	display: grid;
	gap: .75rem;
	margin: 0 0 2rem;
	/* Rejilla fija de dos columnas: con cuatro cifras, auto-fit deja un
	   huerfano en la ultima fila. Un 2x2 cierra el bloque. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Sandra 01/10: quitada la tarjeta de "Potencial al mes", la de visibilidad
   se queda sola y hay que centrarla. */
.waad-seg__cifras:has(> *:only-child) {
	grid-template-columns: minmax(0, 22rem);
	justify-content: center;
}

@media (max-width: 30rem) {
	.waad-seg__cifras {
		grid-template-columns: 1fr;
	}
}

.waad-seg__cifra {
	padding: 1.25rem 1.35rem;
	background: var(--seg-blanco);
	border: 1px solid var(--seg-borde);
	border-radius: var(--seg-radio);
	box-shadow: var(--seg-sombra);
}

.waad-seg__cifra dt {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--seg-gris);
}

/* El dial de la nota ------------------------------------------------------
 *
 * Un aro que se llena hasta la puntuacion, con el numero dentro y la etiqueta
 * debajo. SVG y no imagen: hereda el color de marca y no pixela.
 */

.waad-seg__cifra--dial {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	text-align: center;
}

.waad-seg__dial {
	width: 9.5rem;
	height: 9.5rem;
	/* Para que el aro empiece arriba y no a las tres en punto. */
	transform: rotate(-90deg);
}

.waad-seg__dial-fondo,
.waad-seg__dial-arco {
	fill: none;
	stroke-width: 10;
}

.waad-seg__dial-fondo {
	stroke: var(--seg-borde);
}

.waad-seg__dial-arco {
	stroke: var(--seg-marca);
	stroke-linecap: round;
	transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1);
}

/* El texto va dentro del SVG, asi que hay que deshacerle el giro del aro. */
.waad-seg__dial-num,
.waad-seg__dial-tot {
	transform: rotate(90deg);
	transform-origin: 60px 60px;
	text-anchor: middle;
	fill: var(--seg-tinta);
	font-family: var(--tp-ff-heading, inherit);
}

.waad-seg__dial-num {
	font-size: 2.1rem;
	font-weight: 700;
}

.waad-seg__dial-tot {
	font-size: .8rem;
	font-weight: 500;
	fill: var(--seg-gris);
}

.waad-seg__dial-pie {
	font-size: .9375rem;
	font-weight: 500;
	color: var(--seg-gris);
}

.waad-seg__dial-vacio {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--seg-gris);
}

.waad-seg__dial-vacio small {
	color: var(--seg-gris);
	opacity: .8;
}

.waad-seg__cifra dd {
	margin: .4rem 0 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.waad-seg__cifra dd small {
	font-size: .9rem;
	font-weight: 500;
	color: var(--seg-gris);
}

.waad-seg__cifra--destacada {
	color: var(--seg-blanco);
	background: var(--seg-tinta);
	border-color: var(--seg-tinta);
}

.waad-seg__cifra--destacada dt,
.waad-seg__cifra--destacada dd small {
	color: color-mix(in srgb, #fff 65%, transparent);
}

.waad-seg__hallazgos {
	display: grid;
	gap: .65rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.waad-seg__hallazgo {
	padding: 1.05rem 1.25rem;
	background: var(--seg-blanco);
	border: 1px solid var(--seg-borde);
	border-radius: var(--seg-radio);
}

.waad-seg__hallazgo strong {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	font-weight: 600;
}

.waad-seg__hallazgo strong::before {
	content: "";
	flex: 0 0 auto;
	/* Sandra 01/10: "los ticks ponerlos en naranja para que se vean".
	   Tambien se agrandan: a .55rem apenas se distinguian. */
	width: .7rem;
	height: .7rem;
	background: #fe3b1f;
	border-radius: 50%;
}

/* Todos en naranja, como pidio Sandra. Pero el color era lo unico que
   distinguia un problema de algo que ya esta bien, y en la pantalla de
   entrega las dos cosas van en la misma lista, sin encabezados que las
   separen: dejarlo solo en el color igualaba las dos lecturas.
   Lo distingue la FORMA, que no compite con el color de marca:

     lo que ya esta bien -> marca de verificacion
     lo que frena        -> punto lleno
     lo menor            -> aro

   Dibujado con bordes, sin fuente de iconos ni imagen: una marca de
   verificacion con webfont desaparece si la fuente no carga. */

.waad-seg__hallazgo[data-gravedad="bien"] strong::before {
	width: .42rem;
	height: .75rem;
	background: none;
	border: solid #fe3b1f;
	border-width: 0 2.5px 2.5px 0;
	border-radius: 0;
	transform: rotate(45deg);
	margin-inline-end: .2rem;
	align-self: center;
}

.waad-seg__hallazgo[data-gravedad="grave"] strong::before,
.waad-seg__hallazgo[data-gravedad="medio"] strong::before {
	background: #fe3b1f;
}

.waad-seg__hallazgo[data-gravedad="leve"] strong::before {
	background: none;
	border: 2px solid #fe3b1f;
}

.waad-seg__hallazgo span {
	display: block;
	margin-top: .3rem;
	padding-inline-start: 1.15rem;
	color: var(--seg-gris);
}

.waad-seg__supuestos {
	margin: 0 0 1.5rem;
	font-size: .9375rem;
	color: var(--seg-gris);
}

.waad-seg__supuestos summary {
	cursor: pointer;
	font-weight: 500;
}

.waad-seg__supuestos ul {
	margin: .6rem 0 0;
	padding-inline-start: 1.15rem;
}

.waad-seg__nota,
.waad-seg__aviso {
	margin: 0 0 1.5rem;
	padding: .9rem 1.1rem;
	font-size: .9375rem;
	color: var(--seg-gris);
	background: var(--seg-blanco);
	border: 1px dashed var(--seg-borde);
	border-radius: 1rem;
}

/* Captura del dato -------------------------------------------------------- */

/* Resultado cerrado -------------------------------------------------------
 *
 * Arriba va lo que se ensena de balde. Debajo, una zona desenfocada que NO
 * contiene datos: son barras grises. El desenfoque es una decision visual, no
 * una medida de seguridad -se quita desde el inspector-, asi que detras no
 * puede haber nada que no estemos dispuestos a regalar.
 */

.waad-seg__cerrado {
	position: relative;
	display: grid;
	margin-top: 2rem;
}

/* Las dos capas ocupan la misma celda: el cartel queda encima del decorado. */
.waad-seg__cerrado > * {
	grid-area: 1 / 1;
}

.waad-seg__cerrado-fondo {
	min-height: 40rem;
	/* Sin opacidad: a media tinta no se distinguia del fondo y parecia que no
	   hubiera nada. Lo que oculta es el desenfoque, no la transparencia. */
	filter: blur(5px);
	user-select: none;
	pointer-events: none;
	/* El corte de abajo se difumina para que no parezca contenido cortado. */
	-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.waad-seg__fantasma-cifras {
	display: grid;
	gap: .75rem;
	margin: 0 0 .65rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.waad-seg__fantasma-cifra dt {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--seg-gris);
}

.waad-seg__fantasma-cifra dd {
	margin: .4rem 0 0;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.waad-seg__fantasma-lista {
	margin: 0;
}

/*
 * El cartel arranca mas abajo para que se vea que hay algo debajo.
 *
 * El selector lleva el padre a proposito: esta regla y .waad-seg__captura
 * -que el cartel tambien lleva- tenian la misma especificidad, y como aquella
 * viene despues en el fichero, ganaba su margen y el cartel subia hasta tapar
 * el desenfoque entero.
 */
.waad-seg__cerrado > .waad-seg__cerrado-cartel {
	position: relative;
	align-self: start;
	/* Deja a la vista las dos tarjetas desenfocadas y el arranque de la lista:
	   sin ese asomo no se entiende que el cartel esta tapando algo. */
	margin-top: clamp(7rem, 24vw, 11rem);
	box-shadow: 0 1px 2px rgb(17 24 39 / 6%), 0 28px 56px -18px rgb(17 24 39 / 32%);
}

.waad-seg__cerrado-marca {
	margin: 0 0 .5rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--seg-suave);
}

.waad-seg__cerrado-lista {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .55rem;
	color: color-mix(in srgb, #fff 78%, transparent);
	text-wrap: pretty;
}

.waad-seg__cerrado-lista li {
	display: flex;
	align-items: baseline;
	gap: .6rem;
}

.waad-seg__cerrado-lista li::before {
	content: "\2713";
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--seg-suave);
}

/* Ya con el contacto dado: mismo hueco, contenido de verdad. */
.waad-seg__abierto {
	margin-top: 2rem;
}

.waad-seg__abierto .waad-seg__cifras {
	margin: 1.4rem 0 0;
}

.waad-seg__abierto .waad-seg__hallazgos {
	margin: .65rem 0 0;
}

/*
 * Las tarjetas van dentro del cartel, que fija texto blanco. Las piezas que
 * no declaran color propio -el valor de la cifra y el titular del hallazgo-
 * lo heredaban y quedaban en blanco sobre tarjeta blanca: invisibles.
 */
.waad-seg__abierto .waad-seg__cifra,
.waad-seg__abierto .waad-seg__hallazgo {
	color: var(--seg-tinta);
}

/*
 * El cierre tras la descarga. El PDF no es el final del recorrido: es donde
 * mejor se puede ensenar a donde llega, con las cifras ya vistas y validadas.
 */
.waad-seg__futuro {
	margin-top: 1.4rem;
	padding: 1.35rem 1.5rem;
	background: color-mix(in srgb, #fff 8%, transparent);
	border: 1px solid color-mix(in srgb, #fff 16%, transparent);
	border-radius: var(--seg-radio);
}

.waad-seg__futuro-marca {
	margin: 0 0 .35rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--seg-suave);
}

.waad-seg__futuro-titulo {
	margin: 0 0 .45rem;
	font-size: clamp(1.3rem, 3.2vw, 1.7rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--seg-blanco);
}

.waad-seg__futuro-sub {
	margin: 0;
	color: color-mix(in srgb, #fff 72%, transparent);
	text-wrap: pretty;
}

/* El boton de cierre, centrado y solo: no compite con nada. */
.waad-seg__cierre {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	margin-top: 1.6rem;
	text-align: center;
}

.waad-seg__cierre .waad-seg__cta {
	min-width: min(22rem, 100%);
}

.waad-seg__cierre-nota {
	margin: 0;
	font-size: .8125rem;
	color: color-mix(in srgb, #fff 55%, transparent);
}

.waad-seg__abierto--entra {
	animation: waad-seg-abierto-entra .4s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes waad-seg-abierto-entra {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 30rem) {
	.waad-seg__fantasma-cifras {
		grid-template-columns: 1fr;
	}

	.waad-seg__cerrado-fondo {
		min-height: 48rem;
	}

}

.waad-seg__captura {
	margin-top: 2.25rem;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	color: var(--seg-blanco);
	background: var(--seg-tinta);
	border-radius: 1.75rem;
}

.waad-seg__captura-titulo {
	margin: 0 0 .4rem;
	font-size: clamp(1.35rem, 3.4vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.025em;
}

.waad-seg__captura-sub {
	margin: 0 0 1.4rem;
	color: color-mix(in srgb, #fff 68%, transparent);
	text-wrap: pretty;
}

.waad-seg__captura-sub a {
	color: var(--seg-suave);
}

.waad-seg__campo {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
}

.waad-seg__campo .waad-seg__input {
	flex: 1 1 15rem;
	min-width: 0;
	box-shadow: none;
}

/* Sandra 01/10: "la casilla de nombre, mail y enviar el codigo se sobrepisan
   unos a otros". El correo y el boton compartian fila dentro de una tarjeta
   estrecha y los dos campos iban pegados, sin aire entre ellos. El boton pasa
   a su propia linea y los campos se separan. */
.waad-seg__campo + .waad-seg__campo {
	margin-top: .75rem;
}

.waad-seg__campo [data-enviar] {
	flex: 1 1 100%;
	justify-content: center;
}

.waad-seg .waad-seg__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.05rem 1.9rem;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--seg-blanco);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background: var(--seg-marca);
	border: 0;
	border-radius: 999px;
	transition: background .14s ease, transform .14s ease;
}

.waad-seg .waad-seg__cta:hover {
	background: var(--seg-suave);
	transform: translateY(-1px);
}

.waad-seg .waad-seg__cta[disabled] {
	opacity: .55;
	cursor: progress;
	transform: none;
}

.waad-seg__consentimiento {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	margin-top: 1.1rem;
	font-size: .875rem;
	line-height: 1.5;
	color: color-mix(in srgb, #fff 62%, transparent);
	cursor: pointer;
}

/*
 * El resto de controles, por el mismo motivo: viven dentro de la caja oscura
 * y su color no puede depender de lo que herede el contenedor.
 */
.waad-seg select.waad-seg__input,
.waad-seg textarea.waad-seg__input {
	color: var(--seg-tinta);
	background: var(--seg-blanco);
	appearance: auto;
}

.waad-seg__consentimiento input {
	margin-top: .2rem;
	flex: 0 0 auto;
	accent-color: var(--seg-marca);
}

/*
 * El señuelo. Fuera de la pantalla, no oculto: hay bots que descartan lo que
 * lleva display:none o hidden, y entonces no pican. Para las personas es
 * invisible igual, y el aria-hidden y el tabindex del marcado lo sacan del
 * recorrido de teclado y del lector.
 */
.waad-seg .waad-seg__senuelo {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.waad-seg .waad-seg__captcha:not(:empty) {
	margin-top: 1rem;
}

.waad-seg__error {
	margin: 1rem 0 0;
	padding: .7rem .95rem;
	font-size: .9375rem;
	color: #fff;
	background: #dc2626;
	border-radius: .8rem;
}

/* La espera ------------------------------------------------------------- */

.waad-seg__capas {
	display: grid;
	gap: .55rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.waad-seg__capa {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .95rem 1.2rem;
	font-weight: 500;
	background: var(--seg-blanco);
	border: 1px solid var(--seg-borde);
	border-radius: var(--seg-radio);
	transition: color .2s ease;
}

.waad-seg__capa[data-estado="pendiente"] {
	color: var(--seg-gris);
}

.waad-seg__capa-marca {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	border: 2px solid var(--seg-borde);
	border-radius: 50%;
}

.waad-seg__capa[data-estado="pendiente"] .waad-seg__capa-marca {
	border-top-color: var(--seg-marca);
	animation: waad-seg-girar .8s linear infinite;
}

.waad-seg__capa[data-estado="ok"] .waad-seg__capa-marca {
	position: relative;
	background: var(--seg-marca);
	border-color: var(--seg-marca);
}

.waad-seg__capa[data-estado="ok"] .waad-seg__capa-marca::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: .3rem;
	height: .55rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translateY(-1px) rotate(45deg);
}

.waad-seg__capa[data-estado="aviso"] .waad-seg__capa-marca {
	background: #f59e0b;
	border-color: #f59e0b;
}

@keyframes waad-seg-girar {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.waad-seg__capa[data-estado="pendiente"] .waad-seg__capa-marca { animation: none; }

	/* Sin giro, pero el circulo se queda: es la senal de que hay espera. */
	.waad-seg__sugerencia--elegida::after { animation: none; }
}

/*
 * Pagina a pantalla completa (plantilla del plugin). El tema activo ya no pinta
 * cabecera ni pie, asi que el segmentador ocupa el documento entero y su fondo
 * llega a los bordes en lugar de quedar dentro de una columna estrecha.
 */
body.waad-seg-pantalla {
	margin: 0;
	background: var(--seg-crema, #f8f8f6);
}

body.waad-seg-pantalla .waad-seg {
	/*
	 * Fuera del tema de WAAD no hay tokens que heredar, asi que se fijan los de
	 * marca. Hoy tambien saldrian bien por los respaldos, pero solo porque el
	 * tema activo no usa estos slugs: el dia que alguien active un tema que
	 * defina "primary", el diagnostico se pintaria con SU rojo. Esto lo cierra.
	 *
	 * La excepcion es deliberada: cuando el tema activo es uno que sabemos
	 * leer, Front\Modulo emite estos mismos tokens con su paleta y con esta
	 * misma especificidad, mas abajo, para que gane la herencia. Si tocas este
	 * bloque, mira tambien paleta_del_tema().
	 */
	--seg-blanco: #fff;
	--seg-crema: #f8f8f6;
	--seg-tinta: #111827;
	--seg-marca: #fe3b1f;
	--seg-suave: #ff8672;
	--seg-gris: #6b7280;
	--seg-borde: #e5e7eb;

	font-family: var(--tp-ff-body, "Outfit WAAD"), "Outfit WAAD", ui-sans-serif, system-ui, sans-serif;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.waad-seg-pantalla .waad-seg__caja {
	width: 100%;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Añadidos de la revisión de Sandra (24-09)
 * ────────────────────────────────────────────────────────────────────────── */

/*
 * La etiqueta del buscador deja de ser solo para lectores de pantalla.
 *
 * El título de la pantalla pasó a ser el claim -"Antes de invertir, descubre
 * en qué punto se encuentra tu negocio"- y sin esta línea no quedaba nada que
 * dijera qué se escribe en la caja.
 */
.waad-seg__etiqueta-buscador {
	display: block;
	margin-bottom: .5rem;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--seg-tinta);
}

/*
 * La pantalla de "mi negocio no está en Google".
 *
 * En columna estrecha y centrada: con los campos cruzando la tarjeta entera
 * la pantalla se leía como un trámite, que es justo lo contrario del resto
 * del recorrido.
 */
.waad-seg__paso--formulario {
	text-align: center;
}

.waad-seg__formulario {
	display: grid;
	gap: 1.1rem;
	width: 100%;
	max-width: 30rem;
	margin-inline: auto;
	text-align: start;
}

.waad-seg__formulario .waad-seg__campo {
	display: grid;
	gap: .4rem;
}

.waad-seg__formulario .waad-seg__campo label {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--seg-tinta);
}

.waad-seg__formulario .waad-seg__input {
	flex: none;
	width: 100%;
}

.waad-seg__formulario .waad-seg__cta {
	justify-self: stretch;
}

.waad-seg__obligatorio {
	margin-inline-start: .15rem;
	color: var(--seg-marca);
}

/*
 * Opciones de la pregunta de varias respuestas.
 *
 * La flecha "→" de las demás opciones aquí mentiría: pulsar no avanza. Se
 * sustituye por una casilla dibujada con la propia ::after, que es lo que
 * convierte el botón en algo que se marca y se desmarca.
 */
.waad-seg .waad-seg__opcion--marcable::after {
	content: "";
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	background: transparent;
	border: 1.5px solid var(--seg-borde);
	border-radius: .35rem;
	transition: background .14s ease, border-color .14s ease;
}

.waad-seg .waad-seg__opcion--marcable:hover::after,
.waad-seg .waad-seg__opcion--marcable:focus-visible::after {
	border-color: var(--seg-marca);
	transform: none;
}

.waad-seg .waad-seg__opcion--marcada {
	border-color: var(--seg-marca);
	box-shadow: inset 0 0 0 1px var(--seg-marca), var(--seg-sombra);
}

.waad-seg .waad-seg__opcion--marcada::after {
	display: grid;
	place-items: center;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1;
	color: var(--seg-blanco);
	content: "\2713";
	background: var(--seg-marca);
	border-color: var(--seg-marca);
}

/* El botón de continuar solo existe en esa pregunta: sin él no se sale. */
.waad-seg .waad-seg__continuar {
	margin-top: .5rem;
	justify-self: start;
}

.waad-seg .waad-seg__continuar[disabled] {
	cursor: not-allowed;
}

/*
 * El enlace a la política de privacidad dentro del consentimiento. Subrayado
 * siempre: sobre la caja oscura, el color solo no basta para que se vea que
 * es un enlace.
 */
.waad-seg__consentimiento a {
	color: var(--seg-blanco);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.waad-seg__consentimiento a:hover {
	color: var(--seg-marca);
}

/*
 * El desplegable de sector.
 *
 * Es el unico <select> del recorrido y heredaba solo la mitad del estilo de
 * .waad-seg__input: el navegador le pone su propio fondo y su propia flecha, y
 * al lado de los demas campos parecia de otro formulario. Se le quita el
 * aspecto nativo y se le dibuja la flecha con un degradado, para no depender de
 * una imagen.
 */
.waad-seg select.waad-seg__input {
	padding-inline-end: 3rem;
	cursor: pointer;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--seg-gris) 50%),
		linear-gradient(135deg, var(--seg-gris) 50%, transparent 50%);
	background-repeat: no-repeat;
	background-position:
		right 1.5rem center,
		right 1.1rem center;
	background-size: 6px 6px, 6px 6px;
	appearance: none;
}

/*
 * El campo del código de verificación.
 *
 * Seis dígitos separados y grandes: se teclean mirando el móvil con el correo
 * abierto, y la letra normal del formulario obliga a comprobar dos veces.
 */
.waad-seg .waad-seg__codigo {
	flex: 0 1 11rem;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: .4em;
	text-align: center;
	text-indent: .4em;
}

.waad-seg .waad-seg__codigo::placeholder {
	letter-spacing: .4em;
	font-weight: 400;
}

/* El "no me ha llegado" vive dentro de la caja oscura de la puerta. */
.waad-seg__abierto .waad-seg__atras {
	color: color-mix(in srgb, #fff 62%, transparent);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.waad-seg__abierto .waad-seg__atras:hover {
	color: var(--seg-blanco);
}

.waad-seg__abierto .waad-seg__atras[disabled] {
	cursor: default;
	text-decoration: none;
	opacity: .6;
}

/*
 * El botón de volver a descargar, dentro de la caja oscura de entrega.
 *
 * El informe se genera en cada petición a partir del resultado guardado, así
 * que no hay una sola oportunidad de bajarlo. Antes era un «pulsa aquí» en
 * mitad de un párrafo y nadie diría que eso se puede repetir.
 */
.waad-seg__descarga {
	margin-top: 1.1rem;
}

.waad-seg__descarga .waad-seg__cta {
	text-decoration: none;
}

/*
 * La pantalla de captura en un movil.
 *
 * Va al final del fichero a proposito: la regla base de .waad-seg__captura
 * esta mas arriba y, con la misma especificidad, gana la ultima que se lee.
 *
 * Medido en una pantalla de 390 px: entre el fondo del popup, su caja, el
 * relleno del segmentador y el de esta tarjeta se iban 184 px de los 390 y
 * al texto le quedaban 206. Con eso, "Cuantos clientes extra al mes puedes
 * conseguir y cuanto puedes pagar por cada uno" ocupaba cuatro lineas y la
 * tarjeta parecia una columna estrecha dentro del popup. La otra mitad del
 * recorte esta en el popup, en diagnostico-modal.php del tema hijo.
 */
@media (max-width: 30rem) {
	.waad-seg__captura {
		margin-top: 1.5rem;
		padding: 1.1rem 1rem 1.25rem;
		border-radius: 1.25rem;
	}

	.waad-seg__cerrado-lista {
		margin-bottom: 1.15rem;
	}
}

/*
 * El resultado en un movil: lo mismo, pero sin tanto desplazamiento.
 *
 * Medido en una pantalla de 390 x 844, el resultado ocupaba 2.397 px, casi
 * tres pantallas, repartidos asi:
 *
 *     antetitulo        35 px
 *     titular          140 px
 *     redaccion        827 px   <- una pantalla entera de texto seguido
 *     cifras           216 px   <- una tarjeta para un solo numero
 *     cerrado          918 px   <- el desenfoque y el cartel, superpuestos
 *     supuestos         20 px
 *
 * Aqui se aprieta lo que es aire sin tocar ni una palabra: el cuerpo de la
 * redaccion baja de 17/1,65 a 16/1,55 -que en un movil se lee igual de bien
 * y cabe algo mas por linea-, la tarjeta de la nota pierde relleno, y el
 * cartel arranca antes sobre el desenfoque, que ocupaba mas de una pantalla
 * solo para insinuar que hay algo debajo.
 */
@media (max-width: 30rem) {
	.waad-seg__redaccion {
		font-size: 1rem;
		line-height: 1.55;
	}

	.waad-seg__redaccion > * + * {
		margin-top: .85em;
	}

	/*
	 * La redaccion, plegada hasta que alguien quiera leerla.
	 *
	 * Se degrada hacia abajo con una mascara en vez de cortar en seco: un
	 * corte limpio parece que el texto se ha truncado por error; el
	 * degradado dice que sigue.
	 *
	 * El alto va en rem y no en numero de lineas a proposito: el tope tiene
	 * que coincidir con el que mide el JS para decidir si merece la pena
	 * plegar.
	 */
	.waad-seg__redaccion.is-plegada {
		max-height: 13rem;
		overflow: hidden;
		-webkit-mask-image: linear-gradient( to bottom, #000 68%, transparent 100% );
		mask-image: linear-gradient( to bottom, #000 68%, transparent 100% );
	}

	.waad-seg__seguir {
		display: inline-flex;
		align-items: center;
		gap: .4rem;
		margin: -.4rem 0 1.6rem;
		padding: .55rem 0;
		font: inherit;
		font-size: .9375rem;
		font-weight: 600;
		color: var(--seg-marca);
		background: none;
		border: 0;
		cursor: pointer;
	}

	.waad-seg__seguir::after {
		content: "\2193";
	}

	/*
	 * El atajo al formulario mientras se lee el resultado.
	 *
	 * Pegado al fondo del popup, no de la ventana: dentro va un contenedor
	 * con su propio desplazamiento, y un position:fixed se saldria de el y
	 * acabaria encima de la barra de contacto del sitio.
	 */
	.waad-seg__atajo {
		position: sticky;
		z-index: 3;
		bottom: .75rem;
		display: flex;
		margin: 1rem -.25rem -.25rem;
	}

	.waad-seg__atajo .waad-seg__cta {
		flex: 1 1 auto;
		box-shadow: 0 10px 24px rgb(17 24 39 / 45%);
	}

	/*
	 * El desenfoque es un guiño, no contenido: ocupaba 918 px -mas de una
	 * pantalla de texto ilegible- y parece que la pagina se ha roto. No
	 * basta con bajarle el min-height: ese alto se lo da su propio
	 * contenido falso, asi que hay que recortarlo.
	 */
	.waad-seg__cerrado-fondo {
		min-height: 0;
		max-height: 26rem;
		overflow: hidden;
	}

	.waad-seg__cerrado > .waad-seg__cerrado-cartel {
		margin-top: 4.5rem;
	}
}