/* ==========================================================================
   Maqueta · Ilustre Municipalidad de Pica
   home.css — portada (estructura inspirada en sanpedrodelapaz.cl)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Banner principal
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--pm-navy-900);
}

.hero .carousel-item {
  height: clamp(420px, 60vh, 560px);
}

.hero-slide {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.hero-slide--blue {
  background: linear-gradient(100deg, #29BFCB 0%, #1E94B3 26%, #133B69 62%, var(--pm-navy-900) 100%);
}

.hero-slide--navy {
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(30, 148, 179, .5) 0%, transparent 60%),
    linear-gradient(100deg, #133B69 0%, var(--pm-navy-850) 55%, var(--pm-navy-950) 100%);
}

.hero-slide--sky {
  background: linear-gradient(100deg, #29BFCB 0%, #1E94B3 32%, var(--pm-blue-700) 64%, var(--pm-navy-850) 100%);
}

.hero-slide--gold {
  background: linear-gradient(100deg, #F7D138 0%, #F7D138 40%, #E5A81A 100%);
}

/* Banner con fotografía (uploads/banners/) */
.hero-slide--photo {
  background-position: center;
  background-size: cover;
}

/* Imagen con el texto ya diseñado: la lámina completa enlaza (flechas y puntos quedan encima) */
.hero-slide__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero-slide__link:focus-visible {
  outline: 3px solid var(--pm-gold-400);
  outline-offset: -6px;
}

/* Velo oscuro para que el texto se lea sobre la foto */
.hero-slide--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(8, 33, 66, .35) 0%, rgba(8, 33, 66, .6) 55%, rgba(8, 33, 66, .8) 100%);
}

.hero-slide__content {
  position: relative;
  z-index: 2;
  max-width: min(720px, 52vw);
  padding: 0 1.5rem 1.5rem;
}

.hero-slide__title {
  margin-bottom: 1.4rem;
  color: #fff;
  font-family: var(--pm-font-condensed);
  font-size: clamp(1.5rem, 2.4vw, 2.3rem);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: .015em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(4, 14, 30, .3);
}

.hero-slide__btn {
  --bs-btn-color: var(--pm-navy-900);
  --bs-btn-bg: var(--pm-gold-500);
  --bs-btn-border-color: var(--pm-gold-500);
  --bs-btn-hover-color: var(--pm-navy-900);
  --bs-btn-hover-bg: var(--pm-gold-400);
  --bs-btn-hover-border-color: var(--pm-gold-400);
  --bs-btn-active-color: var(--pm-navy-900);
  --bs-btn-active-bg: var(--pm-gold-600);
  --bs-btn-active-border-color: var(--pm-gold-600);
  --bs-btn-padding-x: 2.25rem;
  --bs-btn-padding-y: .75rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: 3px;
  transition: background-color .2s ease, translate .2s ease, box-shadow .2s ease;
}

.hero-slide__btn:hover {
  translate: 0 -2px;
  box-shadow: 0 10px 22px rgba(3, 12, 28, .3);
}

.hero-slide--gold .hero-slide__title {
  color: var(--pm-navy-900);
  text-shadow: none;
}

.hero-slide--gold .hero-slide__btn {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pm-navy-800);
  --bs-btn-border-color: var(--pm-navy-800);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pm-navy-700);
  --bs-btn-hover-border-color: var(--pm-navy-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--pm-navy-900);
  --bs-btn-active-border-color: var(--pm-navy-900);
}

