/* Herramientas gratis (bloque xp/analizador, assets/js/analizador.js): /test-velocidad-web/ y /auditoria-seo/.
   Se carga en toda página que lleve el bloque (filtro xp_grupos_css en inc/analizador.php). Formulario y progreso en la
   sección oscura del principio (.xp-an-portada), e informe en la sección lila (.xp-an-seccion), oculta hasta que hay informe.
   Colores de estado propios (bien, regular, mal) con contraste AA sobre blanco; el resto, tokens del tema. */

.xp-an, .xp-an-informe {
	--an-bien: #1E7A4C; --an-bien-fondo: #E2F3EA;
	--an-regular: #9A5B00; --an-regular-fondo: #FFF1D6;
	--an-mal: var(--xp-rosa-tinta); --an-mal-fondo: var(--xp-rosa-suave);
}
@keyframes xp-an-gira { to { transform: rotate(360deg); } }

/* Migas sobre el fondo oscuro */
.xp-an-portada .xp-migas, .xp-an-portada .xp-migas a { color: #C8B9D0; }
.xp-an-portada .xp-migas .last { color: var(--xp-blanco); }

/* En el móvil, el formulario justo después de la entradilla (la lista se repite más abajo, en «Qué miro») */
@media (max-width: 781px) { .xp-an-portada .xp-dos-col__titulo > .is-style-checks { display: none; } }

/* ---------- Formulario ---------- */
.xp-an__form { display: grid; gap: 1.1rem; }
.xp-an__form[hidden], .xp-an__progreso[hidden] { display: none; }
.xp-an__campo { display: grid; gap: .45rem; margin: 0; }
.xp-an__campo label { font-family: var(--xp-f-ui); font-size: .9375rem; font-weight: 600; color: var(--xp-ciruela); }
.xp-an__campo label span { font-weight: 500; font-size: .8125rem; color: var(--xp-gris); }
.xp-an__campo input {
	width: 100%; min-height: 52px; margin: 0; padding: .75rem 1rem;
	border: 1.5px solid #CDBFD4; border-radius: 12px; background: var(--xp-blanco); color: var(--xp-ciruela-oscuro);
	font: 1rem/1.4 var(--xp-f-texto); box-shadow: none; transition: border-color .15s ease;
}
.xp-an__campo #xp-an-url { min-height: 58px; font-size: 1.125rem; }
.xp-an__campo input:hover { border-color: #A795B0; }
.xp-an__campo input:focus { outline: 3px solid var(--xp-rosa-boton); outline-offset: 2px; border-color: var(--xp-ciruela); }
.xp-an__form [aria-invalid="true"] { border-color: var(--an-mal); }
.xp-an__fila { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .xp-an__fila { grid-template-columns: 1fr 1fr; } }
.xp-an__check { display: flex; align-items: flex-start; gap: .65rem; font-size: .9375rem; line-height: 1.45; color: var(--xp-texto); cursor: pointer; }
.xp-an__check input { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--xp-rosa-boton); }
.xp-an__check a { color: var(--xp-ciruela); }
.xp-an__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.xp-an__boton { width: 100%; min-height: 56px; margin-top: .25rem; font-size: 1rem; }
.xp-an__error { margin: 0; color: var(--an-mal); font-size: .9375rem; line-height: 1.45; }
.xp-an__error:empty { display: none; }
.xp-an__nota { margin: 0; text-align: center; font-family: var(--xp-f-ui); font-size: .8125rem; color: var(--xp-gris); }

/* ---------- Progreso ---------- */
.xp-an__progreso-titulo { margin: 0 0 1.25rem; font-family: var(--xp-f-ui); font-size: .9375rem; color: var(--xp-gris); }
.xp-an__dominio { display: block; margin-top: .15rem; font-family: var(--xp-f-texto); font-size: 1.375rem; color: var(--xp-ciruela); overflow-wrap: anywhere; }
.xp-an__pasos { display: grid; gap: .9rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.xp-an__pasos li { position: relative; min-height: 1.5rem; padding-left: 2.25rem; font-size: 1rem; line-height: 1.5; color: var(--xp-gris); }
.xp-an__pasos li::before { content: ""; position: absolute; left: 0; top: .1rem; box-sizing: border-box; width: 1.4rem; height: 1.4rem; border: 2px solid var(--xp-linea); border-radius: 50%; }
.xp-an__pasos li.is-activo { font-weight: 600; color: var(--xp-ciruela); }
.xp-an__pasos li.is-activo::before { border-color: var(--xp-rosa-boton); border-right-color: transparent; animation: xp-an-gira .8s linear infinite; }
.xp-an__pasos li.is-hecho { color: var(--xp-ciruela); }
.xp-an__pasos li.is-hecho::before { border-color: var(--xp-rosa-boton); background: var(--xp-rosa-boton); }
.xp-an__pasos li.is-hecho::after { content: ""; position: absolute; left: .3rem; top: .4rem; width: .8rem; height: .8rem; background: var(--xp-blanco); -webkit-mask: var(--xp-m-check) center / contain no-repeat; mask: var(--xp-m-check) center / contain no-repeat; }
.xp-an__pasos li.is-saltado::before { border-style: dashed; }
.xp-an__tiempo { font-weight: 400; color: var(--xp-gris); font-variant-numeric: tabular-nums; }
.xp-an__barra { height: 6px; margin-bottom: 1.25rem; overflow: hidden; border-radius: 999px; background: var(--xp-lila); }
.xp-an__barra span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--xp-rosa-boton), var(--xp-rosa-claro)); transition: width .6s ease; }
.xp-an__ver { width: 100%; }
.xp-an__ver[hidden] { display: none; }

