/* ============================================================================
   MUNICIPALIDAD DE RÍO BRAVO — Sistema de Diseño "Clay-Glass Cívico"
   Claymorfismo (geometría y profundidad) + Minimalismo (restricción y aire)
   Paleta: azul institucional energético + cian + oro cívico
   Accesibilidad: contraste AA/AAA, foco visible, targets 44px, reduced-motion
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Superficies — nunca blanco puro de fondo (regla clay) */
  --bg:          #EDF2F9;
  --bg-alt:      #E4EBF5;
  --surface:     #FFFFFF;
  --navy:        #0B1B33;
  --navy-2:      #112547;

  /* Tinta */
  --ink:         #0B1220;   /* 17:1 sobre --bg  */
  --ink-2:       #3E4B63;   /*  8:1 sobre --bg  */
  --ink-3:       #5C6B85;   /* 4.9:1 sobre --bg */
  --on-dark:     #F2F6FC;
  --on-dark-2:   #B9C7DC;

  /* Marca */
  --brand:       #0B63CE;   /* blanco encima = 5.7:1 */
  --brand-700:   #084A9C;
  --brand-300:   #7DB2F0;
  --brand-50:    #E8F1FD;

  /* Energía */
  --accent:      #0FA3A3;
  --accent-ink:  #0B6E6E;
  --gold:        #F5B301;
  --gold-ink:    #8A6100;

  --danger:      #DC2626;
  --ok:          #10B981;

  /* Bordes */
  --line:        #D8E2F0;
  --line-soft:   #E7EDF6;

  /* Radios — claymorfismo: 16-32px, anidados */
  --r-xl: 32px; --r-lg: 24px; --r-md: 18px; --r-sm: 12px; --r-pill: 999px;

  /* Sombras clay: luz arriba-izquierda, sombra fría abajo-derecha */
  --clay-out:
     10px 12px 26px rgba(11, 27, 51, .10),
    -8px  -8px 20px rgba(255, 255, 255, .92);
  --clay-in:
    inset  1px  1px 2px rgba(255, 255, 255, .95),
    inset -2px -3px 7px rgba(11, 99, 206, .07);
  --clay-out-sm:
     6px 7px 16px rgba(11, 27, 51, .09),
    -5px -5px 13px rgba(255, 255, 255, .90);
  --clay-press:
    inset  4px  4px 10px rgba(11, 27, 51, .13),
    inset -3px -3px  8px rgba(255, 255, 255, .85);

  /* Cristal */
  --glass-bg:   rgba(255, 255, 255, .12);
  --glass-brd:  rgba(255, 255, 255, .30);
  --glass-blur: blur(18px) saturate(150%);

  /* Espaciado */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px;

  /* Tipografía */
  --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Movimiento */
  --ease-clay: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms; --t: 240ms; --t-slow: 380ms;

  --header-h: 84px;
}

/* ------------------------------------------------------- 2. RESET Y BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lienzo ambiental: da al claymorfismo profundidad sin ruido visual */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52rem 42rem at  8% -8%,  rgba(11, 99, 206, .10), transparent 60%),
    radial-gradient(46rem 38rem at 100% 4%,  rgba(15, 163, 163, .09), transparent 62%),
    radial-gradient(40rem 34rem at 50% 108%, rgba(245, 179, 1, .08), transparent 60%);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-700); }

/* Foco visible SIEMPRE — nunca eliminar el anillo de foco */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--brand); color: #fff; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
  background: #C2D2E8;
  border-radius: var(--r-pill);
  border: 3px solid var(--bg-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-300); }

/* ------------------------------------------------- 3. MOVIMIENTO (WOW.js) */
/* Nunca ocultamos con visibility: si el JS no corre, el contenido se ve igual.
   WOW.js sólo se inicializa en escritorio en este proyecto. */
.wow, .fadeInUp, .fadeInLeft, .fadeInRight {
  animation-duration: .75s;
  animation-fill-mode: both;
  animation-timing-function: var(--ease-out);
}
.fadeInUp    { animation-name: fadeInUp; }
.fadeInLeft  { animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; }

@keyframes fadeInUp    { from { opacity: 0; transform: translate3d(0, 34px, 0);  } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft  { from { opacity: 0; transform: translate3d(-34px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(34px, 0, 0);  } to { opacity: 1; transform: none; } }

/* --------------------------------------------------- 4. LAYOUT / SECCIONES */
.section { position: relative; }
.section-sm  { padding-block: var(--sp-6); }
.section-md  { padding-block: var(--sp-7); }
.section-xl  { padding-block: calc(var(--sp-7) + 32px); }
.section-first { padding-top: var(--sp-7); }
.section-last  { padding-bottom: var(--sp-7); }
.section-bottom-70 { padding-bottom: 70px; }
.section-fluid { padding-inline: clamp(16px, 4vw, 56px); }
.bg-default { background: transparent; }

.container, .container-fluid { width: 100%; margin-inline: auto; }
.container { max-width: 1200px; padding-inline: 20px; }
.container-fluid { max-width: 1560px; padding-inline: 20px; }

.row-30 { --bs-gutter-x: 30px; --bs-gutter-y: 30px; }
.row-45 { --bs-gutter-x: 40px; --bs-gutter-y: 40px; }
.row-14 { --bs-gutter-x: 14px; --bs-gutter-y: 14px; }
.row-10 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }

.context-dark, .context-dark p, .context-dark li { color: var(--on-dark); }
.context-dark h1, .context-dark h2, .context-dark h3,
.context-dark h4, .context-dark h5 { color: #fff; }

.text-width-large { max-width: 60ch; margin-inline: auto; }
.text-width-extra-small { max-width: 42ch; }
.offset-top-lg-24 { margin-top: 24px; }
.text-gray-500 { color: var(--ink-3); }
.luces { display: none; }

/* ----------------------------------------------------------- 5. TIPOGRAFÍA */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-2);
  text-wrap: balance;
  /* Red de seguridad: "proyectos/actividades" no cabe en una línea a 320px
     y sin esto se salía del contenedor. */
  overflow-wrap: break-word;
  word-break: break-word;
}
h1 { font-size: clamp(1.9rem, 5.2vw, 3.9rem);   font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.7rem);   font-weight: 700; margin-bottom: var(--sp-4); }
h3 { font-size: clamp(1.4rem, 2.6vw, 2rem);     font-weight: 600; }
h4 { font-size: clamp(1.12rem, 1.7vw, 1.35rem); font-weight: 600; }
h5 { font-size: 1.05rem; font-weight: 600; }
p  { margin: 0 0 var(--sp-2); }

/* Subrayado clay bajo los títulos de sección.
   Por defecto sigue al texto (izquierda); se centra sólo donde la sección
   está centrada, para que nunca quede "flotando" lejos del título. */
