/* Portada de Miguel con las mejoras de la de Campero (04/11/2026). Solo la cargan index.html y vista-previa-inicio.html
   (VERSION_PORTADA en generar-servicios.py). Las reglas .sd-* / .sg-* son las de campero/sitio/css/campero.css. */

/* ---------- Directo debajo del banner: los botones, uno abajo del otro, con el sorteo primero ---------- */
section.sd-arriba { padding: clamp(.9rem, 2.2vw, 1.4rem) 0 clamp(1.4rem, 3vw, 2.2rem); background: #FFFFFF; scroll-margin-top: 7rem; }
.sd-arriba .wrap { max-width: 68rem; }
.sd-banners { display: grid; gap: .8rem; }
.sd-banners .sv-sorteo, .sd-banners .in-candidato, .sd-banners .in-bache { margin: 0; }
/* "Trabajá en el nuevo municipio": el mismo botón que "Quiero ser candidato", en verde (como la Guardia Rural de Campero). */
.in-candidato.in-municipio { background: radial-gradient(120% 140% at 100% 0%, rgba(11,92,142,.6) 0%, rgba(11,92,142,0) 55%), #1E5B3A; }
.in-municipio .in-candidato-kicker { color: #BFEBCF; }
.in-municipio em { color: #1E5B3A; }

/* ---------- Los servicios: primero "Trabajo" y debajo los demás, con una línea que dice qué hace cada uno ---------- */
.in-necesitas { padding-top: clamp(1.6rem, 3.4vw, 2.4rem); border-top: 1px solid var(--borde); }
.sd-titulo { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0 0 .7rem; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rojo); }
.sd-titulo .ms { font-size: 1.2rem; }
.sd-mas { margin-top: 1.4rem; }
.sd-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem; }
.sg-opcion { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .85rem; padding: .95rem 1rem; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra-card); color: var(--texto); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.sg-opcion:hover, .sg-opcion:focus-visible { border-color: var(--azul); color: var(--texto); transform: translateY(-2px); }
.sg-opcion:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.sg-opcion .sv-servicio-icono { width: 2.6rem; height: 2.6rem; border-radius: 11px; }
.sg-opcion .sv-servicio-icono .ms { font-size: 1.45rem; }
.sg-opcion[data-alerta-boton] .sv-servicio-icono svg { width: 1.45rem; height: 1.45rem; }
.sg-opcion-txt { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.sg-opcion-txt b { font-size: 1.02rem; line-height: 1.25; color: var(--tinta); }
.sg-opcion-txt > span:last-child { flex-basis: 100%; font-size: .86rem; line-height: 1.42; }
.sg-opcion-txt > span:last-child b { font-size: inherit; color: var(--azul); }
.sg-ir { align-self: center; font-size: 1.35rem; color: var(--rojo); }
/* Trabajo, lo primero: tarjetas un poco más grandes. */
.sd-grilla-trabajo .sg-opcion { padding: 1.1rem; border-width: 2px; }
.sd-grilla-trabajo .sv-servicio-icono { width: 3rem; height: 3rem; border-radius: 13px; }
.sd-grilla-trabajo .sv-servicio-icono .ms { font-size: 1.65rem; }
.sd-grilla-trabajo .sg-opcion-txt b { font-size: 1.12rem; }
/* Etiqueta "Con IA" (resalta los servicios que usan inteligencia artificial) y "Miguel te avisa" de las alertas. */
.sg-ia { display: inline-flex; align-items: center; gap: .2rem; padding: .12rem .5rem .12rem .4rem; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #FFFFFF; background: linear-gradient(90deg, #6B4BC4, #0B5C8E); border-radius: 999px; }
.sg-ia .ms { font-size: .95rem; }
.sg-ia.sg-aviso { padding-left: .5rem; background: #E3F0FA; color: #0B5C8E; }
/* Alertas del clima con un alerta del SMN (las clases las pone js/cartel-alerta.js): borde, ícono y etiqueta del color del nivel. */
.sg-opcion.al-boton-amarillo { --al-onda: 224,176,0; border-color: #F2C200; }
.sg-opcion.al-boton-amarillo .sv-servicio-icono { background: #FFD23F !important; color: #2B2200; }
.sg-opcion.al-boton-amarillo .sg-aviso { background: #FFF1B8; color: #3D2E00; }
.sg-opcion.al-boton-naranja { --al-onda: 247,137,31; border-color: #F08A24; }
.sg-opcion.al-boton-naranja .sv-servicio-icono { background: #F7891F !important; color: #221000; }
.sg-opcion.al-boton-naranja .sg-aviso { background: #FFE3C7; color: #5A2A00; }
.sg-opcion.al-boton-rojo { --al-onda: 200,16,46; border-color: #C8102E; }
.sg-opcion.al-boton-rojo .sv-servicio-icono { background: #C8102E !important; color: #FFFFFF; }
.sg-opcion.al-boton-rojo .sg-aviso { background: #FDE4E7; color: #7A0A1C; }
.sg-opcion[class*="al-boton-"] .sv-servicio-icono { animation: latidoAl 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sg-opcion { transition: none; }
  .sg-opcion:hover { transform: none; }
  .sg-opcion[class*="al-boton-"] .sv-servicio-icono { animation: none; }
}
@media (max-width: 900px) { .sd-grilla { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .sd-banners, .sd-grilla { gap: .6rem; }
  .sd-mas { margin-top: 1.1rem; }
  .sg-opcion, .sd-grilla-trabajo .sg-opcion { padding: .85rem .9rem; }
}

/* ---------- El juego, al final de todo y sin llamar la atención (04/11/2026: "que no moleste") ---------- */
.in-juego-sec.in-juego-abajo { padding: clamp(1.2rem, 3vw, 2rem) 0 clamp(1.6rem, 3.4vw, 2.4rem); background: var(--fondo-suave); }
.in-juego-abajo .in-juego { box-shadow: none; }
.in-juego-abajo .in-juego em { animation: none; box-shadow: none; }