/* ==========================================================================
   Portal EMAO — Home
   Tokens tomados del diseño "Home Portal.dc.html"
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Teal institucional

     La proporción es 60 / 30 / 10: la mayor parte de la pantalla es neutro,
     el teal ordena las bandas y la navegación, y el naranja aparece poco —
     por eso funciona como acento. Si el naranja empieza a repetirse, deja de
     señalar nada.
     ---------------------------------------------------------------------- */
  --teal-noche:  #083326;   /* barra inferior del pie, superficies profundas */
  --teal-base:   #0C4A38;   /* cabecera, pie, bandas oscuras */
  --teal-medio:  #14654E;   /* bandas de sección, tarjetas sobre oscuro */
  --teal-activo: #1E8A6A;   /* enlaces, iconos, acentos sobre fondo claro */
  --teal-papel:  #E8F4EF;   /* fondos suaves, franja de indicadores */

  /* Acento: ámbar.

     Se probó cambiarlo por una terracota más oscura, para que el acento se
     distinguiera también suelto sobre el fondo claro. No sirve, y la razón
     es geométrica, no de gusto: casi todos los botones del sitio viven
     sobre las bandas verdes, y contra ese verde la terracota se despegaba
     apenas 2.08:1 —hace falta 3—. El botón se leía como una mancha marrón
     pegada al fondo.

     Ningún color resuelve las dos cosas a la vez: para despegarse del verde
     oscuro tiene que ser claro, y para despegarse del papel tiene que ser
     oscuro. Por eso el acento es claro —vive sobre las bandas— y para los
     elementos chicos sobre fondo claro están los colores de estado de más
     abajo, que son el mismo naranja bajado hasta que se ve. */
  --naranja:       #F08C2E;   /* botones, etiquetas de categoría, banda de denuncias */
  /* Dos variantes, porque hacen trabajos distintos: aclarar sirve para
     escribir el acento sobre el teal y para el botón pulsado; oscurecer,
     para escribirlo sobre fondo claro. */
  --naranja-claro: #FBBF6B;   /* texto sobre teal, y fondo del botón al pasar */
  --naranja-hover: #FBBF6B;   /* el botón pulsado: la misma, más clara */
  --sobre-naranja: var(--teal-noche);  /* lo que va escrito encima del acento */
  /* El naranja como texto sobre fondo claro no se lee: esto es lo mismo,
     oscurecido hasta 5.9:1. */
  --naranja-texto: #8A5109;

  /* Neutros: el 60 % de la pantalla */
  --fondo:       #F6F5F1;
  --fondo-2:     #EDEBE5;
  --papel:       #fff;
  --borde:       #E2E0D8;
  --borde-2:     #D5D2C8;
  --texto:       #1C1C1A;
  --texto-medio: #3A3935;
  --texto-suave: #6E6C66;
  --texto-tenue: #737069;

  /* Estados. Son los únicos colores que significan algo puntual, así que no
     se reutilizan para decorar.

     El naranja de marca (#F08C2E) acá no sirve: en un punto de 8 px sobre el
     fondo claro da 2.27:1 y el mínimo para un elemento gráfico es 3:1 —se ve
     como una mancha pálida—. Este otro es el mismo naranja bajado hasta
     3.42:1, que ya se distingue sin dejar de ser naranja. El de marca sigue
     igual donde va sobre el teal o en piezas grandes. */
  --estado-recibida:   #3183D4;
  --estado-proceso:    #CC6A00;
  --estado-retraso:    #CC6A00;
  --estado-atendida:   #1E8A6A;
  --estado-suspendida: #DC4A45;

  /* Nombres anteriores. Quedan como alias para no reescribir cada regla del
     proyecto de una vez, pero son solo eso: al cambiar un color se toca
     arriba, nunca acá abajo ni en un componente. */
  --verde-950:   var(--teal-noche);
  --verde-900:   var(--teal-base);
  --verde-700:   var(--teal-medio);
  --verde-500:   var(--teal-activo);
  --verde-claro: var(--teal-papel);
  --verde-menta: #A9DCC8;
  --verde-humo:  #BBD6CC;
  --ambar:        var(--naranja);
  --ambar-oscuro: var(--naranja-texto);
  --tinta:   var(--texto);
  --tinta-2: var(--texto-medio);
  --tinta-3: var(--texto-suave);
  --tinta-4: var(--texto-tenue);

  --ancho: 1240px;
  --radio: 8px;

  /* Marcador de posición para fotos aún no cargadas */
  --ph-claro: repeating-linear-gradient(135deg, #E4E2DA 0 8px, #DEDCD3 8px 16px);
  --ph-medio: repeating-linear-gradient(135deg, #D9D6CD 0 9px, #D3D0C7 9px 18px);
  --ph-oscuro: repeating-linear-gradient(135deg, #5E5C56 0 8px, #5A5852 8px 16px);
  --ph-hero: repeating-linear-gradient(135deg, #43413C 0 9px, #3F3D39 9px 18px);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-700); text-decoration: none; }
a:hover { color: var(--verde-900); text-decoration: underline; }

img { max-width: 100%; }

button { font-family: inherit; }

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 20px;
}

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

/* Marcadores de foto -------------------------------------------------- */
.ph        { background: var(--ph-claro); }
.ph--medio { background: var(--ph-medio); }
.ph--oscuro{ background: var(--ph-oscuro); }

/* ==========================================================================
   Modal de comunicado
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 74, 56, .55);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}

.modal.esta-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 300ms ease, visibility 0s;
}

.modal__caja {
  position: relative;
  background: var(--papel);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(12, 74, 56, .38);
  width: 100%;
  max-width: 560px;
  border-radius: 16px;
  transform: translateY(12px);
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
}

.modal.esta-visible .modal__caja {
  transform: translateY(0);
  opacity: 1;
}

.modal__filo { height: 6px; background: var(--ambar); }

.modal__cerrar {
  position: absolute;
  top: 18px; right: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: #EAE8E1;
  color: var(--tinta);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal__cerrar:hover { background: #DBD8CF; }
/* Deshabilitado mientras quede un comunicado importante sin pasar. */
.modal__cerrar:disabled { opacity: .4; cursor: not-allowed; }
.modal__cerrar:disabled:hover { background: #EAE8E1; }

.modal__cuerpo { padding: 22px 24px 24px; }

.modal__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal__etiqueta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ambar-oscuro);
}

.modal__punto {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #CFCCC3;
}

.modal__fecha { font-size: 11px; color: var(--tinta-4); }

.modal__titulo {
  margin: 10px 0 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--verde-900);
  text-wrap: pretty;
}

.modal__texto {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.modal__foto {
  margin-top: 16px;
  height: 150px;
  border-radius: 12px;
  background: var(--ph-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #55534D;
  letter-spacing: .06em;
  overflow: hidden;
}

/* display:flex le gana al atributo hidden: sin esto, el marco vacío seguiría
   ocupando lugar en los comunicados que no llevan foto. */
.modal__foto[hidden] { display: none; }

/* Con imagen real el marco deja de imponer alto: toma la proporción de la
   foto, sin recortarla. El tope evita que una imagen muy alta empuje los
   botones fuera de la pantalla. */
.modal__foto--con-imagen {
  height: auto;
  background: none;
  display: block;
}
.modal__foto--con-imagen img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46vh;
  object-fit: contain;
  border-radius: 12px;
}

.modal__acciones {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.modal__pendientes { margin-top: 10px; font-size: 13px; color: var(--tinta-4); }

/* Rotación de comunicados: pasar de uno al siguiente sin cerrar la ventana */
.modal__rotacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--borde, var(--borde));
}

.modal__paso {
  width: 30px;
  height: 30px;
  border: 1px solid var(--borde-2, #CFCCC3);
  border-radius: 50%;
  background: transparent;
  color: var(--verde-900);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.modal__paso:hover:not(:disabled) { background: var(--verde-claro, var(--teal-papel)); }
.modal__paso:disabled { opacity: .35; cursor: default; }

.modal__puntos { display: flex; gap: 7px; }

.modal__punto-nav {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--borde-2);
  cursor: pointer;
}
.modal__punto-nav[aria-selected="true"] { background: var(--ambar); transform: scale(1.25); }
.modal__punto-nav--visto { background: #9FC7B7; }

/* Botones ------------------------------------------------------------- */
.boton {
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Los botones que en realidad son enlaces: un <a> no centra solo el texto
   dentro de la altura fija, y hereda el subrayado de los enlaces. */
a.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
a.boton:hover { text-decoration: none; }

/* Texto oscuro sobre el naranja, no blanco: el blanco sobre este naranja da
   2.5:1 y no se lee. Con la tinta neutra da 6.9:1. */
.boton--ambar {
  height: 42px;
  padding: 0 22px;
  background: var(--naranja);
  color: var(--sobre-naranja);
  font-size: 14px;
}
.boton--ambar:hover { background: var(--naranja-hover); }

.boton--verde {
  height: 34px;
  padding: 0 18px;
  border-radius: 5px;
  background: var(--verde-900);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.boton--verde:hover { background: #0A3E2E; }

.enlace-fuerte { font-size: 14px; font-weight: 600; color: var(--verde-700); }

/* ==========================================================================
   Cabecera + portada
   ========================================================================== */

.portada {
  position: relative;
  background: var(--teal-base);
  overflow: hidden;
}

.portada__foto {
  position: absolute;
  inset: 0;
  background: var(--ph-hero);
}

/* El cartel de «acá va la foto», mientras no haya foto.

   Va en el tercio de arriba y no en el medio: centrado le caía encima al
   titular de la nota destacada y se leían las dos cosas mezcladas. Cuando
   la nota tiene imagen, el JS lo esconde y esto deja de importar. */
.portada__marca {
  position: absolute;
  inset: 0 0 auto;
  padding-top: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .35);
  letter-spacing: .08em;
}

/* El marcador es andamiaje de armado; el JS lo esconde siempre. Sin esta
   regla el display:flex de arriba le gana al atributo hidden y el texto
   «FOTO PRINCIPAL A SANGRE» le queda visible al vecino. */
.portada__marca[hidden] { display: none; }

/* Los dos velos del hero.

   No son un degradado entre dos verdes: son el MISMO teal base con distinta
   opacidad sobre la foto. Oscurecen arriba, para que la cabecera se despegue,
   y abajo, donde va el titular. La foto se sigue viendo en el medio.

   El titular cae sobre la parte de abajo, donde el velo llega a .92, así que
   el blanco tiene ahí su mejor contraste. */
.portada__velo-superior {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(12, 74, 56,.85) 0%, rgba(12, 74, 56,0) 100%);
}

.portada__velo-inferior {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 33%;
  background: linear-gradient(to bottom, rgba(12, 74, 56,0) 0%, rgba(12, 74, 56,.92) 100%);
}

.portada__contenido {
  position: relative;
  z-index: 2;
  color: #fff;
}


/* Cabecera ------------------------------------------------------------- */
.cabecera {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  padding-top: 8px;
  padding-bottom: 8px;
}

.cabecera__logo { height: 30px; width: auto; display: block; }

.menu {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.menu a { color: rgba(255, 255, 255, .88); white-space: nowrap; }
.menu a:hover { color: #fff; text-decoration: none; border-bottom: 1px solid var(--ambar); }
.menu a[aria-current="page"] { color: #fff; }


/* Botón del menú. En escritorio no se ve: el menú va en fila. */
/* El botón del menú es del teléfono: acá se apaga y el media query de más
   abajo lo enciende. El orden importa: si esta regla fuera después, ganaría
   siempre y no aparecería nunca. */
.menu-boton { display: none; }

/* Aviso que pasa ----------------------------------------------------------
   La caja de window.avisoFugaz: abajo, centrada, por encima de todo —también
   de la barra de secciones del teléfono y de los mapas, que reparten z-index
   hasta 1000—. Se va sola a los tres segundos. */
.aviso-fugaz {
  position: fixed;
  left: 50%;
  bottom: calc(var(--alto-barra, 0px) + 18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1100;
  margin: 0;
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--teal-noche);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
  box-shadow: 0 10px 30px rgba(8, 51, 38, .4);
  cursor: pointer;
}

/* El rojo del aviso es más oscuro que el del texto de error sobre papel: acá
   el color va de fondo con blanco encima, no de letra. */
.aviso-fugaz--error { background: #8C2B22; }


/* Nota principal ------------------------------------------------------- */
.destacado {
  min-height: 430px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: end;
  padding-bottom: 44px;
  padding-top: 48px;
}

.pildora {
  display: inline-block;
  background: var(--ambar);
  color: var(--sobre-naranja);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
}

.destacado__titulo {
  margin: 12px 0 0;
  font-size: 38px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.015em;
  text-wrap: pretty;
  max-width: 640px;
}
.destacado__titulo a { color: #fff; }
.destacado__titulo a:hover { color: var(--naranja-claro); text-decoration: none; }

.destacado__firma {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
}

.destacado__secundarias {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.secundaria { display: flex; gap: 12px; }

.secundaria__foto {
  flex: 0 0 72px;
  width: 72px; height: 72px;
  border-radius: 4px;
}

.secundaria__titulo {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  text-wrap: pretty;
}
.secundaria__titulo a { color: #fff; }
.secundaria__titulo a:hover { color: var(--naranja-claro); text-decoration: none; }

.secundaria__seccion {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--naranja-claro);
}

.separador-tenue { height: 1px; background: rgba(255, 255, 255, .18); }

/* ==========================================================================
   Cuerpo — noticias + columna lateral
   ========================================================================== */

.cuerpo {
  padding-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 70%) minmax(0, 30%);
  gap: 20px;
  align-items: start;
}

.titulo-seccion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--verde-900);
  padding-bottom: 6px;
  margin-bottom: 16px;
}

.titulo-seccion h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--verde-900);
}

.titulo-seccion__extra { font-size: 11px; color: var(--verde-700); }

/* Rejilla de noticias -------------------------------------------------- */
.rejilla-noticias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  /* Una ancha ocupa dos columnas: si al final del renglón queda una sola
     libre, no entra y dejaría el hueco. Con «dense» la rejilla mete ahí la
     próxima chica en vez de dejarlo vacío. */
  grid-auto-flow: dense;
}

/* Nota ancha con foto de fondo */
/* Alto mínimo y no alto fijo.

   Con `height` la tarjeta ancha se plantaba en 240 px mientras la chica de
   al lado crecía con su texto hasta 291, y el renglón quedaba disparejo. Con
   `min-height` la grilla las estira a las dos hasta la más alta del renglón,
   que es lo que hace por defecto cuando nadie le fija el alto. */
.nota-ancha {
  grid-column: span 2;
  position: relative;
  min-height: 240px;
  border-radius: var(--radio);
  overflow: hidden;
}

.nota-ancha--baja { min-height: 200px; }

.nota-ancha__velo {
  position: absolute;
  inset: 0;
  /* Plano, como el hero: el título va sobre un solo tono. */
  background: rgba(12, 74, 56, .62);
}

.nota-ancha__texto {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
}

.nota-ancha__seccion {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nota-ancha__titulo {
  margin: 6px 0 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  text-wrap: pretty;
}
.nota-ancha__titulo a { color: #fff; }
.nota-ancha__titulo a:hover { color: var(--naranja-claro); text-decoration: none; }

.nota-ancha__fecha {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, .75);
}

/* Tarjeta de nota

   En columna flexible a propósito: cuando la grilla la estira para emparejar
   el renglón, el sobrante se lo lleva la foto y no un hueco blanco abajo del
   texto. Así la imagen ocupa todo lo que la tarjeta le permita. */
.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.tarjeta:hover {
  box-shadow: 0 6px 18px rgba(12, 74, 56, .10);
  transform: translateY(-2px);
}

/* La foto se queda con lo que sobre; 140 es su piso. */
.tarjeta__foto {
  flex: 1 0 140px;
  min-height: 140px;
  border-radius: var(--radio) var(--radio) 0 0;
}

.tarjeta__cuerpo { flex: none; padding: 9px 12px 11px; }

/* Los cuatro renglones son <p> y traen de fábrica un margen de un renglón
   arriba y otro abajo. Se fijan a mano o se van 40 px en aire. */
.tarjeta__seccion {
  margin: 0 0 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tarjeta__titulo {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  text-wrap: pretty;
}
.tarjeta__titulo a { color: inherit; }

.tarjeta__bajada {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tinta-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tarjeta__fecha { margin: 6px 0 0; font-size: 11px; color: var(--tinta-4); }

/* Colores de sección */
.s-institucional { color: var(--teal-medio); }
.s-educacion     { color: var(--verde-700); }
.s-rutas         { color: var(--naranja-texto); }
.s-operaciones   { color: var(--naranja-texto); }
.s-transparencia { color: var(--teal-medio); }
.s-menta         { color: var(--verde-menta); }
.s-humo          { color: var(--verde-humo); }
.s-ambar-oscuro  { color: var(--ambar-oscuro); }

/* Carrusel por categoría ---------------------------------------------- */
.titulo-seccion--con-aire { margin-top: 24px; margin-bottom: 14px; }

.carrusel {
  display: flex;
  align-items: center;
  gap: 12px;
}

.carrusel__pista {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 4);
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > * { scroll-snap-align: start; }

.carrusel__boton {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid #C8C5BB;
  background: var(--papel);
  color: var(--verde-900);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.carrusel__boton:hover { background: var(--fondo-2); }
.carrusel__boton:disabled { opacity: .35; cursor: default; }

.tarjeta--mini .tarjeta__foto { height: 92px; }
.tarjeta--mini .tarjeta__cuerpo { padding: 9px 11px 11px; }
.tarjeta--mini .tarjeta__titulo { font-size: 14px; }

/* Columna lateral ------------------------------------------------------ */
.lateral {
  position: sticky;
  top: 16px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
}

.lateral__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--verde-900);
  padding-bottom: 6px;
}

.lateral__titulo h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--verde-900);
}

.lateral__pulso {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ambar);
}

.al-minuto { display: flex; flex-direction: column; }

.al-minuto__item {
  padding: 9px 0;
  border-bottom: 1px solid var(--borde-2);
}
.al-minuto__item:last-child { border-bottom: 0; }

.al-minuto__hora {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ambar-oscuro);
}

.al-minuto__titulo {
  margin: 3px 0 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  text-wrap: pretty;
}
.al-minuto__titulo a { color: inherit; }

.contacto-caja {
  margin-top: 12px;
  background: var(--verde-900);
  border-radius: var(--radio);
  padding: 14px 15px;
  color: #fff;
}

.contacto-caja__rotulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--naranja-claro);
}