/* ---------- Informe ---------- */
.xp-an-seccion:not(.is-activa) { display: none; }
.xp-an-seccion { scroll-margin-top: 4.5rem; }
.xp-an-informe:focus { outline: none; }
.xp-an-informe h4, .xp-an-informe figcaption {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; margin: 0 0 1rem;
	font-family: var(--xp-f-ui); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--xp-gris);
}
.xp-an-cab h2 { margin: .35rem 0 .4rem; overflow-wrap: anywhere; }
.xp-an-cab__meta { margin: 0; font-family: var(--xp-f-ui); font-size: .875rem; color: var(--xp-gris); }
.xp-an-cab__meta strong { color: var(--xp-ciruela); }
/* «Es un análisis sencillo…»: se dice desde el principio, sin asustar */
.xp-an-referencia { max-width: 46rem; margin: 1rem 0 0; padding: .75rem 1rem; border-left: 3px solid var(--xp-rosa); border-radius: 0 var(--xp-radio-p) var(--xp-radio-p) 0; background: rgba(255, 255, 255, .6); font-size: .9375rem; line-height: 1.5; color: var(--xp-texto); }
.xp-an-referencia a { color: var(--xp-ciruela); font-weight: 600; }

/* Notas: dial con arco que se llena (una, dos o tres) */
.xp-an-notas { display: grid; gap: 1rem; margin: 1.75rem 0 2.75rem; }
@media (min-width: 782px) { .xp-an-notas:not(.xp-an-notas--1) { grid-template-columns: 1fr 1fr; } .xp-an-notas--1 { max-width: 34rem; } }
@media (min-width: 1100px) { .xp-an-notas--3 { grid-template-columns: repeat(3, 1fr); } }
.xp-an-nota { display: flex; align-items: center; gap: 1.25rem; height: 100%; padding: 1.25rem 1.5rem; border-radius: var(--xp-radio); background: var(--xp-blanco); box-shadow: var(--xp-sombra); color: var(--xp-gris); }
.xp-an-nota--bien { color: var(--an-bien); }
.xp-an-nota--regular { color: var(--an-regular); }
.xp-an-nota--mal { color: var(--an-mal); }
.xp-an-nota__dial { position: relative; flex: none; width: 112px; height: 112px; }
.xp-an-nota svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.xp-an-nota__fondo, .xp-an-nota__arco { fill: none; stroke-width: 10; }
.xp-an-nota__fondo { stroke: var(--xp-lila); }
.xp-an-nota__arco { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1); }
.xp-an-nota.is-cargando .xp-an-nota__arco { stroke: var(--xp-rosa-boton); stroke-dasharray: 22 78; stroke-dashoffset: 0; transition: none; }
.xp-an-nota.is-cargando svg { animation: xp-an-gira-dial 1.1s linear infinite; }
@keyframes xp-an-gira-dial { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.xp-an-nota__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; line-height: 1; }
.xp-an-nota__num strong { font-family: var(--xp-f-texto); font-size: 2.375rem; font-weight: 700; color: currentColor; font-variant-numeric: tabular-nums; }
.xp-an-nota__num span { margin-top: .2rem; font-family: var(--xp-f-ui); font-size: .75rem; color: var(--xp-gris); }
.xp-an-nota__espera { font-size: 1.5rem; color: var(--xp-gris); }
.xp-an-nota__texto h3 { margin: 0 0 .3rem; font-size: 1.25rem; }
.xp-an-nota__texto p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--xp-texto); }

