@font-face {
  font-family: "Big Shoulders";
  src: url("fuentes/bigshoulders.woff2") format("woff2");
  font-weight: 800 900;
  font-display: swap;
}
/* Colores del logo del PAyS; azul y amarillo del cartel como en la Escuela de Oficios */
:root {
  color-scheme: light;
  --verde: #1c5230;
  --verde-vivo: #0f9d3a;
  --rojo: #e6343a;
  --rojo-hondo: #a81e23;
  --sol: #fdb92e;
  --cielo: #dff2f6;
  --azul: #144092;
  --noche: #0b1530;
  --fondo: #f7f8f3;
  --texto: #18211b;
  --suave: #55605a;
  --tarjeta: #ffffff;
  --borde: #cfd8d0;
  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 18px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body::before {
  content: "";
  display: block;
  height: 8px;
  background: linear-gradient(90deg, var(--verde) 0 50%, var(--sol) 50% 75%, var(--rojo) 75%);
}
a { color: var(--azul); }

/* ---------- encabezado ---------- */
.cabecera { background: var(--verde); border-bottom: 6px solid var(--sol); }
.cabecera__dentro { max-width: 560px; margin: 0 auto; padding: 16px; display: flex; align-items: center; gap: 12px; }
.foto { width: 92px; height: 92px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: #ffffff; border: 3px solid var(--sol); }
.cartel { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.cartel b { font: 900 1.65rem/1 var(--display); text-transform: uppercase; color: #ffffff; background: var(--azul); padding: 6px 10px 4px; }
.cartel span { font-size: 0.82rem; font-weight: 700; color: var(--noche); background: var(--sol); padding: 3px 10px; }
.logo { width: 66px; height: 66px; flex: none; border-radius: 50%; object-fit: cover; }

/* ---------- contenido ---------- */
main { max-width: 560px; margin: 0 auto; padding: 24px 16px 40px; }
h1 { font: 900 2.5rem/0.98 var(--display); text-transform: uppercase; color: var(--verde); margin: 0 0 12px; }
h1 em { font-style: normal; color: var(--rojo); }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
h3 { font-size: 1.05rem; margin: 20px 0 6px; }
.intro { margin: 0 0 16px; color: var(--suave); }

form { display: grid; gap: 10px; padding: 16px; background: var(--cielo); border-radius: 12px; }
label { font-weight: 700; color: var(--verde); }
input {
  width: 100%;
  padding: 14px;
  font: inherit;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--texto);
  background: var(--tarjeta);
  border: 2px solid var(--verde);
  border-radius: 8px;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
button {
  padding: 14px;
  font: 900 1.4rem/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: var(--rojo-hondo);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
button:hover { background: var(--rojo); }
button:disabled { opacity: 0.65; cursor: wait; }

#resultado { margin-top: 20px; padding: 16px; border-radius: 10px; border: 2px solid var(--borde); background: var(--tarjeta); overflow-wrap: anywhere; }
#resultado p { margin: 0; }
#resultado.figura { background: #fdecec; border-color: var(--rojo-hondo); }
#resultado.figura h2 { color: var(--rojo-hondo); }
#resultado.no-figura { background: #e7f5ea; border-color: var(--verde); }
#resultado.no-figura h2 { color: var(--verde); }
#resultado ul { padding-left: 20px; margin: 8px 0; }
#resultado li { margin-bottom: 6px; }
#resultado h3 + p, #resultado ul + p, #resultado p + p { margin-top: 10px; }
dl { margin: 12px 0 0; }
dt { font-size: 0.85rem; color: var(--suave); margin-top: 8px; }
dd { margin: 0; font-weight: 600; }

/* Mismo color que el fondo de los videos (componer_avatar.py): el recuadro no muestra cortes ni bordes */
.avatar { margin: 16px 0; }
.avatar-cuadro { background: #e9edf2; border-radius: 12px; overflow: hidden; }
.avatar video { display: block; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 464 / 590; background: #e9edf2; }
.avatar figcaption { margin-top: 6px; font-size: 0.85rem; color: var(--suave); text-align: center; }

/* ---------- Escuela de Oficios ---------- */
.escuela { margin: 32px -16px 0; padding: 22px 16px 24px; background: var(--azul); color: #ffffff; }
.escuela__sobre { margin: 0 0 4px; font-size: 0.85rem; font-weight: 700; color: var(--sol); }
.escuela h2 { font: 900 2.1rem/1 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.escuela h2 em { font-style: normal; color: var(--sol); }
.escuela > p { margin: 0 0 14px; }
.tira { display: flex; gap: 12px; margin: 0 -16px 16px; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 16px; }
.tira a { flex: 0 0 min(74%, 260px); scroll-snap-align: start; }
.tira img { display: block; width: 100%; height: auto; border-radius: 8px; }
.boton-escuela {
  display: block;
  padding: 14px;
  font: 900 1.4rem/1 var(--display);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--noche);
  background: var(--sol);
  border-radius: 8px;
}
.boton-escuela:hover { background: #ffd15c; }

/* ---------- notas y pie ---------- */
.notas { margin-top: 32px; font-size: 0.95rem; }
.codigo { overflow-wrap: anywhere; }
.legal { font-size: 1rem; }
.legal h1 { font-size: 2.2rem; }
.legal h2 { margin-top: 24px; color: var(--verde); }
.legal ul { padding-left: 20px; }

/* ---------- celulares chicos ---------- */
@media (max-width: 380px) {
  body { font-size: 17px; }
  .cabecera__dentro { padding: 12px; gap: 8px; }
  .foto { width: 72px; height: 72px; }
  .logo { width: 54px; height: 54px; }
  .cartel b { font-size: 1.3rem; padding: 5px 8px 3px; }
  .cartel span { font-size: 0.74rem; padding: 3px 8px; }
  h1 { font-size: 2.1rem; }
  .escuela h2 { font-size: 1.8rem; }
}

/* ---------- menos espacio vacío ---------- */
body { background: #e6f1e4; overflow-x: clip; }
main { padding-top: 16px; padding-bottom: 24px; }
.intro { margin-bottom: 10px; }
form { padding: 12px; }
.avatar { margin: 12px 0; }
/* Recorta el aire de arriba de la foto; con el avatar se vuelve a revisar la proporción */
.avatar video { max-width: none; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 100%; }
.escuela { margin-top: 20px; padding-top: 16px; padding-bottom: 16px; }
.notas { margin-top: 20px; }

/* Pantalla grande: usa todo el ancho en dos columnas */
@media (min-width: 900px) {
  .cabecera__dentro, main { max-width: 1160px; }
  .cabecera__dentro { padding: 12px 24px; }
  .foto { width: 84px; height: 84px; }
  .cartel b { font-size: 2.1rem; }
  .cartel span { font-size: 0.95rem; }
  main { padding: 20px 24px 24px; }
  .columnas { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: start; }
  .col-video .avatar { margin-top: 0; }
  h1 { font-size: 3.2rem; }
  .escuela { margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc(50vw - 556px)); }
  .tira { margin-inline: 0; padding-inline: 0; }
  .tira a { flex: 0 0 calc((100% - 48px) / 5); }
  .boton-escuela { max-width: 380px; margin: 0 auto; }
}

/* ---------- avisos y pie de página ---------- */
.notas { margin-top: 24px; }
.notas > h2 { font: 900 1.9rem/1 var(--display); text-transform: uppercase; color: var(--verde); margin: 0 0 14px; }
.notas__grilla { display: grid; gap: 12px; }
.nota { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: var(--tarjeta); border-radius: 12px; box-shadow: 0 1px 3px rgba(28, 82, 48, 0.14); }
.nota h3 { margin: 0 0 4px; font-size: 1rem; color: var(--verde); }
.nota p { margin: 0; font-size: 0.92rem; line-height: 1.45; color: var(--suave); }
.nota__icono { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.nota__icono svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nota__icono--rojo { color: var(--rojo-hondo); background: #fdeaea; }
.nota__icono--sol { color: #8a5a00; background: #fff3d3; }
.nota__icono--verde { color: var(--verde); background: #e2f1e5; }
.nota__icono--azul { color: var(--azul); background: #e4ebf8; }
@media (min-width: 900px) {
  .notas__grilla { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ---------- pie de página ---------- */
.pie { --pie-fondo: #0c2416; --pie-texto: #bcd0c1; --pie-linea: #2a4634; background: var(--pie-fondo); color: var(--pie-texto); font-size: 0.95rem; }
.pie__dentro { max-width: 1160px; margin: 0 auto; padding: 40px 16px 20px; }
.pie__grilla { display: grid; grid-template-columns: 1fr; gap: 28px; }
.pie__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pie__logo img { width: 58px; height: 58px; border-radius: 50%; }
.pie__logo strong { display: block; font: 900 1.7rem/1 var(--display); text-transform: uppercase; color: #ffffff; }
.pie__logo span { display: block; margin-top: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sol); }
.pie__marca p { margin: 0 0 18px; max-width: 34em; line-height: 1.5; }
.pie h2 { margin: 0 0 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pie a { color: var(--pie-texto); text-decoration: none; }
.pie ul a { display: inline-block; padding: 5px 0; }
.pie a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.pie a:focus-visible { outline-color: var(--sol); }
.pie__redes { display: flex; gap: 10px; }
.pie__redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #ffffff; color: #c13584; }
.pie__redes svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pie__aviso { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--pie-linea); font-size: 0.82rem; line-height: 1.55; overflow-wrap: anywhere; }
.pie__final { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pie-linea); font-size: 0.82rem; }
.pie__final a { font-weight: 700; color: #ffffff; }
@media (min-width: 560px) and (max-width: 899px) {
  .pie__grilla { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .pie__dentro { padding: 48px 24px 22px; }
  .pie__grilla { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
}