/* Landing /interactive/ayuntamientos/ */
.hero { padding: 48px 0 8px; }
.hero-rejilla { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.hero h1 { color: var(--berenjena); }
.hero-figura { margin: 0; }
.hero-figura img { border-radius: var(--radio); border: 3px solid var(--violeta); box-shadow: var(--sombra); }
.hero-figura figcaption { font-family: var(--f-titulo); font-size: .85rem; color: var(--berenjena-suave); text-align: right; margin-top: 8px; }
@media (max-width: 900px) {
  .hero { padding-top: 32px; }
  .hero-rejilla { grid-template-columns: 1fr; gap: 28px; }
}

.rasgos { list-style: none; margin: 40px 0 0; padding: 24px 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(3, 1fr); }
.rasgos li { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--f-titulo); font-weight: 500; }
.rasgos li + li { border-left: 1px solid var(--linea); }
.rasgos .icono { width: 34px; height: 34px; }
@media (max-width: 640px) {
  .rasgos { grid-template-columns: 1fr; gap: 14px; }
  .rasgos li { justify-content: flex-start; }
  .rasgos li + li { border-left: 0; }
}

/* Caso Mataró */
.caso-rejilla { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.caso-sub { font-size: 1.2rem; color: var(--berenjena-suave); }
.datos { list-style: none; padding: 0; margin: 0 0 1.2em; display: flex; flex-wrap: wrap; gap: 8px; }
.datos li { font-family: var(--f-titulo); font-weight: 600; font-size: .92rem; background: var(--blanco); border-radius: 999px; padding: 6px 14px; }
.video { margin: 0; position: relative; }
.video img, .video video { width: 100%; height: auto; border-radius: var(--radio); box-shadow: var(--sombra); background: var(--berenjena); }
.video figcaption { font-family: var(--f-titulo); font-size: .85rem; color: var(--berenjena-suave); margin-top: 8px; }
.sello { position: absolute; top: 12px; right: 12px; z-index: 1; background: var(--blanco); color: var(--berenjena); font-family: var(--f-titulo); font-size: .82rem; font-weight: 600; padding: 5px 12px; border-radius: 8px; box-shadow: var(--sombra); }
@media (max-width: 900px) { .caso-rejilla { grid-template-columns: 1fr; gap: 28px; } }

.galeria { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.galeria figure { margin: 0; }
.galeria img { border-radius: 10px; width: 100%; height: auto; }
.galeria figcaption { font-family: var(--f-titulo); font-size: .92rem; margin-top: 6px; }
.galeria-nota { margin-top: 12px; }
@media (max-width: 860px) { .galeria { grid-template-columns: 1fr 1fr; } }

/* A medida */
.decisiones article { text-align: center; padding: 0 8px; }
.decisiones .icono { display: block; margin: 0 auto 12px; width: 44px; height: 44px; }
.decisiones p { color: var(--berenjena-suave); font-size: 1rem; }
.centrada { text-align: center; max-width: 46em; margin: 24px auto 0; }

.aula { margin-top: 48px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: var(--violeta-claro); border-radius: var(--radio); padding: 20px 32px 0 32px; }
.aula img { height: 170px; width: auto; align-self: end; }
.aula h3 { font-size: 1.35rem; }
.aula p { margin: 0 0 20px; color: var(--berenjena-suave); }
.aula .icono { width: 52px; height: 52px; }
@media (max-width: 700px) {
  .aula { grid-template-columns: 1fr; padding: 24px 24px 0; }
  .aula .icono { display: none; }
  .aula img { order: 2; height: 140px; justify-self: center; }
}

/* Proceso */
.proceso { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: paso; }
.proceso li { text-align: center; position: relative; }
.paso-cabeza { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; }
.paso-cabeza h3 { margin: 0; }
.num { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--violeta); color: #fff; font-family: var(--f-titulo); font-weight: 600; }
.proceso .icono { display: block; margin: 0 auto 10px; width: 40px; height: 40px; }
.proceso p { color: var(--berenjena-suave); font-size: 1rem; margin: 0; }
.proceso li + li::before { content: "›"; position: absolute; left: -22px; top: 6px; font-size: 2rem; color: var(--berenjena-suave); font-family: var(--f-titulo); }
@media (max-width: 860px) {
  .proceso { grid-template-columns: 1fr 1fr; }
  .proceso li + li::before { display: none; }
}
@media (max-width: 480px) { .proceso { grid-template-columns: 1fr; } }

/* Cierre */
.cierre { background: var(--coral); color: var(--berenjena); text-align: center; padding: 80px 0 96px; position: relative; overflow: hidden; }
.cierre .wrap { position: relative; z-index: 1; max-width: 620px; }
.cierre-ilustraciones img { position: absolute; bottom: 0; width: min(32vw, 460px); height: auto; pointer-events: none; }
.cierre-izq { left: 0; }
.cierre-der { right: 0; }
/* Pantallas estrechas: las ilustraciones pasan debajo del texto, una al lado de la otra */
@media (max-width: 900px) {
  .cierre { padding: 64px 0 0; }
  .cierre-ilustraciones { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 32px; }
  .cierre-ilustraciones img { position: static; width: 50%; }
}
.cierre h2 { color: var(--berenjena); max-width: 16em; margin: 0 auto .5em; }
.cierre p { font-size: 1.15rem; }
.cierre .btn { margin-top: 8px; min-width: 260px; }
.cierre-mail { margin-top: 20px; font-family: var(--f-titulo); }
.cierre-mail a { color: var(--berenjena); font-weight: 600; }
@media (max-width: 560px) {
  .rejilla-4.decisiones { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .decisiones p { font-size: .95rem; }
}