.contacto-caja__numero {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.contacto-caja__numero a { color: #fff; }

.contacto-caja__horario {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, .75);
}

/* El WhatsApp de denuncias, debajo del teléfono de reclamos. Son dos canales
   distintos y conviene que se lean como tales. */
.contacto-caja__wsp {
  margin: 8px 0 0;
  font-size: 13.5px;
  font-weight: 700;
}
.contacto-caja__wsp a { color: var(--naranja-claro); text-decoration: none; }
.contacto-caja__wsp a:hover { text-decoration: underline; }

/* ==========================================================================
   Tarjeta de indicador — la usa la página institucional
   ========================================================================== */

.indicador {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
}

.indicador__icono {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border: 1.5px solid var(--verde-700);
  opacity: .85;
}
.indicador__icono--cuadro   { border-radius: 4px; }
.indicador__icono--circulo  { border-radius: 50%; }
.indicador__icono--hoja     { border-radius: 4px 16px 4px 16px; }
.indicador__icono--gota     { border-radius: 50% 50% 50% 4px; }

.indicador__cifra {
  font-size: 48px;
  line-height: 1;
  font-weight: 800;
  color: var(--verde-900);
  letter-spacing: -.02em;
}

/* Las cuatro cifras de Institucional son más chicas que las de la portada: son
   cuatro en una tarjeta y no tres a lo ancho. Mismo caso que el de arriba —iba
   en el atributo y tapaba los 38 px del teléfono—. */
.indicador__cifra--menor { font-size: 40px; }

.indicador__rotulo {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ==========================================================================
   Franjas de convocatorias y denuncias
   ========================================================================== */

/* ==========================================================================
   Pie
   ========================================================================== */

.pie {
  margin-top: 28px;
  background: var(--verde-900);
  color: #fff;
}

/* Tres columnas, y la de la marca más ancha: el lema necesita renglones
   cortos para leerse, y las otras dos son listas. */
/* Tres bloques: la marca, los enlaces —que adentro se reparten en columnas—
   y el contacto. Antes eran tres columnas iguales y los diecisiete enlaces
   se apilaban en la del medio: una torre de una pantalla de alto contra dos
   columnas vacías al lado. */
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(0, 3fr);
  gap: 44px;
  padding-top: 56px;
  padding-bottom: 36px;
}

/* Las secciones del sitio, una al lado de la otra. auto-fit reparte lo que
   haya: si mañana se agrega una sección más, no hay nada que tocar acá. */
.pie__enlaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 30px 22px;
}