.section > .container > h2::after,
.section > .container-fluid > h2::after {
  content: "";
  display: block;
  width: 74px;
  height: 7px;
  margin: 18px 0 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--accent));
  box-shadow: 0 3px 8px rgba(11, 99, 206, .32);
}
.section.text-center > .container > h2::after,
.section.text-center > .container-fluid > h2::after,
#team > .container-fluid > h2::after {
  margin-inline: auto;
}

/* Salvavidas de maquetación: en el HTML hay una .col-* suelta (el bloque
   "Información") que quedó fuera de su .container por unos </div> de más.
   Sin esto se pega al borde de la ventana. */
.section > [class*="col-"] {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.quote-jean {
  max-width: 72ch;
  margin: 0 auto var(--sp-5);
  font-size: 1.06rem;
  color: var(--ink-2);
  text-align: center;
}

.title-decoration-lines-left { position: relative; padding-top: var(--sp-2); }
.title-decoration-lines-left::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 56px; height: 6px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.title-classic { margin-bottom: var(--sp-4); }
.title-classic-title h3 { margin-bottom: var(--sp-1); }
.title-classic-text p { color: var(--ink-3); max-width: 62ch; }

.heart { display: inline-block; animation: latido 1.5s infinite; }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* ------------------------------------------------------------- 6. BOTONES */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;                 /* target táctil ≥ 44px */
  padding: 14px 30px;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  background: var(--brand);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 10px 22px rgba(11, 99, 206, .28),
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -3px 8px rgba(0, 0, 0, .16);
  transition:
    transform var(--t) var(--ease-clay),
    box-shadow var(--t) var(--ease-out),
    background-color var(--t);
}
.button-primary {
  background: linear-gradient(135deg, #1479E8 0%, var(--brand) 55%, var(--brand-700) 100%);
}
.button:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow:
    0 16px 30px rgba(11, 99, 206, .34),
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -3px 8px rgba(0, 0, 0, .16);
}
/* Squish clay al presionar */
.button:active { transform: translateY(1px) scale(.97); box-shadow: var(--clay-press); }

.button-lg { min-height: 56px; padding: 17px 34px; font-size: 1rem; }
.button-md { min-height: 46px; padding: 12px 24px; }
.button-block { display: flex; width: 100%; }

.button-default-outline {
  color: var(--brand-700);
  background: var(--surface);
  box-shadow: var(--clay-out-sm), inset 0 0 0 2px var(--line);
}
.button-default-outline:hover {
  color: var(--brand-700);
  box-shadow: var(--clay-out-sm), inset 0 0 0 2px var(--brand-300);
}

/* Barrido de luz (variantes ujarak / pipaluk del template) */
.button-ujarak::after,
.button-pipaluk::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform var(--t-slow) var(--ease-out);
}
.button-ujarak:hover::after,
.button-pipaluk:hover::after { transform: translateX(110%); }

.button-icon .icon { font-size: 1rem; line-height: 1; }
.button-icon-right { flex-direction: row-reverse; }

/* -------------------------------------------------------------- 7. NAVBAR */
.rd-navbar-wrap { position: relative; z-index: 1000; }

.rd-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(237, 242, 249, .72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  transition: box-shadow var(--t), background-color var(--t);
}
.rd-navbar.rd-navbar--is-stuck {
  background: rgba(237, 242, 249, .88);
  box-shadow: 0 10px 30px rgba(11, 27, 51, .10);
}
.rd-navbar-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: 1560px;
  min-height: var(--header-h);
  margin-inline: auto;
  padding: 10px clamp(16px, 3vw, 40px);
}
.rd-navbar-panel { display: flex; align-items: center; gap: 14px; }
.rd-navbar-brand img { width: auto; max-height: 52px; }

/* Hamburguesa */
.rd-navbar-toggle {
  display: none;
  position: relative;
  width: 48px; height: 48px;
  padding: 0;
  background: var(--surface);
  border: 0;
  border-radius: var(--r-sm);
  box-shadow: var(--clay-out-sm);
  cursor: pointer;
}
.rd-navbar-toggle span,
.rd-navbar-toggle span::before,
.rd-navbar-toggle span::after {
  position: absolute;
  left: 50%;
  width: 22px; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--t) var(--ease-out), opacity var(--t);
}
.rd-navbar-toggle span { top: 50%; margin-top: -1px; }
.rd-navbar-toggle span::before { content: ""; top: -7px; }
.rd-navbar-toggle span::after  { content: ""; top:  7px; }
.rd-navbar-toggle.active span { background: transparent; }
.rd-navbar-toggle.active span::before { transform: translateX(-50%) translateY(7px)  rotate(45deg); }
.rd-navbar-toggle.active span::after  { transform: translateX(-50%) translateY(-7px) rotate(-45deg); }

.rd-navbar-main-element { display: flex; align-items: center; gap: var(--sp-3); }
.rd-navbar-nav-wrap { display: flex; align-items: center; gap: var(--sp-3); }

.rd-navbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0; padding: 0;
  list-style: none;
}
.rd-nav-item { position: relative; }
.rd-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  /* Sin esto "Nuestro Municipio" partía en dos líneas y la barra crecía a
     89px, desincronizándose de los 84px que reserva .page-header. */
  white-space: nowrap;
  transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.rd-nav-link:hover { color: var(--brand-700); background: rgba(255, 255, 255, .75); }
.rd-nav-item.active > .rd-nav-link {
  color: var(--brand-700);
  background: var(--surface);
  box-shadow: var(--clay-out-sm);
}

/* Desplegables Bootstrap en clave clay */
.rd-navbar .dropdown-menu {
  margin-top: 10px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(11, 27, 51, .14);
}
.rd-navbar .dropdown-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-sm);
}
.rd-navbar .dropdown-item:hover,
.rd-navbar .dropdown-item:focus { color: var(--brand-700); background: var(--brand-50); }

/* Página actual dentro de un desplegable. Sin esto Bootstrap pinta
   .dropdown-item.active con su azul #0d6efd, que no es el de la marca. */
.rd-navbar .dropdown-item.active,
.rd-navbar .dropdown-item.active:hover {
  color: var(--brand-700);
  background: var(--brand-50);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}

/* Secciones aún no publicadas (Blog, Alcalde, COMRED). Son <span>, no <a>:
   antes eran enlaces con `cursor: not-allowed`, que sólo cambia el puntero —
   seguían navegando y caían en el 404. */
.rd-navbar .dropdown-item.disabled {
  color: var(--ink-3);
  opacity: .62;
  cursor: not-allowed;
  pointer-events: none;
  background: transparent;
}