/* Arte lineal decorativo */
.hero-art {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.hero-art--left {
  bottom: 5%;
  left: 2.5%;
  width: min(24vw, 360px);
  height: 52%;
  color: rgba(255, 255, 255, .9);
}

.hero-art--left .art-frame {
  inset: 40% 2% -6% -4%;
}

.hero-art--center {
  top: 9%;
  right: 27%;
  bottom: 9%;
  left: 27%;
  color: rgba(255, 255, 255, .07);
}

.hero-art--center .art-frame {
  --t: 6px;
  --l: 70px;
}

.hero-art--right {
  top: 6%;
  right: 3%;
  width: min(22vw, 330px);
  height: 44%;
  color: rgba(186, 214, 250, .34);
}

.hero-art--right .art-frame {
  inset: 36% -4% -12% 44%;
}

.hero-slide--navy .hero-art--left {
  color: rgba(246, 198, 91, .85);
}

.hero-slide--gold .hero-art--left {
  color: rgba(8, 33, 66, .72);
}

.hero-slide--gold .hero-art--center {
  color: rgba(8, 33, 66, .08);
}

.hero-slide--gold .hero-art--right {
  color: rgba(255, 255, 255, .55);
}

/* Controles e indicadores del carrusel */
.hero .carousel-control-prev,
.hero .carousel-control-next {
  z-index: 3;
  width: 6%;
  opacity: .8;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 1;
}

.hero .carousel-control-prev i,
.hero .carousel-control-next i {
  color: #fff;
  font-size: 2.6rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

.hero .carousel-indicators {
  z-index: 3;
  gap: .55rem;
  margin-bottom: 1.1rem;
}

.hero .carousel-indicators [data-bs-target] {
  width: 11px;
  height: 11px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: #fff;
  opacity: .55;
}

.hero .carousel-indicators .active {
  background-color: var(--pm-gold-500);
  box-shadow: 0 0 0 2px rgba(8, 33, 66, .45);
  opacity: 1;
}

@media (max-width: 1399.98px) {
  .hero-slide {
    --art-scale: .85;
  }
}

/* Tablet: el texto ocupa más ancho y el arte queda de fondo */
@media (max-width: 1199.98px) {
  .hero-slide {
    --art-scale: .7;
  }

  .hero-slide__content {
    max-width: 620px;
  }

  .hero-art--center {
    display: none;
  }

  .hero-art--left,
  .hero-art--right {
    opacity: .45;
  }
}

@media (max-width: 767.98px) {
  .hero-slide {
    --art-scale: .55;
  }

  .hero-slide__content {
    max-width: 100%;
  }

  .hero-art--left {
    width: 62vw;
    height: 40%;
    opacity: .28;
  }

  .hero-art--right,
  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    display: none;
  }
}

/* Noticia más reciente: texto legible y fotografía o afiche completo. */
.hero-news {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 2rem 8% 3.5rem;
  text-align: left;
}

.hero-news__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  max-width: 660px;
}

.hero-news__labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .9rem;
  font-size: .75rem;
  font-weight: 600;
}

.hero-news__type {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--pm-gold-400);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-news__latest {
  padding: .3rem .7rem;
  border: 1px solid rgba(249, 220, 103, .45);
  border-radius: 999px;
  background: rgba(249, 220, 103, .1);
  color: var(--pm-gold-400);
}

.hero-news__date {
  color: var(--pm-text-soft);
  font-size: .8rem;
}

.hero-news__title {
  display: -webkit-box;
  margin: .65rem 0 .85rem;
  overflow: hidden;
  color: #fff;
  font-family: var(--pm-font-header);
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.hero-news__excerpt {
  display: -webkit-box;
  margin: 0 0 1.25rem;
  overflow: hidden;
  color: var(--pm-text-soft);
  font-size: .9rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hero-news .hero-slide__btn {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
}

.hero-news__media {
  align-self: stretch;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(4, 14, 30, .25);
}

.hero-news__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-news--no-photo {
  grid-template-columns: 1fr;
}

@media (max-width: 767.98px) {
  .hero-news {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem 3rem;
  }

  .hero-news__media {
    position: absolute;
    inset: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    opacity: .16;
  }

  .hero-news__title {
    font-size: clamp(1.45rem, 5.5vw, 2rem);
  }
}

/* --------------------------------------------------------------------------
   2. Accesos directos (mosaico 6 + 6)
   -------------------------------------------------------------------------- */
.quick-access {
  padding: 1rem 0 3.5rem;
}

.quick-grid {
  --gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.quick-grid__item {
  display: flex;
  flex: 0 0 calc((100% - 5 * var(--gap)) / 6);
}

.quick-tile {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  min-height: 158px;
  padding: 1.25rem .9rem;
  border-radius: 8px;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  box-shadow: var(--pm-shadow-sm);
  transition: translate .25s ease, box-shadow .25s ease, filter .25s ease;
}

.quick-tile > i {
  font-size: 2.35rem;
  line-height: 1;
}

.quick-tile:hover {
  translate: 0 -5px;
  box-shadow: var(--pm-shadow);
  filter: brightness(1.07);
}

.quick-tile--navy {
  background: var(--pm-navy-800);
  color: var(--pm-gold-400);
  box-shadow: inset 0 0 0 1px rgba(41, 191, 203, .12), var(--pm-shadow-sm);
}

.quick-tile--navy-light {
  background: var(--pm-navy-700);
  color: var(--pm-gold-400);
}

.quick-tile--blue {
  background: var(--pm-blue-500);
  color: #fff;
}

.quick-tile--sky {
  background: var(--pm-blue-300);
  color: var(--pm-navy-900);
}

.quick-tile--cream {
  background: var(--pm-gold-300);
  color: var(--pm-navy-800);
}

.quick-tile--permit {
  background: linear-gradient(150deg, var(--pm-blue-600) 0%, var(--pm-navy-700) 100%);
  color: #fff;
}

.quick-tile--permit > i {
  color: var(--pm-gold-400);
  font-size: 3.2rem;
}

@media (max-width: 1199.98px) {
  .quick-grid__item {
    flex-basis: calc((100% - 3 * var(--gap)) / 4);
  }
}

@media (max-width: 767.98px) {
  .quick-grid {
    --gap: .75rem;
  }

  .quick-grid__item {
    flex-basis: calc((100% - 2 * var(--gap)) / 3);
  }

  .quick-tile {
    min-height: 124px;
    font-size: .86rem;
  }

  .quick-tile > i {
    font-size: 1.9rem;
  }
}

@media (max-width: 479.98px) {
  .quick-grid__item {
    flex-basis: calc((100% - var(--gap)) / 2);
  }
}

/* --------------------------------------------------------------------------
   3. Saludo del alcalde + enlaces destacados
   -------------------------------------------------------------------------- */
.mayor {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4rem, 8vw, 6.5rem);
  background:
    radial-gradient(50% 60% at 18% 40%, rgba(41, 191, 203, .28) 0%, transparent 70%),
    var(--pm-navy-850);
}

/* Trama de puntos dorados detrás del retrato */
.mayor::before {
  content: "";
  position: absolute;
  top: 3rem;
  left: 0;
  width: min(46%, 640px);
  height: 70%;
  background: radial-gradient(rgba(247, 209, 56, .22) 1.2px, transparent 1.7px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 85%);
  pointer-events: none;
}

.mayor__inner {
  position: relative;
  z-index: 1;
}

.mayor__grid {
  display: grid;
  grid-template-columns: minmax(280px, 460px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: 1280px;
  margin-inline: auto;
}

/* Retrato: tarjeta de estudio con marco dorado desplazado y placa con el cargo */
.mayor-portrait {
  position: relative;
  margin: 0;
  padding: 0 22px 22px 0;
  perspective: 1200px;
}

.mayor-portrait__glow {
  position: absolute;
  inset: 8% 4% 0 -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 191, 203, .45) 0%, transparent 65%);
  filter: blur(24px);
}

.mayor-portrait__frame {
  position: absolute;
  inset: 22px 0 0 22px;
  border: 2px solid var(--pm-gold-500);
  border-radius: 28px;
  transition: translate 1s cubic-bezier(.2, .7, .2, 1) .45s, opacity .6s ease .45s;
}

.mayor-portrait__card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  background: linear-gradient(180deg, #f4f6fa 0%, #e2e8f1 100%);
  box-shadow: 0 30px 60px rgba(3, 12, 28, .5);
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: opacity .5s ease, transform .3s ease-out;
}

/* El telón se anima aquí y no en la tarjeta, para no recortar su sombra */
.mayor-portrait__media {
  width: 100%;
  height: 100%;
  clip-path: inset(0);
  transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) .1s;
}