.pie__marca { padding-right: 20px; }

.pie__logo { width: 160px; height: auto; display: block; }

.pie__lema {
  margin: 16px 0 20px;
  max-width: 340px;
  color: rgba(255, 255, 255, .68);
  font-size: 13.5px;
  line-height: 1.7;
}

.pie__redes { display: flex; gap: 11px; }

.pie__red {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--verde-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.pie__red svg { width: 20px; height: 20px; }
.pie__red:hover { background: var(--verde-menta); transform: translateY(-2px); }

.pie__rotulo {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* El título de cada columna también lleva a su sección: es el enlace más
   grande de la columna y el que la gente toca primero. */
.pie__rotulo a { color: inherit; text-decoration: none; }
.pie__rotulo a:hover { color: #fff; text-decoration: underline; }

/* Las secciones son <details>. En escritorio van siempre abiertas y el
   <summary> es un título más: sin el triangulito del navegador, sin flecha
   y sin cursor de mano, porque ahí no se pliega nada. */
summary.pie__rotulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
}
summary.pie__rotulo::-webkit-details-marker { display: none; }

.pie__flecha { display: none; }

.pie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.pie__lista a {
  color: rgba(255, 255, 255, .68);
  font-size: 13.5px;
  text-decoration: none;
  transition: color .15s ease;
}
.pie__lista a:hover { color: #fff; }

/* Dentro de su columna las subsecciones ya no necesitan sangría: el título
   de arriba las agrupa. Quedan un punto más apagadas, nada más. */
.pie__sub a { font-size: 13px; color: rgba(255, 255, 255, .64); }
.pie__sub a:hover { color: rgba(255, 255, 255, .9); }

/* La franja de contacto: cruza todo el ancho, separada por una línea. */
.pie__franja {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 22px 0 26px;
}

.pie__rotulo--franja { margin-bottom: 14px; }

.pie__contacto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Los siete datos, en un solo renglón cuando el ancho da. Es la medida
     justa para que entren los siete sin que ninguno parta el número. */
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 16px 18px;
  align-items: start;
}

/* Cada dato es un icono y un texto. En grilla y no en flex, con la primera
   columna de ancho fijo: así todos los textos arrancan exactamente en la
   misma línea vertical, sin depender de lo ancho que dibuje cada icono.

   Centrado y no alineado arriba: en el teléfono cada enlace tiene 34 px de
   alto para que el dedo no le pegue al de al lado, y el texto va centrado
   dentro de esos 34. Con el icono pegado arriba quedaba nueve píxeles más
   alto que su propio texto. */
.pie__contacto li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 0 10px;
  color: rgba(255, 255, 255, .68);
  font-size: 13.5px;
  line-height: 1.5;
}

/* El trazo va más fino que el de los iconos grandes del sitio: a 17 px, un
   trazo de 2 los empasta y parecen manchas. */
.pie__contacto svg {
  width: 17px;
  height: 17px;
  justify-self: center;
  stroke-width: 1.7;
  color: var(--verde-menta);
}

.pie__contacto a {
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
  transition: color .15s ease;
}
.pie__contacto a:hover { color: #fff; }

.pie__legal {
  display: grid;
  min-height: 76px;
  padding: 18px 20px;
  place-items: center;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .55);
  font-size: 10px;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}

/* ==========================================================================
   Foco visible
   ========================================================================== */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   Adaptación a pantallas menores
   ========================================================================== */

@media (max-width: 1080px) {
  .cuerpo { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .carrusel__pista { grid-auto-columns: calc((100% - 32px) / 3); }
  /* El pie del teléfono medía 1063 px: una pantalla y media de alto para
     cerrar la página. Acá se le saca el aire, no el contenido — están los
     mismos enlaces, los mismos teléfonos y las mismas redes. */
  .pie__rejilla {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  /* La marca: el logo chico y el lema en dos renglones en vez de cuatro. El
     logo del pie no tiene que competir con el de la cabecera —es la firma
     del final, no el encabezado—. */
  .pie__logo { width: 88px; }
  .pie__lema { margin: 9px 0 10px; font-size: 12px; line-height: 1.5; }
  .pie__red { width: 32px; height: 32px; }
  .pie__red svg { width: 16px; height: 16px; }
  .pie__redes { gap: 9px; }

  /* Las cuatro secciones, plegadas y una debajo de la otra.

     En el teléfono el pie era una lista de once enlaces que nadie lee al
     final de la página. Plegadas son cuatro renglones: quien busca algo
     abre el que le sirve, y quien no, pasa de largo. */
  .pie__enlaces { grid-template-columns: 1fr; gap: 0; }

  details.pie__columna { border-top: 1px solid rgba(255, 255, 255, .12); }
  details.pie__columna:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .12); }

  summary.pie__rotulo {
    margin: 0;
    /* 44 px: el mínimo con el que un dedo no falla. El renglón entero es el
       blanco, no solo la palabra. */
    min-height: 44px;
    padding: 3px 2px;
    font-size: 11.5px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, .08);
  }

  .pie__flecha {
    display: block;
    flex: none;
    width: 17px; height: 17px;
    color: rgba(255, 255, 255, .55);
    transition: transform 160ms ease;
  }
  details[open] > summary .pie__flecha { transform: rotate(90deg); }

  .pie__lista { gap: 9px; padding: 2px 0 14px; }
  .pie__lista a { font-size: 13px; }
  .pie__sub a { font-size: 13px; }

  /* El enlace suelto que no se pliega (si alguna sección no tuviera hijos). */
  div.pie__columna .pie__rotulo { margin-bottom: 0; min-height: 46px;
                                  display: flex; align-items: center; font-size: 12px; }

  /* Los datos de contacto también en dos columnas. Antes iban en una sola
     por miedo a que se partiera un número; con 12,5 px entran de a dos sin
     cortarse, y son siete renglones menos de pie. */
  .pie__franja { padding: 12px 0 13px; }
  .pie__rotulo--franja { margin-bottom: 10px; }
  .pie__contacto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px;
  }
  .pie__contacto li { font-size: 12px; line-height: 1.35; grid-template-columns: 16px 1fr; gap: 0 8px; }
  .pie__contacto svg { width: 14px; height: 14px; }

  /* En un solo renglón. Lo que lo partía en dos no era el tamaño sino el
     espaciado entre letras: en mayúsculas sumaba 50 px y no entraba por poco.
     Sin ese espaciado entra con aire de sobra hasta en un teléfono de 320. */
  .pie__legal {
    min-height: 0;
    padding: 10px 16px;
    font-size: 8.5px;
    letter-spacing: normal;
    line-height: 1.45;
  }

  /* En los teléfonos más angostos que quedan dando vueltas no entraba por
     seis píxeles. Medio punto menos y sigue en un renglón. */
  @media (max-width: 345px) {
    .pie__legal { padding: 10px 12px; font-size: 8px; }
  }
}