/* Redes en la barra */
.rd-navbar-share { position: relative; }
.rd-navbar-share-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}
.rd-navbar-share-list-item .icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  font-size: 1.05rem;
  color: var(--brand-700);
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: var(--clay-out-sm);
  transition: transform var(--t) var(--ease-clay), color var(--t-fast), background-color var(--t);
}
.rd-navbar-share-list-item .icon:hover {
  transform: translateY(-3px);
  color: #fff;
  background: var(--brand);
}
.rd-navbar-share.fl-bigmug-line-share27::before { display: none; }

.page-header { height: var(--header-h); }

/* ------------------------------------------------------- 8. HERO / SWIPER */
/* Layout base de Swiper (el bundle vive en js/core.min.js, versión 4/5 por
   las clases .swiper-container-horizontal / -vertical que emite).
   Sin esto .swiper-wrapper queda display:block, Swiper igualmente aplica
   translate3d(-750px,…) y las diapositivas se van fuera de pantalla. */
.swiper-container {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.swiper-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  transition-property: transform;
}
.swiper-container-vertical > .swiper-wrapper { flex-direction: column; }
.swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; }
.swiper-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  transition-property: transform;
}
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide { height: auto; }
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-slide-invisible-blank { visibility: hidden; }

.swiper-slider-classic {
  position: relative;
  height: clamp(560px, 88vh, 900px);
  overflow: hidden;
}
.swiper-slider-classic .swiper-wrapper { height: 100%; }
.swiper-slider-classic .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-position: center;
  background-size: cover;
}
/* Velo para garantizar contraste del texto sobre cualquier foto */
.swiper-slider-classic .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 27, 51, .58) 0%, rgba(11, 27, 51, .48) 45%, rgba(11, 27, 51, .74) 100%),
    linear-gradient(115deg, rgba(11, 99, 206, .34) 0%, transparent 55%);
}

/* Tarjeta de CRISTAL sobre la imagen — aquí el glassmorphism es correcto,
   porque hay un fondo rico detrás (requisito del efecto). */
.swiper-slide-caption {
  position: relative;
  z-index: 2;
  width: min(940px, calc(100% - 40px));
  margin-inline: auto;
  padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 60px);
  text-align: center;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-xl);
  box-shadow:
    0 24px 60px rgba(6, 16, 33, .38),
    inset 0 1px 0 rgba(255, 255, 255, .40);
}
.swiper-slide-caption .container { padding-inline: 0; }

/* Estado previo de las animaciones de caption.
   script.js marca cada [data-caption-animate] con .not-animated antes de
   lanzar su animación escalonada, pero esa clase no tenía CSS (venía del
   difunto css/style.css): el texto se veía a pantalla completa y acto seguido
   desaparecía para volver a entrar volando — ese era el salto raro al cambiar
   de diapositiva.

   Se acota a .swiper-container-horizontal/-vertical, que Swiper añade al
   inicializarse: si el JS no llega a correr, la clase nunca aplica y el texto
   se queda visible en lugar de invisible para siempre. Misma regla que en §6
   para .wow — nunca ocultar algo que dependa de que un script termine. */
.swiper-container-horizontal [data-caption-animate].not-animated,
.swiper-container-vertical   [data-caption-animate].not-animated { opacity: 0; }

.texto1 {
  color: #fff;
  margin-bottom: var(--sp-3);
  text-shadow: 0 2px 18px rgba(6, 16, 33, .45);
}
.swiper-slide-caption .text-width-large {
  margin-bottom: var(--sp-4);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: #EAF1FB;
}
.swiper-slide-caption .button { box-shadow: 0 14px 30px rgba(6, 16, 33, .40), inset 0 1px 0 rgba(255, 255, 255, .34); }

/* Paginación */
.swiper-pagination__module {
  position: absolute;
  right: clamp(16px, 4vw, 48px);
  bottom: clamp(20px, 5vh, 46px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  color: #fff;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-pill);
}
.swiper-pagination__fraction { font-family: var(--font-head); font-size: .82rem; font-weight: 600; letter-spacing: .06em; }
.swiper-pagination__fraction-divider { opacity: .55; margin-inline: 3px; }
.swiper-pagination__divider { width: 34px; height: 2px; background: rgba(255, 255, 255, .45); border-radius: 2px; }
.swiper-slider-classic .swiper-pagination { position: static; display: flex; gap: 8px; }
.swiper-slider-classic .swiper-pagination-bullet {
  width: 9px; height: 9px;
  background: rgba(255, 255, 255, .5);
  opacity: 1;
  border-radius: var(--r-pill);
  transition: width var(--t) var(--ease-out), background-color var(--t);
}
.swiper-slider-classic .swiper-pagination-bullet-active { width: 26px; background: var(--gold); }

/* -------------------------------------- 9. TARJETAS CLAY (Visión / Misión) */
.box-icon-modern {
  height: 100%;
  padding: clamp(24px, 3vw, 34px);
  text-align: left;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-out), var(--clay-in);
  transition: transform var(--t) var(--ease-clay), box-shadow var(--t) var(--ease-out);
}
.box-icon-modern:hover {
  transform: translateY(-6px);
  box-shadow: 14px 18px 38px rgba(11, 27, 51, .14), -8px -8px 20px rgba(255, 255, 255, .95), var(--clay-in);
}
.box-icon-modern > div > i {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-bottom: var(--sp-3);
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  border-radius: var(--r-md);
  box-shadow: 0 10px 20px rgba(11, 99, 206, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.box-icon-modern-big-title { margin-bottom: 10px; color: var(--ink); }
.box-icon-modern-decor {
  width: 44px; height: 5px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.box-icon-modern-text { color: var(--ink-2); text-align: justify; }

#services img { border-radius: var(--r-lg); box-shadow: var(--clay-out); }

/* -------------------------------------------- 10. PROYECTOS (Isotope grid) */
.isotope-filters { margin-bottom: var(--sp-5); }
.isotope-filters-toggle { display: none; }
.isotope-filters-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0; padding: 0;
  list-style: none;
}
.isotope-filters-list > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 22px;
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border-radius: var(--r-pill);
  box-shadow: var(--clay-out-sm);
  transition: transform var(--t) var(--ease-clay), color var(--t-fast), background-color var(--t), box-shadow var(--t);
}
.isotope-filters-list > li > a:hover { transform: translateY(-2px); color: var(--brand-700); }
.isotope-filters-list > li > a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  box-shadow: 0 10px 22px rgba(11, 99, 206, .30), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.thumbnail-classic {
  position: relative;
  height: 100%;
  overflow: hidden;
  text-align: left;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-out);
  transition: transform var(--t) var(--ease-clay), box-shadow var(--t) var(--ease-out);
}
.thumbnail-classic:hover { transform: translateY(-7px); box-shadow: 16px 20px 42px rgba(11, 27, 51, .16), -8px -8px 22px rgba(255, 255, 255, .95); }

