/* ==========================================================================
   Foro de la Comunidad Informatica — estilos por seccion

   Un bloque por seccion, en el mismo orden que front-page.php. Compartido
   entre todas las tareas de la Fase 2 para no sumar un <link> por seccion.
   ========================================================================== */

/* --- Seccion: hero -------------------------------------------------- */
.foco-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; }
.foco-hero__fondo { position: absolute; inset: 0; }
.foco-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foco-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 177.77vh; /* cubre un fondo horizontal con una fuente 9:16 (el Short de placeholder) */
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	border: 0;
}
/* object-fit no hace nada sobre un <iframe> (solo funciona en elementos
   reemplazados como <img>/<video>) - el embed de YouTube necesita su propio
   calculo de cobertura en vez de la regla de arriba, pensada para <video>. */
iframe.foco-hero__video {
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* 16/9 */
	min-height: 100%;
	min-width: 177.78vh; /* 16/9 en terminos de viewport-height, cubre un contenedor mas angosto/alto */
	/* scale: YouTube dibuja titulo/canal arriba y botones abajo aunque
	   controls=0; agrandar ~18% los empuja fuera del hero (overflow hidden). */
	transform: translate(-50%, -50%) scale(1.18);
	border: 0;
}
.foco-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 27, 61, .35) 0%, rgba(7, 27, 61, .85) 100%); }
.foco-hero__contenido { position: relative; z-index: 1; padding-block: var(--espacio-16); color: #fff; }
.foco-hero__firma { color: var(--azul-claro); font-size: var(--tam-caption); letter-spacing: .04em; white-space: nowrap; }
.foco-hero__titulo { font-size: var(--tam-display-xl); font-weight: 900; line-height: .92; letter-spacing: -.035em; color: #fff; }
.foco-hero__lema { color: var(--texto-sobre-oscuro); font-size: var(--tam-h3); max-width: 60ch; }
.foco-hero__contenido .foco-boton { margin-top: var(--espacio-4); }

@media (prefers-reduced-motion: reduce) {
	.foco-hero__video { display: none; }
}

/* --- Seccion: info esencial ------------------------------------------ */
.foco-info-esencial { background: var(--azul-evento); color: #fff; padding-block: var(--espacio-8); border-top: 1px solid rgba(255, 255, 255, .12); }
.foco-info-esencial .foco-dato { padding-left: var(--espacio-4); border-left: 2px solid var(--azul-primario); }
.foco-info-esencial .foco-dato__etiqueta { color: var(--azul-claro); font-weight: 700; }
.foco-info-esencial .foco-dato__valor { color: #fff; }
.foco-info-esencial .foco-boton--secundario { background: #fff; border-color: #fff; color: var(--azul-oscuro); margin-top: var(--espacio-1); }
.foco-info-esencial .foco-boton--secundario:hover { background: var(--azul-suave); border-color: var(--azul-suave); color: var(--azul-oscuro); }
.foco-info-esencial__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--espacio-6); }
.foco-dato__etiqueta { display: block; font-size: var(--tam-caption); letter-spacing: .04em; color: var(--gris); text-transform: uppercase; }
.foco-dato__valor { font-size: var(--tam-h3); font-weight: 700; color: var(--negro); margin: var(--espacio-1) 0 0; }

/* --- Seccion: comunidades participantes (banda deslizable) ------------- */
/* Cinta de logos en movimiento sobre el degradé azul: logos blancos, todos
   en una caja del mismo tamaño. Se pausa con el mouse encima. */
.foco-comunidades-marquee { padding-block: var(--espacio-6) var(--espacio-8); background: linear-gradient(90deg, var(--azul-oscuro) 0%, var(--azul-primario) 100%); }
.foco-comunidades-marquee__titulo {
	text-align: center;
	font-size: var(--tam-caption);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 var(--espacio-4);
}
.foco-comunidades-marquee__viewport { overflow: hidden; padding-block: 16px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
.foco-comunidades-marquee__pista { display: flex; width: max-content; animation: foco-marquee 60s linear infinite; }
.foco-comunidades-marquee__lista { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
/* Caja fija por logo: asi un logo muy ancho (OTI) y uno cuadrado (R Ladies)
   ocupan lo mismo y la cinta no salta. Los PNG/WebP ya vienen en blanco
   (tooling/preparar-logos-comunidades.py); el brightness(0) invert(1) cubre
   el SVG y cualquier logo que se sume sin pasar por el script. */
.foco-comunidades-marquee__item { flex: none; display: flex; align-items: center; justify-content: center; width: 132px; height: 40px; margin-inline: 22px; }
.foco-comunidades-marquee__item img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .82; transition: opacity .3s ease; }
.foco-comunidades-marquee__item:hover img { opacity: 1; }
.foco-comunidades-marquee__pista:hover { animation-play-state: paused; }

@keyframes foco-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (max-width: 599px) {
	.foco-comunidades-marquee__item { width: 104px; height: 32px; margin-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.foco-comunidades-marquee__pista { animation: none; }
	.foco-comunidades-marquee__viewport { overflow-x: auto; }
}

/* --- Seccion: que vamos a hacer --------------------------------------- */
.foco-que-hacemos { padding-block: var(--espacio-16); }
.foco-que-hacemos h2 { font-size: var(--tam-h2); }
.foco-lead { font-size: var(--tam-h3); font-weight: 500; max-width: 70ch; color: var(--negro); }

/* --- Seccion: el lugar ------------------------------------------------ */
.foco-lugar { padding-block: var(--espacio-16); background: var(--fondo-claro); }

/* Bento de 5 fotos reales del edificio: una foto grande (fachada) + 4
   chicas. La animacion es un Ken Burns continuo en la imagen — nunca
   depende de scroll ni de que corra JS, asi que no puede quedar "trabada
   invisible" como paso con el sistema anterior. */
.foco-lugar-bento {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-auto-rows: 220px;
	gap: var(--espacio-4);
	margin-top: var(--espacio-8);
}
/* El hover agranda el CONTENEDOR, no la imagen: la imagen ya tiene su
   propio "animation" (el Ken Burns) corriendo sobre "transform", y una
   animacion en curso le gana a cualquier transform declarado aparte en la
   misma propiedad — un :hover ahi adentro no se hubiera notado. */
.foco-lugar-bento__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--radio-tarjeta);
	margin: 0;
	transition: transform .35s ease, box-shadow .35s ease;
}
.foco-lugar-bento__item:hover {
	transform: scale(1.04);
	z-index: 2;
	box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
}
.foco-lugar-bento__item--1 { grid-column: 1; grid-row: 1 / span 2; }
.foco-lugar-bento__item--2 { grid-column: 2; grid-row: 1; }
.foco-lugar-bento__item--3 { grid-column: 3; grid-row: 1; }
.foco-lugar-bento__item--4 { grid-column: 2; grid-row: 2; }
.foco-lugar-bento__item--5 { grid-column: 3; grid-row: 2; }

.foco-lugar-bento__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	animation: foco-ken-burns 18s ease-in-out infinite alternate;
}
.foco-lugar-bento__item--2 .foco-lugar-bento__img { animation-delay: -4s; }
.foco-lugar-bento__item--3 .foco-lugar-bento__img { animation-delay: -8s; }
.foco-lugar-bento__item--4 .foco-lugar-bento__img { animation-delay: -12s; }
.foco-lugar-bento__item--5 .foco-lugar-bento__img { animation-delay: -16s; }

@keyframes foco-ken-burns {
	0% { transform: scale(1); }
	100% { transform: scale(1.1); }
}

/* Video de fondo: el iframe 16:9 se agranda hasta cubrir el contenedor
   (como object-fit: cover), invisible hasta que el JS lo carga. */
.foco-video-fondo { position: absolute; inset: 0; overflow: hidden; container-type: size; pointer-events: none; }
.foco-video-fondo iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border: 0; transform: translate(-50%, -50%); opacity: 0; transition: opacity .8s ease; }
@supports (width: 1cqw) {
	.foco-video-fondo iframe { width: max(100cqw, 177.78cqh); height: max(56.25cqw, 100cqh); }
}
.foco-video-fondo iframe.esta-listo { opacity: 1; }
/* Video cuadrado (1:1) dentro de un cuadro 16:9 con barras negras a los
   costados: el iframe se agranda hasta que el cuadrado visible cubra el
   contenedor, y las barras quedan fuera (overflow hidden). */
.foco-video-fondo--cuadrado iframe { width: 178%; height: 100%; }
@supports (width: 1cqw) {
	.foco-video-fondo--cuadrado iframe { height: max(100cqw, 100cqh); width: calc(max(100cqw, 100cqh) * 1.7778); }
}
.foco-lugar-bento__item--video .foco-lugar-bento__caption { z-index: 1; }
.foco-lugar-bento__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: var(--espacio-6) var(--espacio-3) var(--espacio-2);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .65) 100%);
	color: #fff;
	font-size: var(--tam-caption);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	transform: translateY(4px);
	transition: transform .35s ease;
}
.foco-lugar-bento__item:hover .foco-lugar-bento__caption { transform: translateY(0); }

