/*
Theme Name: EPAS Neuquén
Theme URI: https://epas.neuquen.gob.ar
Author: EPAS · Ente Provincial de Agua y Saneamiento
Author URI: https://epas.neuquen.gob.ar
Description: Tema institucional de EPAS Neuquén. Sistema de diseño basado en tokens, tipografía Figtree y paleta Agua/Cielo. Pensado para Full Site Editing (WordPress 6.4+).
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: epas
Tags: full-site-editing, block-styles, custom-colors, custom-logo, accessibility-ready, responsive-layout
*/

/* ============================================================
   EPAS v2 — Estilos complementarios a theme.json
   Organización:
   1. Reset & base
   2. Foco accesible global
   3. Topbar institucional
   4. Header principal (blanco)
   5. Navegación
   6. Hero con ola
   7. Sección servicios / accesos rápidos
   8. Sección estado del servicio
   9. Sección novedades (grilla asimétrica)
   10. Footer
   11. Block styles (botones, tarjetas)
   12. Badges y alertas
   13. Utilidades
   14. Responsive
   ============================================================ */


/* ── 1. Reset & base ──────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

a { transition: color 0.15s ease; }


/* ── 2. Foco accesible global ─────────────────────────────── */

:where(a, button, .wp-block-button__link, input, select, textarea):focus-visible {
  outline: 3px solid var(--wp--preset--color--epas-cielo-400);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ── 3. Topbar institucional ──────────────────────────────── */

.epas-topbar {
  background: var(--wp--preset--color--epas-profundo-800);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1;
  padding: 9px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.epas-topbar__org {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.epas-topbar__links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.epas-topbar__links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.epas-topbar__links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}


/* ── 4. Header principal ──────────────────────────────────── */

/*
  El header pasa de fondo azul (v1) a fondo blanco (v2).
  Se controla con la clase .epas-header aplicada al wp:group del part header.html.
  La topbar oscura queda separada como franja propia.
*/

.epas-header {
  background: #fff !important;
  border-bottom: 1px solid var(--wp--preset--color--epas-borde);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Fix sticky header — el template part wrapper no debe cortar el overflow */
.wp-block-template-part:has(.epas-header) {
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
}

/* Logo: en header blanco se muestra en color (azul). Restituir filter. */
.epas-header .wp-block-site-logo img {
  filter: none !important;
}

/* Logo blanco — solo para topbar o footer oscuro */
.epas-logo-blanco img,
.wp-block-template-part[data-area="footer"] .wp-block-site-logo img {
  filter: brightness(0) invert(1) !important;
}

/* Asegurar que el logo del editor no quede blanco sobre blanco */
.editor-styles-wrapper .wp-block-site-logo img {
  filter: none !important;
}


/* ── 5. Navegación ────────────────────────────────────────── */

/* Nav principal — links oscuros con underline activo cielo */
.epas-header .wp-block-navigation a,
.epas-header .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--epas-neutral-700) !important;
  text-decoration: none;
  padding-bottom: 4px;
  position: relative;
  transition: color 0.15s;
}

.epas-header .wp-block-navigation a:hover,
.epas-header .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--epas-agua-600) !important;
}

/* Ítem activo — underline azul inferior */
.epas-header .wp-block-navigation .current-menu-item > a,
.epas-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.epas-header .wp-block-navigation .is-active > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--epas-agua-600) !important;
  font-weight: 600;
}

/* Padding de ítems del submenú */
.epas-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.epas-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-link > .wp-block-navigation-item__content,
.epas-header .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  padding: 0.4rem 1rem;
}

/* Botón "Oficina Virtual" en el nav — estilo primario pequeño */
.epas-btn-ofivirtual .wp-block-button__link {
  font-size: 13px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}


/* ── 6. Hero con ola SVG ──────────────────────────────────── */

/* Wrapper del hero: posición relative para que la ola absoluta funcione */
.epas-hero-wrap {
  position: relative;
  overflow: visible;
}

/* Ola SVG al pie del hero — generada vía pseudo-elemento en el cover */
.epas-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 80px;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0,50 Q150,10 300,50 T600,50 T900,50 T1200,50 V80 H0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E")
    no-repeat center bottom;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 3;
}

/* Variante de ola para fondo blanco */
.epas-hero-wave--blanco {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0,50 Q150,10 300,50 T600,50 T900,50 T1200,50 V80 H0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Eyebrow del hero — texto cielo claro */
.epas-hero-eyebrow {
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--wp--preset--color--epas-cielo-300) !important;
  margin-bottom: 14px;
}

/* El em/strong en el h1 del hero — color cielo */
.epas-hero-wrap h1 em,
.wp-block-cover__inner-container h1 em {
  font-style: normal;
  color: var(--wp--preset--color--epas-cielo-300);
}