.thumbnail-classic-figure { overflow: hidden; aspect-ratio: 6 / 5; background: var(--bg-alt); }
.thumbnail-classic-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.thumbnail-classic:hover .thumbnail-classic-figure img { transform: scale(1.06); }

.thumbnail-classic-caption { padding: clamp(20px, 2.4vw, 26px); }
.thumbnail-classic-title-wrap { position: relative; }
.thumbnail-classic-title { margin-bottom: 10px; font-size: 1.06rem; line-height: 1.35; }
.thumbnail-classic-title a { color: var(--ink); }
.thumbnail-classic-title a:hover { color: var(--brand); }
.thumbnail-classic-text { font-size: .94rem; color: var(--ink-3); margin: 0; }

/* Lupa de lightGallery: se superpone a la foto, no ocupa el flujo */
.thumbnail-classic-title-wrap > a.icon {
  position: absolute;
  right: 0; top: -74px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  border-radius: var(--r-pill);
  box-shadow: 0 10px 22px rgba(11, 27, 51, .28);
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-clay);
}
.thumbnail-classic:hover .thumbnail-classic-title-wrap > a.icon { opacity: 1; transform: scale(1); }
.thumbnail-classic-title-wrap > a.icon img { display: none; }
.thumbnail-classic-title-wrap > a.icon::before { font-size: 1.15rem; }

/* --------------------------------------- 11. LOGO / PARTÍCULAS / ALIADOS */
.text-img {
  position: relative;
  display: inline-block;
  max-width: 100%;
  /* Sin overflow:hidden: recortaría el escudo al ampliarse en hover. */
}
/* El recorte se hace aquí, para que el canvas de partículas no desborde
   pero el logo sí pueda crecer libremente. */
#particles-js {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Escudo municipal: a tamaño completo, sin marco ni recorte circular.
   La sombra se hace con drop-shadow (no box-shadow) para que siga la
   silueta del PNG transparente en vez de dibujar una caja. */
.img_muni {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(190px, 23vw, 300px);
  height: auto;
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 14px 22px rgba(11, 27, 51, .26));
  transform-origin: center bottom;
  transition:
    transform var(--t-slow) var(--ease-clay),
    filter var(--t-slow) var(--ease-out);
}

/* Animación al pasar el cursor: elevación con rebote clay + brillo */
.text-img:hover .img_muni,
.text-img:focus-visible .img_muni {
  transform: translateY(-12px) scale(1.07);
  filter:
    drop-shadow(0 26px 34px rgba(11, 27, 51, .30))
    drop-shadow(0 0 18px rgba(11, 99, 206, .35))
    saturate(1.08);
}
.text-img:active .img_muni { transform: translateY(-4px) scale(1.02); }

/* Halo que respira detrás del escudo sólo durante el hover */
.text-img::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6%;
  z-index: 0;
  width: 62%; aspect-ratio: 1;
  translate: -50% 0;
  border-radius: var(--r-pill);
  background: radial-gradient(circle, rgba(11, 99, 206, .30), transparent 68%);
  opacity: 0;
  scale: .7;
  transition: opacity var(--t-slow) var(--ease-out), scale var(--t-slow) var(--ease-clay);
  pointer-events: none;
}
.text-img:hover::after { opacity: 1; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  .text-img:hover .img_muni { transform: none; }
  .text-img::after { display: none; }
}
/* Botón "volver arriba": lo inyecta js/script.js:792 (UItoTop) directamente en
   el <body>, no está en el HTML. Se retira por CSS para no tocar tu script. */
#ui-to-top { display: none !important; }

/* El HTML trae margin-top:-70px en línea sobre el escudo. Con el logo ya a
   tamaño completo eso lo montaba sobre la sección anterior en pantallas
   medianas y chicas, así que se reduce por tramos. */
@media (max-width: 1199px) { .img_muni { margin-top: -40px !important; } }
@media (max-width: 767px)  { .img_muni { margin-top: 0 !important; } }

.clients-classic {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 130px;
  padding: 18px 22px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-out-sm);
  transition: transform var(--t) var(--ease-clay), box-shadow var(--t);
}
.clients-classic:hover { transform: translateY(-4px); box-shadow: var(--clay-out); }
.clients-classic img { width: auto; max-height: 92px; object-fit: contain; }

/* ------------------------------------------------- 12. EQUIPO / CONCEJO */
.team-classic {
  height: 100%;
  overflow: hidden;
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-out);
  transition: transform var(--t) var(--ease-clay), box-shadow var(--t) var(--ease-out);
}
.team-classic:hover { transform: translateY(-7px); box-shadow: 16px 20px 42px rgba(11, 27, 51, .16), -8px -8px 22px rgba(255, 255, 255, .95); }
/* Retrato 3:4 en vez de cuadrado. Es la proporción exacta de la foto del
   alcalde (1080×1440), así que se ve completa y sin recorte; el cuadrado le
   cortaba una cuarta parte entre la cabeza y los pies. La caja es fija, así
   que todas las tarjetas miden lo mismo sin importar la foto que se ponga. */
.team-classic-figure { display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg-alt); }
.team-classic-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.team-classic:hover .team-classic-figure img { transform: scale(1.05); }
.team-classic-caption { padding: var(--sp-3) var(--sp-2) var(--sp-4); }
/* min-height reserva la línea del nombre aunque una tarjeta no lo traiga:
   sin esto el pie quedaba más corto y los dos rótulos no coincidían. */