/* Sombra inferior que asienta la placa sobre la foto */
.mayor-portrait__card::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(180deg, transparent, rgba(8, 33, 66, .5));
  pointer-events: none;
}

.mayor-portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  user-select: none;
  transition: scale 1.6s cubic-bezier(.2, .7, .2, 1);
}

.mayor-portrait__shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%);
  translate: -120% 0;
  pointer-events: none;
}

.mayor-portrait__plate {
  position: absolute;
  bottom: 56px;
  left: -18px;
  z-index: 2;
  display: grid;
  gap: .2rem;
  padding: .95rem 1.5rem .95rem 1.2rem;
  border-left: 4px solid var(--pm-gold-500);
  border-radius: 12px;
  background: rgba(8, 33, 66, .88);
  box-shadow: var(--pm-shadow);
  backdrop-filter: blur(8px);
  transition: opacity .7s ease .8s, translate .8s cubic-bezier(.2, .7, .2, 1) .8s;
}

.mayor-portrait__role {
  color: var(--pm-gold-400);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.2;
}

.mayor-portrait__period {
  color: var(--pm-text-soft);
  font-family: var(--pm-font-condensed);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Sin foto: silueta de maqueta */
.mayor-portrait--mock .mayor-portrait__card {
  background: linear-gradient(160deg, #1E94B3 0%, var(--pm-navy-800) 100%);
}

.mayor-portrait--mock .mayor-portrait__media {
  display: grid;
  place-items: end center;
}

.mayor-portrait__person {
  color: rgba(214, 229, 250, .25);
  font-size: clamp(200px, 26vw, 360px);
  line-height: .8;
}

.mayor-portrait .mock-tag {
  top: 1.25rem;
  left: 1.25rem;
}

/* Entrada: telón que sube, foto que se asienta, marco que se separa, placa y un destello.
   Solo con JavaScript y si el visitante no pidió menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .js .mayor-portrait:not(.is-visible) .mayor-portrait__card {
    opacity: 0;
  }

  .js .mayor-portrait:not(.is-visible) .mayor-portrait__media {
    clip-path: inset(100% 0 0 0);
  }

  .js .mayor-portrait:not(.is-visible) .mayor-portrait__img {
    scale: 1.15;
  }

  .js .mayor-portrait:not(.is-visible) .mayor-portrait__frame {
    opacity: 0;
    translate: -22px -22px;
  }

  .js .mayor-portrait:not(.is-visible) .mayor-portrait__plate {
    opacity: 0;
    translate: -28px 0;
  }

  .mayor-portrait.is-visible .mayor-portrait__shine {
    animation: mayor-shine 1.4s ease .95s both;
  }

  .mayor-portrait.is-visible:hover .mayor-portrait__shine {
    animation: mayor-shine-again 1.2s ease both;
  }

  .mayor-portrait.is-visible .mayor-portrait__frame {
    animation: mayor-float 7s ease-in-out 2s infinite;
  }
}

@keyframes mayor-shine {
  from {
    translate: -120% 0;
  }

  to {
    translate: 120% 0;
  }
}

@keyframes mayor-shine-again {
  from {
    translate: -120% 0;
  }

  to {
    translate: 120% 0;
  }
}

@keyframes mayor-float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 6px 6px;
  }
}

.mayor__content {
  max-width: 680px;
}

.mayor__name {
  margin-bottom: .35rem;
  color: var(--pm-gold-400);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1.08;
}

.mayor__role {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--pm-blue-300);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.mayor__text {
  margin-bottom: .6rem;
  color: var(--pm-text);
  font-size: 1rem;
  line-height: 1.7;
}

/* Trayectoria: línea de tiempo horizontal con hitos dorados */
.mayor-timeline {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--pm-line);
}

.mayor-timeline__title {
  margin-bottom: 1.1rem;
  color: var(--pm-gold-300);
  font-family: var(--pm-font-condensed);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mayor-timeline__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mayor-timeline__list::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pm-gold-500), rgba(247, 209, 56, .15));
}

