/* ==========================================================================
   Becas Carlos Salas — ediciones: isotipo interactivo y galería
   Se usa en la Home (bloque "Convocatorias anteriores") y en la página
   "Ediciones anteriores", por eso vive fuera de home.css.
   ========================================================================== */

/* Ediciones: isotipo interactivo ---------------------------------------- */
.ediciones { padding-bottom: var(--seccion-y); display: flex; flex-direction: column; gap: 40px; }
.ediciones__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ediciones__cab .enlace-flecha { align-self: flex-end; }
.ediciones__inter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
/* Texto: todas las ediciones apiladas en la misma celda; solo se ve la activa. */
.ediciones__textos { display: grid; min-height: 260px; align-items: center; }
/* Solo la activa ocupa sitio (así el bloque mide lo que su texto); entra con fundido. */
.ediciones__texto { grid-area: 1 / 1; display: none; flex-direction: column; gap: 20px; }
.ediciones__texto.is-activa { display: flex; animation: bcs-fade .4s ease; }
@keyframes bcs-fade { from { opacity: 0; } to { opacity: 1; } }
.ediciones__h3 { font-size: clamp(34px, 3.4vw, 52px); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--azul); }
.ediciones__sep { color: rgba(37, 22, 5, .35); font-weight: 400; }
.ediciones__anio { font-weight: 400; }
.ediciones__texto p { font-size: 17px; line-height: 1.55; color: rgba(37, 22, 5, .75); max-width: 380px; text-wrap: pretty; }
.ediciones__planta-wrap { display: flex; justify-content: center; }
.ediciones__planta { position: relative; display: inline-block; padding: 0 76px; }
.isotipo { position: relative; height: clamp(360px, 40vw, 560px); aspect-ratio: 748 / 2018; width: auto; }
.isotipo__base, .isotipo__hoja { position: absolute; inset: 0; width: 100%; height: 100%; }
.isotipo__hoja { opacity: 0; transition: opacity .45s; }
.isotipo__hoja.is-activa { opacity: 1; }
.isotipo__hoja[data-ed="0"] { clip-path: inset(30% 50% 44.6% 0); }
.isotipo__hoja[data-ed="1"] { clip-path: inset(30% 0 44.6% 50%); }
.isotipo__hoja[data-ed="2"] { clip-path: inset(56% 55.1% 21.95% 0); }
.isotipo__hoja[data-ed="3"] { clip-path: inset(56% 0 21.95% 54.7%); }
.isotipo__hoja[data-ed="4"] { clip-path: inset(78.05% 55.1% 0 0); }
.isotipo__hoja[data-ed="5"] { clip-path: inset(78.05% 0 0 54.7%); }
.isotipo__zona { position: absolute; background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 12px; }
.isotipo__zona[data-ed-pick="0"] { top: 32%; bottom: 45.5%; left: 0; right: 55%; }
.isotipo__zona[data-ed-pick="1"] { top: 32%; bottom: 45.5%; left: 55%; right: 0; }
.isotipo__zona[data-ed-pick="2"] { top: 56%; bottom: 22.7%; left: 0; right: 55%; }
.isotipo__zona[data-ed-pick="3"] { top: 56%; bottom: 22.7%; left: 55%; right: 0; }
.isotipo__zona[data-ed-pick="4"] { top: 78.5%; bottom: 0; left: 0; right: 55%; }
.isotipo__zona[data-ed-pick="5"] { top: 78.5%; bottom: 0; left: 55%; right: 0; }
.isotipo__numeral {
	position: absolute; transform: translateY(-50%); width: 72px; height: 56px; border: 0; padding: 0; background: transparent; cursor: pointer;
	font: 700 clamp(26px, 2.2vw, 34px) / 1 var(--fuente); letter-spacing: -.02em; color: rgba(37, 22, 5, .3); transition: color .3s;
}
.isotipo__numeral:hover, .isotipo__numeral.is-activa { color: var(--azul); }
.isotipo__numeral[data-ed-pick="0"] { top: 43.3%; left: 0; }
.isotipo__numeral[data-ed-pick="1"] { top: 43.3%; right: 0; }
.isotipo__numeral[data-ed-pick="2"] { top: 66.8%; left: 0; }
.isotipo__numeral[data-ed-pick="3"] { top: 66.8%; right: 0; }
.isotipo__numeral[data-ed-pick="4"] { top: 89.2%; left: 0; }
.isotipo__numeral[data-ed-pick="5"] { top: 89.2%; right: 0; }
.ediciones__fotos { position: relative; display: flex; flex-direction: column; gap: 18px; }
.ediciones__marco { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--noche); box-shadow: 0 30px 60px -30px rgba(0, 32, 63, .5); }
.ediciones__foto, .ediciones__actual { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
.ediciones__foto.is-activa, .ediciones__actual.is-activa { opacity: 1; }
.ediciones__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ediciones__actual {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; padding: 32px; color: #fff;
	background: radial-gradient(60% 60% at 80% 10%, rgba(0, 75, 146, .9) 0%, rgba(0, 32, 63, 1) 70%);
	--foco: var(--amarillo);
}
.ediciones__actual-marca { position: absolute; right: -10px; top: -30px; font-size: 200px; line-height: .8; font-weight: 700; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .12); }
.ediciones__actual strong { font-size: clamp(24px, 2vw, 30px); line-height: 1.05; letter-spacing: -.02em; }
.ediciones__actual-sub { font-size: 15px; color: rgba(255, 255, 255, .75); }
.ediciones__puntos { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ediciones__punto { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(0, 75, 146, .25); transition: background .3s; }
.ediciones__punto.is-activa { background: var(--amarillo); }
/* Botones de 10 px: área táctil ampliada sin cambiar el dibujo. */
.ediciones__punto::before { content: ""; position: absolute; width: 44px; height: 44px; transform: translate(-17px, -17px); }
.ediciones__punto { position: relative; }

/* Portada de la página: una sola columna tipográfica, sin foto ------------ */
.ed-portada { display: flex; flex-direction: column; gap: 28px; padding-bottom: clamp(56px, 7vw, 104px); }
.ed-portada__titulo { max-width: 1100px; font-size: clamp(44px, 6.4vw, 104px); line-height: .95; font-weight: 700; letter-spacing: -.045em; }
.ed-portada__entradilla { max-width: 720px; }

/* En la página de ediciones el bloque lleva su propio aire arriba y abajo
   (en la Home ya lo pone la sección anterior). */
.ediciones--pagina { padding-block: clamp(56px, 7vw, 104px); }

/* Fichas de todas las convocatorias --------------------------------------- */
.ed-lista { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); }
.ed-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); }
.ed-ficha { display: flex; flex-direction: column; gap: 14px; }
.ed-ficha--grande { gap: 20px; }
.ed-ficha__foto { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #e9eef4; }
.ed-ficha--grande .ed-ficha__foto { aspect-ratio: 16 / 9; border-radius: 24px; }
.ed-ficha__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ed-ficha__sinfoto { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 6%; color: transparent; background: radial-gradient(60% 60% at 80% 10%, rgba(0, 75, 146, .9) 0%, rgba(0, 32, 63, 1) 70%); }
.ed-ficha__sinfoto span { font-size: clamp(120px, 18vw, 260px); line-height: .8; font-weight: 700; letter-spacing: -.06em; -webkit-text-stroke: 2px rgba(255, 255, 255, .18); }
.ed-ficha__boton {
	position: absolute; right: 14px; bottom: 14px;
	display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
	background: var(--amarillo); color: var(--texto); border: 0; border-radius: 999px;
	font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s;
}
.ed-ficha__boton:hover { background: var(--azul); color: #fff; }
.ed-ficha__boton svg { flex: none; }
.ed-ficha__pie { display: flex; flex-direction: column; gap: 6px; }
.ed-ficha--grande .ed-ficha__pie { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.ed-ficha__titulo { display: flex; align-items: baseline; gap: 10px; }
.ed-ficha__titulo strong { font-size: 24px; line-height: 1; letter-spacing: -.03em; }
.ed-ficha__titulo span { font-size: 16px; font-weight: 700; color: var(--azul); }
.ed-ficha--grande .ed-ficha__titulo { gap: 14px; }
.ed-ficha--grande .ed-ficha__titulo strong { font-size: clamp(28px, 3vw, 40px); }
.ed-ficha--grande .ed-ficha__titulo span { font-size: 19px; }
.ed-ficha__texto { font-size: 15px; line-height: 1.5; color: rgba(37, 22, 5, .75); text-wrap: pretty; }
.ed-ficha--grande .ed-ficha__texto { font-size: 18px; line-height: 1.55; color: rgba(37, 22, 5, .78); }

/* Visor a pantalla completa ----------------------------------------------- */
.visor {
	position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
	background: rgba(0, 32, 63, .94);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	color: #fff; animation: bcs-fade .3s ease-out; --foco: var(--amarillo);
}
.visor[hidden] { display: none; }
.visor__cab { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(16px, 3vw, 32px); }
.visor__tit { display: flex; flex-direction: column; gap: 2px; }
.visor__tit strong { font-size: 18px; letter-spacing: -.01em; }
.visor__contador { font-size: 14px; color: rgba(255, 255, 255, .7); }
.visor__redondo {
	width: 44px; height: 44px; flex: none; padding: 0; border-radius: 50%; cursor: pointer;
	border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff;
	display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s;
}
.visor__redondo:hover { background: var(--amarillo); color: var(--texto); }
.visor__flecha { width: 52px; height: 52px; }
.visor__cuerpo { flex: 1; min-height: 0; display: flex; align-items: center; gap: clamp(8px, 2vw, 24px); padding: 0 clamp(12px, 3vw, 32px); }
.visor__foto { flex: 1; min-width: 0; height: 100%; object-fit: contain; border-radius: 16px; }
.visor__miniaturas { flex: none; display: flex; gap: 10px; justify-content: center; padding: 20px clamp(16px, 3vw, 32px); overflow-x: auto; }
.visor__mini {
	width: 86px; height: 58px; flex: none; padding: 0; cursor: pointer;
	border: 2px solid transparent; border-radius: 8px; background: none no-repeat center / cover;
	opacity: .55; transition: opacity .2s, border-color .2s;
}
.visor__mini:hover { opacity: .85; }
.visor__mini.is-activa { opacity: 1; border-color: var(--amarillo); }

/* Móvil ------------------------------------------------------------------- */
@media (max-width: 760px) {
	.ediciones__inter { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.ediciones__planta-wrap { order: 0; }
	.ediciones__textos { order: 1; min-height: 0; }
	.ediciones__fotos { order: 2; }
	.ediciones__planta { padding: 0 60px; }
	.isotipo { height: 340px; }
	.ed-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ed-ficha--grande .ed-ficha__pie { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ed-ficha__boton { height: 34px; padding: 0 11px; font-size: 13px; gap: 6px; right: 10px; bottom: 10px; }
	.visor__flecha { width: 44px; height: 44px; }
	.visor__mini { width: 68px; height: 46px; }
}

/* Menos movimiento: sin fundido de entrada del visor ni transiciones de hoja. */
@media (prefers-reduced-motion: reduce) {
	.visor { animation: none; }
	.isotipo__hoja, .ediciones__foto, .ediciones__actual, .isotipo__numeral, .ediciones__punto { transition: none; }
	.ediciones__texto.is-activa { animation: none; }
}