.team-classic-name { margin-bottom: 4px; font-size: 1.08rem; min-height: 1.4em; }
.team-classic-name a { color: var(--ink); }
.team-classic-status {
  margin: 0;
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ------------------------------------------ 13. BOLETOS DE ORNATO (precios) */
.box-pricing {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 3vw, 32px);
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-out), var(--clay-in);
  transition: transform var(--t) var(--ease-clay), box-shadow var(--t) var(--ease-out);
}
.box-pricing:hover { transform: translateY(-6px); }
.box-pricing-body { flex: 1; }
.box-pricing-title {
  min-height: 3em;
  margin-bottom: var(--sp-2);
  font-size: .96rem;
  font-weight: 600;
  color: var(--ink-2);
}
.box-pricing-price {
  margin-bottom: var(--sp-2);
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.box-pricing-divider { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-2); }
.box-pricing-divider .divider { flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.box-pricing-divider span {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.box-pricing-list { margin: 0 0 var(--sp-3); padding: 0; list-style: none; text-align: left; }
.box-pricing-list li {
  position: relative;
  padding: 7px 0 7px 30px;
  font-size: .92rem;
  color: var(--ink-2);
}
.box-pricing-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 18px; height: 18px;
  background: var(--brand-50);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--brand-300);
}
.box-pricing-list li.active::before {
  background: var(--brand);
  box-shadow: 0 3px 8px rgba(11, 99, 206, .35);
}
/* Marca de verificación dibujada (sin depender de una fuente de iconos) */
.box-pricing-list li.active::after {
  content: "";
  position: absolute;
  left: 6px; top: 16px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.box-pricing-list li:first-child {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
}
.box-pricing-button { margin-top: auto; }
.box-pricing-button .button { font-size: .86rem; padding-inline: 18px; }

/* Destacado: borde clay coloreado, no un fondo negro */
.box-pricing-popular {
  box-shadow:
    0 0 0 3px var(--brand),
    12px 16px 34px rgba(11, 99, 206, .20),
    -8px -8px 20px rgba(255, 255, 255, .92),
    var(--clay-in);
}
.box-pricing-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  padding: 7px 18px;
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  background: linear-gradient(135deg, #FFD34D, var(--gold));
  border-radius: var(--r-pill);
  box-shadow: 0 8px 18px rgba(245, 179, 1, .40);
}

/* --------------------------------------------- 14. PARALLAX / INFO PÚBLICA */
.parallax-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background-color: var(--navy);
  /* Anclado a la izquierda, no centrado: el banner de Información Pública
     lleva el escudo y el sello del Decreto 57-2008 en el borde izquierdo, y
     centrarlo los recortaba. Esta rama la usa script.js en móvil e IE, donde
     no monta el parallax y pinta la imagen como background. */
  background-position: left center;
  background-size: cover;
}
/* script.js inyecta <div class="material-parallax parallax"><img>…</div>
   como primer hijo; sin posicionarlo deja una banda blanca sobre la sección. */
.parallax-container > .material-parallax {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* OJO: script.js escribe transform: translate3d(-50%, Ypx, 0) en esta imagen
   en cada scroll, así que el anclaje NO puede ir en el transform: el JS lo
   pisa. Va en `top` y en object-position.

   El recorrido del parallax lo calcula el plugin como (alto de la imagen −
   alto del contenedor). Con el `min-height: 100%` anterior, una imagen
   apaisada quedaba EXACTAMENTE del alto del contenedor: recorrido 0, o sea
   parallax inmóvil. Por eso ahora la imagen mide 130% de alto — le deja al
   plugin un 30% de recorrido real — y arranca en top:-30% para que el
   desplazamiento hacia abajo nunca destape el borde superior.

   Con `object-fit: cover` el recorte lo controla object-position en lugar del
   tamaño intrínseco, y ahí se ancla a la izquierda para no perder el escudo. */
.parallax-container > .material-parallax img {
  position: absolute;
  top: -30%; left: 50%;
  width: 100%;
  height: 130%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  transform: translate3d(-50%, 0, 0);
}
/* El velo va sobre el CONTENEDOR, no sobre .parallax-content: el contenedor
   es más alto que su contenido y, si no, la foto queda sin velo por debajo
   y el texto pierde contraste. */
/* El velo estaba al revés: 86% de opacidad sobre el lado IZQUIERDO, que es
   justo donde vive el motivo de la imagen (escudo, sello), y sólo 60% sobre
   el derecho, que es donde va el texto (.text-right). Resultado: se tapaba lo
   que había que ver y se aclaraba lo que había que proteger.
   Ahora crece hacia la derecha: la imagen respira a la izquierda y el texto
   blanco conserva sus 4.5:1 sobre el extremo oscuro. */
.parallax-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(11, 27, 51, .18) 0%,
      rgba(11, 27, 51, .42) 38%,
      rgba(11, 27, 51, .78) 68%,
      rgba(11, 27, 51, .90) 100%);
}
/* ---- Móvil: se cambia por la versión vertical del banner ---------------
   images/bg0965.png es el mismo arte compuesto en vertical (1537×1844). El
   apaisado bg093.png en una pantalla de teléfono sólo dejaría ver una franja.

   Hacen falta las dos reglas porque hay dos caminos distintos según cómo
   arranque script.js:
     · Si detecta móvil NO monta el parallax y escribe background-image en el
       style del elemento con la ruta de data-parallax-img. Un estilo en línea
       gana a la hoja, así que aquí hace falta !important para pisarlo.
     · Si NO detecta móvil (escritorio con la ventana angosta) sí inyecta el
       <img> del parallax, que taparía el fondo: por eso se oculta la capa.
   Así el resultado es el mismo se cargue como se cargue. */
@media (max-width: 767px) {
  .parallax-container {
    background-image: url("../images/bg0965.png") !important;
    background-position: center center;
    background-size: cover;
  }
  .parallax-container > .material-parallax { display: none; }

  /* Apilado en móvil el texto deja de estar a la derecha y queda encima de la
     imagen, así que el velo pasa a ser vertical y parejo, no lateral. */
  .parallax-container::after {
    background: linear-gradient(180deg, rgba(11, 27, 51, .55) 0%, rgba(11, 27, 51, .84) 100%);
  }
}
.parallax-content {
  position: relative;
  z-index: 2;
}
/* El HTML trae color:black en línea sobre un velo oscuro (contraste ~1.6:1).
   Se fuerza texto claro para cumplir WCAG AA. */
.parallax-content .infopublic { color: #FFFFFF !important; }
.parallax-content h3.infopublic { text-shadow: 0 2px 16px rgba(6, 16, 33, .5); }
.group-middle { display: flex; align-items: center; }
.group-sm { gap: 12px; }

/* -------------------------------------------------------------- 15. BLOG */
.post-modern { height: 100%; }
.post-modern-figure {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  aspect-ratio: 6 / 5;
  background: var(--bg-alt);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-out);
}
.post-modern-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.post-modern-figure:hover img { transform: scale(1.06); }

/* Fecha en tarjeta de cristal sobre la foto */
.post-modern-time {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 66px;
  padding: 10px 12px;
  color: #fff;
  text-align: center;
  background: rgba(11, 27, 51, .42);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-md);
}
.post-modern-time time { display: grid; line-height: 1.05; }
.post-modern-time-month { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; }
.post-modern-time-number { font-size: .72rem; letter-spacing: .14em; opacity: .85; }

.post-modern-title { margin-bottom: 10px; font-size: 1.1rem; line-height: 1.35; }
.post-modern-title a { color: var(--ink); }
.post-modern-title a:hover { color: var(--brand); }
.post-modern-text { font-size: .94rem; color: var(--ink-3); }