/* Card de acceso rápido dentro del hero (glassmorphism) */
.epas-quick-access {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.epas-quick-access label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 6px;
}

.epas-quick-access input[type="text"],
.epas-quick-access input[type="number"] {
  width: 100%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--wp--preset--color--epas-texto);
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--wp--preset--font-family--epas-principal);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
  transition: box-shadow 0.15s;
}

.epas-quick-access input:focus {
  outline: 2px solid var(--wp--preset--color--epas-cielo-400);
  outline-offset: 0;
}


/* ── 7. Tarjetas de servicios / accesos rápidos ───────────── */

/* Tarjeta de servicio con ícono */
.epas-svc-card {
  background: #fff;
  border: 1px solid var(--wp--preset--color--epas-borde);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  text-decoration: none;
}

.epas-svc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wp--preset--shadow--epas-md);
  border-color: var(--wp--preset--color--epas-cielo-400);
}

/* Ícono contenedor */
.epas-svc-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--wp--preset--color--epas-agua-50);
  color: var(--wp--preset--color--epas-agua-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.epas-svc-icon svg {
  width: 22px;
  height: 22px;
}

.epas-svc-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--epas-texto);
  line-height: 1.3;
}

.epas-svc-card p {
  margin: 0;
  font-size: 13px;
  color: var(--wp--preset--color--epas-texto-medio);
  line-height: 1.5;
  flex: 1;
}

.epas-svc-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--epas-agua-600);
  text-decoration: none;
  margin-top: 4px;
}

/* Grid de 4 servicios */
.epas-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}


/* ── 8. Estado del servicio ───────────────────────────────── */

/* Mapa placeholder estilizado */
.epas-status-map {
  background: linear-gradient(135deg,
    var(--wp--preset--color--epas-agua-50),
    var(--wp--preset--color--epas-cielo-300) 60%,
    var(--wp--preset--color--epas-agua-100));
  border-radius: 16px;
  min-height: 340px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--epas-borde);
}

/* Filas de estado */
.epas-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--wp--preset--color--epas-fondo);
  border-radius: 10px;
  gap: 12px;
}

.epas-status-row__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--wp--preset--color--epas-texto);
  line-height: 1.3;
}

.epas-status-row__meta {
  font-size: 12px;
  color: var(--wp--preset--color--epas-texto-suave);
  margin-top: 2px;
}


/* ── 9. Novedades — grilla asimétrica ─────────────────────── */

/*
  Layout: 1 nota featured grande (izquierda) + 2 secundarias (derecha).
  Implementado con CSS Grid sobre el wp:query → wp:post-template.
  La clase .epas-news-grid se aplica al contenedor del query.
*/

.epas-news-grid .wp-block-post-template {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Primera tarjeta → featured */
.epas-news-grid .wp-block-post-template > li:first-child .epas-news-img {
  height: 280px;
}

.epas-news-grid .wp-block-post-template > li:first-child .is-style-epas-news-card h3 {
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  letter-spacing: -0.01em;
}

/* Imagen de tarjeta de noticia */
.epas-news-img {
  height: 180px;
  background: linear-gradient(135deg,
    var(--wp--preset--color--epas-cielo-400),
    var(--wp--preset--color--epas-agua-700));
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  position: relative;
}

.epas-news-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 80%, rgba(255,255,255,0.15), transparent 60%);
}

.epas-news-img img,
.epas-news-img .wp-post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.epas-news-grid ul :nth-child(n+4) {
  display: none;
}

/* ── 10. Footer ───────────────────────────────────────────── */

.wp-block-template-part[data-area="footer"] {
  background: var(--wp--preset--color--epas-profundo-800) !important;
  color: rgba(255, 255, 255, 0.78);
  padding-block: 0;
}

.wp-block-template-part[data-area="footer"] a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.15s;
}

.wp-block-template-part[data-area="footer"] a:hover {
  color: #fff;
}

/* Heading overline en footer — color blanco */
.wp-block-template-part[data-area="footer"] h6,
.wp-block-template-part[data-area="footer"] .wp-block-heading {
  color: #fff !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: 14px;
}

/* Lista de links en footer */
.wp-block-template-part[data-area="footer"] ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  line-height: 2.1;
}

/* Logo blanco en footer */
.wp-block-template-part[data-area="footer"] .wp-block-site-logo img {
  filter: brightness(0) invert(1);
}

/* Franja legal inferior */
.epas-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: var(--wp--preset--spacing--5);
  margin-top: var(--wp--preset--spacing--7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
}


/* ── 11. Block styles (botones, tarjetas) ─────────────────── */

