/* =============================================================
   1. VARIABLES DE MARCA
   Colores tomados directamente del logo institucional.
   ============================================================= */
:root{
  --rojo:        #D20C12;   /* rojo Quetralmahue */
  --rojo-vivo:   #E8342A;   /* rojo aclarado para degradados */
  --rojo-osc:    #9C0B0F;   /* rojo profundo */
  --amarillo:    #EAA80C;   /* ámbar Quetralmahue (diábolo del logo) */
  --amarillo-cl: #FBDD97;   /* ámbar claro, para texto sobre rojo */
  --azul-osc:    #123A5E;   /* azul noche, cierra el degradado del hero */

  --blanco:      #FFFFFF;   /* fondo principal */
  --hueso:       #FAF8F5;   /* tono suave para alternar secciones */
  --tinta:       #241813;   /* texto principal */
  --tinta-suave: #5C4A40;   /* texto secundario */
  --borde:       #E8E0D6;

  --radio:      16px;
  --radio-cap:  999px;
  --sombra:     0 4px 16px rgba(36,24,19,.08);
  --sombra-alt: 0 16px 40px rgba(36,24,19,.16);

  /* Tipografía redondeada del sistema: sin descargas ni licencias */
  --fuente: ui-rounded, "SF Pro Rounded", "Varela Round", "Nunito",
            "Quicksand", "Trebuchet MS", system-ui, -apple-system,
            "Segoe UI", sans-serif;
}

/* =============================================================
   2. BASE Y ACCESIBILIDAD
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:104px; }

body{
  margin:0;
  font-family:var(--fuente);
  font-size:1.05rem;
  line-height:1.65;
  color:var(--tinta);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* height:auto es imprescindible: sin él, el atributo height del HTML
   queda fijo mientras el ancho se encoge, y la imagen sale aplastada.
   Las imágenes que sí llevan alto propio (retratos, hero) lo definen
   en su propia clase, que manda sobre esta regla. */
img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ line-height:1.18; margin:0 0 .5em; font-weight:800; letter-spacing:-.015em; }
h1{ font-size:clamp(2.1rem, 6vw, 3.6rem); }
h2{ font-size:clamp(1.7rem, 4vw, 2.5rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1em; }

a{ color:var(--rojo); }

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--rojo);
  outline-offset:3px; border-radius:6px;
}
.hero a:focus-visible,.hero button:focus-visible{ outline-color:var(--blanco); }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:var(--blanco);
  padding:.75rem 1.25rem; border-radius:0 0 var(--radio) 0; font-weight:700;
}
.saltar:focus{ left:0; }

.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.contenedor{ width:min(1140px, 100% - 2.5rem); margin-inline:auto; }
section{ padding:clamp(3.5rem, 9vw, 6rem) 0; }
.seccion--hueso{ background:var(--hueso); }

/* Encabezado de sección reutilizable */
.seccion__intro{ max-width:44rem; margin-bottom:2.8rem; }
.seccion__intro p{ color:var(--tinta-suave); font-size:1.08rem; }
.seccion__intro--centro{ margin-inline:auto; text-align:center; }

.titulo-deco{
  display:flex; align-items:center; gap:.6rem; color:var(--rojo);
  font-weight:900; text-transform:uppercase; letter-spacing:.14em;
  font-size:.8rem; margin-bottom:.7rem;
}
.titulo-deco::after{
  content:""; flex:1; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--amarillo),transparent);
}
.seccion__intro--centro .titulo-deco{ justify-content:center; }
.seccion__intro--centro .titulo-deco::after{ display:none; }

/* =============================================================
   3. BOTONES
   ============================================================= */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font:inherit; font-weight:800; text-decoration:none; cursor:pointer;
  padding:.9rem 1.7rem; border-radius:var(--radio-cap); border:3px solid transparent;
  min-height:50px;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.boton:hover{ transform:translateY(-2px); }
.boton:active{ transform:translateY(0); }

