/* ============================================================
   PORTADA DEL APARTADO DE PRÁCTICAS
   ============================================================
   Esta hoja va DETRÁS de la del portal (`ecp` es su dependencia
   declarada) y todo cuelga de `.ecp`, que es donde se declaran los
   tokens: fuera de esa clase --azul, --n050 y --r-caja no existen y la
   página sale sin color, con aspecto de CSS roto.

   ------------------------------------------------------------
   LO QUE FALLÓ EN LAS TRES PRIMERAS VERSIONES
   ------------------------------------------------------------
   1. «Se ve muy poco a ecotec, muy plano». Faltaban los recursos de la
      propia portada de ecotec.edu.ec: color sólido a sangre, el ámbar
      de la paleta, iconos.
   2. «Muy azul, muy blanco, casi nada de variación». Doce franjas
      alternando blanco y `--n050`, dos tonos casi idénticos, y la
      mitad del texto en el azul de marca.
   3. «No me gustan esas tiritas, es cero atractiva». Los contornos
      finos —escudos de línea saliéndose por los bordes, el contorno
      desplazado de una ficha— no se leían como el motivo del isotipo
      del que salían: se leían como tiritas pegadas. Retirados todos.

   ------------------------------------------------------------
   LO QUE SOSTIENE ESTA VERSIÓN
   ------------------------------------------------------------
   FOTOGRAFÍA, que era lo que faltaba desde el principio. Seis momentos
   fotográficos de estudiantes reales, ninguno repetido: el héroe, las
   dos puertas, el bloque partido a sangre, la banda de empresas y el
   cierre. Entre ellos, franjas de contenido que respiran.

   Y una escala mayor: el portal está calibrado como herramienta —el
   estudiante va a filtrar vacantes, no a mirar la página— y con esos
   tamaños una portada parece una ficha. La clase `.ecpi` sube la
   escala solo aquí.

   Piezas de color, en orden de aparición: azul a sangre (héroe, cifras,
   puertas, empresas, cierre), blanco, gris azulado `--n050` y UN panel
   ámbar. El ámbar es token de la paleta (`koqerr`, #f8b710) y
   está en las hojas de ecotec.edu.ec; sigue sin ser color de acción.
   ============================================================ */

/* ============ ESCALA DE LA PORTADA ============ */
.ecp .ecpi {
	--ecpi-escudo-chico:10px 10px 22px 22px;
}

.ecp .ecpi h1.ecp-h1 { font-size:clamp(34px, 5.2vw, 58px); max-width:19ch; }
.ecp .ecpi .ecp-hero p { font-size:clamp(16.5px, 1.4vw, 18.5px); max-width:56ch; }
.ecp .ecpi h2.ecp-t { font-size:clamp(28px, 3.1vw, 40px); max-width:26ch; }
.ecp .ecpi p.ecp-p { font-size:17px; }
.ecp .ecpi .ecp-cierre h2 { font-size:clamp(26px, 2.8vw, 36px); }

/* NO HAY TERCERA SUPERFICIE. Hubo un lavado de cian al 10 % (#e7f6fb) en
   tres secciones, como tercer tono para romper la alternancia de blanco
   y `--n050`. Hugo lo rechazó en cuanto lo vio —«un celeste horrible»— y
   tenía razón: en pantalla no se leía como un aclarado del cian de
   marca, se leía como un tono ajeno metido en medio.
   La variación la dan la fotografía, las dos bandas azules y el panel
   ámbar, que es de donde tenía que venir desde el principio. Las
   superficies claras son las dos que el portal ya tenía: blanco y
   `--n050`.

/* La clase que crea contexto de apilado para las fotos de fondo a
   `z-index:-2` y sus velos a `-1`. Sin ella se pintan por detrás del
   fondo de la sección y desaparecen. */
.ecp .ecpi-banda,
.ecp .ecpi-foto-banda,
.ecp .ecpi-puerta { position:relative; isolation:isolate; }

/* ============ FRANJA DE CIFRAS SOBRE AZUL ============ */
/* `ecp-cifras` viene con tarjeta blanca, borde y sombra; aquí se
   desmonta y se apoya sobre el azul, con las líneas de separación en
   blanco translúcido. */