/* Bloques y tarjetas */
.xp-an-bloque { margin-top: 2.75rem; }
.xp-an-bloque:empty { display: none; }
.xp-an-bloque__titulo { margin: 0 0 1.25rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.xp-an-dos { display: grid; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 900px) { .xp-an-dos { grid-template-columns: 1fr 1fr; } }
.xp-an-tarjeta { margin: 0; padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); border-radius: var(--xp-radio); background: var(--xp-blanco); box-shadow: var(--xp-sombra); min-width: 0; }
.xp-an-bloque > .xp-an-tarjeta + .xp-an-tarjeta, .xp-an-bloque > * + .xp-an-tarjeta { margin-top: 1rem; }
.xp-an-dos > .xp-an-tarjeta:only-child { grid-column: 1 / -1; }
/* Las tres familias de comprobaciones de Google e IA */
.xp-an-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: start; gap: 1rem; margin-bottom: 1rem; }
.xp-an-tarjeta h4 > span { padding: .15rem .6rem; border-radius: 999px; background: var(--xp-lila); color: var(--xp-ciruela); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }

/* Así te ve Google (imita un resultado de Google: colores de Google a propósito) */
.xp-an-serp__ficha { padding: 1rem 1.1rem; border: 1px solid var(--xp-linea); border-radius: var(--xp-radio-p); font-family: Arial, sans-serif; }
.xp-an-serp__web { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; font-size: .875rem; color: #202124; overflow-wrap: anywhere; }
.xp-an-serp__icono { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--xp-lila); font-size: .8125rem; font-weight: 700; color: var(--xp-ciruela); }
.xp-an-serp__titulo { margin: 0 0 .3rem; font-size: 1.25rem; line-height: 1.3; color: #1A0DAB; overflow-wrap: anywhere; }
.xp-an-serp__desc { margin: 0; font-size: .875rem; line-height: 1.55; color: #4D5156; }

/* Así te lee la IA */
.xp-an-lee figcaption span { padding: .2rem .6rem; border-radius: 999px; background: var(--an-bien-fondo); color: var(--an-bien); letter-spacing: 0; text-transform: none; }
.xp-an-lee.is-poco figcaption span { background: var(--an-mal-fondo); color: var(--an-mal); }
.xp-an-lee__texto { max-height: 13.5rem; overflow: auto; padding: 1rem 1.1rem; border-radius: var(--xp-radio-p); background: var(--xp-ciruela-oscuro); color: #E9E1EE; font: .875rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.xp-an-lee.is-poco .xp-an-lee__texto { box-shadow: inset 0 0 0 2px var(--xp-rosa); }
.xp-an-lee__nota { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--xp-gris); }

/* Comprobaciones */
.xp-an-checks { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.xp-an-checks li { display: flex; align-items: flex-start; gap: .75rem; }
.xp-an-checks__icono { position: relative; flex: none; width: 1.5rem; height: 1.5rem; margin-top: .05rem; border-radius: 50%; background: var(--an-bien-fondo); }
.xp-an-checks__icono::after { content: ""; position: absolute; inset: .3rem; background: var(--an-bien); -webkit-mask: var(--xp-m-check) center / contain no-repeat; mask: var(--xp-m-check) center / contain no-repeat; }
.is-mal > .xp-an-checks__icono { background: var(--an-mal-fondo); }
.is-mal > .xp-an-checks__icono::after { background: var(--an-mal); -webkit-mask-image: var(--xp-m-cruz); mask-image: var(--xp-m-cruz); }
.is-aviso > .xp-an-checks__icono, .is-info > .xp-an-checks__icono { background: var(--an-regular-fondo); }
.is-info > .xp-an-checks__icono { background: var(--xp-lila); }
.is-aviso > .xp-an-checks__icono::after, .is-info > .xp-an-checks__icono::after {
	content: "!"; inset: 0; display: grid; place-items: center; background: none; -webkit-mask: none; mask: none;
	font: 700 .875rem/1 var(--xp-f-ui); color: var(--an-regular);
}
.is-info > .xp-an-checks__icono::after { content: "i"; color: var(--xp-gris); }
.xp-an-checks p { margin: .2rem 0 0; font-size: .9375rem; line-height: 1.5; }
.xp-an-checks .xp-an-checks__titulo { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--xp-ciruela); }
.xp-an-checks__dato { font-family: var(--xp-f-ui); font-size: .8125rem; color: var(--xp-gris); overflow-wrap: anywhere; }
.xp-an-checks__dato code, .xp-an-paginas code { padding: .1rem .45rem; border-radius: 6px; background: var(--xp-lila); color: var(--xp-ciruela); font-size: .8125rem; overflow-wrap: anywhere; }
.xp-an-checks__dato code + code { margin-left: .25rem; }

/* Así está organizada tu portada: los titulares como índice */
.xp-an-esquema ol { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.xp-an-esquema li { display: flex; align-items: baseline; gap: .6rem; padding-left: calc(var(--nivel, 0) * 1.1rem); font-size: .9375rem; line-height: 1.4; color: var(--xp-texto); overflow-wrap: anywhere; }
.xp-an-esquema li span { flex: none; min-width: 2.1rem; padding: .1rem .35rem; border-radius: 6px; background: var(--xp-lila); text-align: center; font: 600 .75rem/1.4 var(--xp-f-ui); color: var(--xp-ciruela); }
.xp-an-esquema li[style*="--nivel:0"] { font-weight: 600; color: var(--xp-ciruela); }
.xp-an-esquema li[style*="--nivel:0"] span { background: var(--xp-ciruela); color: var(--xp-blanco); }

/* Toda tu web: hasta 10 páginas */
.xp-an-paginas__resumen { max-width: 46rem; margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.5; }
.xp-an-paginas { display: grid; margin: 0; padding: 0; list-style: none; }
.xp-an-paginas li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .7rem 0; border-top: 1px solid var(--xp-linea); }
.xp-an-paginas li:first-child { border-top: 0; padding-top: 0; }
.xp-an-paginas small { flex-basis: 100%; font-size: .8125rem; color: var(--xp-gris); overflow-wrap: anywhere; }
.xp-an-paginas__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.xp-an-paginas__chips span { padding: .15rem .55rem; border-radius: 999px; background: var(--an-bien-fondo); color: #145C38; font: 500 .75rem/1.4 var(--xp-f-ui); }
.xp-an-paginas__chips .is-mal { background: var(--an-mal-fondo); color: var(--an-mal); text-decoration: line-through; text-decoration-thickness: 1px; }
@media (max-width: 599px) { .xp-an-paginas__chips { margin-left: 0; } }

/* Robots */
.xp-an-bots__intro { margin: 0 0 .25rem; font-size: .9375rem; }
.xp-an-bots__grupo { margin: 1.1rem 0 .55rem; font-size: .9375rem; font-weight: 600; color: var(--xp-ciruela); }
.xp-an-bots__lista { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.xp-an-bots__lista li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem .35rem .5rem; border-radius: 999px; background: var(--an-bien-fondo); color: #145C38; font-family: var(--xp-f-ui); font-size: .8125rem; font-weight: 500; line-height: 1.3; }
.xp-an-bots__lista li::before { content: ""; flex: none; width: .95rem; height: .95rem; background: currentColor; -webkit-mask: var(--xp-m-check) center / contain no-repeat; mask: var(--xp-m-check) center / contain no-repeat; }
.xp-an-bots__lista li.is-bloquea { background: var(--an-mal-fondo); color: var(--an-mal); }
.xp-an-bots__lista li.is-bloquea::before { -webkit-mask-image: var(--xp-m-cruz); mask-image: var(--xp-m-cruz); }
.xp-an-bots__lista--entreno li.is-bloquea { background: var(--xp-lila); color: var(--xp-gris); }
.xp-an-bots__lista small { font-size: .75rem; opacity: .8; }
.xp-an-tipos { margin: 1rem 0 0; font-size: .875rem; line-height: 1.9; color: var(--xp-gris); }
.xp-an-tipos code { padding: .15rem .5rem; border-radius: 6px; background: var(--xp-blanco); color: var(--xp-ciruela); font-size: .8125rem; }

/* Velocidad */
.xp-an-cargando { display: flex; align-items: center; gap: 1rem; }
.xp-an-cargando p { margin: 0; }
.xp-an-cargando__rueda { flex: none; box-sizing: border-box; width: 2.25rem; height: 2.25rem; border: 3px solid var(--xp-lila); border-top-color: var(--xp-rosa-boton); border-radius: 50%; animation: xp-an-gira .9s linear infinite; }
.xp-an-cargando__tiempo { color: var(--xp-gris); font-variant-numeric: tabular-nums; }
.xp-an-cargando.is-error { color: var(--xp-texto); }
.xp-an-fotos__lista { display: flex; gap: .6rem; margin: 0; padding: 0 0 .35rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.xp-an-fotos__lista li { flex: 1 0 72px; max-width: 110px; text-align: center; scroll-snap-align: start; }
.xp-an-fotos__lista img { display: block; width: 100%; height: auto; border: 1px solid var(--xp-linea); border-radius: 8px; background: var(--xp-lila); }
.xp-an-fotos__lista span { display: block; margin-top: .35rem; font-family: var(--xp-f-ui); font-size: .75rem; color: var(--xp-gris); font-variant-numeric: tabular-nums; }
.xp-an-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem; margin: 1rem 0; padding: 0; list-style: none; }
.xp-an-metrica { padding: 1rem 1.1rem; border-top: 4px solid var(--xp-linea); border-radius: var(--xp-radio-p); background: var(--xp-blanco); box-shadow: var(--xp-sombra); }
.xp-an-metrica.is-bien { border-top-color: var(--an-bien); }
.xp-an-metrica.is-regular { border-top-color: #E8A33D; }
.xp-an-metrica.is-mal { border-top-color: var(--an-mal); }
.xp-an-metrica p { margin: 0; }
.xp-an-metrica__nombre { font-family: var(--xp-f-ui); font-size: .8125rem; font-weight: 600; color: var(--xp-gris); }
.xp-an-metrica .xp-an-metrica__valor { margin: .2rem 0 .35rem; font-family: var(--xp-f-texto); font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--xp-ciruela); font-variant-numeric: tabular-nums; }
.is-bien > .xp-an-metrica__valor { color: var(--an-bien); }
.is-regular > .xp-an-metrica__valor { color: var(--an-regular); }
.is-mal > .xp-an-metrica__valor { color: var(--an-mal); }
.xp-an-metrica__texto { font-size: .8125rem; line-height: 1.45; color: var(--xp-texto); }
.xp-an-real { margin: 0 0 1rem; padding: .9rem 1.1rem; border-left: 4px solid var(--xp-linea); border-radius: var(--xp-radio-p); background: var(--xp-blanco); font-size: .9375rem; line-height: 1.5; }
.xp-an-real.is-bien { border-left-color: var(--an-bien); }
.xp-an-real.is-regular { border-left-color: #E8A33D; }
.xp-an-real.is-mal { border-left-color: var(--an-mal); }
.xp-an-peso__total { margin: 0; font-size: 1rem; }
.xp-an-peso__total strong { font-size: 1.75rem; color: var(--xp-ciruela); }
.xp-an-peso.is-regular .xp-an-peso__total strong { color: var(--an-regular); }
.xp-an-peso.is-mal .xp-an-peso__total strong { color: var(--an-mal); }
.xp-an-peso__barra { display: flex; height: 14px; margin: .85rem 0 .75rem; overflow: hidden; border-radius: 999px; background: var(--xp-lila); }
.xp-an-peso__barra span { height: 100%; }
.xp-an-peso__leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; padding: 0; list-style: none; font-family: var(--xp-f-ui); font-size: .8125rem; color: var(--xp-texto); }
.xp-an-peso__leyenda li { display: inline-flex; align-items: center; gap: .4rem; }
.xp-an-peso__leyenda li::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px; background: var(--an-t, #D7CDE0); }
.xp-an-peso__leyenda strong { color: var(--xp-ciruela); }
.xp-an-peso__barra span { background: var(--an-t, #D7CDE0); }
.xp-an-t--image { --an-t: var(--xp-rosa); }
.xp-an-t--script { --an-t: var(--xp-ciruela); }
.xp-an-t--stylesheet { --an-t: #8E7A99; }
.xp-an-t--font { --an-t: #E8A33D; }
.xp-an-t--document { --an-t: #7FA6B6; }
.xp-an-t--media { --an-t: var(--xp-rosa-tinta); }
/* Archivos que más pesan, imágenes que podrían pesar menos y servicios de fuera */
.xp-an-peso__sub { margin: 1.5rem 0 .75rem; font-family: var(--xp-f-ui); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--xp-gris); }
.xp-an-lista { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; counter-reset: an-lista; }
.xp-an-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem 1rem; font-size: .9375rem; line-height: 1.35; }
.xp-an-lista__nombre { min-width: 0; color: var(--xp-ciruela); overflow-wrap: anywhere; }
.xp-an-lista__nombre small { font-family: var(--xp-f-ui); font-size: .75rem; color: var(--xp-gris); }
.xp-an-lista li > strong { font-family: var(--xp-f-ui); font-size: .875rem; color: var(--xp-ciruela); white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp-an-lista__barra { grid-column: 1 / -1; grid-row: 2; height: 6px; overflow: hidden; border-radius: 999px; background: var(--xp-lila); }
.xp-an-lista__barra span { display: block; height: 100%; border-radius: inherit; background: var(--xp-rosa); }
.xp-an-lista--sin-barra li { padding-bottom: .65rem; border-bottom: 1px solid var(--xp-linea); }
.xp-an-lista--sin-barra li:last-child { padding-bottom: 0; border-bottom: 0; }

/* ¿Y en ordenador? */
.xp-an-escritorio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1rem; }
.xp-an-escritorio p { flex: 1 1 22rem; margin: 0; }
.xp-an-escritorio .xp-an-lee__nota { flex-basis: 100%; margin: 0; }
.xp-an-escritorio__espera { display: flex; align-items: center; gap: .75rem; }
.xp-an-escritorio__espera .xp-an-cargando__rueda { width: 1.5rem; height: 1.5rem; }
.xp-an-boton-sec { min-height: 44px; padding: .6rem 1.25rem; border: 1.5px solid var(--xp-ciruela); border-radius: 999px; background: transparent; color: var(--xp-ciruela); font: 600 .9375rem/1.2 var(--xp-f-ui); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.xp-an-boton-sec:hover, .xp-an-boton-sec:focus-visible { background: var(--xp-ciruela); color: var(--xp-blanco); }

.xp-an-mejoras { display: grid; gap: .8rem; margin: 0; padding-left: 1.35rem; }
.xp-an-mejoras li::marker { color: var(--xp-rosa-tinta); font-weight: 700; }
.xp-an-mejoras p { margin: 0; }
.xp-an-fuente { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--xp-gris); }

/* La otra herramienta: banda grande con el fondo «azul con formas» del tema, justo después de lo que ha venido a ver; lleva
   a su página, donde el análisis empieza solo */
.xp-an-cruce:empty { display: none; }
.xp-an-cruce { margin-top: 2.75rem; }
.xp-an-cruce__caja {
	display: grid; gap: 1.5rem 2.5rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--xp-radio-g);
	background: var(--xp-niebla) url("../../img/formas-azul.webp") 50% 0 / 800px auto repeat; box-shadow: var(--xp-sombra);
}
@media (min-width: 900px) { .xp-an-cruce__caja { grid-template-columns: 1.6fr 1fr; align-items: center; } }
.xp-an-cruce .xp-an-cruce__ante { margin: 0 0 .6rem; font-family: var(--xp-f-ui); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--xp-rosa-tinta); }
.xp-an-cruce h3 {
	display: flex; align-items: flex-start; gap: .9rem; margin: 0 0 1.1rem;
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance;
}
.xp-an-cruce h3::before { content: ""; flex: none; width: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); aspect-ratio: 1; margin-top: .1em; background: var(--xp-ast) center / contain no-repeat; }
.xp-an-cruce__lista { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.xp-an-cruce__lista li { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem .4rem .55rem; border-radius: 999px; background: var(--xp-blanco); font-family: var(--xp-f-ui); font-size: .875rem; font-weight: 500; color: var(--xp-ciruela); box-shadow: 0 1px 2px rgba(41, 31, 47, .08); }
.xp-an-cruce__lista li::before { content: ""; width: .9rem; height: .9rem; background: var(--xp-rosa-boton); -webkit-mask: var(--xp-m-check) center / contain no-repeat; mask: var(--xp-m-check) center / contain no-repeat; }
.xp-an-cruce__accion .wp-block-button__link { width: 100%; height: auto; min-height: 56px; font-size: 1.0625rem; } /* height: el 100 % del núcleo lo estira en la rejilla */
.xp-an-cruce__accion p { margin: .75rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--xp-gris); text-align: center; }

/* Cierre */
.xp-an-cierre { margin-top: 2.75rem; }
.xp-an-cierre .xp-an-cierre__referencia { margin: 1rem 0 .6rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .9375rem; line-height: 1.5; color: #E9E1EE; }
.xp-an-cierre__caja { display: grid; gap: 1.75rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--xp-radio-g); background: var(--xp-ciruela); color: #E9E1EE; }
@media (min-width: 900px) { .xp-an-cierre__caja { grid-template-columns: 1.5fr 1fr; align-items: end; } }
.xp-an-cierre h3 { margin: 0 0 .75rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.xp-an-cierre__texto p { margin: 0 0 .6rem; }
.xp-an-cierre__lista { display: grid; gap: .4rem; margin: 0 0 1.1rem; padding-left: 1.35rem; }
.xp-an-cierre__lista li::marker { color: var(--xp-rosa-claro); font-weight: 700; }
.xp-an-cierre__correo { font-size: .9375rem; color: #C8B9D0; }
.xp-an-cierre__botones { display: grid; gap: .75rem; }
.xp-an-cierre__botones .wp-block-button__link { width: 100%; }
.xp-an-cierre .xp-an-boton-wa { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); box-shadow: none; }
.xp-an-cierre .xp-an-boton-wa:hover { border-color: var(--xp-wa); background: rgba(255, 255, 255, .16); }
/* «¿Te ayudo a mejorar tu web?» como aviso al llegar al final: fondo oscurecido (por encima de la cabecera y la barra del
   móvil, por debajo del chat) y la caja que salta en su sitio; al cerrarla, se queda ahí. */
.xp-an-velo { position: fixed; z-index: 110; inset: 0; background: rgba(41, 31, 47, .62); opacity: 0; transition: opacity .3s ease; }
.xp-an-velo.is-visible { opacity: 1; }
.xp-an-cierre__caja { position: relative; }
.xp-an-cierre.is-aviso .xp-an-cierre__caja { z-index: 115; box-shadow: 0 0 0 4px var(--xp-rosa), 0 30px 80px -20px rgba(0, 0, 0, .65); animation: xp-an-salta .55s cubic-bezier(.2, 1.35, .4, 1) both; }
.xp-an-cierre.is-en-su-sitio .xp-an-cierre__caja { animation: xp-an-asienta .45s ease both; }
@keyframes xp-an-salta { from { opacity: .4; transform: translateY(28px) scale(.92); } }
@keyframes xp-an-asienta { from { box-shadow: 0 0 0 4px var(--xp-rosa), 0 30px 80px -20px rgba(0, 0, 0, .65); transform: scale(1.01); } }
.xp-an-cierre__x {
	position: absolute; top: .6rem; right: .6rem; display: none; place-items: center; width: 40px; height: 40px;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--xp-blanco); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.xp-an-cierre__x:hover, .xp-an-cierre__x:focus-visible { background: rgba(255, 255, 255, .2); }
.xp-an-cierre.is-aviso .xp-an-cierre__x { display: grid; }
.xp-an-cierre.is-aviso h3 { padding-right: 2.75rem; }

.xp-an-otra { min-height: 44px; padding: .5rem; border: 0; background: none; color: var(--xp-blanco); font-family: var(--xp-f-ui); font-size: .9375rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--xp-rosa); text-underline-offset: 4px; cursor: pointer; }
.xp-an-otra:hover { color: var(--xp-rosa-claro); }

@media (prefers-reduced-motion: reduce) {
	.xp-an__pasos li.is-activo::before, .xp-an-nota.is-cargando svg, .xp-an-cargando__rueda { animation-duration: 3s; }
	.xp-an-nota__arco, .xp-an__barra span, .xp-an-velo { transition: none; }
	.xp-an-cierre.is-aviso .xp-an-cierre__caja, .xp-an-cierre.is-en-su-sitio .xp-an-cierre__caja { animation: none; }
}