.boton--principal{ background:var(--rojo); color:var(--blanco); box-shadow:var(--sombra-alt); }
.boton--principal:hover{ background:var(--rojo-osc); }

.boton--amarillo{ background:var(--amarillo); color:var(--tinta); box-shadow:var(--sombra); }
.boton--amarillo:hover{ background:#F7BC3C; }

.boton--borde{ background:transparent; color:var(--blanco); border-color:rgba(255,255,255,.75); }
.boton--borde:hover{ background:rgba(255,255,255,.16); }

/* Sin uso desde que se retiró el formulario (D39). Se conserva junto
   con los estilos del formulario, por si vuelve. */
.boton--taller{
  background:var(--blanco); color:var(--rojo);
  border-color:var(--rojo); width:100%; margin-top:auto;
}
.boton--taller:hover{ background:var(--rojo); color:var(--blanco); }

/* =============================================================
   4. ENCABEZADO Y HERO
   ============================================================= */
.cabecera{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--borde);
}
.cabecera__fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.6rem 0; min-height:86px;
}

.marca{ display:flex; align-items:center; text-decoration:none; }
.marca__logo{ height:68px; width:auto; }
@media (max-width:420px){ .marca__logo{ height:52px; } }

.nav__lista{ list-style:none; display:flex; align-items:center; gap:.25rem; margin:0; padding:0; }
.nav__lista a{
  /* 48px de alto: el mínimo táctil que fija este proyecto. Se logra con
     display:flex y min-height, no con relleno, para que no dependa del
     tamaño de letra que use cada navegador. */
  display:flex; align-items:center; min-height:48px;
  padding:.55rem .8rem; border-radius:var(--radio-cap);
  text-decoration:none; color:var(--tinta); font-weight:700; font-size:.96rem;
}
.nav__lista a:hover{ background:var(--amarillo-cl); }

/* --- ACCESO AL FESTIVAL · BLOQUE TEMPORAL ---------------------
   Mientras el Festival Mes del Circo ocupe la raíz del sitio, su
   acceso se destaca en el menú de las cuatro páginas.
   CUANDO EL FESTIVAL TERMINE, SE BORRA ESTE BLOQUE COMPLETO.
   #A21C42 es el carmín de la gráfica del festival: da 7.6:1
   sobre el blanco de la cabecera, muy por encima del mínimo. */