/* Botón secundario · contorno */
.wp-block-button.is-style-epas-secundario .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--epas-agua-600);
  box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--epas-agua-600);
  border-radius: 24px;
  font-size: var(--wp--preset--font-size--lg);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-block-button.is-style-epas-secundario .wp-block-button__link:hover {
  background: var(--wp--preset--color--epas-agua-50);
  color: var(--wp--preset--color--epas-agua-700);
}

/* Botón fantasma · sobre azul */
.wp-block-button.is-style-epas-fantasma .wp-block-button__link {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  font-size: var(--wp--preset--font-size--lg);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-block-button.is-style-epas-fantasma .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Botón celeste */
.wp-block-button.is-style-epas-celeste .wp-block-button__link {
  background: var(--wp--preset--color--epas-cielo-400);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  font-size: var(--wp--preset--font-size--lg);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.wp-block-button.is-style-epas-celeste .wp-block-button__link:hover {
  background: var(--wp--preset--color--epas-cielo-500);
}

/* Botón contorno cielo */
.is-style-contorno-cielo .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--epas-cielo-500);
  border: 2px solid var(--wp--preset--color--epas-cielo-500);
  border-radius: 24px;
  font-size: var(--wp--preset--font-size--lg);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.is-style-contorno-cielo .wp-block-button__link:hover,
.is-style-contorno-cielo .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--epas-cielo-400);
  color: var(--wp--preset--color--epas-blanco);
  border-color: var(--wp--preset--color--epas-cielo-400);
}

/* Tarjeta institucional base */
.is-style-epas-tarjeta {
  background: #fff;
  border: 1px solid var(--wp--preset--color--epas-borde);
  border-radius: 14px;
  padding: var(--wp--preset--spacing--7);
  box-shadow: var(--wp--preset--shadow--epas-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.is-style-epas-tarjeta:hover {
  transform: translateY(-3px);
  box-shadow: var(--wp--preset--shadow--epas-md);
  border-color: var(--wp--preset--color--epas-cielo-400);
}

/* Tarjeta de noticia */
.is-style-epas-news-card {
  background: #fff;
  border: 1px solid var(--wp--preset--color--epas-borde);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.is-style-epas-news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wp--preset--shadow--epas-md);
}

.is-style-epas-news-card .wp-block-post-featured-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.is-style-epas-news-card:first-child .wp-block-post-featured-image img {
  height: 280px;
}


/* ── 12. Badges y alertas ─────────────────────────────────── */

.epas-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Punto de estado */
.epas-badge--dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.epas-badge--normal  { background: var(--wp--preset--color--epas-agua-50);  color: var(--wp--preset--color--epas-agua-600); }
.epas-badge--accent  { background: rgba(63, 184, 221, 0.12);                 color: #0A7898; }
.epas-badge--alerta  { background: #FFF3DB; color: #8A5500; }
.epas-badge--corte   { background: #FCE8E6; color: #8A1A16; }
.epas-badge--exito   { background: #E6F4ED; color: #1F8A4C; }

/* Alerta institucional */
.epas-alerta {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 10px;
  border-left: 4px solid var(--wp--preset--color--epas-cielo-500);
  background: var(--wp--preset--color--epas-agua-50);
  font-size: 14px;
  line-height: 1.55;
}
.epas-alerta strong {
  display: block;
  margin-bottom: 4px;
  color: var(--wp--preset--color--epas-agua-700);
}


/* ── 13. Utilidades ───────────────────────────────────────── */

/* Section head: título izquierda + link derecha */
.epas-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--wp--preset--spacing--7);
  gap: 16px;
  flex-wrap: wrap;
}

.epas-section-head h2 { margin: 0; }

.epas-section-head .epas-ver-todas {
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--epas-agua-600);
  text-decoration: none;
  white-space: nowrap;
}

.epas-section-head .epas-ver-todas:hover {
  color: var(--wp--preset--color--epas-agua-700);
  text-decoration: underline;
}

/* Lede / descripción secundaria */
.epas-lede {
  color: var(--wp--preset--color--epas-texto-medio);
  font-size: 14px;
  line-height: 1.6;
  max-width: 40ch;
}

/* Separador visual horizontal */
.epas-divider {
  border: none;
  border-top: 1px solid var(--wp--preset--color--epas-borde);
  margin: 0;
}

/* Punto "En vivo" pulsante */
.epas-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--epas-cielo-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.epas-live-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--epas-cielo-500);
  animation: epas-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes epas-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.85); }
}

/* Eyebrow overline reutilizable */
.epas-overline {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 14px;
}


/* ── 14. Responsive ───────────────────────────────────────── */