/* --------------------------------------------------------- 16. CONTACTOS */
.box-contacts {
  height: 100%;
  padding: clamp(26px, 3vw, 34px) var(--sp-3);
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-out), var(--clay-in);
  transition: transform var(--t) var(--ease-clay), box-shadow var(--t) var(--ease-out);
}
.box-contacts:hover { transform: translateY(-6px); }
.box-contacts-icon {
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  margin: 0 auto var(--sp-2);
  font-size: 1.5rem;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--r-pill);
  box-shadow: var(--clay-in), 0 8px 18px rgba(11, 99, 206, .12);
}
.box-contacts-decor {
  width: 42px; height: 5px;
  margin: 0 auto var(--sp-2);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.box-contacts-link { margin-bottom: 6px; font-size: .98rem; }
.box-contacts-link a { color: var(--ink-2); font-weight: 500; }
.box-contacts-link a:hover { color: var(--brand); }
.box-contacts-link i { color: var(--accent-ink); margin-right: 4px; }

/* --------------------------- 15b. GALERÍA HISTÓRICA (carrusel Bootstrap) */
/* Usada en municipio.html. Antes era un carrusel de Bootstrap sin estilar:
   esquinas rectas, controles blancos por defecto (invisibles sobre las fotos
   claras), sin indicadores y sin ancho máximo — en móvil la imagen de 800px
   desbordaba el contenedor. */

.gallery-frame {
  max-width: 860px;
  margin: var(--sp-4) auto 0;
  border-radius: var(--r-lg);
  overflow: hidden;                 /* recorta la foto al radio del marco */
  box-shadow: var(--clay-out);
  background: var(--navy);
}

/* Caja de proporción fija: pase lo que pase con las fotos que se agreguen
   después, el alto no cambia al pasar de una a otra. */
.gallery-frame .carousel-item > img {
  display: block;
  width: 100%;
  aspect-ratio: 800 / 526;
  object-fit: cover;
}
@supports not (aspect-ratio: 1) {
  .gallery-frame .carousel-item > img { height: clamp(240px, 42vw, 566px); }
}

/* Velo inferior para que el pie de foto se lea sobre cualquier imagen */
.gallery-frame .carousel-item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 16, 33, .82) 100%);
  pointer-events: none;
}

.gallery-caption {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  z-index: 2;
  padding: clamp(16px, 3vw, 26px) clamp(18px, 4vw, 34px);
  text-align: left;
}
.gallery-caption h4 {
  margin-bottom: 4px;
  font-size: clamp(1rem, 1.9vw, 1.3rem);
  color: #fff;
  text-shadow: 0 2px 14px rgba(6, 16, 33, .55);
}
.gallery-caption p {
  margin: 0;
  font-size: clamp(.85rem, 1.3vw, .96rem);
  color: #DCE7F7;
}

/* Controles: mismo botón redondo clay que los iconos sociales de la barra */
.gallery-frame .carousel-control-prev,
.gallery-frame .carousel-control-next {
  align-items: center;
  justify-content: center;
  width: auto;
  padding-inline: clamp(10px, 2vw, 18px);
  opacity: 1;
}
.gallery-frame .carousel-control-prev span[class*="fa-"],
.gallery-frame .carousel-control-next span[class*="fa-"] {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;        /* target táctil ≥ 44px */
  font-size: 1.5rem;
  color: var(--brand-700);
  background: rgba(255, 255, 255, .92);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 20px rgba(6, 16, 33, .34);
  transition: transform var(--t) var(--ease-clay), background-color var(--t), color var(--t-fast);
}
.gallery-frame .carousel-control-prev:hover span[class*="fa-"],
.gallery-frame .carousel-control-next:hover span[class*="fa-"] {
  transform: scale(1.09);
  color: #fff;
  background: var(--brand);
}

/* Indicadores: misma píldora dorada que la paginación del hero */
.gallery-frame .carousel-indicators { margin-bottom: 14px; gap: 8px; }
.gallery-frame .carousel-indicators [data-bs-target] {
  width: 9px; height: 9px;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .55);
  opacity: 1;
  transition: width var(--t) var(--ease-out), background-color var(--t);
}
.gallery-frame .carousel-indicators .active { width: 26px; background: var(--gold); }

@media (max-width: 575px) {
  /* En pantallas angostas el pie taparía media foto: se saca debajo. */
  .gallery-frame .carousel-item::after { height: 74%; }
  .gallery-caption { padding-bottom: 30px; }
  .gallery-caption p { display: none; }
}

/* ------------------------------------------ 16c. TRÁMITES (tarjetas) */
/* Usada en tramites.html. Las clases originales (.hover-card, .icon-circle,
   .btn-minimal, .gradient-text) no tenían CSS en ninguna parte — venían del
   difunto css/style.css — así que la sección se veía con las tarjetas planas
   de Bootstrap. Se reconstruye con el lenguaje clay del sistema. */

.tramites-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 620px)  { .tramites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .tramites-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tramite-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(24px, 2.6vw, 32px);
  text-align: left;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-out), var(--clay-in);
  transition: transform var(--t) var(--ease-clay), box-shadow var(--t) var(--ease-out);
}
.tramite-card:hover {
  transform: translateY(-6px);
  box-shadow: 14px 18px 38px rgba(11, 27, 51, .14), -8px -8px 20px rgba(255, 255, 255, .95), var(--clay-in);
}

.tramite-card-icon {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-bottom: var(--sp-2);
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  border-radius: var(--r-md);
  box-shadow: 0 10px 20px rgba(11, 99, 206, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.tramite-card-title { margin-bottom: 10px; color: var(--ink); }
.tramite-card-decor {
  width: 44px; height: 5px;
  margin-bottom: var(--sp-2);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
/* `flex: 1` empuja el pie hacia abajo: con descripciones de distinto largo,
   los botones de todas las tarjetas quedan alineados a la misma altura. */
.tramite-card-text { flex: 1; margin-bottom: var(--sp-3); color: var(--ink-2); }

/* Estado "Próximamente": no es <button> ni <a> porque no hay nada que abrir.
   Marcarlo como enlace deshabilitado dejaría un target pulsable que no hace
   nada; un <span> comunica lo mismo sin prometer interacción. */
.tramite-card-soon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 11px 22px;
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-alt);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: default;
}
.tramite-card-soon .fa { color: var(--accent-ink); }

/* --------------------------------- 16b. DIRECTORIO DE OFICINAS (tabla) */
/* Usada en contacts.html. Las clases originales (.office-table, .badge-role,
   .office-row…) venían de un bloque cuyo CSS vivía en el difunto css/style.css,
   así que la tabla se veía con los bordes por defecto del navegador.
   Se reconstruye como tarjeta clay; en móvil la tabla se convierte en fichas
   apiladas porque 3 columnas no caben bajo 700px sin scroll horizontal. */

.office-table-wrap {
  overflow-x: auto;                 /* red de seguridad entre 700 y 860px */
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--clay-out);
  -webkit-overflow-scrolling: touch;
}

.office-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  text-align: left;
  font-size: .96rem;
}