@media (max-width: 767px) {
	.foco-lugar-bento { grid-template-columns: 1fr; grid-auto-rows: 220px; }
	.foco-lugar-bento__item--1,
	.foco-lugar-bento__item--2,
	.foco-lugar-bento__item--3,
	.foco-lugar-bento__item--4,
	.foco-lugar-bento__item--5 {
		grid-column: 1;
		grid-row: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.foco-lugar-bento__img { animation: none; }
}

/* --- Seccion: agenda ---------------------------------------------------- */
.foco-agenda { padding-block: var(--espacio-16); }
.foco-agenda__nota { color: var(--gris); font-size: var(--tam-caption); }
.foco-agenda__lista { list-style: none; margin: var(--espacio-8) 0 0; padding: 0; border-top: 1px solid var(--borde); }
.foco-agenda__bloque {
	display: flex;
	gap: var(--espacio-6);
	padding-block: var(--espacio-4);
	padding-inline-start: var(--espacio-3);
	border-bottom: 1px solid var(--borde);
	border-left: 3px solid transparent;
	transition: background-color .25s ease, border-left-color .25s ease;
}
.foco-agenda__bloque:hover { background: var(--azul-suave); border-left-color: var(--azul-primario); }
.foco-agenda__hora { flex: 0 0 90px; font-weight: 700; color: var(--azul-oscuro); transition: color .25s ease, transform .25s ease; }
.foco-agenda__bloque:hover .foco-agenda__hora { color: var(--azul-primario); transform: translateX(2px); }
.foco-agenda__actividad { font-weight: 700; margin: 0; }
.foco-agenda__ver { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--espacio-2); padding: 4px 14px; border: 1px solid #9EC6EA; border-radius: var(--radio-pill); font-size: 13px; font-weight: 700; color: var(--azul-oscuro); text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.foco-agenda__ver:hover, .foco-agenda__ver:focus-visible { background: var(--azul-primario); border-color: var(--azul-primario); color: #fff; }
.foco-agenda__detalle, .foco-agenda__lugar { margin: var(--espacio-1) 0 0; color: var(--gris); font-size: var(--tam-caption); }

/* --- Seccion: fotos de comunidades (carrusel) --------------------------- */

/* --- Secciones: charlas / clases magistrales (grid + tarjeta) --------- */
.foco-grid-seccion { padding-block: var(--espacio-16); }
.foco-grid-seccion--alt { background: var(--fondo-claro); }
.foco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--espacio-6); margin-top: var(--espacio-8); }
.foco-tarjeta { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden; background: #fff; transition: border-color .2s ease; }
.foco-tarjeta:hover { border-color: var(--azul-primario); }
.foco-tarjeta:hover .foco-tarjeta__titulo a { color: var(--azul-primario); }
.foco-tarjeta__imagen { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .3s ease; }
.foco-tarjeta:hover .foco-tarjeta__imagen { transform: scale(1.04); }
.foco-tarjeta__imagen--placeholder { display: flex; align-items: center; justify-content: center; background: var(--fondo-claro); border-bottom: 1px dashed var(--borde); color: var(--gris); font-size: var(--tam-caption); }
.foco-tarjeta__cuerpo { padding: var(--espacio-4); flex: 1; }
.foco-tarjeta__etiqueta { display: inline-block; font-size: var(--tam-caption); color: var(--azul-oscuro); background: var(--azul-suave); padding: 2px var(--espacio-2); border-radius: var(--radio-pill); margin-bottom: var(--espacio-2); }
.foco-tarjeta__titulo { font-size: var(--tam-h3); margin: 0 0 var(--espacio-2); }
.foco-tarjeta__titulo a { color: var(--negro); text-decoration: none; }
.foco-tarjeta__descripcion { color: var(--gris); margin: 0 0 var(--espacio-2); }
.foco-tarjeta__horario { font-size: var(--tam-caption); color: var(--azul-oscuro); font-weight: 700; margin: 0; }

.foco-tarjeta__expositor { display: flex; align-items: center; gap: var(--espacio-3); padding: var(--espacio-3) var(--espacio-4); border-top: 1px solid var(--borde); }
.foco-tarjeta__expositor-foto { width: 36px; height: 36px; border-radius: var(--radio-pill); object-fit: cover; flex-shrink: 0; }
.foco-tarjeta__expositor-foto--inicial { display: flex; align-items: center; justify-content: center; background: var(--azul-suave); color: var(--azul-oscuro); font-weight: 700; font-size: var(--tam-caption); }
.foco-tarjeta__expositor-datos { min-width: 0; }
.foco-tarjeta__expositor-nombre { font-weight: 700; font-size: var(--tam-caption); margin: 0; color: var(--negro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foco-tarjeta__expositor-cargo { font-size: 12px; color: var(--gris); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foco-tarjeta__expositor-mas { margin-left: auto; font-size: var(--tam-caption); color: var(--gris); font-weight: 700; flex-shrink: 0; }

.foco-vacio { color: var(--gris); font-size: var(--tam-h3); margin-top: var(--espacio-8); }

/* --- Seccion: panel de cierre ------------------------------------------ */
.foco-cierre-panel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	padding-block: var(--espacio-16);
	background:
		radial-gradient(60% 90% at 88% 15%, rgba(0, 128, 235, .30) 0%, rgba(0, 128, 235, 0) 62%),
		radial-gradient(45% 70% at 0% 100%, rgba(127, 192, 245, .14) 0%, rgba(127, 192, 245, 0) 65%),
		linear-gradient(135deg, var(--azul-evento) 0%, #0a2a5c 100%);
}
/* Textura sutil: retícula de puntos que se desvanece hacia la izquierda. */
.foco-cierre-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
	background-size: 24px 24px;
	-webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 80%);
	mask-image: linear-gradient(90deg, transparent 5%, #000 80%);
	pointer-events: none;
}
.foco-cierre-panel__contenido { position: relative; }
.foco-cierre-panel h2 { color: #fff; font-size: var(--tam-display); font-weight: 900; }
.foco-cierre-panel .foco-cita { color: #fff; font-size: var(--tam-cita); font-style: italic; max-width: 60ch; }
.foco-cierre-panel__detalle { color: var(--texto-sobre-oscuro); font-size: var(--tam-h3); max-width: 60ch; margin-bottom: var(--espacio-6); text-wrap: balance; }
.foco-cierre-panel__aviso { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 9px 18px; border-radius: var(--radio-pill); background: rgba(255, 255, 255, .12); font-size: 15px; font-weight: 500; color: #fff; }
.foco-cierre-panel__punto { width: 8px; height: 8px; border-radius: var(--radio-pill); background: var(--azul-claro); flex-shrink: 0; }

/* --- Seccion: cierre politico ------------------------------------------ */
.foco-cierre-politico { background: var(--azul-profundo); color: #fff; padding-block: var(--espacio-16); }

/* Pantalla de relato · tarjeta con borde sutil sobre fondo oscuro y eyebrow
   numerado (sistema de diseño). Aca lleva una cita institucional con firma.
   Valores en px literales (56px/40px/28px), no en la escala de espaciado del
   theme — son los que trae la spec del sistema, se copian tal cual. */
.foco-relato {
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radio-tarjeta);
	padding: 56px 40px;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	margin: 0;
}
.foco-relato__texto { display: flex; flex-direction: column; gap: 28px; justify-content: center; }
.foco-relato__retrato { aspect-ratio: 1 / 1; margin: 0; border-radius: var(--radio-tarjeta); overflow: hidden; position: relative; isolation: isolate; background: #A9D2F5; }
.foco-relato__retrato img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.08) brightness(1.04); mix-blend-mode: multiply; }
/* Mismo duotono azul que las fotos de expositores (gris multiplicado sobre azul suave) más un velo desde abajo: la foto original es anaranjada y chocaba con la paleta. */
.foco-relato__retrato::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 128, 235, 0) 55%, rgba(7, 27, 61, .5) 100%); pointer-events: none; }
.foco-relato__cita { position: relative; margin: 0; padding: 0 0 0 28px; border-left: 3px solid var(--azul-primario); max-width: 70ch; }
.foco-relato__cita p { color: #fff; font-size: clamp(19px, 2.2vw, 26px); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; margin: 0 0 1em; }
.foco-relato__cita p:last-child { margin-bottom: 0; }
.foco-relato__firma { display: flex; flex-direction: column; gap: 2px; padding-left: 31px; }
.foco-relato__firma strong { font-size: 20px; font-weight: 800; color: #fff; }
.foco-relato__firma span { font-size: 16px; color: var(--texto-sobre-oscuro); }
@media (max-width: 899px) {
	.foco-relato { grid-template-columns: 1fr; }
	.foco-relato__retrato { order: -1; }
}
@media (max-width: 767px) {
	.foco-relato { padding: 32px 22px; gap: 28px; }
	.foco-relato__texto { gap: 22px; }
	.foco-relato__cita { padding-left: 18px; }
	.foco-relato__firma { padding-left: 21px; }
}

.foco-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espacio-2); padding: 0; margin: 0; }
/* Chip de palabra clave (sistema de diseño), variante fondo oscuro: 15px,
   peso 500, padding 9x18 — antes iban compactos como si fueran captions
   (12px, 4x12), por eso se sentian "de mas" en la caja. */
.foco-chip { background: rgba(255, 255, 255, .12); border-radius: var(--radio-pill); padding: 9px 18px; font-size: 15px; font-weight: 500; color: #fff; }

/* --- Seccion: CTA de inscripcion (en secciones.css) --------------------- */
/* Banner de cierre con CTA (sistema de diseño): fondo #00254A, titulo peso
   900, boton primario azul (no invertido a blanco) — el cliente pidio
   mantener la foto real de fondo en vez de la tarjeta solida del sistema,
   asi que se ajustan colores/tipografia sin sacar la imagen. Con el fondo
   ahora en azul-profundo (antes azul-primario), el boton azul-primario si
   tiene contraste. */
.foco-cta { background: var(--azul-profundo); color: #fff; padding-block: var(--espacio-16); text-align: center; }
.foco-cta h2 { color: #fff; font-size: clamp(30px, 4vw, 46px); font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.foco-cta p { font-size: 18px; line-height: 1.55; color: var(--texto-sobre-oscuro); max-width: 44ch; margin-inline: auto; }
.foco-cta .foco-boton { margin-top: var(--espacio-6); font-size: 18px; padding: 18px 32px; }

/* Chip de palabra clave, variante fondo claro (sistema de diseño): fondo
   azul suave y texto azul oscuro; el "+N" va como variante con borde. */
.foco-chip--claro { background: var(--azul-suave); color: var(--azul-oscuro); }
.foco-chip--claro.foco-chip--outline { background: transparent; border: 1px solid #9EC6EA; }

/* --- Seccion: las comunidades que ya son parte ---------------------------- */
.foco-comunidades-parte { padding-block: var(--espacio-16); }
.foco-comunidades-parte .foco-boton { margin-top: var(--espacio-4); }
.foco-comunidades-parte__accion { margin-top: var(--espacio-12); }
.foco-comunidades-parte__subtitulo { margin: 0; font-size: var(--tam-h3); font-weight: 900; letter-spacing: -.02em; }
.foco-comunidades-parte__accion p { margin: var(--espacio-2) 0 0; color: var(--gris-oscuro); }

/* Tarjeta de comunidad: tres tonos de la marca que se alternan (azul de
   marca, azul profundo y azul suave), con una inicial gigante de marca de
   agua y el numero de orden. Sin sombras (pedido de diseño): el relieve lo
   da el color y el borde superior. */
.foco-comunidad-card {
	position: relative;
	overflow: hidden;
	flex-direction: column;
	border-radius: var(--radio-tarjeta);
	padding: 28px;
	min-height: 260px;
	isolation: isolate;
	transition: transform .25s ease;
}
.foco-carrusel .foco-comunidad-card { overflow: hidden; }
.foco-comunidad-card:hover { transform: translateY(-6px); }
.foco-comunidad-card__marca {
	position: absolute;
	right: -14px;
	bottom: -54px;
	z-index: -1;
	font-size: 190px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.05em;
	pointer-events: none;
	transition: transform .4s ease;
}
.foco-comunidad-card:hover .foco-comunidad-card__marca { transform: scale(1.08) rotate(-4deg); }
.foco-comunidad-card__numero { align-self: flex-start; padding: 4px 12px; border-radius: var(--radio-pill); font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.foco-comunidad-card__nombre { color: inherit; margin: 20px 0 0; font-size: 22px; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.foco-comunidad-card__desc { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }

.foco-comunidad-card--0 { background: linear-gradient(150deg, var(--azul-primario) 0%, var(--azul-oscuro) 100%); color: #fff; }
.foco-comunidad-card--0 .foco-comunidad-card__marca { color: rgba(255, 255, 255, .12); }
.foco-comunidad-card--0 .foco-comunidad-card__numero { background: rgba(255, 255, 255, .18); color: #fff; }
.foco-comunidad-card--0 .foco-comunidad-card__desc { color: rgba(255, 255, 255, .88); }

.foco-comunidad-card--1 { background: var(--azul-evento); color: #fff; border-top: 4px solid var(--azul-claro); }
.foco-comunidad-card--1 .foco-comunidad-card__marca { color: rgba(127, 192, 245, .14); }
.foco-comunidad-card--1 .foco-comunidad-card__numero { background: rgba(127, 192, 245, .18); color: var(--azul-claro); }
.foco-comunidad-card--1 .foco-comunidad-card__desc { color: var(--texto-sobre-oscuro); }

.foco-comunidad-card--2 { background: var(--azul-suave); color: var(--negro); border-top: 4px solid var(--azul-primario); }
.foco-comunidad-card--2 .foco-comunidad-card__marca { color: rgba(0, 128, 235, .12); }
.foco-comunidad-card--2 .foco-comunidad-card__numero { background: #fff; color: var(--azul-oscuro); }
.foco-comunidad-card--2 .foco-comunidad-card__desc { color: var(--gris-oscuro); }

/* --- Seccion: expositores (Consejo Asesor del LITAT) ---------------------- */
.foco-expositores-seccion { padding-block: var(--espacio-16); }
.foco-expositores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--espacio-6); margin-top: var(--espacio-8); }
.foco-expositor-card { transition: transform .25s ease; }
.foco-expositor-card:hover { transform: translateY(-4px); }
.foco-expositor-card__marco { position: relative; overflow: hidden; border-radius: var(--radio-tarjeta); background: #A9D2F5; isolation: isolate; }
.foco-expositor-card__foto { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio-tarjeta); background: var(--azul-suave); }
/* Filtro de color para igualar fotos de origenes distintos: escala de
   grises multiplicada sobre azul suave (duotono) y un velo azul que sube
   desde abajo. Al pasar el mouse la foto recupera su color. */
.foco-expositor-card__marco .foco-expositor-card__foto { filter: grayscale(1) contrast(1.08) brightness(1.04); mix-blend-mode: multiply; transition: filter .4s ease, mix-blend-mode .4s ease; }
.foco-expositor-card__marco::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 128, 235, 0) 45%, rgba(7, 27, 61, .55) 100%); mix-blend-mode: multiply; pointer-events: none; transition: opacity .4s ease; }
.foco-expositor-card:hover .foco-expositor-card__marco .foco-expositor-card__foto { filter: none; mix-blend-mode: normal; }
.foco-expositor-card:hover .foco-expositor-card__marco::after { opacity: 0; }
.foco-expositor-card__foto--iniciales { display: flex; align-items: center; justify-content: center; background: var(--azul-profundo); color: var(--azul-claro); font-weight: 900; font-size: 48px; letter-spacing: -.03em; }
.foco-expositor-card__nombre { margin: 14px 0 0; font-size: 17px; font-weight: 700; line-height: 1.2; }
.foco-expositor-card__cargo { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--gris-oscuro); }

/* --- Clases magistrales: tarjeta ------------------------------------------ */

/* --- Clases magistrales: variante de la tarjeta de charla (.foco-tarjeta) -
   Misma caja, cuerpo y pie de expositores; en vez de foto lleva una banda
   azul con un icono. Sin cursiva. */
.foco-tarjeta__banda { display: flex; align-items: center; height: 76px; padding-inline: 24px; background: linear-gradient(135deg, var(--azul-evento) 0%, var(--azul-oscuro) 100%); color: var(--azul-claro); }
.foco-tarjeta__banda-icono { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radio-pill); background: rgba(255, 255, 255, .12); transition: background-color .25s ease, color .25s ease; }
.foco-tarjeta:hover .foco-tarjeta__banda-icono { background: var(--azul-primario); color: #fff; }
.foco-magistral__icono { display: block; }
.foco-tarjeta--magistral .foco-tarjeta__cuerpo { padding: 24px 24px 20px; }
.foco-tarjeta--magistral .foco-tarjeta__titulo { font-size: 20px; line-height: 1.2; margin: 0 0 12px; }
.foco-tarjeta__pregunta { margin: 0 0 12px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--azul-oscuro); }
.foco-tarjeta--magistral .foco-tarjeta__descripcion { font-size: 15px; line-height: 1.6; color: var(--gris-oscuro); margin: 0 0 16px; }
.foco-chips--temas { gap: 6px; margin: 0 0 16px; }
.foco-chips--temas .foco-chip { padding: 2px 9px; font-size: 11px; font-weight: 500; line-height: 1.5; background: transparent; border: 1px solid #D6E6F6; color: var(--gris-oscuro); }
.foco-chips--temas .foco-chip--outline { border-style: dashed; }
.foco-tarjeta--magistral .foco-tarjeta__horario { margin: 0; }
.foco-tarjeta--magistral .foco-tarjeta__expositor { padding: 12px 24px; }
.foco-tarjeta__expositor--pendiente .foco-tarjeta__expositor-nombre { font-weight: 500; color: var(--gris-oscuro); }

/* --- Overrides de mobile: van al final del archivo a propósito ---------
   Ya paso una vez que un override con la MISMA especificidad que la regla
   base perdiera el cascade por estar mas arriba en el archivo (paso con
   los botones del header). Para no repetirlo, todo lo que tiene que
   ganarle a una regla base ya definida mas arriba vive aca abajo — asi el
   override gana siempre, sin depender de contar especificidad regla por
   regla. */
@media (max-width: 767px) {
	.foco-hero__lema,
	.foco-lead,
	.foco-cita,
	.foco-cierre-panel .foco-cita {
		font-size: 16px;
	}
}

/* --- Boton "volver arriba" ------------------------------------------------
   Discreto: circulo de 44px que aparece al bajar. En mobile se apoya sobre
   el CTA flotante (que ocupa todo el ancho abajo) para no pisarlo, y baja al
   borde cuando el footer esconde ese CTA. */
.foco-subir {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 89;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: var(--radio-pill);
	background: rgba(7, 27, 61, .82);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, background-color .2s ease, bottom .25s ease;
}
.foco-subir.esta-visible { opacity: 1; transform: none; pointer-events: auto; }
.foco-subir:hover, .foco-subir:focus-visible { background: var(--azul-primario); }
@media (max-width: 1023px) {
	.foco-subir { right: var(--espacio-4); bottom: calc(var(--espacio-4) + 68px); bottom: calc(var(--espacio-4) + 68px + env(safe-area-inset-bottom)); width: 40px; height: 40px; }
	.foco-subir.esta-bajo { bottom: var(--espacio-4); bottom: calc(var(--espacio-4) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
	.foco-subir { transition: opacity .2s ease; }
}

/* --- Cursor propio (solo mouse; ver main.js) -------------------------------
   Punto exacto + aro con retraso. mix-blend-mode: difference con blanco se
   ve sobre fondo claro y oscuro sin elegir color. Sobre links y tarjetas el
   aro crece y se rellena (se invierte el color de lo que hay debajo). Con el
   modal abierto se vuelve al cursor normal: el <dialog> vive en la capa
   superior y taparia al cursor propio. */
.foco-cursor.esta-oculto { opacity: 0; }
/* El contenedor no crea capa propia: cada pieza es fixed y se mezcla
   directo con la pagina (mix-blend-mode dentro de un contenedor con
   z-index quedaria aislado y no invertiria nada). */
.foco-cursor__aro, .foco-cursor__punto, .foco-cursor__relleno { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 2147483000; }
.foco-cursor__aro, .foco-cursor__punto { mix-blend-mode: difference; }
.foco-cursor__aro::before, .foco-cursor__punto::before, .foco-cursor__relleno::before { content: ''; position: absolute; border-radius: 50%; }
.foco-cursor__aro::before { width: 38px; height: 38px; left: -19px; top: -19px; border: 1.5px solid #fff; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.foco-cursor__punto::before { width: 6px; height: 6px; left: -3px; top: -3px; background: #fff; transition: transform .2s ease; }
.foco-cursor__relleno::before { width: 38px; height: 38px; left: -19px; top: -19px; background: rgba(127, 192, 245, .32); transform: scale(0); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.foco-cursor.esta-activo .foco-cursor__aro::before { transform: scale(1.6); }
.foco-cursor.esta-activo .foco-cursor__relleno::before { transform: scale(1.6); }
.foco-cursor.esta-activo .foco-cursor__punto::before { transform: scale(0); }
.foco-cursor.esta-presionado .foco-cursor__aro::before { transform: scale(.75); }
.foco-cursor.esta-activo.esta-presionado .foco-cursor__aro::before, .foco-cursor.esta-activo.esta-presionado .foco-cursor__relleno::before { transform: scale(1.3); }
html.foco-cursor-on:not(.foco-modal-abierto) *:not(input):not(textarea):not(select) { cursor: none !important; }
html.foco-modal-abierto .foco-cursor { display: none; }
.foco-hero__fondo iframe, .foco-video-fondo iframe { pointer-events: none; }

/* --- Mobile: expositores, charlas y clases en fila deslizable --------------
   Con las grillas apiladas el scroll vertical era larguisimo. Cada grilla
   pasa a una fila con scroll-snap que sangra hasta el borde de la pantalla
   y deja asomar la siguiente tarjeta. Los [data-reveal] de estas filas no
   se esconden: un elemento fuera de pantalla hacia el costado tardaria en
   aparecer. */
@media (max-width: 767px) {
	.foco-grid,
	.foco-expositores-grid {
		display: flex;
		gap: var(--espacio-4);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--padding-lateral);
		margin-inline: calc(var(--padding-lateral) * -1);
		padding-inline: var(--padding-lateral);
		padding-bottom: var(--espacio-2);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.foco-grid::-webkit-scrollbar,
	.foco-expositores-grid::-webkit-scrollbar { display: none; }
	.foco-grid > * { flex: 0 0 min(82%, 340px); scroll-snap-align: start; }
	.foco-expositores-grid > * { flex: 0 0 min(62%, 240px); scroll-snap-align: start; }
	html:not(.no-js) .foco-grid > [data-reveal]:not(.esta-revelado),
	html:not(.no-js) .foco-expositores-grid > [data-reveal]:not(.esta-revelado) { opacity: 1 !important; transform: none !important; }
}

/* --- Mobile: fotos de El lugar en fila deslizable + aire en la banda de
   comunidades. Va despues del bento de escritorio para ganarle por orden. */
@media (max-width: 767px) {
	.foco-lugar-bento {
		display: flex;
		gap: var(--espacio-4);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--padding-lateral);
		margin-inline: calc(var(--padding-lateral) * -1);
		padding-inline: var(--padding-lateral);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.foco-lugar-bento::-webkit-scrollbar { display: none; }
	.foco-lugar-bento__item { flex: 0 0 min(80%, 340px); height: 240px; scroll-snap-align: start; }
	html:not(.no-js) .foco-lugar-bento > [data-reveal]:not(.esta-revelado) { opacity: 1 !important; transform: none !important; }

	.foco-comunidades-marquee { padding-top: var(--espacio-8); padding-bottom: var(--espacio-8); }
	.foco-comunidades-marquee__titulo { padding-inline: var(--espacio-8); font-size: 12px; line-height: 1.6; letter-spacing: .08em; text-wrap: balance; }
}