/* ── Tablet (max 1024px) ────────────────────────────────── */
@media (max-width: 1024px) {

  .epas-topbar {
    padding: 8px 20px;
  }

  /* Grilla de servicios → 2 columnas */
  .epas-svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Grilla de noticias → columna única con featured arriba */
  .epas-news-grid .wp-block-post-template {
    grid-template-columns: 1fr 1fr !important;
  }

  .epas-news-grid .wp-block-post-template > li:first-child {
    grid-column: 1 / -1;
  }

  .epas-news-grid .wp-block-post-template > li:first-child .epas-news-img,
  .epas-news-grid .wp-block-post-template > li:first-child .is-style-epas-news-card .wp-block-post-featured-image img {
    height: 240px;
  }
}

/* ── Mobile (max 768px) ─────────────────────────────────── */
@media (max-width: 768px) {

  /* Topbar: ocultar links secundarios, mostrar solo org */
  .epas-topbar__links {
    display: none;
  }

  .epas-topbar {
    justify-content: center;
    text-align: center;
    padding: 8px 16px;
  }

  /* Header: padding reducido */
  .epas-header .wp-block-group {
    padding-left: var(--wp--preset--spacing--4) !important;
    padding-right: var(--wp--preset--spacing--4) !important;
  }

  /* Nav: ocultar en mobile (queda el hamburger de WP) */
  .epas-header .wp-block-navigation {
    font-size: 14px;
  }

  /* Hero: padding reducido, layout en columna única */
  .wp-block-cover.epas-hero-wrap {
    padding-left: var(--wp--preset--spacing--5) !important;
    padding-right: var(--wp--preset--spacing--5) !important;
    padding-top: var(--wp--preset--spacing--9) !important;
    padding-bottom: 100px !important;
    min-height: auto !important;
  }

  /* Grid hero (2 cols) → columna única */
  .epas-hero-inner {
    grid-template-columns: 1fr !important;
    gap: var(--wp--preset--spacing--7) !important;
  }

  /* Ola: altura reducida en mobile */
  .epas-hero-wave {
    height: 50px;
  }

  /* h1 del hero */
  .wp-block-cover__inner-container h1 {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }

  /* Servicios → 1 columna */
  .epas-svc-grid {
    grid-template-columns: 1fr;
  }

  /* Estado del servicio → columna única */
  .epas-status-inner {
    grid-template-columns: 1fr !important;
  }

  .epas-status-map {
    min-height: 220px;
  }

  /* Noticias → columna única */
  .epas-news-grid .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }

  .epas-news-grid .wp-block-post-template > li:first-child {
    grid-column: auto;
  }

  /* Footer → columna única */
  .wp-block-template-part[data-area="footer"] .wp-block-columns {
    flex-direction: column !important;
  }

  .wp-block-template-part[data-area="footer"] .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  .epas-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  /* Section head → columna */
  .epas-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Tarjeta institucional → padding reducido */
  .is-style-epas-tarjeta {
    padding: var(--wp--preset--spacing--5);
  }

  /* Status rows → wrap del badge */
  .epas-status-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── Mobile pequeño (max 480px) ─────────────────────────── */