.office-table thead th {
  padding: 18px var(--sp-3);
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  white-space: nowrap;
}
.office-table thead th:first-child { border-top-left-radius:  var(--r-lg); }
.office-table thead th:last-child  { border-top-right-radius: var(--r-lg); }

.office-table tbody td {
  padding: 16px var(--sp-3);
  vertical-align: middle;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.office-table tbody tr:nth-child(even) { background: rgba(11, 99, 206, .028); }
.office-table tbody tr {
  transition: background-color var(--t-fast);
}
.office-table tbody tr:hover { background: var(--brand-50); }

/* Píldora con el nombre de la oficina */
.badge-role {
  display: inline-block;
  padding: 7px 15px;
  font-family: var(--font-head);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(11, 99, 206, .16);
}

.office-table .manager { font-weight: 500; color: var(--ink); }

/* El correo es un enlace real: en un directorio de contacto tiene que poder
   pulsarse, no sólo leerse. Target de 44px por la regla de accesibilidad. */
.office-table .email a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-weight: 500;
  color: var(--brand);
  word-break: break-word;
}
.office-table .email a:hover { color: var(--brand-700); text-decoration: underline; }
.office-table .email .fa { color: var(--accent-ink); font-size: 1rem; }

/* Entrada escalonada. Sustituye al script que añadía .in a .fade-up, que no
   hacía nada porque esa clase tampoco tenía estilos. El retardo va por
   nth-child para no ensuciar el HTML con style="--i:n". */
.office-table tbody tr.fadeInUp:nth-child(1) { animation-delay: 0ms; }
.office-table tbody tr.fadeInUp:nth-child(2) { animation-delay: 60ms; }
.office-table tbody tr.fadeInUp:nth-child(3) { animation-delay: 120ms; }
.office-table tbody tr.fadeInUp:nth-child(4) { animation-delay: 180ms; }
.office-table tbody tr.fadeInUp:nth-child(5) { animation-delay: 240ms; }
.office-table tbody tr.fadeInUp:nth-child(6) { animation-delay: 300ms; }
.office-table tbody tr.fadeInUp:nth-child(7) { animation-delay: 360ms; }
.office-table tbody tr.fadeInUp:nth-child(8) { animation-delay: 420ms; }
.office-table tbody tr.fadeInUp:nth-child(n+9) { animation-delay: 480ms; }

/* --- Móvil: la tabla pasa a fichas apiladas ------------------------------ */
@media (max-width: 700px) {
  .office-table-wrap {
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }
  .office-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .office-table,
  .office-table tbody,
  .office-table tr,
  .office-table td { display: block; width: 100%; }

  .office-table tbody tr {
    margin-bottom: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface) !important;
    border-radius: var(--r-md);
    box-shadow: var(--clay-out-sm);
  }
  .office-table tbody td {
    padding: 7px 0;
    border-top: 0;
  }
  .office-table tbody td + td { border-top: 1px solid var(--line-soft); }

  /* La cabecera de cada dato se toma de data-label del <td> */
  .office-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .office-table .email a { min-height: 0; padding-block: 8px; }
}

/* ------------------------------------------------------ 17. FORMULARIO */
.rd-form { max-width: 100%; }
.form-wrap { position: relative; margin-bottom: var(--sp-2); }

.form-input {
  width: 100%;
  min-height: 56px;
  padding: 24px 18px 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  box-shadow: var(--clay-in), var(--clay-out-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--clay-in), 0 0 0 4px rgba(11, 99, 206, .18);
}
textarea.form-input { min-height: 150px; padding-top: 28px; resize: vertical; }
.textarea-lg { min-height: 180px; }

/* Etiqueta flotante — nunca sólo placeholder.
   RDInputLabel (core.min.js) añade .focus / .not-empty a la PROPIA etiqueta;
   :placeholder-shown no sirve aquí porque los campos no traen placeholder. */
.form-label {
  position: absolute;
  left: 20px; top: 17px;
  font-size: 1rem;
  color: var(--ink-3);
  pointer-events: none;
  transition: transform var(--t) var(--ease-out), color var(--t);
  transform-origin: left top;
}
.form-label.focus,
.form-label.not-empty,
.form-input:focus + .form-label {
  transform: translateY(-10px) scale(.76);
  color: var(--brand-700);
  font-weight: 600;
}
/* El textarea trae la etiqueta ANTES del campo en el HTML */
.form-wrap > .form-label + .textarea-lg { padding-top: 30px; }

.rd-form .button { margin-top: var(--sp-2); }

.snackbars { position: fixed; left: 20px; bottom: 20px; z-index: 1200; }

/* ----------------------------------------------------------- 18. FOOTER */
.footer-minimal-bottom-panel {
  margin-top: var(--sp-6);
  padding: var(--sp-4) clamp(20px, 4vw, 56px);
  color: var(--on-dark-2);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -12px 40px rgba(11, 27, 51, .18);
}
.footer-minimal-bottom-panel .row { max-width: 1400px; margin-inline: auto; }
.footer-minimal-bottom-panel a { color: var(--gold); }
.footer-minimal-bottom-panel a:hover { color: #FFD966; }
.rights { margin: 0; font-size: .92rem; color: var(--on-dark-2); }
.footer-social-list-2 { display: flex; gap: 10px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.footer-social-list-2 .icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  transition: transform var(--t) var(--ease-clay), background-color var(--t);
}
.footer-social-list-2 .icon:hover { transform: translateY(-3px); background: rgba(245, 179, 1, .18); }

/* -------------------------------------------------- 19. MODALES */
/* El aviso de cookies (#cookie-consent) ya tiene su propio diseño oscuro con
   oro en un <style> embebido en index.html, que va después de esta hoja y por
   tanto gana. No se duplica aquí para no dejar reglas muertas en conflicto. */

.modal-content { border: 0; border-radius: var(--r-lg); box-shadow: 0 30px 70px rgba(11, 27, 51, .30); }
.modal-header { border-bottom: 1px solid var(--line-soft); }
.modal-footer { border-top: 1px solid var(--line-soft); }
.modal-body img { border-radius: var(--r-md); }

/* ------------------------------------------- 19b. DESCARGA DE DOCUMENTO */
/* Usado por el PMR en mapa_de_riesgos.html. El componente anterior era un
   botón de Uiverse cuyo CSS vivía en el difunto css/style.css, así que se
   renderizaba sin estilo; aquí se reconstruye sobre .button del sistema. */

.pmr-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-block: var(--sp-4);
}
.pmr-download .button { max-width: 100%; }
.pmr-download .button .icon { font-size: 1.25rem; }
.pmr-download-meta {
  margin: 0;
  font-size: .86rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------- 20. RESPONSIVE */

/* Portátiles 1200-1399: los 7 enlaces + logo + redes no caben con el padding
   completo. Se aprieta el nav en vez de dejar que se parta en dos líneas. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .rd-navbar-main { padding-inline: 18px; gap: 12px; }
  .rd-nav-link { padding: 10px 10px; font-size: .855rem; }
  .rd-navbar-main-element,
  .rd-navbar-nav-wrap { gap: 12px; }
  /* Los iconos se quedan en 44px: el mínimo táctil no se negocia. El espacio
     se recorta del padding de los enlaces y del logo, no de los targets. */
  .rd-navbar-share-list { gap: 5px; }
  .rd-navbar-share-list-item .icon { width: 44px; height: 44px; font-size: .95rem; }
  .rd-navbar-brand img { max-height: 40px; }
}