.mayor-timeline__item {
  position: relative;
  padding-top: 1.75rem;
}

.mayor-timeline__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 3px solid var(--pm-gold-500);
  border-radius: 50%;
  background: var(--pm-navy-850);
}

.mayor-timeline__year {
  display: block;
  color: var(--pm-gold-400);
  font-family: var(--pm-font-condensed);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
}

.mayor-timeline__text {
  display: block;
  margin-top: .25rem;
  color: var(--pm-text-soft);
  font-size: .86rem;
  line-height: 1.5;
}

.mayor-timeline__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pm-gold-300);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mayor-timeline__link:hover {
  color: var(--pm-gold-400);
}

/* Franja de enlaces con ícono montado sobre la línea superior */
.featured-links {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: clamp(5rem, 9vw, 7.5rem);
  border-bottom: 1px solid var(--pm-line);
}

.featured-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 120px;
  padding: 4rem 1rem 1.25rem;
  border-top: 1px solid var(--pm-line);
  background: rgba(8, 33, 66, .35);
  color: var(--pm-gold-400);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color .25s ease;
}

.featured-link + .featured-link {
  border-left: 1px solid var(--pm-line);
}

.featured-link:hover {
  background: rgba(8, 33, 66, .6);
  color: var(--pm-gold-300);
}

.featured-link__icon {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 3px solid var(--pm-gold-500);
  border-radius: 28px;
  background: var(--pm-navy-850);
  color: var(--pm-gold-400);
  font-size: 2.3rem;
  transform: translate(-50%, -50%);
  transition: background-color .25s ease, color .25s ease, translate .25s ease;
}

.featured-link:hover .featured-link__icon {
  translate: 0 -4px;
  background: var(--pm-gold-500);
  color: var(--pm-navy-900);
}

.featured-link.is-highlight {
  color: #fff;
}

.featured-link.is-highlight .featured-link__icon {
  background: var(--pm-gold-500);
  color: var(--pm-navy-900);
  box-shadow: 0 0 0 6px rgba(247, 209, 56, .18);
}

@media (max-width: 1199.98px) {
  .mayor-timeline__list {
    grid-template-columns: 1fr;
    gap: .9rem;
  }

  .mayor-timeline__list::before {
    top: 0;
    bottom: 0;
    left: 8px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--pm-gold-500), rgba(247, 209, 56, .15));
  }

  .mayor-timeline__item {
    padding-top: 0;
    padding-left: 2.1rem;
  }

  .mayor-timeline__year {
    display: inline;
    margin-right: .5rem;
    font-size: 1.15rem;
  }

  .mayor-timeline__text {
    display: inline;
  }
}

@media (max-width: 991.98px) {
  .mayor__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .mayor-portrait {
    width: min(100%, 400px);
    margin-inline: auto;
  }

  .mayor-portrait__plate {
    left: -8px;
  }

  .mayor__content {
    margin-inline: auto;
  }

  .featured-links {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 4.5rem;
  }

  .featured-link:nth-child(3n + 1) {
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .featured-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-links .featured-link {
    border-left: 0;
  }

  .featured-links .featured-link:nth-child(even) {
    border-left: 1px solid var(--pm-line);
  }

  .featured-link {
    font-size: .92rem;
  }

  .featured-link__icon {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    font-size: 1.9rem;
  }
}

/* --------------------------------------------------------------------------
   4. Concejo Municipal
   -------------------------------------------------------------------------- */
.council__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(360px, 44vw, 580px);
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 50% 30%, rgba(41, 191, 203, .55) 0%, transparent 70%),
    linear-gradient(180deg, #1E94B3 0%, #133B69 60%, #082142 100%);
}