.ecp .ecpi-banda {
	background:var(--azul);
	/* El héroe también es azul: sin esta línea los dos se leen como un
	   solo bloque de color y se pierde el corte. */
	box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
	/* Trama diagonal al 6 %: no se lee como patrón, solo evita que la
	   franja de azul plano parezca un error de carga. */
	background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 26px);
	/* La cuña. Es la única forma geométrica que quedó, y es un BORDE
	   sólido, no una línea suelta: hace de bisagra entre el bloque azul
	   de arriba y las franjas claras de abajo. El relleno inferior
	   compensa lo que la cuña se come. */
	clip-path:polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%);
	padding-bottom:62px;
}

.ecp .ecpi-cifras { background:none; border:0; box-shadow:none; border-radius:0; }
.ecp .ecpi-cifras .ecp-cifra { border-left-color:rgba(255,255,255,.22); padding:22px 26px; }
.ecp .ecpi-cifras .ecp-cifra dt { color:#fff; font-size:38px; }
/* Sobre el azul, el texto pequeño va en `--claro` y no en cian: el cian
   da 3,71:1 y no llega al 4,5:1 que pide el texto pequeño. */
.ecp .ecpi-cifras .ecp-cifra dd { color:var(--claro); }

@media (max-width:760px) {
	.ecp .ecpi-cifras .ecp-cifra { border-top-color:rgba(255,255,255,.22); }
	.ecp .ecpi-banda { clip-path:none; padding-bottom:40px; }
}

/* ============ LOS ICONOS ============ */
/* Heredan el color del contenedor con `currentColor`, que es lo que
   permite que pasen a blanco cuando el fondo se vuelve oscuro. */
.ecp .ecpi-icono { width:1em; height:1em; display:block; flex:none; }

/* ============ LAS DOS PUERTAS, CON FOTOGRAFÍA DE FONDO ============ */
/* Es la decisión principal de la página, así que son dos piezas
   grandes con la foto detrás, no dos tarjetas de texto.
   No reutilizan `ecp-ficha` a propósito: ese componente se vuelve azul
   con texto blanco al pasar el cursor, y aquí el fondo ya es una foto
   con velo azul; habría sido pelearse con sus reglas en cada línea. */
.ecp .ecpi-puertas {
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
	gap:24px; margin-top:36px;
}

.ecp .ecpi-puerta {
	overflow:hidden; border-radius:var(--r-caja); background:var(--azul);
	/* Alta a propósito: con 470px el bloque de texto arrancaba a un
	   tercio de la pieza, o sea encima de la parte CLARA de la foto, y el
	   titular en blanco se perdía sobre las hojas del árbol. Con 540 hay
	   una banda de fotografía limpia arriba y el texto se apoya en el azul
	   sólido de abajo. */
	min-height:540px; display:flex; align-items:flex-end;
	box-shadow:0 6px 22px rgba(0,73,164,.16);
	transition:transform .3s ease, box-shadow .3s ease;
}
.ecp .ecpi-puerta:hover { transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,73,164,.24); }

.ecp .ecpi-puerta__foto {
	position:absolute; inset:0; z-index:-2;
	background-size:cover; background-position:center;
	filter:saturate(.9);
	transition:transform .7s ease;
}
.ecp .ecpi-puerta:hover .ecpi-puerta__foto { transform:scale(1.06); }

/* El velo: casi transparente arriba para que se vea la fotografía, y
   azul SÓLIDO desde el 38 %, que es donde arranca el texto.
   La primera versión subía despacio —.34 al 34 %— y el rótulo y el
   titular caían sobre la zona clara: en blanco sobre una foto de hojas
   iluminadas no se leían. A partir del 95 % el blanco da 8,4:1 sea cual
   sea la fotografía que haya debajo, que es la única forma de
   garantizarlo cuando la foto puede cambiar. */
.ecp .ecpi-puerta::before {
	content:""; position:absolute; inset:0; z-index:-1;
	background:linear-gradient(180deg,
		rgba(0,73,164,.06) 0%,
		rgba(0,73,164,.20) 20%,
		rgba(0,73,164,.72) 33%,
		rgba(0,73,164,.95) 40%,
		rgba(0,73,164,.99) 100%);
}

.ecp .ecpi-puerta__in { padding:38px 34px 34px; }