@media (max-width: 480px) {

  .epas-topbar {
    font-size: 11px;
  }

  /* Hero CTA botones → columna */
  .wp-block-cover__inner-container .wp-block-buttons {
    flex-direction: column !important;
    align-items: flex-start;
  }

  .wp-block-cover__inner-container .wp-block-button {
    width: 100%;
  }

  .wp-block-cover__inner-container .wp-block-button__link {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}


/* ── Headings · tamaños explícitos por nivel ──────────────────
   Necesario porque WordPress no propaga correctamente los presets
   fluidos con slugs numéricos (2xl, 3xl, 4xl) al bloque core/heading.
   Los valores clamp() son idénticos a los definidos en theme.json.
   ─────────────────────────────────────────────────────────── */

.wp-block-heading,
.editor-styles-wrapper .wp-block-heading {
  color: var(--wp--preset--color--epas-agua-700);
  font-family: var(--wp--preset--font-family--epas-principal);
}

/* H1 — 4xl: clamp(1.875rem, 3rem) */
h1.wp-block-heading {
  font-size: clamp(1.875rem, 4.5vw + 0.5rem, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--wp--preset--spacing--5);
}

/* H2 — 3xl: clamp(1.625rem, 2.25rem) */
h2.wp-block-heading {
  font-size: clamp(1.625rem, 3vw + 0.4rem, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: var(--wp--preset--spacing--3);
  margin-bottom: var(--wp--preset--spacing--3);
}

/* H3 — 2xl: clamp(1.25rem, 1.75rem) */
h3.wp-block-heading {
  font-size: clamp(1.25rem, 2vw + 0.3rem, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  margin-top: var(--wp--preset--spacing--3);
  margin-bottom: var(--wp--preset--spacing--3);
}

/* H4 — xl: clamp(1.125rem, 1.375rem) */
h4.wp-block-heading {
  font-size: clamp(1.125rem, 1.5vw + 0.2rem, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--epas-agua-800);
}

/* H5 — lg: clamp(1rem, 1.125rem) */
h5.wp-block-heading {
  font-size: clamp(1rem, 1vw + 0.2rem, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--epas-texto);
}

/* H6 — caption: 0.8125rem fijo */
h6.wp-block-heading {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--epas-cielo-500);
}

/* post-title (single.html) */
.wp-block-post-title {
  font-size: clamp(1.875rem, 4.5vw + 0.5rem, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--epas-agua-700);
}

body.single-post .entry-content p {
  font-size: var(--wp--preset--font-size--lg) !important;
}

/* Objetivos estratégicos */
.epas-objetivo-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.epas-objetivo-card svg {
  color: var(--wp--preset--color--epas-agua-600);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .wp-block-columns:has(.epas-objetivo-card) {
    flex-direction: column;
  }
}

.hidden  { display: none !important; }

@media (min-width: 1025px) {
  .epas-hide-desktop { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .epas-hide-tablet  { display: none !important; }
}
@media (max-width: 768px) {
  .epas-hide-mobile  { display: none !important; }
}

/* ── MAPA DE LOCALIDADES (embed iframe) ── */
.epas-mapa-embed {
  width: 100%;
  height: 82vh;
  min-height: 580px;
  max-height: 860px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 155, 221, 0.15);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.18);
}

.epas-mapa-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ============================================================
   Botones con ícono SVG inline
   SVG siempre a la derecha, texto a la izquierda
   ============================================================ */

   .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
}

.wp-block-button__link svg {
    flex-shrink: 0;
    margin-left: auto;
    pointer-events: none;
    height: 1.5rem;
    width: auto;
    display: flex;
}

@media (min-width: 1025px) {
/* ─── Submenú desktop ─── */
.wp-block-navigation__submenu-container {
  min-width: 300px !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  border-radius: 8px !important;
  padding: 30px !important;
}
}

.wp-block-details summary {
  color: var(--wp--preset--color--epas-agua-600);
  line-height: 1.1rem;
  padding: 20px 0;
}