.council__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 16px);
}

/* "Foto grupal" hecha con siluetas en duotono (cabeza + torso) */
.council__people {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: flex-end;
  transform: translateX(-50%);
}

.council__member {
  --size: clamp(96px, 12vw, 180px);
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--size) * var(--scale));
  height: calc(var(--size) * var(--scale) * 2.25);
  margin-inline: calc(var(--size) * -.09);
}

.council__member::before,
.council__member::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Cabeza */
.council__member::before {
  top: 0;
  width: 40%;
  aspect-ratio: 1 / 1.18;
  border-radius: 50%;
  background: linear-gradient(180deg, #c9f0f4 0%, #8fdde5 100%);
}

/* Torso */
.council__member::after {
  top: 23%;
  bottom: 0;
  width: 100%;
  border-radius: 46% 46% 0 0 / 17% 17% 0 0;
  background: linear-gradient(180deg, #29BFCB 0%, #1E94B3 45%, #133B69 100%);
  box-shadow: 0 -2px 14px rgba(8, 33, 66, .28);
}

.council__photo .mock-tag {
  top: 1.5rem;
  left: 1.5rem;
}

/* Original de alta resolución; el encuadre conserva las siete cabezas. */
.council__photo--real {
  user-select: none;
}

.council__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  transition: filter .3s ease;
}

.council__photo--real::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(8, 33, 66, .16) 100%);
  pointer-events: none;
  transition: opacity .3s ease;
}

.council__photo.is-highlighting .council__img {
  filter: grayscale(1) brightness(.68);
}

.council__photo.is-highlighting::after {
  opacity: 0;
}

.council__hotspots {
  position: absolute;
  z-index: 2;
  visibility: hidden;
  pointer-events: none;
}

.council__hotspots.is-ready {
  visibility: visible;
}

.council__spotlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.council__photo.is-highlighting .council__spotlight {
  opacity: 1;
}

.council__hotspot {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  clip-path: var(--member-outline);
  cursor: pointer;
  pointer-events: auto;
}

.council__hotspot:focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .council__img,
  .council__spotlight,
  .council__photo--real::after {
    transition: none;
  }
}

.council__actions {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 100px;
  left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  pointer-events: none;
}

.council__hint {
  margin: 0;
  padding: .45rem .8rem;
  border-radius: 6px;
  background: rgba(8, 33, 66, .85);
  color: #fff;
  font-size: .85rem;
  text-align: center;
}

.council__hint i {
  margin-right: .35rem;
  color: var(--pm-gold-400);
}

.council__cta {
  position: relative;
  z-index: 2;
  padding: 1rem 4rem;
  border: 1px solid rgba(249, 217, 141, .3);
  border-radius: 10px;
  background: var(--pm-navy-800);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: var(--pm-shadow);
  pointer-events: auto;
  transition: background-color .2s ease, color .2s ease, translate .2s ease;
}

.council__cta:hover {
  translate: 0 -2px;
  background: var(--pm-navy-900);
  color: var(--pm-gold-300);
}

.council__cta i {
  margin-left: .5rem;
}

.council__band {
  padding-bottom: 2.5rem;
  background: linear-gradient(90deg, var(--pm-navy-900) 0%, var(--pm-navy-800) 35%, var(--pm-blue-600) 100%);
}

.council__cards {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--bs-gutter-y) - 70px);
}

.highlight-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  height: 100%;
  min-height: 168px;
  padding: 1.5rem;
  border-radius: 8px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  box-shadow: var(--pm-shadow);
  transition: translate .25s ease, box-shadow .25s ease;
}

.highlight-card > i {
  font-size: 2.4rem;
  line-height: 1;
}

.highlight-card:hover {
  translate: 0 -5px;
}