.ecp .ecpi-puerta__k {
	display:flex; align-items:center; gap:9px; margin:0 0 12px;
	font-family:var(--sans); font-size:11.5px; font-weight:600;
	letter-spacing:.16em; text-transform:uppercase; color:#fff;
}
.ecp .ecpi-puerta__k .ecpi-icono { width:17px; height:17px; }

.ecp .ecpi-puerta h3 {
	font-family:var(--sans); font-size:clamp(21px, 2vw, 26px); font-weight:600;
	line-height:1.22; letter-spacing:-.4px; color:#fff; margin:0 0 10px;
}
.ecp .ecpi-puerta > .ecpi-puerta__in > p {
	font-size:15.5px; line-height:1.62; color:var(--claro); margin:0 0 20px; max-width:44ch;
}

.ecp .ecpi-puerta ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ecp .ecpi-puerta ul a {
	font-family:var(--sans); font-size:14px; font-weight:500; color:#fff;
	text-decoration:none; display:inline-flex; align-items:center; gap:9px;
	transition:gap .18s ease, color .18s ease;
}
.ecp .ecpi-puerta ul a::before { content:"→"; color:var(--cian); }
.ecp .ecpi-puerta ul a:hover { gap:13px; color:var(--cian); }
.ecp .ecpi-puerta ul a:focus-visible { outline:2px solid var(--cian); outline-offset:3px; border-radius:3px; }

@media (max-width:860px) {
	.ecp .ecpi-puertas { grid-template-columns:1fr; }
	.ecp .ecpi-puerta { min-height:460px; }
}

/* ============ BLOQUE PARTIDO A SANGRE ============ */
/* La fotografía llega al borde de la pantalla por la izquierda y el
   texto ocupa la derecha. Es el recurso que sostiene la portada de
   ecotec.edu.ec, y aquí resuelve el punto más plano que tenía la
   página: un párrafo de ancho completo con la mitad derecha vacía. */
.ecp .ecpi-sec-partida { padding-top:0; }

.ecp .ecpi-split {
	display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:center; margin-bottom:8px;
}

.ecp .ecpi-split__foto {
	display:block; align-self:stretch; min-height:560px;
	background-size:cover; background-position:center 42%;
	filter:saturate(.92);
}

.ecp .ecpi-split__txt {
	padding:64px clamp(24px,4vw,72px);
	max-width:640px;
}
.ecp .ecpi-split__txt .ecp-p:last-child { margin-bottom:0; }

@media (max-width:900px) {
	.ecp .ecpi-split { grid-template-columns:1fr; }
	.ecp .ecpi-split__foto { min-height:280px; }
	.ecp .ecpi-split__txt { padding:40px 24px 8px; max-width:none; }
}

/* ============ LAS SEIS TARJETAS CON ICONO ============ */
/* Tres columnas fijas: con `auto-fit` a 300px la última fila se
   quedaba con una tarjeta sola y estirada. */
.ecp .ecpi-seis { grid-template-columns:repeat(3,minmax(0,1fr)); }

.ecp .ecp-ficha.ecpi-tarjeta { padding:30px 28px 28px; }

.ecp .ecpi-tarjeta__icono {
	display:grid; place-items:center; width:46px; height:46px; margin:0 0 18px;
	border-radius:var(--ecpi-escudo-chico); background:var(--n050);
	box-shadow:inset 0 0 0 1px var(--n100); color:var(--azul);
	transition:background .22s ease, color .22s ease, box-shadow .22s ease;
}
.ecp .ecpi-tarjeta__icono .ecpi-icono { width:24px; height:24px; }
.ecp .ecpi-tarjeta:hover .ecpi-tarjeta__icono {
	background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); color:#fff;
}
/* En gris oscuro neutro y no en el azul de marca: seis títulos de
   tarjeta más diez preguntas en #0049a4 eran la mitad del texto de la
   página en azul. El azul se queda para los títulos de sección y para
   lo que se pulsa. */
.ecp .ecpi-tarjeta h3 { font-size:19px; color:var(--n700); }

@media (max-width:980px) { .ecp .ecpi-seis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .ecp .ecpi-seis { grid-template-columns:1fr; } }