.nav__lista .nav__festival{ color:#A21C42; }
.nav__lista .nav__festival:hover{ background:#F4F0F1; }
/* Página en la que se está: vale para las cuatro */
.nav__lista a[aria-current="page"]{ background:var(--borde); }
/* -------------------------------------------------------------- */

.nav__toggle{
  display:none; background:var(--blanco); border:3px solid var(--tinta);
  border-radius:12px; width:50px; height:50px; cursor:pointer;
  align-items:center; justify-content:center; padding:0;
}
.nav__toggle span{ display:block; width:22px; height:3px; background:var(--tinta); border-radius:2px; position:relative; }
.nav__toggle span::before,.nav__toggle span::after{
  content:""; position:absolute; left:0; width:22px; height:3px;
  background:var(--tinta); border-radius:2px;
}
.nav__toggle span::before{ top:-7px; }
.nav__toggle span::after{ top:7px; }

@media (max-width:980px){
  .nav__toggle{ display:inline-flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--blanco); border-bottom:2px solid var(--borde);
    box-shadow:var(--sombra); display:none;
  }
  .nav[data-abierto="true"]{ display:block; }
  .nav__lista{ flex-direction:column; align-items:stretch; gap:.2rem; padding:1rem 1.25rem 1.5rem; }
  .nav__lista a{ padding:.85rem 1rem; font-size:1.05rem; }
}

/* --- HERO con fotografía de fondo ---
   El degradado rojo va ENCIMA de la foto: mantiene la marca y
   garantiza que el texto blanco sea legible sobre cualquier zona
   de la imagen. */
.hero{
  position:relative; color:var(--blanco); overflow:hidden;
  background-image:
    linear-gradient(105deg,
      rgba(156,11,15,.94) 0%,
      rgba(210,12,18,.82) 42%,
      rgba(18,58,94,.86) 100%),
    url("../img/hero-comunidad.jpg");
  background-size:cover;
  background-position:center 35%;
  padding:clamp(4rem, 11vw, 7.5rem) 0 clamp(4rem, 11vw, 7rem);
}

.hero__contenido{ position:relative; max-width:46rem; }
.hero__etiqueta{
  display:inline-block; background:var(--amarillo); color:var(--tinta);
  font-weight:800; font-size:.82rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.42rem 1.05rem; border-radius:var(--radio-cap); margin-bottom:1.3rem;
}
.hero h1{ text-shadow:0 3px 18px rgba(0,0,0,.35); }
.hero h1 em{ font-style:normal; color:var(--amarillo-cl); }

/* Lema institucional */
.hero__lema{
  font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(.82rem, 2vw, 1rem); color:var(--blanco);
  margin-bottom:1.3rem; line-height:1.8;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.hero__lema span{ color:var(--amarillo-cl); margin:0 .3rem; }

.hero__texto{
  font-size:clamp(1.05rem,2.4vw,1.22rem); max-width:39rem;
  color:rgba(255,255,255,.95); text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

/* Trayectoria: un solo dato, acompañado de su contexto */
.hero__trayectoria{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem;
  margin:2.8rem 0 0; padding-top:1.8rem; max-width:40rem;
  border-top:2px solid rgba(255,255,255,.32);
}
.hero__trayectoria b{
  font-size:clamp(1.9rem, 4.5vw, 2.3rem); font-weight:900;
  color:var(--amarillo-cl); line-height:1;
}
.hero__trayectoria span{
  flex:1; min-width:14rem; font-size:1rem; line-height:1.5;
  color:rgba(255,255,255,.94); text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* --- Redes sociales en la cabecera -----------------------------
   Van dentro de la lista del menú, así en celular caen solas dentro
   del desplegable. Son 44x44 con 4px de separación: 48px de objetivo
   táctil real, que es lo que pide el proyecto.
   --------------------------------------------------------------- */
.nav__redes{ display:flex; gap:.15rem; align-items:center; }
.nav__redes a{
  display:grid; place-items:center;
  width:44px; height:44px; margin:2px;
  border-radius:var(--radio-cap);
  color:var(--rojo); text-decoration:none;
}
.nav__redes svg{ width:22px; height:22px; }
.nav__redes a:hover,.nav__redes a:focus-visible{
  background:var(--rojo); color:var(--blanco);
}
/* Un separador que despega las redes de los enlaces de texto */
@media (min-width:981px){
  .nav__redes{ margin-left:.5rem; padding-left:.6rem; border-left:2px solid var(--borde); }
}
@media (max-width:980px){
  .nav__redes{ justify-content:center; margin-top:.6rem; padding-top:.8rem;
               border-top:2px solid var(--borde); }
}

/* =============================================================
   5. LOS CUATRO "SOMOS"
   El corazón institucional de la página: cada valor con su foto.
   ============================================================= */
.somos{
  display:grid; gap:1.6rem; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(2, 1fr);
}
@media (max-width:760px){ .somos{ grid-template-columns:1fr; } }

.somo{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--blanco); border:2px solid var(--borde);
  border-radius:var(--radio); box-shadow:var(--sombra);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.somo:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alt); border-color:var(--amarillo); }

.somo__foto{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--hueso); }
.somo__foto img{ width:100%; height:100%; object-fit:cover; }
.somo__etiqueta{
  position:absolute; left:1rem; bottom:1rem;
  background:var(--rojo); color:var(--blanco);
  font-weight:900; text-transform:uppercase; letter-spacing:.06em;
  font-size:.9rem; padding:.4rem 1rem; border-radius:var(--radio-cap);
  box-shadow:var(--sombra-alt);
}
.somo__cuerpo{ padding:1.4rem 1.5rem 1.6rem; }
.somo__cuerpo p{ margin:0; color:var(--tinta-suave); }

/* =============================================================
   6. QUIÉNES SOMOS · MISIÓN Y VISIÓN
   ============================================================= */
.proposito{ display:grid; gap:1.5rem; grid-template-columns:1fr 1fr; }
@media (max-width:760px){ .proposito{ grid-template-columns:1fr; } }

.tarjeta-proposito{
  padding:1.8rem; border-radius:var(--radio); border:2px solid var(--borde);
  background:var(--blanco);
}
.tarjeta-proposito--destacada{
  background:linear-gradient(150deg, var(--rojo) 0%, var(--rojo-osc) 100%);
  color:var(--blanco); border-color:transparent;
}
.tarjeta-proposito h3{
  display:flex; align-items:center; gap:.6rem;
  text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; color:var(--rojo);
}
.tarjeta-proposito--destacada h3{ color:var(--amarillo-cl); }
.tarjeta-proposito p{ margin:0; font-size:1.05rem; }

/* Hitos de la trayectoria */
.hitos{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.hito{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1.1rem 1.2rem; border-radius:var(--radio);
  background:var(--hueso); border:2px solid var(--borde);
}
.hito__anio{
  flex:none; font-weight:900; color:var(--rojo); font-size:1.05rem;
  background:var(--blanco); border:2px solid var(--rojo);
  border-radius:var(--radio-cap); padding:.15rem .7rem;
}
.hito p{ margin:0; font-size:.95rem; color:var(--tinta-suave); }

/* =============================================================
   6b. EQUIPO
   Cada área presenta su propósito, sus especialidades y las
   personas que la integran. Quien cumple funciones en dos áreas
   aparece en ambas, que es como trabaja realmente el equipo.
   ============================================================= */
.equipo-area{ margin-bottom:3.5rem; }
.equipo-area:last-child{ margin-bottom:0; }
.equipo-area__titulo{
  display:flex; align-items:center; gap:.8rem;
  font-size:.82rem; font-weight:900; text-transform:uppercase; letter-spacing:.13em;
  color:var(--rojo); margin:0 0 1.2rem;
}
.equipo-area__titulo::after{
  content:""; flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--amarillo),var(--borde));
}