.highlight-card--navy {
  background: var(--pm-navy-700);
  color: var(--pm-gold-400);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.highlight-card--gold {
  background: var(--pm-gold-500);
  color: var(--pm-navy-900);
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .council__actions {
    bottom: 84px;
  }
}

@media (max-width: 575.98px) {
  .council__photo {
    height: 400px;
  }

  .council__cta {
    padding: .65rem 1.2rem;
    font-size: .8rem;
  }

  .council__actions {
    bottom: 50px;
    gap: .4rem;
  }

  .council__hint {
    padding: .3rem .5rem;
    font-size: .65rem;
  }

  .council__cards {
    margin-top: calc(-1 * var(--bs-gutter-y) - 36px);
  }

  /* Con foto real, cuadro más ancho que alto para que se vean todos los integrantes */
  .council__photo--real {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .council__img {
    object-position: center 30%;
  }
}

/* --------------------------------------------------------------------------
   5. Noticias "Pica al Día"
   -------------------------------------------------------------------------- */
.news {
  padding: 1rem 0 4rem;
}

.news-header {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--pm-shadow-sm);
}

.news-header__intro {
  padding: 1.4rem 2rem;
  background: linear-gradient(90deg, var(--pm-navy-800) 0%, var(--pm-navy-600) 55%, var(--pm-blue-600) 100%);
}

.news-header__title {
  margin: 0 0 .25rem;
  color: var(--pm-gold-400);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight: 800;
}

.news-header__text {
  max-width: 820px;
  margin: 0;
  color: var(--pm-text);
  font-size: 1rem;
  line-height: 1.55;
}

.news-header__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  padding: 1rem 2.5rem;
  background: var(--pm-navy-800);
  color: var(--pm-gold-400);
  font-size: 1.15rem;
  font-weight: 700;
  transition: background-color .2s ease;
}

.news-header__link i {
  font-size: 1.7rem;
  transition: translate .2s ease;
}

.news-header__link:hover {
  background: var(--pm-navy-700);
  color: var(--pm-gold-300);
}

.news-header__link:hover i {
  translate: 6px 0;
}

/* Las tarjetas de noticia (.news-card) están en news.css: también las usa /noticias */

@media (max-width: 767.98px) {
  .news-header {
    grid-template-columns: 1fr;
  }

  .news-header__intro {
    padding: 1.25rem 1.25rem;
  }

  .news-header__link {
    padding: 1rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   6. Números de emergencia
   -------------------------------------------------------------------------- */
.emergency {
  padding: 3.5rem 0 4.5rem;
}

/* Todos en una fila desde xl; antes, la última fila queda centrada */
@media (min-width: 1200px) {
  .emergency__grid > .col {
    width: calc(100% / var(--emergency-count, 6));
  }
}

.emergency-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  height: 100%;
  min-height: 170px;
  padding: 1.25rem .5rem;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--pm-gold-400) 0%, var(--pm-gold-500) 100%);
  color: var(--pm-navy-900);
  text-align: center;
  box-shadow: var(--pm-shadow-sm);
  transition: translate .25s ease, box-shadow .25s ease;
}

.emergency-tile:hover {
  translate: 0 -5px;
  color: var(--pm-navy-900);
  box-shadow: var(--pm-shadow);
}

.emergency-tile > i {
  margin-bottom: .45rem;
  font-size: 2.3rem;
  line-height: 1;
}