/* ============ LA TIRA DE LOS SEIS PASOS ============ */
/* Solo los nombres. El detalle de cada paso vive en la guía de
   registro, y tenerlo en dos sitios es garantizar que un día digan
   cosas distintas. */
.ecp ol.ecpi-pasos {
	list-style:none; margin:34px 0 0; padding:0;
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
.ecp .ecpi-paso {
	display:flex; align-items:center; gap:14px; margin:0;
	padding:18px 20px; background:var(--papel);
	border:1px solid var(--n100); border-radius:var(--r-caja);
	box-shadow:0 2px 10px rgba(0,73,164,.06);
	transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ecp .ecpi-paso:hover { border-color:var(--n300); box-shadow:0 8px 20px rgba(0,73,164,.12); transform:translateY(-2px); }
.ecp .ecpi-paso__n {
	flex:none; width:34px; height:34px; border-radius:50%;
	display:grid; place-items:center; background:var(--papel);
	box-shadow:inset 0 0 0 2px var(--cian); color:var(--n900);
	font-family:var(--sans); font-size:13.5px; font-weight:700;
	font-variant-numeric:tabular-nums;
}
.ecp .ecpi-paso__t { font-family:var(--sans); font-size:15px; font-weight:500; line-height:1.4; color:var(--n700); }

@media (max-width:900px) { .ecp ol.ecpi-pasos { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .ecp ol.ecpi-pasos { grid-template-columns:1fr; } }

/* ============ EL PANEL DE LA GUÍA NBS, EN ÁMBAR ============ */
/* El único momento cálido de la página, y es deliberado: es el puntero
   al otro despliegue, lo que Vinculación pidió que destacara. En azul
   competía con el héroe y con la franja de cifras.
   Contrastes medidos sobre #f8b710: el titular en --azul da 4,73:1 y
   el párrafo en --n700 da 6,38:1; los dos pasan el mínimo de 4,5:1. En
   blanco da 1,86:1, así que aquí NADA va en blanco. */
.ecp .ecpi-nbs {
	margin:26px 0 0; padding:36px 38px; background:var(--ambar);
	border-radius:var(--r-caja);
	display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
	gap:30px; align-items:center;
}
.ecp .ecpi-nbs__k {
	font-family:var(--sans); font-size:11.5px; font-weight:600;
	letter-spacing:.16em; text-transform:uppercase; color:var(--azul); margin:0 0 10px;
}
.ecp .ecpi-nbs h3 {
	font-family:var(--sans); font-size:clamp(20px,2vw,25px); font-weight:600;
	line-height:1.25; color:var(--azul); margin:0 0 10px; letter-spacing:-.3px;
}
.ecp .ecpi-nbs p { font-size:15.5px; line-height:1.62; color:var(--n700); margin:0; max-width:62ch; }
.ecp .ecpi-nbs__btns { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }

/* `ecp-b--2` es transparente con borde y texto BLANCOS, hecho para el
   héroe. Sobre el ámbar sería invisible; aquí va en azul. */
.ecp .ecpi-nbs a.ecp-b--2 { color:var(--azul); box-shadow:inset 0 0 0 1.5px rgba(0,73,164,.42); background:transparent; }
.ecp .ecpi-nbs a.ecp-b--2:hover { background:rgba(0,73,164,.09); box-shadow:inset 0 0 0 1.5px var(--azul); }

@media (max-width:900px) {
	.ecp .ecpi-nbs { grid-template-columns:1fr; padding:30px 26px; }
	.ecp .ecpi-nbs__btns { justify-content:flex-start; }
}

/* ============ FILA DE «VER TODO» ============ */
.ecp p.ecpi-mas { margin:30px 0 0; display:flex; justify-content:center; }

/* ============ PREGUNTAS FRECUENTES ============ */
/* `details`/`summary` nativos: sin JavaScript se abren igual, y el
   navegador ya resuelve el teclado y el anuncio de estado. El marcador
   por defecto se retira con las DOS reglas —la estándar y la de
   WebKit— porque Safari sigue necesitando la suya.
   Dos columnas: diez barras idénticas apiladas eran otra columna plana
   de 900px de alto. `align-items:start` evita que al abrir una, la de
   al lado se estire. */
.ecp .ecpi-faq {
	margin:32px 0 0; display:grid; gap:12px 16px;
	grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;
}
.ecp .ecpi-faq__item {
	background:var(--papel); border:1px solid var(--n100);
	border-radius:var(--r-caja); box-shadow:0 2px 10px rgba(0,73,164,.06);
	transition:border-color .2s ease, box-shadow .2s ease;
}
.ecp .ecpi-faq__item[open] { border-color:var(--n300); box-shadow:0 8px 22px rgba(0,73,164,.10); }
.ecp .ecpi-faq__item > summary {
	list-style:none; cursor:pointer; padding:20px 56px 20px 24px; position:relative;
	font-family:var(--sans); font-size:16.5px; font-weight:500;
	line-height:1.4; color:var(--n700);
}
.ecp .ecpi-faq__item > summary::-webkit-details-marker { display:none; }
.ecp .ecpi-faq__item > summary:hover { color:var(--azul); }
.ecp .ecpi-faq__item > summary:focus-visible { outline:2px solid var(--cian); outline-offset:2px; border-radius:var(--r-caja); }

/* El signo se dibuja con dos barras y no con un glifo «+»: girando la
   vertical 90° el más se convierte en menos sin cambiar de tamaño ni
   dar un salto de línea base. */
.ecp .ecpi-faq__item > summary::after,
.ecp .ecpi-faq__item > summary::before {
	content:""; position:absolute; right:24px; top:50%;
	background:var(--azul); transition:transform .22s ease;
}
.ecp .ecpi-faq__item > summary::before { width:14px; height:2px; margin-top:-1px; }
.ecp .ecpi-faq__item > summary::after { width:2px; height:14px; margin-top:-7px; right:30px; }
.ecp .ecpi-faq__item[open] > summary::after { transform:rotate(90deg); }
.ecp .ecpi-faq__r { padding:0 24px 22px; }
.ecp .ecpi-faq__r p { margin:0; font-size:15.5px; line-height:1.68; color:var(--n700); max-width:78ch; }

@media (max-width:820px) { .ecp .ecpi-faq { grid-template-columns:1fr; } }

/* ============ BANDA DE EMPRESAS SOBRE FOTOGRAFÍA ============ */
/* Es la única sección que no habla al estudiante. Vestida igual que
   las demás, un responsable de talento humano la pasa de largo. */
.ecp .ecpi-foto-banda { background:var(--azul); }

.ecp .ecpi-foto-banda__foto {
	display:block; position:absolute; inset:0; z-index:-2;
	background-size:cover; background-position:center 38%;
	filter:saturate(.85);
}
/* Velo en diagonal: sólido en el lado del texto y más abierto al otro,
   igual que el del héroe del portal, para que la fotografía se vea sin
   comprometer el contraste. Blanco sobre el 95 % da 8,4:1. */
.ecp .ecpi-foto-banda::before {
	content:""; position:absolute; inset:0; z-index:-1;
	background:linear-gradient(100deg,
		rgba(0,73,164,.96) 0%,
		rgba(0,73,164,.92) 38%,
		rgba(0,73,164,.72) 68%,
		rgba(0,73,164,.42) 100%);
}

.ecp .ecpi-foto-banda .ecp-rotulo { color:#fff; }
.ecp .ecpi-foto-banda h2.ecp-t { color:#fff; }
.ecp .ecpi-foto-banda p.ecp-p { color:var(--claro); }
.ecp .ecpi-foto-banda p.ecp-p strong { color:#fff; }

/* ============ BENEFICIOS PARA LAS ORGANIZACIONES ============ */
/* El subtítulo lo lleva el documento aprobado y se había perdido al
   portar la sección. Sobre la banda azul va en blanco. */
.ecp h3.ecpi-benes__t {
	font-family:var(--sans); font-size:12px; font-weight:600;
	letter-spacing:.15em; text-transform:uppercase; color:#fff;
	margin:34px 0 0;
}
.ecp h3.ecpi-benes__t + ul.ecpi-benes { margin-top:16px; }

.ecp ul.ecpi-benes {
	list-style:none; margin:30px 0 0; padding:0;
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 30px;
}
.ecp ul.ecpi-benes li {
	margin:0; padding-left:30px; position:relative;
	font-size:15.5px; line-height:1.6; color:var(--claro);
}
.ecp ul.ecpi-benes li::before {
	content:""; position:absolute; left:2px; top:6px;
	width:11px; height:6px; border-left:2px solid var(--cian);
	border-bottom:2px solid var(--cian); transform:rotate(-45deg);
}

@media (max-width:760px) { .ecp ul.ecpi-benes { grid-template-columns:1fr; } }

/* ============ LAS DOS CAJAS BLANCAS DE LA BANDA ============ */
/* No son `ecp-ficha`: ese componente se vuelve azul al pasar el cursor
   y sobre esta banda azul desaparecería. Aquí se quedan blancas y solo
   se elevan. */
.ecp .ecpi-cajas {
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
	gap:20px; margin-top:34px;
}
.ecp .ecpi-caja {
	background:var(--papel); padding:32px 30px 28px;
	border-radius:var(--r-caja);
	box-shadow:0 8px 26px rgba(0,20,55,.22);
	transition:transform .22s ease, box-shadow .22s ease;
}
.ecp .ecpi-caja:hover { transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,20,55,.3); }
.ecp .ecpi-caja__k {
	font-family:var(--sans); font-size:11px; font-weight:600;
	letter-spacing:.15em; text-transform:uppercase; color:var(--azul); margin:0 0 12px;
}
.ecp .ecpi-caja h3 {
	font-family:var(--sans); font-size:21px; font-weight:600;
	color:var(--n900); margin:0 0 10px; line-height:1.25;
}
.ecp .ecpi-caja > p { font-size:15px; line-height:1.62; color:var(--n700); margin:0 0 18px; }
.ecp .ecpi-caja ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ecp .ecpi-caja ul a {
	font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--n800);
	text-decoration:none; display:inline-flex; align-items:center; gap:8px;
	transition:gap .18s ease;
}
.ecp .ecpi-caja ul a::before { content:"→"; color:var(--cian); }
.ecp .ecpi-caja ul a:hover { gap:12px; }

@media (max-width:760px) { .ecp .ecpi-cajas { grid-template-columns:1fr; } }

/* ============ TESTIMONIOS ============ */
/* Sin uso hasta que Vinculación entregue testimonios reales: la
   constante TESTIMONIOS está vacía y la sección no se imprime. */
.ecp .ecpi-tests {
	margin:32px 0 0; display:grid;
	grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px;
}
.ecp .ecpi-test {
	margin:0; padding:30px 28px; background:var(--papel);
	border:1px solid var(--n100); border-radius:var(--r-caja);
	box-shadow:0 2px 10px rgba(0,73,164,.06);
	display:flex; flex-direction:column; gap:16px;
}
.ecp .ecpi-test__k {
	font-family:var(--sans); font-size:11px; font-weight:600;
	letter-spacing:.14em; text-transform:uppercase; color:var(--azul); margin:0;
}
.ecp .ecpi-test blockquote {
	margin:0; padding:0; border:0; font-size:16px; line-height:1.7;
	color:var(--n700); flex:1 1 auto;
}
.ecp .ecpi-test figcaption { display:flex; align-items:center; gap:13px; }
.ecp .ecpi-test__ini {
	flex:none; width:42px; height:42px; border-radius:50%;
	display:grid; place-items:center; background:var(--n050);
	box-shadow:inset 0 0 0 1px var(--n100); color:var(--azul);
	font-family:var(--sans); font-size:14px; font-weight:700;
}
.ecp .ecpi-test figcaption strong { display:block; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--n900); }
.ecp .ecpi-test figcaption small { display:block; font-size:13px; color:var(--gris); margin-top:2px; }

/* ============ MOVIMIENTO ============ */
@media (prefers-reduced-motion:reduce) {
	.ecp .ecpi-puerta,
	.ecp .ecpi-puerta__foto,
	.ecp .ecpi-caja,
	.ecp .ecpi-paso,
	.ecp .ecpi-tarjeta__icono,
	.ecp .ecpi-faq__item,
	.ecp .ecpi-faq__item > summary::before,
	.ecp .ecpi-faq__item > summary::after { transition:none; }
	.ecp .ecpi-puerta:hover,
	.ecp .ecpi-caja:hover,
	.ecp .ecpi-paso:hover { transform:none; }
	.ecp .ecpi-puerta:hover .ecpi-puerta__foto { transform:none; }
}