/* Frase que define el área */
.equipo-area__cita{
  margin:0 0 1.4rem; padding:0 0 0 1.2rem;
  border-left:5px solid var(--amarillo);
  font-size:clamp(1.05rem, 2.2vw, 1.22rem); font-weight:600;
  color:var(--tinta); max-width:52rem; line-height:1.55;
}

/* Especialidades del área */
.equipo-area__funciones{
  list-style:none; margin:0 0 1.8rem; padding:0;
  display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fit, minmax(235px, 1fr));
}
.equipo-area__funciones li{
  padding:.9rem 1.1rem; border-radius:var(--radio);
  background:var(--hueso); border:1px solid var(--borde);
  font-size:.92rem; color:var(--tinta-suave); line-height:1.5;
}
.equipo-area__funciones strong{ display:block; color:var(--rojo); font-size:.86rem;
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:.15rem; }

/* 232px es el ancho mínimo con el que un correo institucional
   completo cabe en una sola línea. Da 4 columnas en escritorio. */
.equipo{
  display:grid; gap:1.4rem; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
}
.persona{
  display:flex; flex-direction:column;   /* permite alinear los correos abajo */
  background:var(--blanco); border:2px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.persona:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alt); border-color:var(--amarillo); }

.persona__foto{ aspect-ratio:5/7; background:#3C3C3C; overflow:hidden; }
.persona__foto picture{ display:block; width:100%; height:100%; }
.persona__foto img{ width:100%; height:100%; object-fit:cover; }

/* Cuando falta la fotografía: iniciales sobre el rojo institucional */
.persona__inicial{
  width:100%; height:100%; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--rojo) 0%, var(--rojo-osc) 100%);
  color:var(--amarillo-cl); font-size:2.4rem; font-weight:900; letter-spacing:.05em;
}