@media (max-width: 1199px) {
  :root { --header-h: 76px; }

  .rd-navbar-toggle { display: block; }

  /* Panel lateral deslizante en móvil/tablet.
     `visibility: hidden` mientras está cerrado es importante: sin eso el panel
     seguía siendo enfocable con Tab (se navegaba un menú invisible) y sumaba
     32px al scrollWidth del documento, que sólo quedaban tapados por
     overflow-x: hidden. */
  .rd-navbar-nav-wrap {
    position: fixed;
    top: 0; right: 0;
    z-index: 1100;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-3);
    width: min(340px, 86vw);
    height: 100dvh;
    padding: calc(var(--header-h) + 20px) 20px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    box-shadow: -20px 0 60px rgba(11, 27, 51, .22);
    visibility: hidden;
    transform: translateX(105%);
    transition: transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
  }
  .rd-navbar-nav-wrap.active {
    visibility: visible;
    transform: none;
    transition: transform var(--t-slow) var(--ease-out), visibility 0s;
  }

  .rd-navbar-nav { flex-direction: column; align-items: stretch; gap: 6px; }
  .rd-nav-link { width: 100%; font-size: 1rem; padding: 13px 16px; }

  .rd-navbar .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    margin-top: 4px;
    box-shadow: none;
    background: var(--bg);
  }

  /* Las redes ya van al final en el HTML, así que aquí no hace falta `order`:
     antes estaba y dejaba el foco del teclado saltando a Facebook/WhatsApp
     antes que al menú, porque `order` mueve lo visual pero no el orden de
     tabulación. */
  .rd-navbar-share-list { justify-content: flex-start; }
}

@media (max-width: 991px) {
  :root { --sp-6: 52px; --sp-7: 64px; }
  .swiper-slider-classic { height: clamp(500px, 78vh, 700px); }
  .box-pricing-title { min-height: 0; }
}

@media (max-width: 767px) {
  body { font-size: 15.5px; }
  .swiper-slide-caption { width: calc(100% - 24px); border-radius: var(--r-lg); }
  .swiper-pagination__module { right: 50%; transform: translateX(50%); }
  .footer-minimal-bottom-panel { text-align: center; }
  .footer-minimal-bottom-panel .col-sm-6 { text-align: center !important; }
  .thumbnail-classic-title-wrap > a.icon { opacity: 1; transform: none; top: -70px; right: 4px; }
}

/* Teléfonos muy angostos (320-380px) */
@media (max-width: 380px) {
  .container, .container-fluid { padding-inline: 14px; }
  .section-fluid { padding-inline: 10px; }
  .swiper-slide-caption { padding: 22px 16px; }
  .box-icon-modern,
  .box-pricing,
  .box-contacts { padding: 20px 18px; }
  .thumbnail-classic-caption { padding: 18px 16px; }
  .quote-jean { text-align: left; }          /* centrado a este ancho queda muy irregular */
  .isotope-filters-list > li > a { padding: 11px 16px; font-size: .84rem; }
  .rd-navbar-brand img { max-height: 40px; }
}

/* Móvil en horizontal / pantallas bajas: un hero de 560px mínimo no cabe en
   una ventana de 360px de alto. */
@media (orientation: landscape) and (max-height: 560px) {
  .swiper-slider-classic { height: auto; min-height: 100dvh; }
  .swiper-slide-caption { padding-block: 20px; }
  .swiper-slide-caption .text-width-large { margin-bottom: var(--sp-2); }
  .section-sm { padding-block: var(--sp-5); }
  .rd-navbar-nav-wrap { padding-top: calc(var(--header-h) + 8px); padding-bottom: 16px; }
  .chat-window { height: min(78dvh, 420px); }
}

/* Tres elementos flotantes comparten la esquina inferior derecha: el aviso de
   cookies, el botón del chat y la insignia de reCAPTCHA. Se apilan en lugar de
   pisarse. El aviso va antes que #muni-chatbot y que la insignia en el DOM, así
   que basta el combinador de hermanos — sin tocar el HTML.
   En pantallas anchas el aviso vive abajo a la IZQUIERDA y no estorba. */
.grecaptcha-badge { bottom: 96px !important; z-index: 1240 !important; }
#muni-chatbot { transition: bottom var(--t-slow) var(--ease-out); }

/* reCAPTCHA cuelga su insignia dentro de un <div> anónimo, así que NO es
   hermana de #cookie-consent y el combinador ~ no la alcanza. :has() sí,
   independientemente de dónde la inserte Google. */
@media (max-width: 640px) {
  body:has(#cookie-consent.show) #muni-chatbot     { bottom: 252px; }
  body:has(#cookie-consent.show) .grecaptcha-badge { bottom: 322px !important; }
}
@media (min-width: 381px) and (max-width: 640px) {
  body:has(#cookie-consent.show) #muni-chatbot     { bottom: 208px; }
  body:has(#cookie-consent.show) .grecaptcha-badge { bottom: 278px !important; }
}
/* Respaldo para navegadores sin :has() — al menos separa chat y aviso. */
@supports not selector(:has(*)) {
  @media (max-width: 640px) {
    #cookie-consent.show ~ #muni-chatbot { bottom: 252px; }
  }
}

/* ------------------------------------------- 21. MOVIMIENTO REDUCIDO / A11Y */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .wow, .fadeInUp, .fadeInLeft, .fadeInRight { opacity: 1 !important; transform: none !important; }
}

/* Respaldo si el navegador no soporta backdrop-filter: se opta por opacidad
   sólida para no perder el contraste del texto sobre las tarjetas de cristal. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .swiper-slide-caption,
  .swiper-pagination__module { background: rgba(11, 27, 51, .60); }
  .rd-navbar { background: rgba(237, 242, 249, .97); }
  .post-modern-time { background: rgba(11, 27, 51, .72); }
}

@media print {
  .rd-navbar-wrap, #muni-chatbot, #cookie-consent, .swiper-pagination__module { display: none !important; }
  body::before { display: none; }
}