.emergency-tile__name {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.emergency-tile__number {
  font-size: clamp(2.2rem, 3vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
}

.emergency-tile__number--local {
  font-size: clamp(.95rem, 1.25vw, 1.125rem);
  line-height: 1.3;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. Actividades de la semana
   -------------------------------------------------------------------------- */
.activities {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: linear-gradient(110deg, var(--pm-navy-900) 0%, #133B69 45%, #1E94B3 100%);
}

.activities__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.activities__pattern i {
  position: absolute;
  color: rgba(41, 191, 203, .09);
  font-size: 180px;
  line-height: 1;
}

.activities__pattern i:nth-child(1) { top: -4%; left: 44%; }
.activities__pattern i:nth-child(2) { top: 42%; left: 60%; font-size: 240px; }
.activities__pattern i:nth-child(3) { top: 4%; right: -2%; font-size: 260px; }
.activities__pattern i:nth-child(4) { bottom: -12%; left: 4%; font-size: 200px; }
.activities__pattern i:nth-child(5) { bottom: 6%; left: 30%; font-size: 140px; }
.activities__pattern i:nth-child(6) { right: 20%; bottom: -8%; font-size: 150px; }

.brand-art {
  position: relative;
  width: 210px;
  height: 150px;
  margin-bottom: 1.75rem;
  color: var(--pm-blue-300);
}

.brand-art i:nth-of-type(odd) {
  color: var(--pm-gold-400);
}

.activities__title {
  margin-bottom: 1rem;
  color: var(--pm-gold-400);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
}

.activities__text {
  max-width: 400px;
  margin: 0;
  color: var(--pm-text);
  font-size: 1.02rem;
  line-height: 1.6;
}

.activities__cta {
  margin-top: 1.5rem;
}

/* Visor tipo presentación */
.deck {
  padding: 1.1rem 1.1rem 1.25rem;
  border: 2px solid rgba(41, 191, 203, .5);
  border-radius: 22px;
  background: rgba(8, 33, 66, .35);
  box-shadow: var(--pm-shadow);
}

.deck__screen {
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  container-type: inline-size;
}

.deck__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: 0 0 6px 6px;
  background: #fff;
  color: #3c4043;
  font-size: .95rem;
}

.deck__bar button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #3c4043;
  font-size: 1.05rem;
  transition: background-color .15s ease;
}

.deck__bar button:hover {
  background: #eef2f7;
}

.deck__counter {
  min-width: 1.5rem;
  font-weight: 600;
  text-align: center;
}

.deck__total {
  color: #6b7280;
}

.deck__brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
  font-weight: 500;
}

.deck__brand i {
  color: var(--pm-gold-600);
  font-size: 1.15rem;
}

/* Las láminas (.poster) están en posters.css: también las usa el panel */

@media (max-width: 991.98px) {
  .activities__title,
  .activities__text {
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   8. Servicios municipales (franja de logos)
   -------------------------------------------------------------------------- */
.services-strip {
  padding: 2rem 0;
  border-top: 1px solid rgba(41, 191, 203, .12);
  background: var(--pm-navy-800);
}

.services-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-strip__item {
  display: flex;
  align-items: center;
  padding: .5rem clamp(1rem, 2.2vw, 2.25rem);
}

.services-strip__item + .services-strip__item {
  border-left: 1px solid rgba(41, 191, 203, .22);
}

.service-logo {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: #fff;
  opacity: .92;
  transition: opacity .2s ease, translate .2s ease;
}

.service-logo:hover {
  translate: 0 -2px;
  color: #fff;
  opacity: 1;
}

.service-logo__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 1.6rem;
}

.service-logo--solid .service-logo__icon {
  background: var(--pm-gold-500);
  color: var(--pm-navy-900);
}

.service-logo--outline .service-logo__icon {
  border: 2px solid var(--pm-blue-300);
  color: var(--pm-blue-300);
}

.service-logo--boxed .service-logo__icon {
  border-radius: 10px;
  background: var(--pm-blue-500);
  color: #fff;
}

.service-logo__name {
  font-family: var(--pm-font-condensed);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.service-logo__name small {
  display: block;
  margin-top: .25rem;
  color: var(--pm-text-soft);
  font-family: var(--pm-font);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .14em;
}

@media (max-width: 767.98px) {
  .services-strip__item {
    flex: 0 0 100%;
    justify-content: center;
  }

  .services-strip__item + .services-strip__item {
    border-left: 0;
  }
}

/* --------------------------------------------------------------------------
   9. Información y programas municipales
   -------------------------------------------------------------------------- */
.municipal-links {
  padding: 1.25rem 0 2.25rem;
  background: var(--pm-navy-900);
}

.municipal-links__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: .75rem;
}

.municipal-links__eyebrow {
  margin: 0 0 .35rem;
  color: var(--pm-gold-400);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.municipal-links__header h2 {
  margin: 0;
  color: #fff;
  font-family: var(--pm-font-header);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.municipal-links__controls {
  display: flex;
  flex: 0 0 auto;
  gap: .5rem;
}

.municipal-links__controls[hidden],
.municipal-links__footer[hidden] {
  display: none;
}

.municipal-links__controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: var(--pm-navy-800);
  color: #fff;
  font-size: 1.12rem;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.municipal-links__controls button:hover:not(:disabled) {
  border-color: var(--pm-gold-400);
  background: var(--pm-gold-400);
  color: var(--pm-navy-900);
}

.municipal-links__controls button:disabled {
  cursor: default;
  opacity: .35;
}

.municipal-links__track {
  display: flex;
  gap: 1rem;
  margin: 0 -.5rem;
  padding: .65rem .5rem .85rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-padding-inline: .5rem;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--pm-blue-300) var(--pm-navy-800);
  scrollbar-width: thin;
}

.municipal-links__track::-webkit-scrollbar {
  height: 5px;
}

.municipal-links__track::-webkit-scrollbar-track {
  border-radius: 5px;
  background: var(--pm-navy-800);
}

.municipal-links__track::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: var(--pm-blue-300);
}

.municipal-links__item {
  flex: 0 0 clamp(280px, 23.5vw, 320px);
  min-width: 0;
  scroll-snap-align: start;
}

.municipal-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  height: 120px;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 3px solid var(--pm-gold-500);
  border-radius: 14px;
  background: var(--pm-navy-800);
  color: var(--pm-text);
  box-shadow: 0 5px 12px rgba(3, 12, 28, .18);
  transition: translate .18s ease, box-shadow .18s ease;
}

.municipal-link::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, .07), transparent 58%);
  content: "";
  pointer-events: none;
}

.municipal-link:hover {
  color: var(--pm-text);
  box-shadow: 0 8px 18px rgba(3, 12, 28, .28);
  translate: 0 -2px;
}

.municipal-link:focus-visible {
  outline: 3px solid var(--pm-gold-400);
  outline-offset: 3px;
}

.municipal-link__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
}

.municipal-link__title {
  display: block;
  font-family: var(--pm-font-header);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.12;
}

