/* "Sumate a los vecinos que están arreglando Las Talitas": página /sumarme (.sm-*). Usa la paleta y los campos de estilos.css.
   Al cambiar este archivo, subir VERSION en generar-sumarme.py. */

/* ---------- Portada: tarjeta "Sumate" debajo de la de candidato (sus clases están en candidatos.css; acá, el fondo propio) ---------- */
.in-sumate-sec { padding: clamp(.6rem, 1.5vw, 1rem) 0 clamp(.2rem, 1vw, .6rem); }
.in-candidato.in-sumate { background: radial-gradient(120% 140% at 100% 0%, rgba(11,92,142,.75) 0%, rgba(11,92,142,0) 60%), var(--tinta); }
.in-sumate .in-candidato-kicker { color: #BFE3FF; }
.in-sumate em { color: var(--azul); }

/* ---------- Menú como en las páginas de servicios (mismas reglas que servicios.css, que esta página no carga) ---------- */
@media (max-width: 560px) {
  .nav-servicios { display: none; }
  #site-nav .nav-btn { padding: .5rem .75rem; font-size: .76rem; }
  #site-nav .nav-inicio { font-size: .74rem; }
  #site-nav .redes { display: none; }
}

/* ---------- Portada de la página ---------- */
.sm-hero { padding: clamp(1.8rem, 5vw, 3.4rem) 0 clamp(1.6rem, 4vw, 2.8rem); color: #FFFFFF;
  background: radial-gradient(80% 100% at 90% 0%, rgba(156,15,6,.45) 0%, rgba(156,15,6,0) 60%), linear-gradient(160deg, #0B5C8E 0%, var(--azul) 70%); }
.sm-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(1.4rem, 4vw, 3rem); max-width: 68rem; }
.sm-kicker { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; font-size: clamp(.9rem, 1.5vw, 1.02rem); font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #FFD9D4; }
.sm-hero h1 { margin: 0 0 .9rem; font-size: clamp(1.95rem, 4.8vw, 3.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: #FFFFFF; }
.sm-bajada { max-width: 34rem; margin: 0 0 1.4rem; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.65; color: #E3E8F6; }
.sm-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1.7rem; font-size: 1.02rem; font-weight: 700;
  color: var(--azul); text-decoration: none; background: #FFFFFF; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); transition: transform .15s ease; }
.sm-cta:hover, .sm-cta:focus-visible { color: var(--rojo); transform: translateY(-2px); }
.sm-cta:focus-visible { outline: 3px solid #FFD9D4; outline-offset: 2px; }
.sm-somos { margin: 1.1rem 0 0; font-size: .98rem; color: #E3E8F6; }
.sm-somos b { font-size: 1.25rem; color: #FFFFFF; }
.sm-somos.sm-apagado { opacity: .55; }
.sm-somos small { display: block; font-size: .78rem; }
.sm-hero-foto { margin: 0; justify-self: center; max-width: 24rem; }
.sm-hero-foto img { width: 100%; aspect-ratio: 9 / 7; object-fit: cover; border-radius: 22px; border: 3px solid #FFFFFF; box-shadow: 0 24px 50px -26px rgba(0,0,0,.7); }
.sm-hero-foto figcaption { margin-top: .6rem; font-size: .92rem; font-style: italic; text-align: center; color: #E3E8F6; }
.sm-hero-foto figcaption b { display: block; font-size: .8rem; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #FFD9D4; }

/* ---------- Formulario ---------- */
.sm-sec { padding: clamp(1.6rem, 4vw, 2.6rem) 0 clamp(2.5rem, 6vw, 4rem); background: var(--fondo-suave); scroll-margin-top: 7rem; }
.sm-caja { max-width: 46rem; margin: 0 auto; background: #FFFFFF; border: 1px solid var(--borde); border-radius: 22px; box-shadow: 0 18px 40px -28px rgba(16,32,61,.55); overflow: hidden; scroll-margin-top: 7rem; }
.sm-form { gap: 1.5rem; }
.sm-grupo { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.sm-grupo legend { float: left; width: 100%; margin: 0 0 .1rem; padding: 0; font-size: 1.25rem; font-weight: 800; color: var(--tinta); }
.sm-grupo legend small { display: block; font-size: .82rem; font-weight: 600; color: var(--texto-2); }
.sm-grupo legend + * { clear: left; }

/* La escalera: cada forma de sumarse es una tarjeta para marcar */
.sm-escalera { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: 2px; border-radius: 16px; }
.sm-escalera.invalido { outline: 2px solid var(--rojo); outline-offset: 2px; }
.sm-paso { position: relative; cursor: pointer; }
.sm-paso input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sm-paso > span { position: relative; display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: .8rem 2.2rem .85rem .95rem;
  background: var(--fondo-input); border: 2px solid var(--borde-2); border-radius: 14px; transition: border-color .15s ease, background .15s ease; }
.sm-paso > span::after { content: ""; position: absolute; top: .75rem; right: .75rem; width: 1.15rem; height: 1.15rem; border: 2px solid var(--borde-2); border-radius: 6px; background: #FFFFFF; }
.sm-paso em, .sm-candidato em { align-self: flex-start; padding: .1rem .55rem; font-size: .7rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rojo); background: #FBEAE8; border-radius: 999px; }
.sm-paso b { font-size: .97rem; line-height: 1.3; color: var(--tinta); }
.sm-paso small { font-size: .8rem; line-height: 1.4; color: var(--texto-2); }
.sm-paso input:checked + span { border-color: var(--azul); background: #F1F0FA; box-shadow: inset 0 0 0 1px var(--azul); }
.sm-paso input:checked + span::after { content: "✓"; display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #FFFFFF; background: var(--azul); border-color: var(--azul); }
.sm-paso input:focus-visible + span { outline: 2px solid rgba(41,37,70,.5); outline-offset: 2px; }
.sm-candidato { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; padding: .75rem .95rem; text-decoration: none;
  border: 2px dashed var(--borde-2); border-radius: 14px; color: var(--tinta); }
.sm-candidato b { font-size: .97rem; }
.sm-candidato > span { margin-left: auto; font-weight: 800; color: var(--rojo); }
.sm-candidato:hover, .sm-candidato:focus-visible { border-color: var(--azul); color: var(--tinta); }

.sm-acepto { background: #FFFFFF; border-color: var(--azul); }
.check-caja.invalido { border-color: var(--rojo); background: #FFF7F6; }
.sm-enviar { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: 1rem 1.4rem; font: inherit; font-size: 1.08rem; font-weight: 700;
  color: #FFFFFF; background: var(--grad); border: 0; border-radius: 999px; cursor: pointer; }
.sm-enviar:hover, .sm-enviar:focus-visible { filter: brightness(1.08); }
.sm-enviar:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.sm-enviar:disabled { opacity: .7; cursor: progress; }
.sm-todos { margin: -.6rem 0 0; font-size: .85rem; font-weight: 600; text-align: center; color: var(--label); }
.sm-trabajo { margin: 0; padding-top: .9rem; font-size: .85rem; text-align: center; color: var(--texto-2); border-top: 1px solid var(--borde); }

/* ---------- Gracias ---------- */
.sm-exito { padding: 2.4rem clamp(1.4rem, 4vw, 2.4rem); text-align: center; outline: none; }
.sm-exito-icono { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 1rem; font-size: 2.1rem; color: #FFFFFF; background: var(--grad); border-radius: 50%; }
.sm-exito h2 { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 800; color: var(--tinta); }
.sm-exito p { max-width: 32rem; margin: 0 auto .6rem; font-size: .95rem; color: var(--texto-2); }
.sm-exito .sm-exito-grupo { font-size: 1.05rem; font-weight: 700; color: var(--azul); }
.sm-exito .sm-exito-nota { margin-top: 1rem; padding: .75rem .9rem; font-size: .88rem; background: var(--fondo-suave); border-radius: 12px; }
.sm-exito-botones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem; margin-top: 1.2rem; }
.sm-exito .sm-cta { color: #FFFFFF; background: var(--verde); }
.sm-exito .sm-cta:hover, .sm-exito .sm-cta:focus-visible { color: #FFFFFF; }
.sm-bache { padding: .8rem 1.3rem; font-size: .92rem; }
.sm-volver { flex-basis: 100%; font-size: .88rem; }

@media (max-width: 760px) {
  .sm-hero-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  /* En el celular la foto es una franja, para que el título y el botón entren en la primera pantalla. */
  .sm-hero-foto { order: -1; max-width: none; width: 100%; }
  .sm-hero-foto img { height: 9.5rem; aspect-ratio: auto; border-radius: 18px; }
  .sm-hero-foto figcaption { display: none; }
  .sm-cta { width: 100%; }
  .sm-escalera { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-cta, .sm-paso > span { transition: none; }
}