/* El cuerpo crece hasta llenar la tarjeta: así, dentro de una misma
   fila, todos los correos quedan alineados al pie aunque los cargos
   ocupen distinto número de líneas. */
.persona__cuerpo{
  display:flex; flex-direction:column; flex:1;
  padding:1.05rem 1.15rem 1.15rem;
}
.persona__nombre{ font-size:1.05rem; font-weight:800; margin:0 0 .25rem; line-height:1.25; }
.persona__cargo{
  margin:0; font-size:.85rem; font-weight:700; line-height:1.4; color:var(--tinta-suave);
}
.persona__correo{
  margin-top:auto; padding-top:.75rem; border-top:1px solid var(--borde);
  font-size:.76rem; font-weight:700; color:var(--rojo);
  text-decoration:none; overflow-wrap:anywhere; line-height:1.4;
}
.persona__correo:hover{ text-decoration:underline; }

/* En tablet mantenemos tres columnas cómodas */
@media (max-width:900px){
  .equipo{ grid-template-columns:repeat(auto-fill, minmax(205px, 1fr)); }
}

/* En celular usamos el recorte cuadrado que ya existe en el material.
   A este ancho el correo se parte en dos líneas y está bien: sigue
   alineado al pie de cada tarjeta. */
@media (max-width:600px){
  .equipo{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1rem; }
  .persona__foto{ aspect-ratio:1/1; }
  .persona__cuerpo{ padding:.85rem .95rem 1rem; }
  .persona__nombre{ font-size:.95rem; }
  .persona__cargo{ font-size:.8rem; }
  .persona__correo{ font-size:.71rem; padding-top:.6rem; }
}

/* =============================================================
   7. TALLERES
   ============================================================= */
.talleres{
  display:grid; gap:1.3rem;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr));
  list-style:none; margin:0; padding:0;
}
.taller{
  display:flex; flex-direction:column;
  background:var(--blanco); border:2px solid var(--borde); border-radius:var(--radio);
  padding:1.5rem; box-shadow:var(--sombra);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.taller:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alt); border-color:var(--amarillo); }