/* ==========================================================================
   Teléfono: el menú se colapsa en la barra

   Ocho secciones en fila se envolvían en tres renglones y la cabecera llegaba
   a 144 px: casi un quinto de una pantalla de teléfono gastado antes de la
   primera noticia. Colapsado queda en 58 px.

   El corte va en 860 y no en 640 porque el menú empieza a envolverse bastante
   antes de que la pantalla sea de teléfono: en una tableta vertical ya se veía
   en dos renglones.
   ========================================================================== */
@media (max-width: 860px) {
  /* En el teléfono: el botón a la izquierda, el logo a la derecha.

     Cada uno en su esquina y el medio libre. El pulgar cae solo en la
     esquina izquierda, que es donde llega sin estirarse; el logo, que es
     firma y no botón, se va a la otra punta. */
  .cabecera {
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding-top: 6px;
    padding-bottom: 6px;

    /* Sin la línea de abajo: acá la cabecera se apoya sobre la foto del
       hero y el filo le partía la imagen en dos. */
    border-bottom: 0;
  }

  .cabecera > a { grid-column: 3; justify-self: end; }
  .cabecera__logo { height: 27px; }

  .menu-boton { grid-column: 1; grid-row: 1; justify-self: start; }


  /* En la portada la cabecera va adentro de .portada, que recorta lo que se
     sale. El panel del menú cuelga de la cabecera, así que quedaba cortado
     justo donde termina la foto: con seis ítems no llegaba hasta ahí, con
     ocho sí. Las capas de la foto son absolutas con inset:0, o sea que no
     se salen de ningún lado y el recorte no hacía falta acá. */
  .portada { overflow: visible; }

  /* Cuadrado, solo el icono. La palabra «Menú» al lado del logo centrado
     descompensaba la fila, y tres barras no necesitan que se las explique.
     El nombre para quien usa lector de pantalla va en aria-label. */
  .menu-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40 px. La norma pide 24 como mínimo para un blanco táctil; los 44 son
       la recomendación de Apple. Más abajo de 40 se empieza a fallar. */
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
  }
  .menu-boton:hover { background: rgba(255, 255, 255, .2); }

  /* La palabra se esconde a la vista pero la sigue leyendo el lector. */
  .menu-boton > span:not(.menu-boton__barras) {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Tres barras hechas con un solo elemento y sus dos seudoelementos. */
  .menu-boton__barras,
  .menu-boton__barras::before,
  .menu-boton__barras::after {
    display: block;
    width: 15px; height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 160ms ease, top 160ms ease;
  }
  .menu-boton__barras { position: relative; }
  .menu-boton__barras::before,
  .menu-boton__barras::after { content: ''; position: absolute; left: 0; }
  .menu-boton__barras::before { top: -5px; }
  .menu-boton__barras::after  { top: 5px; }

  /* Abierto, las tres barras se vuelven una cruz. */
  .menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
  .menu-boton[aria-expanded="true"] .menu-boton__barras::before { top: 0; transform: rotate(45deg); }
  .menu-boton[aria-expanded="true"] .menu-boton__barras::after  { top: 0; transform: rotate(-45deg); }

  /* El menú del teléfono es una pantalla entera, no un globo que cuelga.

     Antes era un panel flotante pegado abajo de la cabecera, con los bordes
     redondeados y una sombra: se quedaba a media altura, tapaba el mapa por la
     mitad y con ocho secciones había que desplazarlo adentro sin que se notara
     que se podía. Un menú que se lee como un cartel pegado encima de otra cosa
     no parece parte del sitio; parece que algo se rompió.

     Ocupando la pantalla no hay ambigüedad: lo que se ve es el menú, se elige
     una sección y se vuelve. Es lo que hace cualquier sitio en el teléfono, y
     lo que la gente ya sabe usar. */
  .menu {
    position: fixed;
    inset: 0;

    /* Alto a propósito. El contenedor del mapa ya abre contexto propio y se
       queda en su lugar, pero este menú tapa la pantalla entera: conviene que
       no dependa de que nadie más reparta z-index por ahí. */
    z-index: 1000;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 58px 0 max(24px, env(safe-area-inset-bottom));
    background: var(--teal-noche);
    overflow-y: auto;

    /* Que el desplazamiento no se contagie a la página de atrás cuando se
       llega al final de la lista. */
    overscroll-behavior: contain;

    /* Cerrado con display:none y punto. Probé con una transición de opacidad
       —queda más suave— pero al abrirlo con el dedo el estado se quedaba a
       medio camino: la clase puesta y el panel todavía transparente. Un menú
       que a veces no aparece no se arregla con una animación más prolija. */
    display: none;
  }
  .menu.esta-abierto { display: flex; }

  /* Mientras el menú está abierto, la página de atrás no se mueve. */
  .menu-abierto { overflow: hidden; }

  /* El botón de cerrar y el logo quedan por encima del panel: son la salida. */
  .cabecera-solida .menu-boton,
  .cabecera .menu-boton,
  .cabecera > a { position: relative; z-index: 1001; }

  .menu a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 22px;
    font-size: 14px;
    letter-spacing: .06em;
    white-space: normal;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .menu a:last-child { border-bottom: 0; }
  .menu a:hover { background: rgba(255, 255, 255, .06); }

  /* La sección donde uno está: barra ámbar a la izquierda. El subrayado que
     usa el escritorio acá cruzaba todo el ancho y se leía como separador. */
  .menu a.es-actual {
    padding-bottom: 0;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    box-shadow: inset 4px 0 0 var(--naranja);
  }

}

