.asuntos-wrap{
  width:min(1200px,80%);
  margin:32px auto;
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#1c2a39;
}

.hero-header{
  width:100%;
  height:380px;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-header::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.hero-inner{
  position:relative;
  z-index:1;
  text-align:center;
  padding:2rem;
}
.hero-title{
  margin:0;
  color:#fff;
  font-weight:800;
  font-size:clamp(2rem,4vw,3.2rem);
}
.hero-title-formulario{
  margin:0;
  color:#000000;
  font-weight:800;
  font-size:clamp(2rem,4vw,3.2rem);
}

/* bloques base útiles en esta sección */
.asuntos-section{
  background:#fff;
  border:1px solid #e6ecf5;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  padding:18px 20px;
  margin:16px 0;
}
.asuntos-title{
  margin:0 0 10px;
  font-weight:800;
  font-size:22px;
  color:#1c2a39;
}
.asuntos-text{
  margin:0;
  color:#5c6b7a;
  line-height:1.55;
  font-size:16px;
}

/* lista de documentos simple (si la usas en el contenido) */
.asuntos-docs{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.asuntos-doc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fff;
  border:1px solid #e6ecf5;
  border-radius:10px;
  padding:10px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  transition:box-shadow .2s ease,transform .12s ease,border-color .2s ease,background .2s ease;
}
.asuntos-doc:hover{
  background:#f9fbff;
  box-shadow:0 10px 22px rgba(0,0,0,.07);
  border-color:#dbe3ef;
}
.asuntos-doc a{
  text-decoration:none;
  font-weight:700;
  color:#1c2a39;
  line-height:1.35;
}
.asuntos-meta{
  color:#6b7785;
  font-size:13px;
}

/* responsive */
@media (max-width:1024px){
  .asuntos-wrap{ width:88%; }
}
@media (max-width:760px){
  .asuntos-wrap{ width:92%; }
}

/* Layout texto + imagen (opcional) */
.ai-intro-layout{
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap:22px;
  align-items:start;
  margin-top:10px;
}
.ai-intro-figure{ margin:0; }
.ai-intro-figure img{
  display:block; width:100%; height:auto; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* responsive */
@media (max-width: 1024px){
  .ai-intro-layout{ grid-template-columns:1fr; }
}

/* Presentación centrada */
.asuntos-intro{
  width: 90%;
  margin: 40px auto 12px;
}
.ai-lead{
  text-align: justify;
}

/* Centrar exactamente los 2 botones en esta plantilla */
.page-template-page-asuntos-muni-php .servicios-cuadros{
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  align-items: start;
  gap: 56px;
  width: 100%;
  margin:  45px 0px 40px 0px;
  padding-left: 0;
  padding-right: 0;
}

/* Quitar márgenes laterales heredados en cada tarjeta */
.page-template-page-asuntos-muni-php .servicios-cuadros .cuadro-servicio{
  margin: 0;
}

/* Móvil: uno por fila y centrados */
@media (max-width: 900px){
  .page-template-page-asuntos-muni-php .servicios-cuadros{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
  }
}
/* ===============================
   FORMULARIO DE DENUNCIA – UI
   =============================== */

/* contenedor del form */
.muni-form{
  width: min(980px, 92%);
  margin: 28px auto 64px;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* bloques/fieldset */
.muni-form .mf-fieldset{
  background: #fafbff;
  border: 1px solid #e6eaf3;
  border-radius: 14px;
  padding: 18px 20px 22px;
  margin: 20px 0 26px;
}
.muni-form .mf-fieldset legend{
  padding: 0 8px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #2b2f3a;
}

/* filas y columnas */
.muni-form .mf-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  column-gap: 32px;      /* separa columnas */
  row-gap: 16px;         /* separa filas */
  align-items: start;
}
.muni-form .mf-col-full{ grid-column: 1 / -1; }  /* ocupa todo el ancho */

@media (max-width: 880px){
  .muni-form .mf-row{
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
}

/* labels e inputs */
.muni-form label{
  display: block;
  margin: 0 0 8px;
  font-weight: 600;
  color: #2b2f3a;
}

.muni-form input[type="text"],
.muni-form input[type="email"],
.muni-form input[type="date"],
.muni-form input[type="file"],
.muni-form textarea{
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1.5px solid #e3e6ee;
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 46px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.muni-form textarea{
  min-height: 160px;     /* alto cómodo para descripción */
  resize: vertical;
  line-height: 1.45;
}

.muni-form input:focus,
.muni-form textarea:focus{
  border-color: #7c3aed;               /* morado */
  box-shadow: 0 0 0 4px rgba(124,58,237,.12);
}

/* separador extra entre filas dentro del mismo fieldset */
.muni-form .mf-row + .mf-row{ margin-top: 10px; }

/* checkbox de consentimiento */
.muni-form .mf-check{
  display: block;
  margin: 14px 0 18px;
  line-height: 1.35;
}
.muni-form .mf-check input{ margin-right: 8px; transform: translateY(1px); }

/* botón enviar */
.muni-form .mf-submit{
  display: inline-block;
  padding: 12px 22px;
  border-radius: 12px;
  border: 0;
  background: #6a1b78;
  color: #fff;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow: 0 12px 26px rgba(106,27,120,.24);
  cursor: pointer;
}
.muni-form .mf-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(106,27,120,.26);
}

/* avisos */
.muni-ok, .muni-err{
  width: min(980px, 92%);
  margin: 8px auto 20px;
  padding: 12px 14px;
  border-radius: 10px;
}
.muni-ok{  background:#e7f9ef; color:#186a3b; border:1px solid #cbeeda; }
.muni-err{ background:#fdeaea; color:#8a1f1f; border:1px solid #f4c7c7; }

/* =================================
   FIRMA – fondo BLANCO bien definido
   ================================= */
.sig-pad{
  background: #fff;                            /* contenedor blanco */
  border: 1.5px solid #e3e6ee;
  border-radius: 12px;
  padding: 12px;
}
#sigCanvas{
  background: #fff !important;                 /* lienzo blanco */
  display: block;
  width: 100%;
  height: 200px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #eef1f6;         /* borde interior sutil */
}
.sig-tools{
  margin-top: 10px;
  display: flex;
  gap: 12px;
}
/* ===========================
   Ajustes visuales del Formulario de Denuncia
   =========================== */

/* 1) Fecha arriba: más pequeño (no ocupar todo el ancho) */
.muni-form-denuncia .mf-row:first-of-type .mf-col-full input[readonly]{
  max-width: 360px;   /* ajusta si quieres más/menos */
}

.muni-form-denuncia fieldset:nth-of-type(1) .mf-row:nth-of-type(2){
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;  /* izquierda menor, derecha mayor */
  gap: 18px;
}


.muni-form-denuncia fieldset:nth-of-type(2) .mf-row:nth-of-type(1){
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
}


.muni-form-denuncia fieldset:nth-of-type(3) .mf-row:nth-of-type(1){
  display:grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 18px;
}

/* 5) Lienzo de firma con fondo blanco bien marcado */
.muni-form-denuncia .sig-pad{
  background:#fff;
  border:1px solid #e6eaf2;
  border-radius:12px;
  padding:14px;
}
.muni-form-denuncia #sigCanvas{
  background:#fff !important;
  border:1px dashed #cfd6e4;
  width:100%;
  height:200px;
  border-radius:10px;
}

/* 6) Espaciado confortable entre inputs en doble columna */
.muni-form-denuncia .mf-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;              /* separa cuadros de texto */
}
.muni-form-denuncia .mf-col-full{ grid-column: 1/-1; }

/* 7) Inputs: misma estética del resto del sitio */
.muni-form-denuncia input[type="text"],
.muni-form-denuncia input[type="email"],
.muni-form-denuncia input[type="date"],
.muni-form-denuncia input[type="file"],
.muni-form-denuncia textarea{
  font: inherit;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  background:#fff;
}
.muni-form-denuncia textarea{ min-height: 160px; resize: vertical; }

/* 8) Estados de validación */
.muni-form-denuncia :invalid:not([type="file"]){
  border-color:#e66;
  box-shadow: 0 0 0 3px rgba(230,102,102,.12);
}

/* 9) Fieldsets “tarjeta suave” */
.muni-form-denuncia .mf-fieldset{
  background: #f9fbff;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 18px 0;
}
.muni-form-denuncia .mf-fieldset > legend{
  padding: 0 8px;
  font-weight: 800;
  color: #0f1b2d;
}

/* 10) Responsive (iPad y móvil) */
@media (max-width: 1024px){
  .muni-form-denuncia .mf-row,
  .muni-form-denuncia fieldset:nth-of-type(1) .mf-row:nth-of-type(2),
  .muni-form-denuncia fieldset:nth-of-type(2) .mf-row:nth-of-type(1),
  .muni-form-denuncia fieldset:nth-of-type(3) .mf-row:nth-of-type(1){
    grid-template-columns: 1fr;   /* apilar en pantallas medianas */
  }
  .muni-form-denuncia .mf-row:first-of-type .mf-col-full input[readonly]{
    max-width: 100%;
  }
}
/* ===== Agendar Cita: layout específico de esta plantilla ===== */
.page-template-page-agendar-asuntosmuni-php .muni-form-cita{
  max-width: 920px;
  margin: 0 auto 64px;
}

.page-template-page-agendar-asuntosmuni-php .muni-form-cita .mf-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

/* Dos columnas en pantallas medias+ */
@media (min-width: 760px){
  .page-template-page-agendar-asuntosmuni-php .muni-form-cita .mf-row.mf-2{
    grid-template-columns: 1fr 1fr;
  }
}

/* Caja más grande para el motivo */
.page-template-page-agendar-asuntosmuni-php .muni-form-cita textarea{
  min-height: 180px;
}

/* Botón */
.page-template-page-agendar-asuntosmuni-php .muni-form-cita .mf-submit{
  display:inline-block;
  padding:.9rem 1.25rem;
  border-radius:10px;
  border:0;
  background:#5f1d84;
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  cursor:pointer;
  transition:transform .12s ease,box-shadow .25s ease,background .35s ease;
}
.page-template-page-agendar-asuntosmuni-php .muni-form-cita .mf-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(0,0,0,.18);
  background:#7c2bb3;
}

/* Mensajes */
.muni-ok{
  background:#e7f9ee;border:1px solid #bdebd0;color:#146c43;
  padding:12px 14px;border-radius:10px;margin-bottom:18px;
}
.muni-err{
  background:#fde7e7;border:1px solid #f4bcbc;color:#7a1c1c;
  padding:12px 14px;border-radius:10px;margin-bottom:18px;
}
/* ---- Consulta de expediente ---- */
.emx-consulta{margin:24px auto;max-width:720px}
.emx-consulta label{font-weight:700;display:block;margin-bottom:6px}
.emx-consulta .emx-row{display:flex;gap:12px;flex-wrap:wrap}
.emx-consulta input[type=text]{flex:1;min-width:220px;padding:12px 14px;border:1px solid #d9dce3;border-radius:8px}
.emx-consulta button{padding:12px 18px;background:#5f1d84;color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:700}
.emx-card{margin-top:20px;background:#fff;border:1px solid #e6ecf5;border-radius:12px;padding:18px 20px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.emx-download{display:inline-block;margin-top:8px;font-weight:700;text-decoration:none}
.emx-msg{margin-top:16px;color:#7a1f1f;background:#fdecec;border:1px solid #f6caca;padding:10px 12px;border-radius:8px}

.asuntos-title{
font-size: 2.5em;
}
/* ====== Consulta de expediente (estilos) ====== */
.jam-consulta-expediente .jam-consulta-form .jam-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:8px 0 14px;
}

/* Etiqueta "Correlativo" más grande */
.jam-consulta-expediente .jam-consulta-form label{
  font-size:20px;               /* sube tamaño */
  font-weight:800;
  letter-spacing:.02em;
  color:#45205f;                /* morado oscuro legible */
}

/* Campo de texto bonito */
.jam-consulta-expediente .jam-consulta-form input[type="text"]{
  height:44px;
  width:clamp(240px, 45vw, 420px);
  padding:0 14px;
  border-radius:10px;
  border:1.6px solid #d9dbe8;
  background:#fff;
  transition:border-color .2s, box-shadow .2s, background .2s;
  outline:0;
}
.jam-consulta-expediente .jam-consulta-form input[type="text"]:focus{
  border-color:#7b3fa0;
  box-shadow:0 0 0 3px rgba(123,63,160,.15);
}

/* Botón "Buscar" con gradiente y hover */
.jam-consulta-expediente .btn-buscar{
  height:44px;
  padding:0 18px;
  border:0;
  border-radius:10px;
  cursor:pointer;
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(90deg,#5f1d84 0%,#9749e6 100%);
  box-shadow:0 10px 18px rgba(95,29,132,.20);
  transition:transform .12s ease, box-shadow .25s ease, filter .2s ease;
}
.jam-consulta-expediente .btn-buscar:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 14px 26px rgba(95,29,132,.22);
}
.jam-consulta-expediente .btn-buscar:active{
  transform:translateY(0);
  box-shadow:0 8px 16px rgba(95,29,132,.18);
}

/* Opcional: resultado con tarjetita */
.jam-consulta-expediente .jam-resultado{
  background:#fff;
  border:1px solid #e9eaf3;
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 6px 18px rgba(17,17,17,.06);
  margin-top:14px;
}
.jam-consulta-expediente .jam-resultado .case-title{
  margin:0 0 6px;
  font-weight:800;
  font-size:20px;
  color:#2a1b3c;
}
.jam-consulta-expediente .jam-resultado .case-sub,
.jam-consulta-expediente .jam-resultado .case-line{
  color:#5e6573;
  margin-top:2px;
}
/* ===========================
   PMT — estilos específicos
   (scope: page-pmt.php)
   =========================== */

.page-template-page-pmt-php .hero-header{
  height: 360px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-template-page-pmt-php .hero-header::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
}
.page-template-page-pmt-php .hero-inner{ position:relative; z-index:1; text-align:center; padding:2rem; }
.page-template-page-pmt-php .hero-title{
  margin:0; color:#fff; font-weight:800; font-style:italic;
  font-size: clamp(2rem, 4vw, 3rem);
}

/* Intro */
.page-template-page-pmt-php .asuntos-intro{ width:90%; margin:40px auto 16px; }
.page-template-page-pmt-php .ai-heading{ margin:0 0 6px; font-weight:800; font-size:clamp(1.35rem,2.2vw,1.8rem); }
.page-template-page-pmt-php .ai-lead{ color:#475569; line-height:1.6; }

/* Botones (dos cuadros) */
.page-template-page-pmt-php .servicios-cuadros{
  width:90%;
  margin:28px auto 60px;
  display:grid;
  grid-template-columns: repeat(2, minmax(240px,1fr));
  gap:24px;
}
.page-template-page-pmt-php .cuadro-servicio{ display:block; text-decoration:none; }

.page-template-page-pmt-php .servicio-contenido{
  display:flex; align-items:center; gap:16px;
  padding:22px 26px;
  border-radius:16px;
  color:#fff; text-decoration:none;
  /* Paleta PMT – azul */
  background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  transition: transform .12s ease, box-shadow .25s ease, filter .2s ease;
}
.page-template-page-pmt-php .servicio-contenido:hover{
  transform: translateY(-3px);
  box-shadow:0 18px 36px rgba(0,0,0,.18);
  filter: saturate(1.1);
}
.page-template-page-pmt-php .icono-servicio{
  width:44px; height:44px; flex:0 0 44px; object-fit:contain;
  filter: brightness(0) invert(1); /* icono blanco */
}
.page-template-page-pmt-php .servicio-texto{
  font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size: clamp(1rem, 1.9vw, 1.35rem);
}
/* Responsive */
@media (max-width: 900px){
  .page-template-page-pmt-php .servicios-cuadros{ grid-template-columns:1fr; }
  .page-template-page-pmt-php .servicio-contenido{ justify-content:center; }
}

/* ===== Promo Facebook (entre intro y botones) ===== */
.pmt-fb-wrap{ width:min(1100px,92%); margin:auto; }
.pmt-fb-promo{
  display:flex; align-items:center; gap:16px; padding:18px 22px;
  border-radius:16px; background:linear-gradient(90deg,#1877F2 0%, #0E5FE0 100%);
  color:#fff; text-decoration:none; box-shadow:0 12px 28px rgba(24,119,242,.25);
  position:relative; overflow:hidden;
}
.pmt-fb-promo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%);
  transform:translateX(-100%); transition:transform .6s ease;
}
.pmt-fb-promo:hover::after{ transform:translateX(0); }
.fb-icon{ width:40px; height:40px; flex:0 0 40px; }
.fb-copy{ display:flex; flex-direction:column; line-height:1.15; }
.fb-copy strong{ font-weight:800; letter-spacing:.02em; font-size:clamp(1rem,2.2vw,1.25rem); }
.fb-copy span{ opacity:.95; font-size:.95rem; }
.fb-cta{
  margin-left:auto; background:#fff; color:#0E5FE0; padding:10px 14px; border-radius:12px;
  font-weight:800; letter-spacing:.02em; box-shadow:0 10px 20px rgba(0,0,0,.12);
}
.pmt-fb-promo:hover .fb-cta{ filter:brightness(1.03); }
@media (max-width:680px){ .pmt-fb-promo{ padding:16px; gap:12px; } .fb-cta{ padding:8px 12px; } }
@media (max-width:640px){
  .pmt-fb-wrap{ margin:16px auto 24px; }
  .pmt-fb-promo{ padding:14px 16px; gap:12px; border-radius:14px; }
  .pmt-fb-promo .fb-icon{ width:32px; height:32px; }
  .pmt-fb-promo .fb-copy strong{ font-size:1.05rem; }
  .pmt-fb-promo .fb-copy span{ font-size:.92rem; }
}
@media (max-width:500px){
  .pmt-fb-promo{ flex-wrap:wrap; }
  .pmt-fb-promo .fb-copy{ flex:1 1 100%; }
  .pmt-fb-promo .fb-cta{
    margin-left:0; margin-top:8px; width:100%; text-align:center;
    padding:12px 14px; border-radius:10px; min-height:44px;
  }
}



/* ====== AM2 GRID 2×2 (título + 3 tarjetas) ====== */

/* Contenedor full-bleed */
.am2-grid{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
  background: #fff;
  box-sizing: border-box;
  padding-inline: clamp(24px, 5vw, 64px);
  padding-block: clamp(16px, 3vw, 32px);
  margin-top:3%;
  margin-bottom:10%;
}

/* Líneas del grid (desktop) */
.am2-grid::before,
.am2-grid::after{
  content:"";
  position:absolute;
  background: rgba(15,23,42,.12);
  transform-origin: center;
}
.am2-grid::before{ /* vertical */
  top:0; bottom:0; left:50%; width:1px; transform: translateX(-.5px) scaleY(1);
}
.am2-grid::after{  /* horizontal */
  left:0; right:0; top:50%; height:1px; transform: translateY(-.5px) scaleX(1);
}

/* Celdas */
.am2-cell{ background: transparent; padding: clamp(28px, 5vw, 52px); }

/* Tipografías */
.am2-title-h{
  margin: 0 0 .3em 0; font-weight: 800;
  font-size: clamp(40px, 6.2vw, 56px);
  line-height: 1.04; letter-spacing: .005em; color:#0b1220; max-width: 18ch;
}
.am2-title-p{ margin:.25em 0 0; max-width:46ch; font-size: clamp(16px,1.5vw,18px); color:#556070; }

.am2-head{ display:flex; align-items:center; gap:16px; }
.am2-card-title{ margin:.1rem 0 .3rem; font-weight:800; font-size: clamp(22px,2.3vw,28px); letter-spacing:.005em; color:#0b1220; }
.am2-sub{ margin:.2rem 0 .75rem; color:#61708A; font-size:clamp(14px,1.3vw,15.5px); line-height:1.55; }
.am2-list{ margin-top:.25rem; padding-left:1.1rem; color:#0b1220; font-weight:800; font-size:clamp(15px,1.5vw,17px); }
.am2-list li{ margin:.42rem 0; }

/* Iconos sin fondo/sombra */
.am2-icon{
  width: clamp(44px, 4.5vw, 60px); height:auto; object-fit:contain;
  background:transparent !important; box-shadow:none !important; border-radius:0 !important; filter:none !important;
}

/* ===== ANIMACIÓN “TETRIS” (más marcada) ===== */
/* Easing elástico suave */
:root{ --tetris-ease: cubic-bezier(.16,.84,.22,1); }

/* Estado inicial: se aplicará al agregar .js-animate a la sección */
.js-animate .am2-grid::before,
.js-animate .am2-grid::after{ transform: translateX(-.5px) scaleY(0); }
.js-animate .am2-grid::after{ transform: translateY(-.5px) scaleX(0); }

/* Tarjetas caen desde MÁS abajo y más lento */
.js-animate .am2-card{
  opacity:0;
  transform: translateY(80px);         /* más distancia para que se note */
}

/* Contenidos internos de tarjeta: entran un toque después */
.js-animate .am2-card .am2-head,
.js-animate .am2-card .am2-sub,
.js-animate .am2-card .am2-list{
  opacity:0;
  transform: translateY(24px);
}

/* Título: entra al final desde la izquierda, más lento */
.js-animate .am2-title{
  opacity:0;
  transform: translateX(-40px);
}

/* En vista: aplicar transiciones */
.js-animate.in-view .am2-card{
  opacity:1; transform: translateY(0);
  transition: transform 1.05s var(--tetris-ease), opacity .95s var(--tetris-ease);
}

/* Internos de tarjeta (ligeramente después de la tarjeta) */
.js-animate.in-view .am2-card .am2-head,
.js-animate.in-view .am2-card .am2-sub,
.js-animate.in-view .am2-card .am2-list{
  opacity:1; transform: translateY(0);
  transition: transform .7s var(--tetris-ease), opacity .7s var(--tetris-ease);
}

/* Título al final */
.js-animate.in-view .am2-title{
  opacity:1; transform: translateX(0);
  transition: transform 1s var(--tetris-ease), opacity .9s var(--tetris-ease);
  transition-delay: 1.05s; /* entra después de todo */
}

/* Dibujo de líneas cuando ya “cayeron” tarjetas */
.js-animate.in-view .am2-grid::before,
.js-animate.in-view .am2-grid::after{
  transition: transform .8s var(--tetris-ease);
  transition-delay: .85s; /* después de la segunda tarjeta */
}
.js-animate.in-view .am2-grid::before{ transform: translateX(-.5px) scaleY(1); }
.js-animate.in-view .am2-grid::after { transform: translateY(-.5px) scaleX(1); }

/* STAGGER en orden “tetris”: 3 (abajo-izq) → 4 (abajo-der) → 2 (arriba-der) */
.js-animate.in-view .am2-cell:nth-child(3){ transition-delay: .10s; } /* cae primero */
.js-animate.in-view .am2-cell:nth-child(4){ transition-delay: .35s; }
.js-animate.in-view .am2-cell:nth-child(2){ transition-delay: .60s; }

/* Y sus contenidos internos, un poco después de cada una */
.js-animate.in-view .am2-cell:nth-child(3) .am2-head,
.js-animate.in-view .am2-cell:nth-child(3) .am2-sub,
.js-animate.in-view .am2-cell:nth-child(3) .am2-list{ transition-delay: .22s; }

.js-animate.in-view .am2-cell:nth-child(4) .am2-head,
.js-animate.in-view .am2-cell:nth-child(4) .am2-sub,
.js-animate.in-view .am2-cell:nth-child(4) .am2-list{ transition-delay: .47s; }

.js-animate.in-view .am2-cell:nth-child(2) .am2-head,
.js-animate.in-view .am2-cell:nth-child(2) .am2-sub,
.js-animate.in-view .am2-cell:nth-child(2) .am2-list{ transition-delay: .72s; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .js-animate .am2-grid::before,
  .js-animate .am2-grid::after,
  .js-animate .am2-title,
  .js-animate .am2-card,
  .js-animate .am2-card .am2-head,
  .js-animate .am2-card .am2-sub,
  .js-animate .am2-card .am2-list{
    transition:none !important; transform:none !important; opacity:1 !important;
  }
}

/* ===== Responsive (tablet/móvil) ===== */
@media (max-width: 1024px){
  .am2-grid{ grid-template-columns:1fr; padding-inline: clamp(16px,5vw,28px); }
  .am2-grid::before, .am2-grid::after{ display:none; }              /* sin líneas en móvil */
  .am2-card{ border-top:1px solid rgba(15,23,42,.14); }
  .am2-card:first-of-type{ border-top:none; }

  /* Mantén el efecto pero menos brusco en móvil */
  .js-animate .am2-card{ transform: translateY(60px); }
  .js-animate .am2-card .am2-head,
  .js-animate .am2-card .am2-sub,
  .js-animate .am2-card .am2-list{ transform: translateY(18px); }
}

@media (max-width: 560px){
  .am2-grid{ padding-inline: 5vw; }
  .am2-card + .am2-card{ border-top-color: rgba(15,23,42,.18); }
  .am2-icon{ width: 40px; }
}
/* ===========================
   Formulario Denuncia (Agua)
   =========================== */

/* 1) Fecha arriba: más pequeño */
.muni-form-agua .mf-row:first-of-type .mf-col-full input[readonly]{
  max-width: 360px;
}

/* Ajustes de columnas por secciones */
.muni-form-agua fieldset:nth-of-type(1) .mf-row:nth-of-type(2){
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 18px;
}
.muni-form-agua fieldset:nth-of-type(2) .mf-row:nth-of-type(1){
  display:grid;
  grid-template-columns: 1.25fr 0.75fr; /* fecha / referencia */
  gap: 18px;
}

/* Layout base */
.muni-form-agua .mf-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.muni-form-agua .mf-col-full{ grid-column: 1/-1; }

/* Inputs */
.muni-form-agua input[type="text"],
.muni-form-agua input[type="email"],
.muni-form-agua input[type="date"],
.muni-form-agua input[type="file"],
.muni-form-agua textarea{
  font: inherit;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
  outline: none;
  background:#fff;
}
.muni-form-agua textarea{ min-height: 160px; resize: vertical; }

/* Validados */
.muni-form-agua :invalid:not([type="file"]){
  border-color:#e66;
  box-shadow: 0 0 0 3px rgba(230,102,102,.12);
}

/* Fieldsets */
.muni-form-agua .mf-fieldset{
  background: #f9fbff;
  border: 1px solid #edf1f7;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 18px 0;
}
.muni-form-agua .mf-fieldset > legend{
  padding: 0 8px;
  font-weight: 800;
  color: #0f1b2d;
}

/* Responsive */
@media (max-width: 1024px){
  .muni-form-agua .mf-row,
  .muni-form-agua fieldset:nth-of-type(1) .mf-row:nth-of-type(2),
  .muni-form-agua fieldset:nth-of-type(2) .mf-row:nth-of-type(1){
    grid-template-columns: 1fr;
  }
  .muni-form-agua .mf-row:first-of-type .mf-col-full input[readonly]{
    max-width: 100%;
  }
}
/* ===== Agendar Cita — tarjeta y layout ===== */

.cita-card{
  max-width: 1100px;
  width: calc(100% - 48px);
  margin: 32px auto 64px;
  background:#fff;
  border:1px solid #e8edf5;
  border-radius:16px;
  box-shadow:0 8px 30px rgba(18,38,63,.06);
  padding:28px;
  box-sizing:border-box;
}

/* Encabezado dentro de la tarjeta */
.cita-head{
  margin:-6px -6px 14px;
  padding:6px 6px 12px;
  border-bottom:1px solid #e8edf5;
}
.cita-title{
  text-align: center;
  margin-bottom: 2%;
  
  font-weight:800;
  font-size:clamp(22px,3.2vw,30px);
  color:#1c2a39;
}
.cita-sub{
  margin:0 0 0;
  color:#5c6b7a;
}

/* Fila de fecha con aire inferior extra */
.cita-row{ margin:0 0 10px; }
.cita-row-date{ margin-bottom:16px; }
.cita-col-full label{ display:block; font-weight:700; color:#22324a; margin-bottom:8px; }
.cita-col-full input{
  width:100%; border:1px solid #dbe3ef; border-radius:10px; padding:12px 14px; background:#f8fafc;
}

/* Fieldset */
.cita-fieldset{ border:0; margin:6px 0 0; padding:0; }
.cita-fieldset > legend{
  font-weight:800;
  font-size:18px;
  color:#1c2a39;
  margin:4px 0 10px;
}
.cita-fieldset > legend:after{
  content:"";
  display:block;
  height:1px;
  background:#e8edf5;
  margin-top:10px;
}

/* Grid 2 columnas */
.cita-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 28px;
}
.cita-col-1{ grid-column: 1 / -1; }

.cita-col label{ display:block; font-weight:700; color:#22324a; margin-bottom:8px; }

.cita-input,
.cita-textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #dbe3ef;
  border-radius:10px;
  padding:12px 14px;
  font:600 16px/1.4 "Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#17212b;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cita-input:focus,
.cita-textarea:focus{
  outline:none;
  border-color:#7aa7ff;
  box-shadow:0 0 0 3px rgba(122,167,255,.25);
}
.cita-textarea{ min-height: 220px; resize: vertical; }

.req{ color:#9b2c2c; font-weight:800; }

/* Botón */
.cita-actions{ 
  margin-top:16px;
text-align: center; }
.cita-btn{
  display:inline-block;
  background:#240038;
  color:#fff;
  border:0;
 
  padding:12px 18px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(109,40,217,.2);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.cita-btn:hover{ transform: translateY(-1px); box-shadow:0 12px 26px rgba(109,40,217,.28); }

/* Mensajes estándar */
.muni-ok{
  max-width:1100px; width:calc(100% - 48px); margin:18px auto;
  background:#f0fff4; color:#22543d; border:2px solid #38a169; border-radius:10px; padding:10px 12px;
}
.muni-err{
  max-width:1100px; width:calc(100% - 48px); margin:18px auto;
  background:#fff5f5; color:#742a2a; border:2px solid #e53e3e; border-radius:10px; padding:10px 12px;
}

/* Responsive */
@media (max-width: 900px){
  .cita-grid{ grid-template-columns: 1fr; gap:18px; }
  .cita-textarea{ min-height:180px; }
}
@media (max-width: 600px){
  .cita-card{ width:calc(100% - 32px); margin:20px auto 44px; padding:20px; }
}