.taller__icono{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  margin-bottom:1rem; color:var(--blanco);
  background:linear-gradient(140deg,var(--rojo-vivo),var(--rojo));
}
.taller:nth-child(2n) .taller__icono{ background:linear-gradient(140deg,var(--amarillo),#C88C00); color:var(--tinta); }
.taller__icono svg{ width:28px; height:28px; }

.taller h3{ margin-bottom:.4rem; }
.taller__desc{ color:var(--tinta-suave); font-size:.97rem; margin-bottom:1.3rem; }

.nota-talleres{
  margin-top:2rem; padding:1.1rem 1.3rem; border-radius:var(--radio);
  background:var(--hueso); border:2px dashed var(--borde);
  font-size:.97rem; color:var(--tinta-suave);
}

/* --- Nombre del profesor de cada taller --- */
.taller__profe{
  margin:-.2rem 0 .5rem; font-weight:800; font-size:.95rem; color:var(--rojo);
}

/* --- Talleres + afiche, uno al lado del otro en escritorio ---
   El afiche lleva los días, horarios y lugares: es la fuente única,
   y por eso no se transcriben al HTML. */
.talleres__conjunto{ display:grid; gap:2rem; align-items:start; }
@media (min-width:900px){
  .talleres__conjunto{ grid-template-columns:1fr minmax(280px,.7fr); gap:2.5rem; }
}
.talleres__afiche{ margin:0; }
.talleres__afiche img{
  width:100%; height:auto; border-radius:var(--radio); box-shadow:var(--sombra);
}
.talleres__afiche figcaption{
  margin-top:.7rem; font-size:.9rem; color:var(--tinta-suave); text-align:center;
}
@media (min-width:900px){
  .talleres__conjunto .talleres{ grid-template-columns:1fr 1fr; }
}

/* --- Reel de Instagram con carga al clic ---
   El botón mide 48px de alto como mínimo. Cuando el video se inserta,
   la clase .reel--cargado le da la proporción del embed de Instagram. */
.reel{ margin-top:1rem; }
.reel__boton{
  /* Rejilla en vez de fila: el icono ocupa las dos líneas de texto, así
     el rótulo no se parte en tres renglones dentro de una tarjeta angosta */
  display:grid; width:100%;
  grid-template-columns:auto 1fr;
  grid-template-areas:"icono texto" "icono pie";
  align-items:center; gap:0 .7rem;
  min-height:48px; padding:.7rem .9rem;
  background:var(--hueso); border:2px solid var(--borde);
  border-radius:var(--radio); cursor:pointer;
  font-family:inherit; text-align:left; color:var(--tinta);
}
.reel__boton:hover,.reel__boton:focus-visible{ border-color:var(--rojo); }
.reel__play{
  grid-area:icono; display:grid; place-items:center;
  width:34px; height:34px; border-radius:var(--radio-cap);
  background:var(--rojo); color:var(--blanco);
}
.reel__play svg{ width:17px; height:17px; margin-left:2px; }
.reel__texto{ grid-area:texto; align-self:end; font-weight:800; font-size:.95rem; }
.reel__pie{
  grid-area:pie; align-self:start;
  font-size:.78rem; color:var(--tinta-suave); line-height:1.3;
}
.reel--cargado{ aspect-ratio:1/1.62; }
.reel iframe{
  width:100%; height:100%; border:0; border-radius:var(--radio);
  background:var(--hueso);
}

/* =============================================================
   8. FORMULARIO DE INSCRIPCIÓN  —  SIN USO POR AHORA
   -------------------------------------------------------------
   La sección de inscripción se retiró del sitio en agosto de 2026
   porque no estaba claro para qué se usaría (decisión D39). Estos
   estilos se conservan a propósito: la decisión fue "mientras", no
   definitiva, y así volver a poner el formulario es solo recuperar
   su HTML. Está en el historial de git:

     git show 41cd207:index.html

   Si se decide que el formulario no vuelve, se puede borrar de aquí
   hasta el final de la sección 8 (unos 70 renglones).
   ============================================================= */
.tarjeta-form{
  background:var(--blanco); border:2px solid var(--borde);
  border-radius:calc(var(--radio) + 6px); padding:clamp(1.4rem, 4vw, 2.6rem);
  box-shadow:var(--sombra-alt); max-width:760px; margin-inline:auto;
}

.campos{ display:grid; gap:1.15rem; grid-template-columns:repeat(2,1fr); }
.campo--ancho{ grid-column:1 / -1; }
@media (max-width:620px){ .campos{ grid-template-columns:1fr; } }

.campo label{ display:block; font-weight:700; margin-bottom:.35rem; }
.campo .obligatorio{ color:var(--rojo); }
.campo .ayuda{ display:block; font-weight:400; font-size:.85rem; color:var(--tinta-suave); }

.campo input,.campo select,.campo textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--tinta);
  padding:.8rem .9rem; min-height:50px;
  background:var(--hueso); border:2px solid var(--borde); border-radius:12px;
}
.campo textarea{ resize:vertical; min-height:110px; }
.campo select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tinta) 50%),
                   linear-gradient(135deg,var(--tinta) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px, calc(100% - 14px) 23px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{ border-color:var(--rojo); background:#FDF0EE; }

.error{ display:none; margin-top:.35rem; color:var(--rojo); font-size:.88rem; font-weight:700; }
.error::before{ content:"⚠ "; }
.error.visible{ display:block; }

.campo--check{ display:flex; align-items:flex-start; gap:.7rem; }
.campo--check input{ width:24px; height:24px; min-height:0; margin-top:.25rem; flex:none; accent-color:var(--rojo); }
.campo--check label{ margin:0; font-weight:600; font-size:.95rem; }

.form__pie{ margin-top:1.7rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.form__nota{ font-size:.88rem; color:var(--tinta-suave); margin:0; }

.resumen-errores{
  display:none; margin-bottom:1.4rem; padding:1rem 1.2rem;
  background:#FDF0EE; border:2px solid var(--rojo); border-radius:12px; color:var(--rojo);
}
.resumen-errores.visible{ display:block; }
.resumen-errores h3{ font-size:1.05rem; margin-bottom:.3rem; }
.resumen-errores ul{ margin:0; padding-left:1.2rem; }
.resumen-errores a{ color:var(--rojo); font-weight:700; }

.confirmacion{ display:none; text-align:center; padding:1rem; }
.confirmacion.visible{ display:block; }
.confirmacion__icono{
  width:84px; height:84px; margin:0 auto 1.2rem; border-radius:50%;
  background:linear-gradient(140deg,#3EA57F,#2E7D63);
  display:grid; place-items:center; color:var(--blanco);
}
.confirmacion__icono svg{ width:44px; height:44px; }
.confirmacion h3{ font-size:1.6rem; color:#2E7D63; }
.resumen{
  text-align:left; max-width:430px; margin:1.5rem auto; padding:1.2rem 1.4rem;
  background:var(--hueso); border:2px dashed var(--borde); border-radius:var(--radio);
}
.resumen div{ display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; border-bottom:1px solid var(--borde); }
.resumen div:last-child{ border-bottom:0; }
.resumen dt{ font-weight:700; color:var(--tinta-suave); margin:0; }
.resumen dd{ margin:0; text-align:right; font-weight:700; }

/* =============================================================
   9. CONTACTO Y PIE
   ============================================================= */
.contacto__grid{ display:grid; gap:1.5rem; grid-template-columns:1fr 1fr; align-items:start; }
@media (max-width:880px){ .contacto__grid{ grid-template-columns:1fr; } }

.canales{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.canal{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--blanco); border:2px solid var(--borde);
  border-radius:var(--radio); padding:1.1rem 1.2rem;
}
.canal__icono{
  width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:var(--amarillo-cl); color:var(--rojo);
}
.canal__icono svg{ width:24px; height:24px; }
.canal strong{ display:block; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--tinta-suave); }
.canal a{ font-weight:800; text-decoration:none; word-break:break-word; }
.canal a:hover{ text-decoration:underline; }

/* Mapa ilustrado con CSS: sin imágenes ni servicios externos.
   Para un mapa real, reemplaza este bloque por un iframe de OpenStreetMap. */
.mapa{
  position:relative; overflow:hidden;
  border-radius:var(--radio); border:2px solid var(--borde);
  box-shadow:var(--sombra); background:var(--hueso);
}
/* El mapa es un iframe de Google, a pedido de la organización. La
   ilustración en CSS que había antes (.mapa__calles, .mapa__manzanas,
   .mapa__pin, .mapa__etiqueta) quedó sin uso; se conserva más abajo
   por si se quiere volver a ella sin cargar nada externo. */
.mapa iframe{
  display:block; width:100%; height:clamp(280px,42vw,420px); border:0;
}
.mapa figcaption{
  padding:.7rem .9rem; font-size:.9rem; background:var(--blanco);
  border-top:2px solid var(--borde);
}
.mapa__calles{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 46%, #fff 46% 54%, transparent 54%),
    linear-gradient(0deg,  transparent 62%, #fff 62% 68%, transparent 68%),
    linear-gradient(0deg,  transparent 20%, #F6F1E4 20% 24%, transparent 24%),
    linear-gradient(90deg, transparent 14%, #F6F1E4 14% 18%, transparent 18%);
}
.mapa__manzanas{
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(46,125,99,.18) 2px, transparent 2px);
  background-size:34px 34px;
}
.mapa__pin{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-100%);
  display:grid; place-items:center; width:52px; height:52px; border-radius:50% 50% 50% 6px;
  background:var(--rojo); color:var(--blanco); rotate:-45deg; box-shadow:var(--sombra-alt);
}
.mapa__pin svg{ width:24px; height:24px; rotate:45deg; }
.mapa__etiqueta{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  background:var(--blanco); border:2px solid var(--tinta); border-radius:var(--radio-cap);
  padding:.5rem 1rem; font-weight:800; font-size:.88rem; white-space:nowrap; box-shadow:var(--sombra);
}

.pie{ background:var(--tinta); color:#F3E7D8; padding:2.6rem 0; }
.pie__fila{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; }
.pie a{ color:var(--amarillo); }
.pie p{ margin:0; font-size:.92rem; }

/* =============================================================
   11. PÁGINAS INTERNAS (equipo y transparencia)
   ============================================================= */

/* Franja superior que reemplaza al hero en las páginas internas */
.encabezado-pagina{
  position:relative; color:var(--blanco);
  background:
    radial-gradient(circle at 12% 20%, rgba(234,168,12,.30), transparent 45%),
    linear-gradient(110deg, var(--rojo-osc) 0%, var(--rojo) 55%, var(--azul-osc) 100%);
  padding:clamp(2.6rem, 7vw, 4.2rem) 0 clamp(2.8rem, 7vw, 4rem);
}
.encabezado-pagina h1{ margin-bottom:.4rem; text-shadow:0 3px 16px rgba(0,0,0,.3); }
.encabezado-pagina p{
  margin:0; max-width:44rem; font-size:clamp(1.02rem,2.2vw,1.16rem);
  color:rgba(255,255,255,.95); text-shadow:0 2px 12px rgba(0,0,0,.3);
}

/* Migas de pan */
.migas{ margin:0 0 1rem; font-size:.88rem; font-weight:700; color:rgba(255,255,255,.85); }
.migas a{ color:var(--amarillo-cl); text-decoration:none; }
.migas a:hover{ text-decoration:underline; }
.migas span{ opacity:.6; margin:0 .4rem; }

/* --- Documentos de transparencia --- */
.categoria{ margin-bottom:3rem; }
.categoria:last-child{ margin-bottom:0; }
.categoria__titulo{
  display:flex; align-items:center; gap:.8rem;
  font-size:.82rem; font-weight:900; text-transform:uppercase; letter-spacing:.13em;
  color:var(--rojo); margin:0 0 .6rem;
}
.categoria__titulo::after{
  content:""; flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--amarillo),var(--borde));
}
.categoria__bajada{ margin:0 0 1.3rem; color:var(--tinta-suave); max-width:52rem; }

.documentos{
  display:grid; gap:1rem; list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fill, minmax(285px, 1fr));
}
.documento a{
  display:flex; align-items:center; gap:1rem; height:100%;
  padding:1.05rem 1.15rem; text-decoration:none; color:inherit;
  background:var(--blanco); border:2px solid var(--borde); border-radius:var(--radio);
  box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.documento a:hover{
  transform:translateY(-3px); box-shadow:var(--sombra-alt); border-color:var(--rojo);
}
.documento__icono{
  flex:none; width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--rojo); color:var(--blanco);
  font-size:.62rem; font-weight:900; letter-spacing:.06em;
}
.documento__info{ flex:1; min-width:0; }
.documento__titulo{ display:block; font-weight:800; line-height:1.3; margin-bottom:.15rem; }
.documento__meta{ display:block; font-size:.8rem; color:var(--tinta-suave); font-weight:600; }
.documento__flecha{
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--hueso); color:var(--rojo); border:1px solid var(--borde);
}
.documento a:hover .documento__flecha{ background:var(--rojo); color:var(--blanco); border-color:var(--rojo); }
.documento__flecha svg{ width:17px; height:17px; }

/* Aviso institucional al pie de transparencia */
.nota-transparencia{
  margin-top:2.6rem; padding:1.3rem 1.5rem; border-radius:var(--radio);
  background:var(--hueso); border:2px dashed var(--borde); color:var(--tinta-suave);
}
.nota-transparencia strong{ color:var(--tinta); }
.nota-transparencia p:last-child{ margin-bottom:0; }