@media (max-width: 900px) {
  .destacado {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 120px;
    padding-bottom: 32px;
  }
  .destacado__titulo { font-size: 30px; }
  .indicador__cifra { font-size: 38px; }
}

@media (max-width: 720px) {
  .rejilla-noticias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nota-ancha { grid-column: span 2; min-height: 200px; }
  .carrusel__pista { grid-auto-columns: calc((100% - 16px) / 2); }
  /* La marca deja de tener columna propia: pasa arriba, a lo ancho. */
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 30px 34px; }
  .pie__marca { grid-column: 1 / -1; padding-right: 0; }
  .pie__lema { max-width: none; }
}

/* Blancos táctiles en el teléfono.

   WCAG 2.2 pide 24 px mínimo (2.5.8); Apple y Material recomiendan 44 y 48.
   Los enlaces del pie median 17 px de alto: con el dedo se le pega al de al
   lado. Se les da altura sin inflar el pie, achicando el espacio entre ellos
   en la misma medida en que crece cada uno. */
@media (max-width: 640px) {
  .pie__lista { gap: 2px; }
  .pie__lista a,
  .pie__contacto a {
    display: flex;
    align-items: center;
    min-height: 34px;
  }
  .pie__contacto { gap: 12px; }

  .enlace-fuerte,
  .titulo-seccion__extra {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
}

@media (max-width: 640px) {
  .rejilla-noticias { grid-template-columns: 1fr; }
  .nota-ancha { grid-column: span 1; }
  /* Todo el hero un punto más chico, para que entre con la tarjeta «Tu zona»
     sin tener que desplazar. En un teléfono la primera pantalla es casi toda
     la visita: si la tarjeta queda abajo del borde, no existe. */
  .destacado__titulo { font-size: 22px; margin-top: 9px; }
  .destacado__firma { margin-top: 7px; font-size: 11.5px; }

  /* La cabecera pasó de 144 px a 58 px: el titular ya no necesita esquivarla. */
  /* Más foto arriba del titular: el hero es la única imagen de la portada
     y con poco aire parecía un recuadro de color, no una foto. Abajo, lo
     justo para que la tarjeta se monte sin tapar la firma. */
  .destacado { padding-top: 190px; padding-bottom: 46px; min-height: 0; }

  .portada__marca { padding-top: 130px; font-size: 11px; }

  /* Las dos notas secundarias no van en el teléfono: el hero queda con la
     nota principal y la tarjeta de zona, que es a lo que se entra. Siguen
     publicadas y se leen desde Noticias. */
  .destacado__secundarias { display: none; }

  .tarjeta-zona { padding: 10px 14px 11px; margin-top: -24px; margin-bottom: 2px; }

  /* La tarjeta y el título de Noticias, pegados: eran 46 px de aire en una
     pantalla donde cada píxel de alto se paga. */
  .cuerpo { padding-top: 6px; }

  .titulo-seccion { padding-bottom: 5px; margin-bottom: 12px; border-bottom-width: 1.5px; }
  /* Todos los títulos de sección del sitio, del mismo cuerpo. Van en
     mayúsculas y con las letras separadas, así que pesan más de lo que dice el
     número: 13.5 acá se lee como 15 en una palabra normal. Por debajo de 13
     un título en versalitas empieza a costar en un teléfono al sol. */
  .titulo-seccion h2 { font-size: 13.5px; letter-spacing: .04em; }
  .titulo-seccion__extra { font-size: 10px; }

  /* Las tarjetas de noticias, con la letra un punto más chica: en el ancho
     de un teléfono un titular de 20 px se come tres renglones y la tarjeta
     termina siendo casi toda texto. */
  .nota-ancha__titulo { font-size: 16.5px; }
  .nota-ancha__seccion { font-size: 9.5px; }
  .nota-ancha__fecha { font-size: 10.5px; }

  /* Los cuatro renglones son <p>, y un <p> trae de fábrica un margen de un
     renglón arriba y otro abajo. Sumados eran 40 px de aire adentro de una
     tarjeta de 249: más espacio vacío que texto. Acá se fijan a mano. */
  .tarjeta__cuerpo { padding: 8px 11px 10px; }

  /* La foto se queda en 120 acá: en el teléfono va una tarjeta por renglón,
     nadie tiene que emparejar nada, y lo que se pidió fue que ocupara menos. */
  .tarjeta__foto { flex-basis: 120px; min-height: 120px; }

  .tarjeta__seccion { font-size: 9.5px; margin: 0 0 3px; }
  .tarjeta__titulo  { font-size: 13.5px; margin: 0; }
  .tarjeta__bajada  { font-size: 12px; margin: 4px 0 0; }
  .tarjeta__fecha   { font-size: 10.5px; margin: 5px 0 0; }
  .tarjeta-zona__rotulo { font-size: 9.5px; letter-spacing: .1em; }
  .tarjeta-zona__titulo { margin: 3px 0 8px; font-size: 15.5px; }

  /* El botón bajó a 40. La norma pide 24 px como mínimo para un blanco
     táctil, así que sigue holgado; los 44 que tenía son la recomendación
     de Apple, no una obligación. Más abajo de 40 empieza a fallarse.

     El ancho completo se queda: es la acción principal de la portada en el
     teléfono, y aunque sea más baja tiene que seguir siendo lo primero que
     la mano encuentra. */
  .tarjeta-zona__boton { min-height: 40px; font-size: 13px; gap: 7px; }
  .tarjeta-zona__boton svg { width: 15px; height: 15px; }
  .carrusel__pista { grid-auto-columns: 78%; }
  .carrusel__boton { display: none; }
  .pie__rejilla { grid-template-columns: 1fr; gap: 30px;
                  padding-top: 40px; padding-bottom: 28px; }

  /* El modal se ancla al borde inferior, como en el diseño original */
  .modal { align-items: flex-end; padding: 0; }
  .modal__caja {
    width: 92%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    margin-bottom: 0;
  }
  .modal__titulo { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Barra de abajo — solo en el teléfono
   --------------------------------------------------------------------------
   Fija al borde inferior, que es donde llega el pulgar de quien consulta el
   sitio parado en la calle. En escritorio no existe: ahí está el menú en fila.
   ========================================================================== */

.barra-movil { display: none; }

@media (max-width: 860px) {
  /* El alto va acá una sola vez: lo usan la barra y el hueco que se le
     deja al final del documento, y si se separan la barra tapa el último
     renglón —que es justo la línea del copyright—. */
  /* 52 y no menos: descontando el borde de arriba, cada acceso queda en 49,
     y por debajo de 44 el dedo empieza a errarle al que quiso tocar. */
  :root { --alto-barra: 52px; }

  .barra-movil {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    background: var(--papel);
    border-top: 1px solid var(--borde);
    box-shadow: 0 -6px 20px rgba(8, 51, 38, .1);
    /* El hueco del indicador de inicio en los iPhone. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .barra-movil__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* Alto de dedo, y la línea de arriba marca cuál está abierta. */
    min-height: calc(var(--alto-barra) - 3px);
    padding: 5px 4px 6px;
    border-top: 3px solid transparent;
    color: var(--texto-medio);
    font-size: 10.5px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
  }

  .barra-movil__item svg {
    width: 18px; height: 18px;
    flex: none;
  }

  .barra-movil__item.es-actual {
    border-top-color: var(--naranja);
    color: var(--teal-base);
    font-weight: 800;
  }

  /* Para que la barra no tape el último renglón de ninguna página. Van
     seis píxeles de más para que el copyright no quede pegado al borde. */
  body { padding-bottom: calc(var(--alto-barra) + 6px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   Tarjeta «Tu zona» — la primera cosa de la portada
   --------------------------------------------------------------------------
   Sube sobre el borde de la foto para que se vea sin desplazar la página. No
   es decoración: es la consulta con la que llega casi todo el mundo, y estaba
   a tres pantallas de distancia, en otra página.
   ========================================================================== */

/* Se monta sobre el borde de abajo del hero: la franja de arriba queda
   sobre la foto y el resto sobre el fondo claro. El margen negativo mide
   cuánto se monta, así que no depende del alto de la tarjeta. */
.tarjeta-zona {
  position: relative;
  z-index: 4;
  margin-top: -26px;
  margin-bottom: 22px;
  padding: 11px 14px 12px;
  background: var(--papel);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(8, 51, 38, .18);
}

.tarjeta-zona__rotulo {
  margin: 0;
  color: var(--naranja-texto);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tarjeta-zona__titulo {
  margin: 3px 0 9px;
  color: var(--teal-base);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
}

.tarjeta-zona__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  border-radius: 8px;
  background: var(--ambar);
  color: var(--sobre-naranja);
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
}
.tarjeta-zona__boton:hover { background: var(--naranja-hover); text-decoration: none; }
.tarjeta-zona__boton svg { width: 17px; height: 17px; flex: none; }

/* En pantalla ancha no hace falta que ocupe todo el ancho del sitio: al lado
   del titular de portada queda una tarjeta, no una franja. */
/* La tarjeta es del teléfono y nada más.

   En una computadora el menú de arriba ya tiene «Rutas» a la vista, así que
   el atajo no agrega nada y le sacaba lugar al titular. Al esconderla sale
   de la grilla, y el hero vuelve solo a sus dos columnas de siempre:
   titular a la izquierda, secundarias a la derecha. */
@media (min-width: 861px) {
  .tarjeta-zona { display: none; }
}

/* ==========================================================================
   Teléfonos de pantalla corta
   --------------------------------------------------------------------------
   Un Android de 640 px de alto —de los que abundan— tiene menos aire que un
   teléfono nuevo. Se achica la foto y el titular para que la tarjeta «Tu
   zona» entre entera y el botón no quede cortado abajo del borde.
   ========================================================================== */

@media (max-width: 860px) and (max-height: 700px) {
  .destacado { padding-top: 120px; padding-bottom: 42px; }
  .destacado__titulo { font-size: 20px; }

  /* Mas abajo que la cabecera, que mide 61: si no, el cartel se le monta. */
  .portada__marca { padding-top: 84px; }

  .tarjeta-zona__titulo { font-size: 15px; margin-bottom: 8px; }
}