.municipal-link__description {
  display: block;
  color: var(--pm-text-soft);
  font-size: .69rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Iconos vectoriales de la misma familia, en dorado institucional. */
.municipal-link__brand {
  display: grid;
  place-items: center;
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--pm-navy-900);
  color: var(--pm-gold-400);
}

.municipal-link__brand i {
  font-size: 1.9rem;
  line-height: 1;
}

.municipal-link__arrow {
  position: absolute;
  top: .55rem;
  right: .65rem;
  color: var(--pm-gold-400);
  font-size: .7rem;
  line-height: 1;
}

.municipal-links__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .6rem;
  color: var(--pm-text-soft);
  font-size: .67rem;
  line-height: 1.4;
}

.municipal-links__hint {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.municipal-links__hint i {
  color: var(--pm-gold-400);
  font-size: .9rem;
}

.municipal-links__position {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  .municipal-links {
    padding: 1rem 0 1.75rem;
  }

  .municipal-links__header {
    align-items: center;
    gap: .75rem;
  }

  .municipal-links__header h2 {
    font-size: 1.3rem;
  }

  .municipal-links__eyebrow {
    font-size: .58rem;
    letter-spacing: .1em;
  }

  .municipal-links__controls {
    gap: .35rem;
  }

  .municipal-links__item {
    flex-basis: 84%;
    max-width: 320px;
  }

  .municipal-link {
    gap: .5rem;
    padding: .9rem;
  }

  .municipal-link__title {
    font-size: 1.12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .municipal-links__track {
    scroll-behavior: auto;
  }

  .municipal-link,
  .municipal-links__controls button {
    transition: none;
  }

  .municipal-link:hover {
    translate: none;
  }
}

/* --------------------------------------------------------------------------
   10. Redes sociales: enlaces a los perfiles oficiales
   -------------------------------------------------------------------------- */
.social {
  --social-facebook: #1877F2;
  --social-instagram: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  --social-youtube: #FF0000;
  padding: 3rem 0 4rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(180deg, var(--pm-navy-900) 0%, var(--pm-navy-850) 100%);
}

.social__header {
  max-width: 720px;
  margin-bottom: 1.5rem;
}

.social__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .4rem;
  color: var(--pm-gold-400);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.social__title {
  margin: 0 0 .5rem;
  color: #fff;
  font-family: var(--pm-font-header);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.social__lead {
  margin: 0;
  color: var(--pm-text-soft);
}

/* Banners de cada red */
.social-networks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-network {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  height: 100%;
  padding: 1.1rem 2.2rem 1.1rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: var(--pm-navy-800);
  color: #fff;
  box-shadow: var(--pm-shadow-sm);
  transition: translate .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Franja inferior con el color de la red */
.social-network::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--brand, var(--pm-gold-400));
}

.social-network:hover {
  translate: 0 -4px;
  border-color: rgba(249, 220, 103, .55);
  color: #fff;
  box-shadow: var(--pm-shadow);
}

.social-network__icon {
  display: grid;
  flex: 0 0 52px;
  place-items: center;
  height: 52px;
  border-radius: 14px;
  background: var(--brand, var(--pm-navy-700));
  color: #fff;
  font-size: 1.55rem;
}

.social-network--facebook { --brand: var(--social-facebook); }
.social-network--instagram { --brand: var(--social-instagram); }
.social-network--youtube { --brand: var(--social-youtube); }

.social-network--tiktok {
  --brand: linear-gradient(90deg, #25F4EE, #FE2C55);
}

.social-network--tiktok .social-network__icon {
  background: #000;
  text-shadow: -1px -1px 0 #25F4EE, 1px 1px 0 #FE2C55;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.social-network__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.social-network__name {
  font-family: var(--pm-font-header);
  font-size: 1.08rem;
  font-weight: 700;
}

.social-network__handle {
  overflow: hidden;
  color: var(--pm-gold-400);
  font-size: .82rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-network__text {
  margin-top: .2rem;
  color: var(--pm-text-soft);
  font-size: .8rem;
}

.social-network__arrow {
  position: absolute;
  top: .8rem;
  right: .85rem;
  color: var(--pm-text-soft);
  font-size: .9rem;
  transition: color .2s ease;
}

.social-network:hover .social-network__arrow {
  color: var(--pm-gold-400);
}

@media (max-width: 1199.98px) {
  .social-networks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .social {
    padding: 2.25rem 0 2.75rem;
  }

  .social-networks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  /* En dos columnas el ícono va arriba, así el usuario (@MunicipioPica) cabe entero */
  .social-network {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: .9rem .9rem 1rem;
  }

  .social-networks > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .social-network__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.25rem;
  }

  .social-network__name {
    font-size: .95rem;
  }

  .social-network__handle {
    font-size: .74rem;
  }

  .social-network__text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-network {
    transition: none;
  }

  .social-network:hover {
    translate: none;
  }
}