/* Páginas de sector y de zona (diseno-web-*/).
   Usan la misma cabecera con su isla, el mismo fondo, la cinta, las promesas, el
   proceso, el pie y los efectos que la portada: scripts/generar-sectores.py los
   saca de index.html al generarlas. Aquí solo va lo que estas páginas tienen de
   distinto. */

/* La portada de una página interior es más baja: no hay maqueta que enseñar,
   pero sí un titular y un texto más largos. */
.portada--interior .portada__titulo { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.2rem); }
.portada--interior .portada__entrada { max-width: 54ch; }

.migas { margin-bottom: 1.2rem; font-size: 0.88rem; color: var(--texto-tenue); }
.migas a { color: var(--acento); }

.interior__lema {
  margin: 0 0 0.9rem;
  font-family: var(--tipo-titulo);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  font-weight: 600;
  color: var(--naranja-oscuro);
}
[data-tema="oscuro"] .interior__lema { color: var(--naranja-claro); }
[data-tema="claro"] .interior__lema { color: #8a5200; }

/* Franja de dos columnas: texto a un lado, pastillas de enlaces al otro */
.sector-pag__dos { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.sector-pag__dos p { color: var(--texto-suave); }
.sector-pag__dos .titular { margin-bottom: 1.2rem; }
.sector-pag__prueba a, .sector-pag__dos p a { color: var(--acento); font-weight: 600; }
.sector-pag__dos .titular__ojo { margin-bottom: 0.8rem; }

.sector-pag__lista { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.sector-pag__lista a {
  padding: 0.55rem 1rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pastilla);
  color: var(--texto);
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sector-pag__lista a:hover { border-color: var(--acento); color: var(--acento); background: var(--superficie); }

@media (max-width: 860px) {
  .sector-pag__dos { grid-template-columns: 1fr; }
}