/* ============================================================
   MENÚ MOBILE — Drawer lateral EPAS
   Afecta al responsive container nativo de Gutenberg.
   Activo en viewports ≤ 768px (breakpoint mobile del proyecto).
   ============================================================ */

   @media (max-width: 599px) {

    /* ── Botón hamburguesa ─────────────────────────────────── */
    .epas-header .wp-block-navigation__responsive-container-open {
      color: var(--wp--preset--color--epas-agua-600);
      background: transparent;
      border: none;
      padding: 6px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s;
    }
  
    .epas-header .wp-block-navigation__responsive-container-open:hover {
      background: var(--wp--preset--color--epas-agua-50);
    }
  
    /* Ícono SVG del botón — hacerlo un poco más grande */
    .epas-header .wp-block-navigation__responsive-container-open svg {
      width: 26px;
      height: 26px;
    }
  
    /* ── Overlay / Drawer ──────────────────────────────────── */
    .epas-header .wp-block-navigation__responsive-container {
      /* Panel lateral desde la derecha */
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: auto;               /* solo derecha */
      width: min(320px, 85vw);  /* 320px en tablets, 85% en móviles pequeños */
      height: 100dvh;
  
      background: var(--wp--preset--color--epas-blanco);
      box-shadow: -8px 0 40px rgba(6, 24, 41, 0.18);
      z-index: 9999;
  
      /* Evitar que quede centrado como hace WP por defecto */
      display: none;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
  
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  
    /* Cuando está abierto WP agrega .is-menu-open */
    .epas-header .wp-block-navigation__responsive-container.is-menu-open {
      display: flex;
    }
  
    /* ── Contenido interno del drawer ──────────────────────── */
    .epas-header .wp-block-navigation__responsive-container-content {
      display: flex;
      flex-direction: column;
      align-items: stretch;     /* items a ancho completo */
      justify-content: flex-start;
      padding: 0;
      width: 100%;
      gap: 0;
    }
  
    /* ── Encabezado del drawer: logo + botón cerrar ─────────── */
    .epas-header .wp-block-navigation__responsive-dialog {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }
  
    /* Barra superior del drawer con logo EPAS */
    .epas-header .wp-block-navigation__responsive-container-content::before {
      content: "";
      display: block;
      height: 6px;
      background: var(--wp--preset--color--epas-agua-600);
      flex-shrink: 0;
    }
  
    /* ── Botón cerrar (X) ──────────────────────────────────── */
    .epas-header .wp-block-navigation__responsive-container-close {
      position: absolute;
      top: 16px;
      right: 16px;
      color: var(--wp--preset--color--epas-agua-600);
      background: transparent;
      border: none;
      padding: 6px;
      border-radius: 6px;
      cursor: pointer;
      z-index: 10;
      transition: background 0.15s;
    }
  
    .epas-header .wp-block-navigation__responsive-container-close:hover {
      background: rgba(255, 255, 255, 0.15);
    }
  
    .epas-header .wp-block-navigation__responsive-container-close svg {
      width: 22px;
      height: 22px;
    }
  
    /* ── Ítems del menú ────────────────────────────────────── */
    .epas-header .wp-block-navigation__responsive-container .wp-block-navigation-item {
      width: 100%;
    }
  
    /* Link de cada ítem */
    .epas-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 15px 24px !important;
      font-size: 0.9375rem;      /* 15px */
      font-weight: 400;
      color: var(--wp--preset--color--epas-texto) !important;
      text-decoration: none;
      transition: background 0.12s, color 0.12s;
      line-height: 1.3;
      border-top: 1px solid var(--wp--preset--color--epas-borde);
    }
  
    .epas-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
      background: var(--wp--preset--color--epas-agua-50);
      color: var(--wp--preset--color--epas-agua-600) !important;
    }
  
    /* Ítem activo */
    .epas-header .wp-block-navigation__responsive-container .current-menu-item > .wp-block-navigation-item__content {
      color: var(--wp--preset--color--epas-agua-600) !important;
      background: var(--wp--preset--color--epas-agua-50);
      border-left: 3px solid var(--wp--preset--color--epas-agua-600);
      /*padding-left: 21px !important;*/
    }
  
    /* ── Páginas padre: negrita ────────────────────────────── */
    /* Gutenberg marca los ítems con submenú con .has-child */
    .epas-header .wp-block-navigation__responsive-container .has-child > .wp-block-navigation-item__content {
      font-weight: 700;
      color: var(--wp--preset--color--epas-agua-700) !important;
      /*font-size: 0.9375rem;*/
    }
  
    /* Flecha del submenú */
    .epas-header .wp-block-navigation__responsive-container .has-child .wp-block-navigation__submenu-icon {
      color: var(--wp--preset--color--epas-agua-600);
      margin-left: auto;
    }

    .epas-header .wp-block-navigation__responsive-container .has-child .wp-block-navigation__submenu-container {
      width: 100% !important;
    }
  
    /* ── Submenú (hijos) ───────────────────────────────────── */
    .epas-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
      position: static !important;     /* no flotante, inline */
      box-shadow: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      min-width: unset !important;
      background: var(--wp--preset--color--epas-fondo);
      width: 100%;
    }
  
    /* Links hijos: indentados y en gris */
    .epas-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
      /*padding-left: 40px !important;
      font-size: 0.875rem;    /* 14px */
      font-weight: 400;
      color: var(--wp--preset--color--epas-texto-medio) !important;
    }
  
    .epas-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
      color: var(--wp--preset--color--epas-agua-600) !important;
      background: var(--wp--preset--color--epas-agua-50);
    }
  
    /* Separador visual antes del primer hijo */
    .epas-header .wp-block-navigation__responsive-container .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item:first-child {
      border-top: none;
    }
  
    .epas-header .wp-block-navigation__responsive-container .epas-mobile-only {
      display: block; /* visible solo dentro del drawer mobile */
    }
  
    /* Separador visual antes del primer link solo-mobile */
    .epas-header .wp-block-navigation__responsive-container .epas-mobile-only:first-of-type {
      border-top: 2px solid var(--wp--preset--color--epas-borde-fuerte);
      margin-top: 4px;
    }
  
    /* Estilo levemente diferenciado: texto cielo para indicar "acceso directo" */
    .epas-header .wp-block-navigation__responsive-container .epas-mobile-only > .wp-block-navigation-item__content {
      color: var(--wp--preset--color--epas-agua-600) !important;
      font-weight: 700;
      /*font-size: 0.875rem;*/
    }
  
  }
  
/* ── Links solo-mobile (.epas-mobile-only) ─────────────── */
    /*
      Uso: en el editor de navegación, agregar esta clase CSS
      en "Opciones avanzadas → Clase CSS adicional" del ítem.
      El ítem NO aparece en desktop.
    */
    .epas-header .wp-block-navigation .epas-mobile-only {
      display: none;  /* oculto por defecto (desktop) */
    }

  /* ── Quitar display:flex del overlay en desktop ─────────── */
  /* WP a veces deja .is-menu-open en resize — esto lo resetea */
  @media (min-width: 769px) {
    .epas-header .wp-block-navigation__responsive-container.is-menu-open {
      display: none !important;
    }
  }

  /* ============================================================
   Single Licitación — epas-single-lic
   Agregar al final de epas-theme/style.css
   ============================================================ */

/* ─── Wrapper principal ──────────────────────────────────────────────────── */

.epas-single-lic {
	max-width: 860px;
	margin-inline: auto;
	padding-block: 2.5rem 4rem;
	padding-inline: 1.5rem;
	font-family: var(--wp--preset--font-family--epas-principal, sans-serif);
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */

.epas-single-lic__breadcrumb ol {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	font-size: 0.8rem;
	color: #777;
}

.epas-single-lic__breadcrumb li + li::before {
	content: "/";
	color: #bbb;
	margin-right: 0.5rem;
}

.epas-single-lic__breadcrumb a {
	color: var(--wp--preset--color--epas-celeste, #009BDD);
	text-decoration: none;
}

.epas-single-lic__breadcrumb a:hover {
	text-decoration: underline;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.epas-single-lic__header {
	margin-block-end: 2.5rem;
	padding-block-end: 2rem;
	border-block-end: 2px solid #E2E8F0;
}

.epas-single-lic__meta {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex-wrap: wrap;
	margin-block-end: 0.875rem;
}

.epas-single-lic__tag {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
  background-color: var(--wp--preset--color--epas-agua-50);
}

.epas-single-lic__tag--obras-publicas {
	
}

.epas-single-lic__tag--adquisiciones {
	
}

.epas-single-lic__numero {
	font-size: 0.8rem;
	font-weight: 600;
	color: #555;
}

.epas-single-lic__titulo {
	margin: 0 0 1rem;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--epas-azul, #1F478B);
}

.epas-single-lic__estado-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Badges de estado — mismos colores que en el bloque listado */

.epas-single-lic__badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.epas-single-lic__badge--activa     { background: #DCFCE7; color: #15803D; }
.epas-single-lic__badge--adjudicada { background: #DBEAFE; color: #1D4ED8; }
.epas-single-lic__badge--desierta   { background: #FEF9C3; color: #854D0E; }
.epas-single-lic__badge--cancelada  { background: #FEE2E2; color: #B91C1C; }

.epas-single-lic__publicado {
	font-size: 0.8rem;
	color: #888;
}

/* ─── Secciones ──────────────────────────────────────────────────────────── */

.epas-single-lic__seccion {
	margin-block-end: 2.5rem;
}

.epas-single-lic__seccion-titulo {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--epas-azul, #1F478B);
	margin: 0 0 1.25rem;
	padding-block-end: 0.5rem;
	border-block-end: 2px solid var(--wp--preset--color--epas-celeste, #009BDD);
	display: inline-block;
}

/* ─── Datos técnicos (DL grid) ───────────────────────────────────────────── */

.epas-single-lic__datos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.125rem 2.5rem;
	margin: 0;
	padding: 0;
}

.epas-single-lic__dato {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.epas-single-lic__dato--full {
	grid-column: 1 / -1;
}

.epas-single-lic__dato dt {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #888;
}

.epas-single-lic__dato dd {
	margin: 0;
	font-size: 0.95rem;
	color: #1C1C1C;
	line-height: 1.5;
}

.epas-single-lic__nota {
	display: block;
	font-size: 0.8rem;
	color: #666;
	font-style: italic;
	margin-block-start: 0.15rem;
}

.epas-single-lic__dato a {
	color: var(--wp--preset--color--epas-celeste, #009BDD);
	text-decoration: none;
	font-weight: 500;
}

.epas-single-lic__dato a:hover {
	text-decoration: underline;
}

/* ─── Contenido Gutenberg ────────────────────────────────────────────────── */

.epas-single-lic__contenido {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #333;
}

.epas-single-lic__contenido p {
	margin-block-end: 1em;
}

/* ─── Archivos ───────────────────────────────────────────────────────────── */

.epas-single-lic__archivos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.epas-single-lic__archivo {
	border: 1.5px solid #E2E8F0;
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.epas-single-lic__archivo:hover {
	border-color: var(--wp--preset--color--epas-celeste, #009BDD);
	box-shadow: 0 2px 8px rgba(0,155,221,0.1);
}

.epas-single-lic__descarga {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1.125rem;
	color: #1C1C1C;
	text-decoration: none;
}

.epas-single-lic__descarga-icono {
	flex-shrink: 0;
	color: var(--wp--preset--color--epas-celeste, #009BDD);
	display: flex;
	align-items: center;
}

.epas-single-lic__descarga-nombre {
	flex: 1;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
}

.epas-single-lic__descarga-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--epas-celeste, #009BDD);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}

/* ─── Navegación anterior / siguiente ────────────────────────────────────── */

.epas-single-lic__nav {
	margin-block: 2.5rem;
	padding-block: 1.5rem;
	border-block: 1px solid #E2E8F0;
}

.epas-single-lic__nav-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.epas-single-lic__nav-link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
	padding: 0.75rem;
	border-radius: 6px;
	transition: background 0.15s ease;
}

.epas-single-lic__nav-link:hover {
	background: #F8FAFC;
}

.epas-single-lic__nav-link--siguiente {
	text-align: right;
	margin-inline-start: auto;
}

.epas-single-lic__nav-dir {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--epas-celeste, #009BDD);
}

.epas-single-lic__nav-titulo {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--epas-azul, #1F478B);
	line-height: 1.3;
}

/* ─── Comentarios ────────────────────────────────────────────────────────── */

.epas-single-lic__comentarios {
	margin-block-start: 3rem;
	padding-block-start: 2rem;
	border-block-start: 2px solid #E2E8F0;
}

.epas-single-lic__comentarios-vacio {
	color: #777;
	font-size: 0.9rem;
	font-style: italic;
}

.epas-single-lic__lista-comentarios {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.epas-single-lic__comentario {
	padding-block: 1.25rem;
	border-block-end: 1px solid #E2E8F0;
}

.epas-single-lic__comentario:first-child {
	border-block-start: 1px solid #E2E8F0;
}

/* Comentario oficial (del admin) */
.epas-single-lic__comentario--oficial {
	background: #F0F7FF;
	border-radius: 6px;
	padding: 1.25rem;
	border: 1.5px solid #BFDBFE;
	margin-block: 0.5rem;
}

.epas-single-lic__comentario-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-block-end: 0.5rem;
}

.epas-single-lic__comentario-autor {
	font-size: 0.82rem;
	font-weight: 700;
	color: #333;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.epas-single-lic__icon-oficial {
	color: var(--wp--preset--color--epas-azul, #1F478B);
	flex-shrink: 0;
}

.epas-single-lic__badge-oficial {
	font-style: normal;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--wp--preset--color--epas-azul, #1F478B);
	color: #fff;
	padding: 0.1rem 0.45rem;
	border-radius: 3px;
	vertical-align: middle;
}

.epas-single-lic__comentario-fecha {
	font-size: 0.75rem;
	color: #999;
}

.epas-single-lic__comentario-cuerpo {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #333;
}

.epas-single-lic__comentario-cuerpo p:last-child {
	margin-block-end: 0;
}

/* ─── Formulario de comentarios ──────────────────────────────────────────── */

.epas-single-lic__form-titulo {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--epas-azul, #1F478B);
	margin: 0 0 0.5rem;
}

.epas-single-lic__form-nota {
	font-size: 0.8rem;
	color: #888;
	margin-block-end: 1.25rem;
}

/* Estilos para los campos nativos del formulario de WP */
#commentform label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #555;
	margin-block-end: 0.35rem;
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform textarea {
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1.5px solid #CBD5E1;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9rem;
	color: #1C1C1C;
	background: #fff;
	transition: border-color 0.15s ease;
	box-sizing: border-box;
}

#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--epas-celeste, #009BDD);
	box-shadow: 0 0 0 3px rgba(0,155,221,0.12);
}

#commentform .comment-form-author,
#commentform .comment-form-email,
#commentform .comment-form-comment {
	margin-block-end: 1rem;
}

#commentform .comment-form-author,
#commentform .comment-form-email {
	display: inline-block;
	width: calc(50% - 0.5rem);
	vertical-align: top;
}

#commentform .comment-form-email {
	margin-inline-start: 0.75rem;
}

.epas-single-lic__form-submit,
#commentform .epas-single-lic__form-submit {
	display: inline-block;
	padding: 0.6rem 1.5rem;
	background-color: var(--wp--preset--color--epas-azul, #1F478B);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.epas-single-lic__form-submit:hover,
#commentform .epas-single-lic__form-submit:hover {
	background-color: var(--wp--preset--color--epas-celeste, #009BDD);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

	.epas-single-lic {
		padding-inline: 1rem;
	}

	.epas-single-lic__datos {
		grid-template-columns: 1fr;
	}

	.epas-single-lic__nav-inner {
		grid-template-columns: 1fr;
	}

	.epas-single-lic__nav-link--siguiente {
		text-align: left;
		margin-inline-start: 0;
	}

	#commentform .comment-form-author,
	#commentform .comment-form-email {
		display: block;
		width: 100%;
		margin-inline-start: 0;
	}
}