/*
Theme Name: AntucoDev Starter
Theme URI: https://victorastete.cl/
Author: Víctor Astete
Author URI: https://victorastete.cl/
Description: Tema starter liviano para Municipalidades - Pixel Perfect Figma -> WP. Basado en código mínimo (no frameworks).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: antucodev
*/

/* =======================
   TOKENS
======================= */
:root{
  --color-primary:#CB553D;   /* naranja municipal */
  --color-secondary:#4A6B47; /* verde */
  /*
   * Cambiamos el color de acento (naranja) de #F28F3B a #DF8233 para
   * ajustar los botones y elementos destacados al tono definido en Figma.
   */
  --color-accent:#DF8233;    /* botón "ver más" */
  --color-text:#1f2937;
  --color-weak:#6b7280;
  --color-muted:#f2f3f5;
  --color-bg:#f2f2f2;

  --font-title:"Barlow", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body:"Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px; --space-6:64px;

  --container-max:1280px;
}

/* =======================
   RESET BÁSICO
======================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-bg);
  color:var(--color-text);
  font:16px/1.55 var(--font-body);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-title); margin:0 0 .6em; }
h1{ font-weight:700; letter-spacing:.2px; }

/* Contenedor único (NO tocar en otros lados) */
.container{
  width:min(100% - 48px, var(--container-max));
  margin-inline:auto;
}

/* =======================
   HEADER 2 NIVELES
======================= */
.site-header{
  position:sticky; top:0; z-index:1000; background:#fff;
}
.admin-bar .site-header{ top:32px; }

/* Topbar naranja */
.topbar{ background:var(--color-primary); color:#fff; }
/*
 * The topbar contains the municipal logo and a group of call‑to‑action pills. To align
 * the entire block centrally within the available width (matching the Figma design),
 * we use flexbox rather than grid. This centers both the logo and the pill group as
 * a unit, while maintaining spacing and vertical alignment. The gap defines the
 * horizontal spacing between the logo and the pills. The min-height ensures a
 * consistent bar height across the site.
 */
.topbar__inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  /* Aumentamos levemente la altura mínima de la barra superior para darle
     una sensación más moderna y aireada. */
  min-height:72px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.brand img{ height:40px; width:auto; }
.brand__name{ font-family:var(--font-title); font-weight:800; letter-spacing:.2px; }

/* CTAs (pastillas) */
.top-cta{ display:flex; justify-content:flex-end; align-items:center; gap:12px; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  /* Reducimos la anchura de las pastillas clásicas acortando el relleno horizontal */
  padding:8px 12px; border-radius:999px; text-decoration:none; font-weight:700;
  border:2px solid rgba(255,255,255,.85);
}
.pill--ghost{ color:#fff; background:transparent; }
.pill--ghost:hover{ background:rgba(255,255,255,.15); }
.pill--solid{ background:#fff; color:#222; border-color:#fff; }
.pill--solid:hover{ filter:brightness(.95); }

/* Mainbar (menú principal + buscador) */
.mainbar{ background:#fff; border-bottom:1px solid #eee; }
.mainbar__inner{
  /*
   * Use flexbox instead of CSS grid for the main bar layout on desktop.
   * The original grid allocated equal fractional space on the left and right,
   * which caused the search icon to overlap the last menu item when the
   * navigation items were long or wrapped. With flexbox the navigation
   * grows to fill the available space while the search form stays on the
   * far right.  We retain the gap and alignment to preserve spacing and
   * vertical centering.
   */
  display:flex;
  align-items:center;
  gap:16px;
  /* Aumentamos un poco la altura mínima del mainbar para mejorar la proporción
     con la nueva altura de la topbar. */
  /* Incrementamos la altura mínima del mainbar para que el navbar sea más alto
     y se aproxime al ancho visual definido en los prototipos de Figma. */
  min-height:72px;
}

/* Menú horizontal */
.main-nav ul{ display:flex; gap:18px; margin:0; padding:0; list-style:none; }
.main-nav li{ position:relative; }

.main-nav > ul > li > a{
  display:inline-block;
  padding:10px 12px;
  border-radius:8px;
  text-decoration:none;
  color:#222;
  font-weight:700;
}

/* Flechita solo para los ítems que tienen submenú */
.main-nav > ul > li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
 
}

/*
 * Forzamos los submenús (dropdowns) a apilar sus elementos en columna.
 * Sin esta regla, algunos navegadores pueden disponer los elementos
 * horizontalmente. También estiramos los enlaces para ocupar todo el ancho.
 */
.main-nav .sub-menu{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.main-nav .sub-menu li a{
  width:100%;
}



.main-nav > ul > li > a:hover{ background:var(--color-muted); }
.main-nav .current-menu-item > a{ background:var(--color-primary); color:#fff; }

/* Submenús (dropdown por hover) */
.main-nav .sub-menu{
  position:absolute; left:0; top:calc(100% + 8px);
  min-width:220px; background:#fff; border:1px solid #eee; border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  padding:8px; margin:0; list-style:none;
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition:.18s ease; z-index:1000;
}
.main-nav .sub-menu li a{
  display:block; padding:10px 12px; border-radius:8px; color:#222; text-decoration:none; font-weight:600;
}
.main-nav .sub-menu li a:hover{ background:#f6f7f8; }
.main-nav li:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }

/* Botón búsqueda (placeholder) */
.search-btn{
grid-column:3; justify-self:end;
}

/* -------------------------------------------------
   Formulario de búsqueda (encabezado)
   -------------------------------------------------*/
/* La nueva búsqueda se implementa con get_search_form() y la plantilla
   searchform.php. Ocupamos un diseño compacto: el campo de texto se
   expande al recibir foco y permanece oculto en reposo para no ocupar
   demasiado espacio en la barra de navegación. */
.search-form{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  margin:0;
  /* Ubicamos el formulario de búsqueda en la tercera columna (derecha)
     del grid de la barra principal, igual que el botón original */
  grid-column:3;
  justify-self:end;
}
.search-field{
  width:0;
  padding:0;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  font-size:14px;
  transition:width .3s ease, padding .3s ease, border-color .3s ease, background .3s ease;
  color:var(--ink);
}
.search-form.is-open .search-field{
  /* Cuando el formulario está marcado como abierto desde JS,
     expandimos el campo para que el usuario pueda escribir. */
  width:150px;
  padding:6px 8px;
  border-color:#d1d5db;
  background:#fff;
}
.search-form:focus-within .search-field{
  width:150px;
  padding:6px 8px;
  border-color:#d1d5db;
  background:#fff;
}
.search-submit{
  background:none;
  border:none;
  cursor:pointer;
  padding:4px;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
}
.search-submit:hover{
  color:var(--color-primary);
}
.search-submit svg{
  width:20px;
  height:20px;
}

/*
 * Make the navigation area flexible so it expands to use the available
 * horizontal space in the main bar. Without flex-grow the menu can
 * shrink and allow the search icon to overlap the last menu item.
 */
.main-nav{
  flex-grow:1;
}

/*
 * Push the search form to the far right of the main bar.  When the
 * navigation occupies extra space the search icon will remain visible
 * and will no longer sit on top of the last menu item.  margin-left:auto
 * ensures the search stays at the end of the flex container.
 */
.search-form{
  margin-left:auto;
}

/* ======================================================
   Mobile navigation toggle
   ====================================================== */
/* Ocultar el botón del menú hamburguesa en resoluciones de escritorio */
.menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  padding:0 8px;
  color:var(--ink);
}

@media (max-width:992px){
  /* Ajustar el contenedor del mainbar para comportarse como flex en móvil */
  .mainbar__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    position:relative;
  }
  /* Mostrar el botón hamburguesa */
  .menu-toggle{
    display:block;
  }
  /* Ocultar el menú principal por defecto en móvil */
  .main-nav{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    background:#fff;
    border-bottom:1px solid #eee;
    padding:1rem;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    z-index:1000;
  }
  /* Mostrar el menú cuando esté abierto */
  .main-nav.is-open{
    display:block;
  }
  /* Ajustar presentación del menú en móvil: vertical */
  .main-nav ul{
    flex-direction:column;
    gap:.75rem;
  }
  .main-nav li a{
    padding:12px;
    display:block;
  }

  /*
   * Submenús en móviles: los dropdowns deben ser clicables para abrirse y
   * permanecer visibles.  Ocultamos los submenús por defecto y los
   * mostramos cuando el elemento padre tiene la clase `.submenu-open`, la
   * cual es añadida mediante JavaScript.  También eliminamos las
   * posiciones absolutas, sombras y transiciones que se usan en escritorio.
   */
  .main-nav .sub-menu{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    padding-left:1rem;
    display:none;
    border:none;
    background:transparent;
  }
  .main-nav li.submenu-open > .sub-menu{
    display:block;
  }
  .main-nav .sub-menu li a{
    padding-left:24px;
  }
}

/* =======================
   HERO (IMG + OVERLAY + BOTÓN)
======================= */
.hero{ padding:16px 0 24px; }

/* Imagen y contenido en la MISMA capa (sin desalineos) */
.hero__box{
  display:grid; border-radius:16px; overflow:hidden;
}
.hero__media{
  grid-area:1/1; width:100%;
  height: clamp(420px, 60vh, 560px);            /* responsive pero controlado */
  background:#ddd center/cover no-repeat;
}

/* contenido superpuesto al fondo con degradado */
.hero__content{
  grid-area:1/1; align-self:end; z-index:1;
  padding:24px 32px; color:#fff;
  background:none;
}
.hero__content h1{ margin:0 0 10px; color:#fff; }

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:var(--radius-md);
  font-weight:700; text-decoration:none; border:2px solid transparent;
}
.btn--primary{ background:var(--color-primary); color:#fff; }
.btn--primary:hover{ filter:brightness(.92); }
.btn--accent{ background:var(--color-accent); color:#fff; }
.btn--accent:hover{ filter:brightness(.92); }

/* Ajuste de encuadre (si el foco debe subir/bajar) */
.hero__media{ background-position:center 30%; }

/* =======================
   SECCIONES & GRID
======================= */
.section{ padding: var(--space-3) 0; }
.section-title{ font-family:var(--font-title); font-size:28px; margin:0 0 12px; }

.grid{ display:grid; gap:var(--space-2); }
.grid--3{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 1024px){ .grid--3{ grid-template-columns:1fr 1fr; } }
@media (max-width: 640px){ .grid--3{ grid-template-columns:1fr; } }

/* Tarjetas (noticias) */
.card{
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.08); }
.card__body{ padding:var(--space-2); }
.card__title a{ color:var(--color-text); text-decoration:none; }
.card__title a:hover{ color:var(--color-primary); }

/* =======================
   FOOTER
======================= */
.site-footer{
  /* Eliminamos el margen superior para que el pie de página quede pegado al menú
     superior y cambiamos el fondo a naranja sólido según el Figma (#f28f3b). */
  margin-top:0;
  /* Ajustamos el color de fondo del pie de página al tono especificado en el briefing (#DD5231).
     Este valor reemplaza el naranja anterior (#c8553d) para acercarse más al prototipo de Figma. */
  background: #DD5231;
  color:#fff;
  padding: var(--space-4) 0;
}
.site-footer a{ color:#fff; text-decoration:none; opacity:.9; }
.site-footer a:hover{ opacity:1; text-decoration:underline; }

/* =======================
   MENÚ SUPERIOR DEL FOOTER
======================= */
.sup-footer{
  background:#DF8233;
  padding: var(--space-3) 0;
  color:#fff;
}
.sup-footer__menu{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:17px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.sup-footer__menu > li > .sup-footer-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:#fff;
  color:#1F2937;
  font-weight:700;
  border-radius:12px;
  padding:12px 16px;
  text-decoration:none;
  border:1px solid #EFEFEF;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:.15s ease;
}
.sup-footer__menu > li > .sup-footer-link:hover{
  transform:translateY(-1px);
}
.sup-footer-label{ display:block; }
.sup-footer-arrow svg{ width:16px; height:16px; }
@media (max-width:992px){
  .sup-footer__menu{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .sup-footer__menu{ grid-template-columns:1fr; }
}

/* Iconos personalizados para el menú superior del footer. Los administradores
   pueden asignar las clases siguientes a cada elemento del menú desde
   Apariencia → Menús para mostrar el pictograma correspondiente antes del
   texto.  Los contenidos utilizan emojis sencillos para evitar dependencias
   externas. */
/* Base para íconos con PNG */
.sup-footer__menu li[class^="ico-"] > .sup-footer-link::before {
  content: "";
  display: inline-block;
  width: 20px;   /* ajusta según el tamaño real de tus iconos */
  height: 20px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.sup-footer__menu li.ico-tramites > .sup-footer-link::before{ background-image:url(/assets/doc.png);}
.sup-footer__menu li.ico-calendario > .sup-footer-link::before{ background-image:url(/assets/calendario.png); }
.sup-footer__menu li.ico-directorio > .sup-footer-link::before{ background-image:url(/assets/telefono.png); }
.sup-footer__menu li.ico-permiso > .sup-footer-link::before{ background-image:url(/assets/permiso_circulacion.png); }
.sup-footer__menu li.ico-consultas > .sup-footer-link::before{ content:"❓"; margin-right:8px; }
.sup-footer__menu li.ico-pagos > .sup-footer-link::before{ content:"💰"; margin-right:8px; }
.sup-footer__menu li.ico-solicitudes > .sup-footer-link::before{ content:"📥"; margin-right:8px; }
.sup-footer__menu li.ico-denuncias > .sup-footer-link::before{ content:"⚠️"; margin-right:8px; }
.sup-footer__menu li.ico-otros > .sup-footer-link::before{ content:"⋯"; margin-right:8px; }

/* =======================
   FOOTER REDISEÑADO
======================= */
.footer-grid{
  display:grid;
  gap:var(--space-4);
  /* Asignamos tres columnas iguales y alineamos el contenido hacia la izquierda
     siguiendo la maqueta: logo | alcaldesa | contacto/redes. */
  grid-template-columns:repeat(3,1fr);
  /* Alineamos todas las columnas del footer al fondo para que la imagen de la alcaldesa,
     los datos de contacto y las redes sociales queden apoyados en la misma línea base.
     Antes se utilizaba `align-items:start`, lo que colocaba cada columna en la parte
     superior del área disponible. */
  align-items:end;
  justify-items:start;
  padding:var(--space-4) 0;
}
@media (max-width:960px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-col:not(:last-child){ margin-bottom:var(--space-3); }
}
.footer-col--logo .custom-logo-link img{
  max-width:160px;
  height:auto;
  margin-bottom:1rem;
}
.footer-site-name{
  font-family:var(--font-title);
  font-size:1.4rem;
  font-weight:800;
  margin:0 0 .5rem;
}
.footer-tagline{ margin:0; color:#f8f8f8; font-size:.95rem; line-height:1.4; }
.footer-col--mayor{ text-align:center; }
.footer-mayor-photo{
  width:100px;
  height:100px;
  margin:0 auto 0.5rem;
  border-radius:50%;
  overflow:hidden;
}
.footer-mayor-photo img{ width:100%; height:100%; object-fit:cover; }
.footer-mayor-name{ font-size:1.1rem; font-weight:700; margin:.5rem 0 .25rem; }
.footer-mayor-desc{ margin:0; font-size:.85rem; color:#f3f3f3; }
.footer-col--contact{ text-align:left; }
.footer-contact-list{ list-style:none; margin:0 0 1rem; padding:0; }
.footer-contact-list li{
  display:flex;
  align-items:center;
  /* Aumentamos el espacio inferior para cada elemento de contacto para que
     la lista respire mejor y se ajuste a los comentarios de diseño. */
  margin-bottom:.75rem;
}
.footer-contact-list .contact-icon{ margin-right:.5rem; }
.footer-social{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1rem;
}
.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  /* Mantenemos la forma circular para conservar el espacio de interacción,
     pero eliminamos cualquier relleno de fondo. De este modo los pictogramas
     de las redes sociales se muestran sin el doble fondo blanco visto
     anteriormente. */
  border-radius:50%;
  background:transparent;
  color:#fff;
  text-decoration:none;
  transition:color .15s ease;
}
/* En el estado de hover únicamente aclaramos ligeramente el color del icono
   para evidenciar la interacción; evitamos aplicar de nuevo un fondo de color. */
.footer-social-link:hover{
  background:transparent;
  color:rgba(255,255,255,0.85);
}
.footer-contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  /* Incrementamos el relleno horizontal del botón de contacto para hacerlo más
     alargado, tal como exige el diseño. También aumentamos ligeramente el
     relleno vertical para equilibrar sus proporciones. */
  /*padding:.75rem 1.8rem;*/
  width: 246px;
  height: 45px;
  border-radius:999px;
  text-decoration:none;
  background:#fff;
  /* Texto negro para mayor contraste */
  color:#000 !important;
  border:0;
  transition:.15s ease;
}
.footer-contact-btn:hover{
  background:#fefefe;
  color:var(--color-secondary) !important;
  text-decoration:none;
}

/* Columna de tagline: alineación y estilo simple */
.footer-col--tagline{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.footer-col--tagline .footer-tagline{
  margin:0;
  font-size:0.9rem;
  color:#fff;
}

/* Logo municipal dentro de la columna de la alcaldesa */
/* Ajuste del logotipo en la primera columna del footer */
.footer-col--logo .custom-logo-link img{
  max-width:200px;
  height:auto;
  margin:0 0 1rem;
}

/* Título de redes sociales */
.footer-social-title{
  margin:0 0 .5rem;
  /* Reducimos la intensidad de la fuente del título de redes sociales de 600 a 400
     para armonizarla con el resto del pie de página. */
  font-weight:400;
  font-size:.9rem;
  color:#fff;
}

/*
 * Nueva estructura de columnas en el footer
 * ---------------------------------------
 *  - .footer-col--info: agrupa logotipo municipal y datos de la alcaldesa.
 *    Se alinea a la izquierda. Ajustamos tamaños de imágenes y colores de
 *    textos para una buena legibilidad sobre el fondo naranja.
 *  - .footer-col--contact: lista de dirección, teléfono y horarios.
 *    Alineado a la izquierda.
 *  - .footer-col--social: título de redes sociales, íconos y botón de contacto.
 *    También alineado a la izquierda.
 */
.footer-col--info{ text-align:left; }
.footer-col--info .custom-logo-link img{
  max-width:200px;
  height:auto;
  margin:0 0 1rem;
}
.footer-col--info .footer-mayor-photo{
  width:100px;
  height:100px;
  margin:0 0 0.5rem;
  border-radius:50%;
  overflow:hidden;
}
.footer-col--info .footer-mayor-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.footer-col--info .footer-mayor-name{
  font-size:1.1rem;
  font-weight:700;
  margin:.5rem 0 .25rem;
  color:#fff;
}
.footer-col--info .footer-mayor-desc{
  margin:0;
  font-size:.85rem;
  color:#f3f3f3;
}
.footer-col--contact{ text-align:left; }
.footer-col--social{ text-align:left; }

/* =======================
   UTILIDADES
======================= */
html,body{ overflow-x:hidden; }

/* Gutenslider integrado como hero */
.wp-block-eedee-block-gutenslider.hero-guten{
  border-radius:16px; overflow:hidden;
}
.wp-block-eedee-block-gutenslider.hero-guten .glide__slides,
.wp-block-eedee-block-gutenslider.hero-guten .glide__slide{
  border-radius:16px; overflow:hidden;
  height:520px;
}
.wp-block-eedee-block-gutenslider.hero-guten .glide__slide > figure{
  height:100%; margin:0;
}
.wp-block-eedee-block-gutenslider.hero-guten .glide__slide img{
  /* Use cover so the image fills the slide, but align the crop to the top
     instead of the centre.  This prevents important parts (like the top of
     a volcano) from being chopped off. */
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

/* Caption/overlay abajo (igual que nuestro hero) */
.wp-block-eedee-block-gutenslider.hero-guten .eedee-gutenslider__caption{
  position:absolute; left:0; right:0; bottom:0;
  color:#fff; padding:24px 32px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.70) 98%);
}
.wp-block-eedee-block-gutenslider.hero-guten .eedee-gutenslider__caption h2,
.wp-block-eedee-block-gutenslider.hero-guten .eedee-gutenslider__caption p{
  color:#fff; margin:0 0 10px;
}

/* Botón del caption aprovecha nuestras utilidades */
.wp-block-eedee-block-gutenslider.hero-guten .eedee-gutenslider__caption .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none;
}

/* ====== FIX: menú centrado + dropdown centrado ====== */

/* 1) Centro el menú y dejo la lupa a la derecha */
.site-header .mainbar__inner{
  /*
   * Use flexbox on the site header main bar to match the new layout.
   * The previous grid-based centering allocated equal fractional space on
   * both sides, which caused the search icon to overlap the last menu item
   * on some templates (e.g. “Quienes somos”).  Flexbox lets the menu grow
   * naturally and keeps the search form on the right.  We maintain the
   * gap and a consistent minimum height.
   */
  display:flex;
  align-items:center;
  gap:16px;
  /* Sincronizamos la altura mínima con el mainbar original (60px). */
  min-height:60px;
}
.site-header nav.main-nav{
  /* Allow the navigation to consume available space */
  flex-grow:1;
}
/*
 * Push the search form to the far right when inside the header.  This
 * ensures the magnifying glass never overlaps the last menu item.
 */
.site-header .search-form{
  margin-left:auto;
}

/* 2) Nivel 1 centrado */
.site-header nav.main-nav > ul{
  display:flex;            /* por si otro bloque lo pisa */
  justify-content:center;  /* <-- centro real */
  gap:28px;                /* ajusta 24/28/32 según Figma */
}

/* 3) Dropdown (submenú) centrado bajo el padre */
.site-header nav.main-nav > ul > li{ position:relative; }

.site-header nav.main-nav > ul > li > .sub-menu{
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  min-width:220px;
  text-align:center;
  z-index:1000;
}
.site-header nav.main-nav .sub-menu li a{
  text-align:center;
  white-space:nowrap;   /* que no se corte el texto */
}

/* Mobile: si lo quieres pegado a la izq */
@media (max-width: 900px){
  .site-header nav.main-nav > ul > li > .sub-menu{
    left:0;
    transform:none;
    text-align:left;
  }
}
/* ====== FIX MOBILE NAV ====== */

/* Evita overflows de los hijos del grid */
.site-header .mainbar__inner > * { min-width: 0; }

/* Tablet/móvil: menú centrado y con salto de línea si no cabe */
@media (max-width: 900px){
  /*
   * En pantallas de 900px o menos seguimos usando flexbox en el header.
   * La navegación ocupa toda la anchura disponible y el buscador se sitúa al final.
   */
  .site-header .mainbar__inner{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .site-header nav.main-nav{
    flex-grow:1;
    justify-content:center;
  }
  .site-header .search-form{
    margin-left:auto;
    padding:8px;
    border-radius:10px;
  }

  /* El UL puede partirse en 2 filas; centrado y con gaps más chicos */
  .site-header nav.main-nav > ul{
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 14px;
    row-gap: 8px;
  }
  .site-header nav.main-nav > ul > li > a{
    padding: 8px 10px;
    font-size: 14px;
  }

  /* Submenú alineado a la izquierda en móvil (más usable) */
  .site-header nav.main-nav > ul > li > .sub-menu{
    left: 0;
    transform: none;
    text-align: left;
  }
}

/* Móvil estrecho: aún más compacto */
@media (max-width: 520px){
  .site-header nav.main-nav > ul{
    column-gap: 10px;
    row-gap: 6px;
  }
  .site-header nav.main-nav > ul > li > a{
    padding: 7px 9px;
    font-size: 13px;
  }
}

/* Menú ultra light (Barlow 400) */
.site-header nav.main-nav > ul > li > a{
  font-family: var(--font-title) !important;
  font-weight: 400;
  letter-spacing: .2px;
}

/*
 * Cuando el menú hamburguesa está abierto en dispositivos móviles, ocultamos
 * la barra superior para permitir que el contenido se desplace hacia abajo.
 * Se utiliza la clase `menu-open` aplicada al elemento <body> desde el
 * JavaScript (assets/app.js). Así, sólo en pantallas estrechas la topbar se
 * esconde y deja más espacio para el menú desplegable.
 */
@media (max-width: 992px){
  body.menu-open .site-header .topbar{
    display:none;
  }
}

/* En pantallas menores a 992px ocultamos completamente la topbar (logo y
   píldoras) para mantener limpio el encabezado en versiones móviles. */
@media (max-width: 992px){
  .site-header .topbar{
    display:none;
  }
}
.site-header nav.main-nav .current-menu-item > a{
  font-weight: 500;
}

:root{
  /* Primary brand colour for the top bar. Updated to match the exact municipal palette (#C8553D). */
  --brand:#C8553D;          /* barra superior */
  /* Slightly darker shade for hover states, derived from the primary colour. */
  --brand-700:#B84433;
  --surface:#FFFFFF;
  --ink:#1F2937;            /* gris casi negro */
  --muted:#6B7280;
  --pill-bg:#F9E6DF;        /* suave para outline */
  --radius-lg:16px;
  --radius-pill:9999px;
  --shadow-sm:0 2px 6px rgba(0,0,0,.08);
  --shadow-md:0 6px 18px rgba(0,0,0,.12);
}

/* —— Top Pills —— */
.top-pills{
  display:flex; gap:.75rem; align-items:center;
  margin:0; padding:0; list-style:none;
}
.pill{
  --h:40px;
  display:inline-flex; align-items:center; gap:.5rem;
  height:var(--h); border-radius:var(--radius-pill);
  padding:0 .9rem; text-decoration:none; line-height:1;
  font-weight:600; white-space:nowrap; transition:.2s ease;
  border:1px solid transparent;
}
.pill__kicker{ font-size:.68rem; color:var(--muted); font-weight:600; margin-right:.25rem }
.pill__label{ font-size:.82rem; color:var(--ink) }
.pill__ico{ width:18px; height:18px }
.pill--outline{ background:var(--surface); border-color:#F0D2C8 }
.pill--outline:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm) }
.pill--solid{ background:var(--brand); color:#fff }
.pill--solid .pill__label{ color:#fff }
.pill--solid:hover{ background:var(--brand-700); transform:translateY(-1px) }

/* Alineación en header */
.site-header .top-pills{
  /* Retiramos el margin-left:auto para que las pastillas no se vayan al extremo derecho. */
  margin-left:0;
}
@media (max-width:992px){
  .top-pills{ flex-wrap:wrap }
}

/* —— HERO —— */
.hero{ position:relative; }
.hero__slider{ position:relative; overflow:hidden; }
.hero__slide{ position:relative; }
.hero__img{ width:100%; height:64vh; min-height:470px; object-fit:cover; display:block; border-radius:0 0 var(--radius-lg) var(--radius-lg) }
.hero__overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0.45) 100%);
}
.hero__content{
  position:absolute; inset:auto 0 10%; color:#fff;
}
.hero__title{ font-size:clamp(1.6rem, 2.2vw + 1rem, 2.8rem); font-weight:800; margin:0 0 .5rem }
.hero__excerpt{ max-width:640px; font-size:clamp(.9rem, .5vw + .8rem, 1.05rem); opacity:.95; margin:0 0 1rem }
.btn--hero{
  display:inline-flex; align-items:center; gap:.5rem;
  /* Hero CTA usa el color de acento de la marca y texto blanco */
  background: var(--color-accent); color:#fff; border-radius:var(--radius-pill);
  padding:.6rem 1rem; font-weight:700; text-decoration:none;
  box-shadow:var(--shadow-sm); transition:.2s ease;
}
.btn--hero:hover{ filter:brightness(.92); transform:translateY(-1px); box-shadow:var(--shadow-md) }

@media (max-width:768px){
  .hero__img{ height:48vh; min-height:360px; border-radius:0 }
  .hero__content{ inset:auto 1rem 8% 1rem }
}


/* —— Quick Links —— */
.quick-links{ background:none; padding:25px 0 25px; }
.quick-links__grid{ list-style:none; margin:0; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(4,minmax(0,1fr)); }
.quick-links__grid > li > a{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #EFEFEF; border-radius:12px;
  padding:12px 16px; text-decoration:none; color:#1F2937; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.06); transition:.15s ease;
}
.quick-links__grid > li > a:hover{ transform:translateY(-1px) }
@media (max-width:992px){ .quick-links__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .quick-links__grid{ grid-template-columns:1fr } }

.quick-links__grid > li.ico-tramites > a::before{ content:"📄"; margin-right:6px }
.quick-links__grid > li.ico-calendario > a::before{ content:"📅"; margin-right:6px }
.quick-links__grid > li.ico-directorio > a::before{ content:"📞"; margin-right:6px }
.quick-links__grid > li.ico-permiso > a::before{ content:"🚗"; margin-right:6px }



/* —— News grid —— */
.h-section{ font-size:1.6rem; font-weight:800; margin:1.5rem 0 .75rem }
.news-grid{
  display:grid; gap:1rem; grid-template-columns:repeat(3,1fr);
}
.news-card{
  /* Ajuste personalizado: eliminamos el borde y la sombra para que las
     tarjetas de noticias se fundan con el fondo.  También cambiamos el
     color de fondo al valor global `--color-bg` definido en el tema para
     mantener consistencia con el resto de la página. */
  background: var(--color-bg);
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: none;
}
.news-card__media{ display:block; aspect-ratio:16/10; overflow:hidden }
.news-card__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease }
.news-card:hover .news-card__img{ transform:scale(1.03) }
.news-card__body{ padding:1rem 1rem 1.1rem }
.news-card__title{ font-size:1.05rem; font-weight:800; line-height:1.2; margin:0 0 .35rem }
.news-card__title a{ color:#DF8233; text-decoration:none }
.news-card__title a:hover{ text-decoration:underline }
.news-card__meta{ color:var(--muted); font-size:.85rem; margin:0 }

/* ===== Extensión de la grilla de noticias a 4 columnas ===== */
.news-grid--4{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1100px){
  .news-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .news-grid--4{ grid-template-columns:1fr; }
}

/* Contenido extendido para las tarjetas de noticias */
.news-card__excerpt{
  margin:0.5rem 0 0.75rem;
  color:var(--ink);
  font-size:.9rem;
  line-height:1.4;
}
/*
 * Botones de "Leer más" en las tarjetas de noticias.  Los adaptamos al diseño
 * de Figma ampliando su tamaño, aumentando el radio de borde a 30px y
 * añadiendo una flecha mediante un pseudo-elemento.  Utilizamos un
 * display inline-flex para alinear el texto y la flecha horizontalmente.
 */
.news-card__readmore{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  /* Altura aproximada 42–45px con fuente de 1rem */
  padding:.4rem 1.4rem;
  border-radius:30px;
  background:var(--color-accent);
  color:#fff;
  height: 45px;
  width: 246px;
  font-size:.95rem;
  font-weight:700;
  text-decoration:none;
  transition:.15s ease;
}
.news-card__readmore::after{
  content:"\2192";
  font-size:1.05rem;
}
.news-card__readmore:hover{
  background:#C1722F;
  text-decoration:none;
}

/* =======================
   PAGINACIÓN DE NOTICIAS
======================= */
.news-pagination{
  margin-top:1.5rem;
  display:flex;
  justify-content:center;
}
.news-pagination ul.page-numbers{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  gap:.5rem;
}
.news-pagination ul.page-numbers li{
  margin:0;
}
.news-pagination a.page-numbers,
.news-pagination span.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid var(--color-secondary);
  color:var(--color-secondary);
  background:#fff;
  font-weight:700;
  text-decoration:none;
  font-size:.9rem;
  transition:background .15s ease, color .15s ease;
}
.news-pagination a.page-numbers:hover{
  background:var(--color-secondary);
  color:#fff;
}
.news-pagination span.page-numbers.current{
  background:var(--color-secondary);
  color:#fff;
  border-color:var(--color-secondary);
}

/* =======================
   PAGINACIÓN DE EQUIPO Y EVENTOS
======================= */
/* Reutilizamos el mismo estilo de los botones de paginación de noticias
   para las secciones de equipo y eventos.  Ajustamos los selectores
   agrupándolos para mantener el CSS compacto. */
.team-pagination,
.events-pagination{
  margin-top:1.5rem;
  display:flex;
  justify-content:center;
}
.team-pagination ul.page-numbers,
.events-pagination ul.page-numbers{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  gap:.5rem;
}
.team-pagination ul.page-numbers li,
.events-pagination ul.page-numbers li{
  margin:0;
}
.team-pagination a.page-numbers,
.team-pagination span.page-numbers,
.events-pagination a.page-numbers,
.events-pagination span.page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid var(--color-secondary);
  color:var(--color-secondary);
  background:#fff;
  font-weight:700;
  text-decoration:none;
  font-size:.9rem;
  transition:background .15s ease, color .15s ease;
}
.team-pagination a.page-numbers:hover,
.events-pagination a.page-numbers:hover{
  background:var(--color-secondary);
  color:#fff;
}
.team-pagination span.page-numbers.current,
.events-pagination span.page-numbers.current{
  background:var(--color-secondary);
  color:#fff;
  border-color:var(--color-secondary);
}

/* =======================
   SECCIÓN EQUIPO
======================= */
.home-team{
  margin-top:var(--space-4);
}
.team-card{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:var(--space-3);
  align-items:center;
  /* Limitamos la anchura para que la tarjeta no se extienda
     completamente en monitores grandes y así se centre de manera
     armoniosa en la página.  Este valor coincide aproximadamente
     con el ancho de las tarjetas de noticias y eventos. */
  max-width:720px;
  width:100%;
}
.team-card__photo img{
  width:160px;
  height:160px;
  border-radius:50%;
  object-fit:cover;
}
.team-card__body{
  flex:1 1 auto;
  min-width:220px;
}
.team-card__title{
  margin:0 0 .5rem;
  font-family:var(--font-title);
  font-size:1.3rem;
  font-weight:700;
  color:var(--color-primary);
}
.team-card__excerpt{
  margin:0 0 1rem;
  color:var(--color-text);
  font-size:.95rem;
  line-height:1.5;
  /* Alineación justificada para describir correctamente al miembro del equipo */
  text-align:justify;
}

/* Botón Leer más dentro de la tarjeta del equipo.  Se basa en la
   paleta de acento para que coincida con la identidad visual definida. */
.team-card__readmore{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:700;
  text-decoration:none;
  padding:.45rem .9rem;
  border-radius:12px;
  background:var(--color-accent);
  color:#fff;
  transition:.15s ease;
  font-size:.88rem;
  /* Separación inferior para alejarlo de las redes sociales */
  margin-bottom:.6rem;
}
.team-card__readmore:hover{
  background:#C1722F;
  color:#fff;
}

/* =======================
   Ajustes personalizados para Equipo
   ======================= */
/*
 * Alineamos cada tarjeta del equipo al centro de su contenedor aplicando
 * márgenes automáticos en los lados.  Esto evita que, al navegar por la
 * paginación o cuando exista únicamente un integrante, la tarjeta se
 * desplace hacia un costado dejando un espacio vacío en la izquierda.
 */
.team-card{
  margin-left:auto;
  margin-right:auto;
}

/*
 * En la página individual del CPT `team_member` añadimos un margen inferior
 * a la sección de redes sociales para que no quede pegada al pie de página.
 * Utilizamos el prefijo de clase generado por WordPress para apuntar
 * específicamente a esta plantilla y evitar afectar a otros tipos de post.
 */
body.single-team_member .team-detail__social{
  margin-bottom:var(--space-4);
}

/* === Últimas noticias: corrección de alineación y wrap === */
/*
 * Reestructuramos la grilla de noticias para que se adapte automáticamente al
 * número de tarjetas disponibles y evitar espacios vacíos a la derecha cuando
 * hay menos de cuatro posts.  Utilizamos CSS Grid con tres columnas en
 * escritorio, dos en tablets y una en móviles.  Además, forzamos que las
 * tarjetas se estiren verticalmente para que el botón "Leer más" quede
 * alineado al fondo de cada tarjeta.
 */
.news-grid{
  display:grid;
  gap:var(--space-3);
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.home-news .container{
  overflow:hidden;
}

/*
 * Ajustamos el diseño de la sección de noticias para acercarlo al diseño de Figma.
 * Establecemos un color de fondo gris claro (#F2F2F2) para toda la sección
 * y agregamos padding en la parte superior e inferior para generar un
 * espacio más amplio como en la maqueta.  Estos estilos se aplican al
 * elemento <section id="noticias" class="home-news section">.
 */
.home-news{
  background:#F2F2F2;
  padding-top:2rem;
  padding-bottom:2rem;
}

/* Aumentamos el radio y el tamaño de las tarjetas de noticias para asemejar el diseño de Figma */
.news-card{
  border-radius:22px;
  /* Un ligero incremento del borde para suavizar la transición sobre el fondo gris */
  box-shadow:var(--shadow-md);
}

/* Ajustamos el área de la imagen dentro de la tarjeta a una relación 3:2 para un aspecto más rectangular */
.news-card__media{
  aspect-ratio:3/2;
}

/*
 * Sección CTA para noticias.  Este bloque de estilo define la estructura
 * del título, descripción y botón "Ver más" que se muestran antes de
 * la grilla de noticias en la portada.  El título se pinta con el
 * color de acento y el botón adopta un tamaño más grande y un radio
 * generoso (30px) para asemejar el diseño de Figma.  El pseudo-elemento
 * ::after en el botón dibuja la flecha hacia la derecha.
 */
/*
 * CTA de noticias: alineación a la izquierda.  Utilizamos un contenedor
 * flex de columna para apilar el título, descripción y botón alineados
 * al comienzo.  Elimina la alineación centrada y el centrado de
 * márgenes para que los textos y el botón se justifiquen al margen
 * izquierdo de su contenedor.
 */
/*
 * CTA de noticias: título y fila de contenido alineados según la maqueta.
 * El contenedor principal mantiene el margen inferior para separar de la
 * grilla de noticias, pero no define flexbox a nivel padre.  El título
 * queda encima y la fila (texto + botón) se dispone en horizontal con
 * espacio entre los elementos.  De esta forma el botón se alinea a la
 * derecha y la descripción ocupa el espacio restante.
 */
.news-cta{
  margin-bottom:2rem;
}
.news-cta__title{
  color:var(--color-accent);
  font-weight:700;
  font-size:1.3rem;
  margin:0 0 .35rem;
}
.news-cta__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  gap:1rem;
}
.news-cta__desc{
  flex:1 1 auto;
  color:var(--muted);
  font-size:.95rem;
  margin:0;
  /* Elimina la limitación de ancho para permitir que el texto se expanda
     y utilice el espacio disponible en la fila */
  max-width:100%;
}
.news-cta__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.5rem 1.8rem;
  min-width:264px;
  border-radius:30px;
  background:var(--color-accent);
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  transition:.15s ease;
}
.news-cta__button::after{
  content:"\2192";
  font-size:1.05rem;
}
.news-cta__button:hover{
  background:#C1722F;
  text-decoration:none;
}

/* Ajuste para la CTA de noticias en pantallas pequeñas */
@media (max-width: 768px) {
  .news-cta__row {
    flex-direction: column;
    align-items: flex-start;
  }
  .news-cta__button {
    width: 100%;
    justify-content: center;
    margin-top: .75rem;
  }
}
.news-card{
  display:flex;
  flex-direction:column;
  height:100%;
}
.news-card__body{
  margin-top:auto;
}
@media (max-width:1024px){
  .news-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .news-grid{ grid-template-columns:1fr; }
}

/* Contenedor de las tarjetas del equipo en la portada.  Alinea las cartas
   al centro cuando hay una sola y distribuye espacio cuando hay dos. */
.team-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  justify-content:center;
}

/* === Página individual de miembros del equipo === */
.team-detail{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-4);
}
.team-detail__photo img{
  /* Aumentamos el tamaño de la imagen en la página individual para
     destacar mejor al integrante.  El radio circular se mantiene para
     conservar la coherencia con la portada, pero el tamaño pasa de
     200px a 260px. */
  width:260px;
  height:260px;
  border-radius:50%;
  object-fit:cover;
}
.team-detail__body{
  flex:1 1 auto;
  min-width:220px;
}
.team-detail__title{
  margin:0 0 .75rem;
  font-family:var(--font-title);
  font-size:2rem;
  font-weight:700;
  /* Se actualiza al color de acento para mantener consistencia con los listados */
  color:var(--color-accent);
}
.team-detail__content{
  margin:0 0 1rem;
  font-size:1rem;
  line-height:1.6;
  text-align:justify;
  color:var(--color-text);
}
.team-detail__social{
  display:flex;
  gap:.5rem;
}

/* Botón "Volver" en la página individual de miembros del equipo */
.team-detail__back {
  margin-top: 1rem;
}
.team-back {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: .5rem 1.2rem;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  font-size: .9rem;
  transition: background .15s ease;
}
.team-back:hover {
  background: #C1722F;
  text-decoration: none;
}

/* ===== Ajustes de "Quienes Somos" ===== */
/* Estructura y alineación de la lista del equipo en la sección Quienes Somos */
.quienes-somos .qs-equipo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Estilos para cada elemento de la lista de equipo */
.quienes-somos .qs-equipo-item {
  /* Utilizamos flexbox para acomodar avatar, texto y datos de contacto */
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
}

/* Avatar del integrante */
.quienes-somos .qs-avatar {
  flex-shrink: 0;
}
.quienes-somos .qs-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/* Contenedor para nombre y cargo. Crece para ocupar el espacio disponible */
.quienes-somos .qs-equipo-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Nombre del integrante */
.quienes-somos .qs-equipo-name {
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 0.25rem;
  font-size: 1rem;
  line-height: 1.2;
}

/* Cargo del integrante */
.quienes-somos .qs-equipo-role {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.2;
}

/* Contenedor para los datos de contacto. Lo desplazamos hacia la derecha con margin-left:auto
   para que se alineen al final de la fila sin separarse demasiado del contenido. */
.quienes-somos .qs-equipo-contact {
  margin-left: auto;
  display: flex;
  gap: 1.2rem;
  white-space: nowrap;
}

/* Teléfono y email del integrante */
.quienes-somos .qs-equipo-contact .qs-phone,
.quienes-somos .qs-equipo-contact .qs-email {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text);
  font-size: 0.9rem;
}

/* Iconos de contacto */
.quienes-somos .qs-contact-icon {
  width: 16px;
  height: 16px;
}

/* Justificar los párrafos del texto del municipio (biografía) */
.quienes-somos .qs-rich p {
  text-align: justify;
  margin-bottom: 1rem;
}

/* === Página individual de eventos === */
.event-detail{
  margin-top:var(--space-4);
}
.event-detail__media img{
  width:100%;
  height:auto;
  border-radius:var(--radius-md);
  margin-bottom:var(--space-3);
}
.event-detail__title{
  margin:0 0 .5rem;
  font-family:var(--font-title);
  font-size:2rem;
  font-weight:700;
  color:var(--color-primary);
}
.event-detail__meta{
  margin:0 0 1rem;
  color:var(--color-weak);
  font-size:.9rem;
}
.event-detail__content{
  font-size:1rem;
  line-height:1.6;
  text-align:justify;
  color:var(--color-text);
}
.team-card__social{
  display:flex;
  gap:.5rem;
  /* Añadimos margen superior para separar las redes sociales del botón
     de llamada a la acción y darle aire a la composición. */
  margin-top:.4rem;
}
.team-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:none;
  color:#fff;
  text-decoration:none;
  transition:background .15s ease;
}
.team-social-link:hover{
  background:var(--color-primary);
  color:#fff;
}

/* =======================
   SECCIÓN EVENTOS
======================= */
.home-events{
  margin-top:var(--space-4);
}

/*
 * =========================================================================
 *  Rediseño de la sección Equipo (Home)
 *  ------------------------------------------------------------------------
 *  Se actualiza la presentación del equipo en la portada para alinearla con
 *  el prototipo de Figma. El contenedor se expande a todo el ancho de la
 *  página con fondo blanco y esquinas redondeadas; la fotografía de la
 *  alcaldesa pasa de ser circular a un recorte rectangular con bordes
 *  redondeados; el botón “Ver más” adquiere dimensiones fijas y los
 *  iconos de las redes sociales ganan un sutil efecto de elevación al
 *  pasar el cursor.
 */
.home-team .container {
  /* Fondo y bordes para envolver la tarjeta en toda la sección */
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.home-team .team-card {
  /* Hacemos que la tarjeta ocupe todo el ancho disponible y retiramos
     sombras adicionales al estar envuelta ya en un contenedor blanco */
  max-width: 100%;
  width: 100%;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  padding: 0;
}
.home-team .team-card__photo img {
  width: 260px;
  height: 260px;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.home-team .team-card__body {
  flex: 1 1 auto;
  min-width: 220px;
  display: flex;
  flex-direction: column;
}
/* Botón Ver más en la sección Equipo */
.home-team .btn-primary {
  width: 264px;
  height: 45px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-md);
  font-size: 1rem;
  padding: 0;
}
.home-team .btn-primary:hover,
.home-team .btn-primary:focus {
  /* Oscurecemos el botón en el hover para dar feedback visual */
  background: #DF8233;
  border-color: #DF8233;
}
/* Separación y efectos para las redes sociales */
.home-team .team-card__social {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
}
.home-team .team-social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, background .2s ease;
}
.home-team .team-social-link:hover {
  transform: translateY(-3px);
  background: var(--color-primary);
  color: #fff;
}

/*
 * ---------------------------------------------------------------------
 *  Rediseño de Equipo – Versión final
 *
 *  La siguiente sección redefine por completo la estructura de la sección
 *  “Equipo” en la portada.  Cada integrante se renderiza dentro de
 *  `.team-wrapper`, un contenedor blanco con esquinas redondeadas y
 *  sombreado sutil.  La fotografía es rectangular con bordes suaves,
 *  mientras que el contenido se organiza a la derecha e incluye el
 *  nombre, la descripción, las redes sociales y un botón de llamada
 *  a la acción con dimensiones fijas.  Estos estilos buscan replicar
 *  fielmente el diseño de Figma proporcionado por el cliente.
 */

/* Restablecer el contenedor de la sección equipo para no aplicar fondo ni sombras */
.home-team .container {
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* Contenedor general de cada integrante */
/* Estructura principal: dos columnas (foto y contenido) */
.team-wrapper {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: start;
  gap: var(--space-4);
  background: #FFF;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  margin-bottom: var(--space-4);
}

/* Imagen del integrante (rectangular con esquinas redondeadas) */
.team-photo img {
  width: 260px;
  height: 260px;
  border-radius: var(--radius-md);
  object-fit: cover;
  display: block;
}

/* Contenido textual y acciones */
.team-content {
  display: flex;
  flex-direction: column;
}

/* Nombre del integrante */
.team-name {
  margin: 0 0 var(--space-1);
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 700;
  /* Utilizamos el color de acento para destacar el nombre de cada integrante */
  color: var(--color-accent);
}

/* Descripción del integrante */
.team-description {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.5;
  text-align: justify;
}

/* Contenedor de las redes sociales */
.team-social {
  display: flex;
  gap: var(--space-2);
  /* Empujamos las redes sociales al fondo del contenedor asignando
     un margen superior automático. Esto asegura que se alineen al
     borde inferior sin importar la cantidad de texto descriptivo. */
  margin-top: auto;
  margin-bottom: var(--space-3);
}

/* Enlaces de redes sociales */
.team-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 50%;
  transition: transform .15s ease, background .2s ease;
}
.team-icon img {
  width: 20px;
  height: 20px;
}
.team-icon:hover {
  transform: translateY(-3px);
  background: var(--color-accent);
}

/* Enlace de "Leer más" para la tarjeta del equipo */
.team-readmore {
  /* Alineamos el enlace justo debajo de las redes sociales */
  margin-top: var(--space-1);
}
.team-read-more-link {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-accent);
  display: inline-block;
}
.team-read-more-link:hover {
  text-decoration: underline;
}

/* Botón "Ver más" */
.team-btn {
  width: 264px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
.team-btn:hover {
  background: #DF8233;
  transform: translateY(-2px);
}
.events-grid{
  display:grid;
  gap:var(--space-3);
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  /* Centramos las tarjetas cuando hay pocas (por ejemplo, una sola) */
  justify-content:center;
}
.event-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  overflow:hidden;
}
.event-card__media img{
  width:100%;
  height:260px;
  object-fit:cover;
}
.event-card__body{
  padding:var(--space-3);
}
.event-card__title{
  margin:0 0 .5rem;
  font-family:var(--font-title);
  font-size:1.3rem;
  font-weight:700;
  color:var(--color-primary);
}
.event-card__meta{
  margin:0 0 .5rem;
  color:var(--color-weak);
  font-size:.85rem;
}
.event-card__excerpt{
  margin:0 0 1rem;
  color:var(--color-text);
  font-size:.95rem;
  line-height:1.5;
  text-align:justify;
}
.event-card__readmore{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:700;
  text-decoration:none;
  padding:.45rem .9rem;
  border-radius:12px;
  background:var(--color-accent);
  color:#fff;
  transition:.15s ease;
  font-size:.88rem;
}
.event-card__readmore:hover{
  background:#C1722F;
  color:#fff;
}

/* =======================
   SECCIÓN VIDEO
======================= */
.home-video{
  margin-top:var(--space-4);
}
.video-wrapper{
  position:relative;
  padding-bottom:56.25%; /* 16:9 ratio */
  height:0;
  overflow:hidden;
}
.video-wrapper iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

@media (max-width:1100px){
  .news-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:640px){
  .news-grid{ grid-template-columns:1fr }
  .h-section{ font-size:1.35rem }
}

/* Links del menú (hover/active) */
.main-nav a{
  color:#fff; text-decoration:none; padding:.65rem .9rem; border-radius:10px; transition:.15s ease
}
.main-nav a:hover{ background:rgba(255,255,255,.12) }
.main-nav .current-menu-item>a,
.main-nav .current_page_item>a{ background:#fff; color:#000 }

/* Botones genéricos */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:700; border-radius:var(--radius-pill); padding:.6rem 1rem; text-decoration:none }

/* =======================
   PÁGINA DE NOTICIA (single post)
======================= */
/* Espaciado superior para compensar el encabezado fijo y permitir que el
   contenido de la noticia se muestre completamente.  Además justificamos
   el texto para una lectura más confortable. */
.single-post .site-main .container{
  padding-top:var(--space-4);
}
.single-post .site-main p{
  text-align:justify;
}
.btn--primary{ background:var(--brand); color:#fff }
.btn--primary:hover{ background:var(--brand-700) }

/* Tipografía general más limpia en hero y cards */
h1,h2,h3{ letter-spacing:.1px }

/* Focus visible para accesibilidad */
a:focus-visible, button:focus-visible{ outline:3px solid #94A3B8; outline-offset:2px }

/* Ajustes container (si usas Bootstrap: corrige gutters) */
.container{ max-width:1200px }

/* ===== Hero full-bleed (ancho completo de pantalla) ===== */
.hero.hero--full{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* El container interno NO debe limitar el ancho aquí */
.hero.hero--full > .container{
  width:100vw !important;
  max-width:100vw !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin:0 !important;
}

/* Si usas Gutenslider como hero, quita esquinas para que sea edge-to-edge */
.wp-block-eedee-block-gutenslider.hero-guten{
  border-radius:0 !important;
}
.wp-block-eedee-block-gutenslider.hero-guten .glide__slides,
.wp-block-eedee-block-gutenslider.hero-guten .glide__slide{
  border-radius:0 !important;
}

/* =======================
   Navegación accesible en páginas individuales
   ======================= */
/*
 * El componente .post-nav se utiliza en las plantillas single.php,
 * single-event.php y single-team_member.php para enlazar con el post
 * anterior y siguiente.  La estructura está compuesta por dos
 * contenedores, .post-nav__prev y .post-nav__next, cada uno con un
 * enlace.  Los estilos se basan en la paleta del tema para mantener la
 * coherencia visual y asegurar contraste suficiente (WCAG AA).  El
 * outline proporciona un foco visible al navegar con teclado.
 */
.post-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:24px 0 48px;
}
.post-nav a{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:var(--color-primary);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  border:2px solid var(--color-primary);
  outline-offset:2px;
}
.post-nav a:focus{
  outline:3px solid #111;
}
.post-nav a:hover{
  filter:brightness(.95);
}
.post-nav__prev a::before{
  content:"\00AB\00A0";
}
.post-nav__next a::after{
  content:"\00A0\00BB";
}

/* =======================
   Ajuste grilla de noticias (4 columnas)
   ======================= */
/*
 * Algunos overrides anteriores redefinieron .news-grid a 3 columnas para
 * mejorar el wrap cuando el número de posts es variable.  Sin embargo,
 * para la portada queremos asegurar que la grilla con la clase
 * .news-grid--4 se mantenga siempre en cuatro columnas en pantallas
 * grandes.  Estas reglas restablecen la cuadrícula a 4 columnas y
 * mantienen los breakpoints originales de 2 y 1 columna.
 */
.news-grid.news-grid--4{
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-3);
}
@media (max-width:1100px){
  .news-grid.news-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .news-grid.news-grid--4{ grid-template-columns:1fr; }
}

/* Asegurar que el slider y la imagen llenen el ancho */
.hero__slider{ width:100%; }
.hero__img{
  width:100%;
  height: 64vh;           /* ajusta a gusto */
  min-height: 470px;      /* Figma-like desktop */
  object-fit: cover;
  border-radius: 0;       /* sin curvas en los bordes del hero full */
}

/* Overlay y contenido, sin cambios */
.hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.45) 100%); }
.hero__content{ position:absolute; inset:auto 0 10%; color:#fff; }

/* Breakpoints finos */
@media (max-width: 992px){
  .hero__img{ height: 52vh; min-height: 380px; }
}
@media (max-width: 640px){
  .hero__img{ height: 46vh; min-height: 320px; }
  .hero__content{ inset:auto 1rem 8% 1rem; }
}

.alignfull{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Nav básico estable */
.site-header nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:24px; align-items:center; }
.site-header nav ul li{ list-style:none; }
.site-header nav a{ text-decoration:none; padding:.65rem .9rem; border-radius:10px; }

/* ==========================================================
   Custom modifications for the top bar and pills (Sept 2025)
   Estas reglas se añaden para aplicar los colores exactos y
   mejorar la estructura según las indicaciones del cliente.
   - Se define una grilla de 2 columnas en la topbar: logo municipal
     a la izquierda y contenedor de pastillas/menú a la derecha.
   - Las pastillas utilizan un layout flexible que permite
     mostrar el kicker y el label en dos líneas.
   - El botón sólido usa el color naranja (#F28F3B) como
     relleno según el manual de color.
=========================================================== */

/*
 * Centramos el conjunto logo + pastillas dentro de la topbar utilizando flexbox.
 * En lugar de una grilla con dos columnas, aplicamos flex para que todo el
 * contenido se agrupe y se centre horizontalmente. El gap controla el
 * espaciado entre el logo y las pastillas. Esta regla reemplaza cualquier
 * configuración previa de grilla, manteniendo la altura mínima.
 */
.topbar__inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  min-height:130px;
}

/* Agrupamos las pastillas y el menú opcional en un contenedor flex
   para poder alinear los elementos y permitir wrap en pantallas
   más pequeñas. */
.topbar__items{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  /* No justificamos al final para que las pastillas se ubiquen junto al logo,
     logrando una composición más centrada como en Figma. */
}

/* Logo municipal a la izquierda de la topbar */
.topbar__brand img{
  /* El logo usa una altura mayor para destacar en la barra superior */
  height:120px;
  width: 194px;
  display:block;
}

@media (max-width:992px){
  /* Reducir ligeramente el tamaño del logo en tablet y móvil para evitar deformaciones y ajustar la altura de la barra */
  .topbar__brand img{
    height:48px;
  }
}
@media (max-width:560px){
  .topbar__brand img{
    height:40px;
  }
}

/* Lista de pastillas */
.top-pills{
  display:flex;
  gap:.75rem;
  margin:0;
  padding:0;
  list-style:none;
  align-items:center;
}

/* Pastilla genérica: flexible con espacio para el icono */
.pill{
  display:flex;
  align-items:center;
  gap:.75rem;
  /* Reducimos el relleno horizontal para que las pastillas (botones) sean
     más angostas. El relleno vertical se mantiene para conservar altura. */
  padding:.4rem .8rem;
  border-radius:var(--radius-pill);
  line-height:1.2;
  white-space:normal;
  border:1px solid transparent;
}

/* Contenedor de textos de la pastilla */
.pill__texts{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.pill__kicker{
  font-size:.68rem;
  color:var(--muted);
  font-weight:600;
}

.pill__label{
  font-size:.82rem;
  color:var(--ink);
  font-weight:700;
}

.pill__ico{
  width:18px;
  height:18px;
  flex-shrink:0;
}

/* Pastilla en modo outline: fondo suave y borde sutil */
.pill--outline{
  background:var(--pill-bg);
  border:1px solid rgba(0,0,0,.05);
}
.pill--outline:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

/* Pastilla en modo sólido: usar el color naranja para el relleno */
.pill--solid{
  /* Nuevo color naranja para botones sólidos */
  background:#DF8233;
  color:#fff;
}
.pill--solid .pill__label{
  color:#fff;
}
.pill--solid:hover{
  filter:brightness(.95);
  transform:translateY(-1px);
}

/* ======== Custom pill colours for the topbar ======== */
/*
 * Pastilla de color naranja para "Solicitar Información" y "Transparencia activa".
 * Usamos el color proporcionado (#F28F3B) como fondo y establecemos el texto en blanco.
 */
.pill--accent{
  /* Nuevo color naranja para pastillas de acento */
  background:#DF8233;
  color:#fff;
  border-color:#DF8233;
}
.pill--accent .pill__label,
.pill--accent .pill__kicker{
  color:#fff;
}
.pill--accent:hover{
  filter:brightness(.95);
  transform:translateY(-1px);
}

/*
 * Pastilla blanca para "Contacto". El texto y la flecha toman el color naranja
 * para mantener la coherencia con el diseño. El borde se mantiene sutil.
 */
.pill--white{
  background:#fff;
  color:#DF8233;
  border-color:#fff;
}
.pill--white .pill__label,
.pill--white .pill__kicker{
  color:#000;
}
.pill--white .pill__ico{
  display:none;
  /*color:#F28F3B;*/
}
.pill--white:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
}

/*
 * La hoja de estilos original del starter asigna margin-left:auto a las
 * .top-pills dentro del site-header. Para colocar las pastillas junto
 * al logotipo de la Municipalidad según Figma, anulamos ese margin.
 */
.topbar .top-pills{
  margin-left:0 !important;
}

/*
 * Especificador final para centrar el conjunto de logo y pastillas en la topbar.
 * Al aumentar la especificidad (.site-header .topbar .topbar__inner) y situar la
 * regla al final del stylesheet, nos aseguramos de que se anule cualquier
 * definición previa de display/grid. El uso de flexbox junto con
 * justify-content:center centra horizontalmente las dos columnas (logo +
 * pastillas) dentro de la anchura del contenedor. Este ajuste permite que
 * el diseño coincida con el Figma en donde el grupo completo se ve
 * perfectamente centrado.
 */
/*
 * Centramos el conjunto logo + pastillas usando una grilla de flujo de
 * columnas. Grid permite alinear el contenido en el centro con
 * justify-content:center, sin que el ancho se expanda a 100% por
 * defecto. También aplicamos un margen horizontal automático para que el
 * bloque se distribuya equidistantemente respecto a los márgenes del
 * contenedor (.container).
 */
/*
 * Para centrar el grupo de logo y pastillas, usamos flexbox en
 * .topbar__inner y centramos los hijos con justify-content:center. Dado que
 * .topbar__inner comparte la misma etiqueta que la clase .container (y por
 * tanto tiene ancho completo), no podemos usar márgenes automáticos en esta
 * capa. En su lugar, justify-content:center reparte el espacio sobrante
 * equitativamente a ambos lados dentro del contenedor. El gap define el
 * espacio entre los hijos y align-items centra verticalmente.
 */
.site-header .topbar .topbar__inner{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
}

/*
 * Convierta el contenedor de la topbar en un flex container y centre su contenido.
 * Esto asegura que el bloque combinado (logo + pastillas) se ubique al centro
 * de la barra de color naranja. Usamos una regla específica para el header
 * de la topbar para no interferir con otros contenedores .container.
 */
.site-header .topbar > .container{
  display:flex;
  justify-content:center;
}

/* === Botones Equipo (Home + Single) === */
.home-team .btn-primary,
.team-member-detail .btn-primary {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  /* Aplicamos el nuevo color institucional al botón primario */
  background: #DF8233;           /* Naranja municipal actualizado */
  border: 2px solid #DF8233;
  color: #fff;
  border-radius: 9999px;          /* pastilla */
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}

.home-team .btn-primary:hover,
.team-member-detail .btn-primary:hover,
.home-team .btn-primary:focus,
.team-member-detail .btn-primary:focus {
  background: #DF8233;            /* un tono más oscuro al hover */
  border-color: #DF8233;
  color: #fff;
  transform: translateY(-1px);
}

.home-team .btn-primary:active,
.team-member-detail .btn-primary:active {
  transform: translateY(0);
}

/* === Espaciado en la vista single de Equipo === */
.team-member-detail.section { 
  padding-bottom: 8rem;           /* más aire antes del footer */
}

.team-member-detail .team-social {
  margin-top: 1.25rem;
  margin-bottom: 2.5rem;          /* gap entre redes y footer */
}

.team-member-detail .team-social .social-list {
  display: flex; gap: .5rem;      /* por si usas íconos redondos */
  padding: 0; margin: .5rem 0 0;
  list-style: none;
}

/* === Single Equipo: más aire antes del footer === */
body.single-equipo main.site-main {
  /* empujamos todo el main para separar del footer */
  padding-bottom: 8rem !important;
}

/* evitamos colapso de márgenes dentro de la sección */
body.single-equipo section.team-member-detail {
  display: flow-root;               /* crea un nuevo BFC */
  padding-bottom: 3rem !important;  /* aire extra dentro de la sección */
  /* (truco alternativo si aún colapsa): border-bottom: 1px solid transparent; */
}

/* redes: un poco más de espacio encima y debajo */
body.single-equipo .team-member-detail .team-social {
  margin-top: 1.25rem !important;
  margin-bottom: 3.5rem !important;
}

/* Quienes Somos - estilos mínimos */
.quienes-somos .hero-qs { padding: 2.5rem 0 1rem; }
.quienes-somos .page-title { margin: 0 0 .5rem; }
.quienes-somos .page-intro { font-size: 1.1rem; opacity: .9; }

.quienes-somos .two-col { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .quienes-somos .two-col { grid-template-columns: 1fr; } }
.quienes-somos .foto-liderazgo { border-radius: 1rem; display:block; max-width:100%; height:auto; }

.quienes-somos .team-social .social-list { display:flex; gap:.5rem; list-style:none; margin:.75rem 0 0; padding:0; }

.quienes-somos .staff-list { list-style:none; padding:0; margin: 1.5rem 0 0; display:grid; gap:1rem; }
.quienes-somos .staff-item { display:grid; grid-template-columns: 48px 1fr; align-items:center; gap: .75rem; padding:.75rem 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.quienes-somos .staff-avatar .avatar-fallback { width:48px; height:48px; border-radius:50%; background: rgba(0,0,0,.08); display:inline-block; }

.quienes-somos .grid-directivos { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
@media (max-width: 1024px) { .quienes-somos .grid-directivos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .quienes-somos .grid-directivos { grid-template-columns: 1fr; } }
.quienes-somos .card-directivo { background:#fff; border-radius: 1rem; padding: .75rem; box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.quienes-somos .card-directivo .thumb img { border-radius: .75rem; display:block; width:100%; height:auto; }
.quienes-somos .card-directivo .nombre { margin:.5rem 0 0; font-size:1.1rem; }
.quienes-somos .card-directivo .cargo { margin: .1rem 0 .25rem; opacity:.8; }
.quienes-somos .card-directivo .email { font-size:.95rem; opacity:.9; }

/* Botón naranja coherente */
.quienes-somos .btn-primary {
  display:inline-block; padding:.7rem 1.2rem;
  /* Actualizamos el color para utilizar el nuevo naranja */
  background:#DF8233; border:2px solid #DF8233; color:#fff;
  border-radius:9999px; font-weight:600; text-decoration:none;
}
.quienes-somos .btn-primary:hover { background:#DF8233; border-color:#DF8233; color:#fff; }





/* === Ajustes "Quienes somos" — separación y botones del widget (10-09-2025) === */
.sup-footer.sup-footer--qs{ margin-top:14px; }
.sup-footer.sup-footer--qs .sup-footer__menu > li > .sup-footer-link{
  background:#4A6B47;
  border-color:#4A6B47;
  color:#fff;
}
.sup-footer.sup-footer--qs .sup-footer__menu > li > .sup-footer-link:hover{
  filter:brightness(0.96);
  transform: translateY(-1px);
}
.sup-footer.sup-footer--qs .sup-footer__menu > li > .sup-footer-link::before{
  content:'';
  display:inline-block;
  width:18px; height:18px;
  background-image:url('assets/pdf-icono.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  margin-right:8px;
  filter: invert(1) brightness(1.1);
}

/* === TOPBAR PILLS PIXEL-PERFECT (Figma) === */
:root{
  --top-pill-w: 264px;   /* ancho Figma */
  --top-pill-h: 45px;    /* alto Figma */
}

/* Altura uniforme para todas las pastillas de la topbar */
.topbar .pill{
  height: var(--top-pill-h) !important;
  box-sizing: border-box;
}

/* Naranjas y Contacto con el MISMO ancho + centrado del contenido */
.topbar .pill--accent,
.topbar .pill--white{
  width: var(--top-pill-w) !important;
  justify-content: center;
  padding: 0 1rem;              /* respiro lateral sin deformar */
}

/* Contacto SIN flecha para verse igual de limpio */
.topbar .pill--white .pill__ico{ display:none !important; }
.topbar .pill--white::after{ content:none !important; }  /* por si hay pseudo-ícono heredado */

/* (Opcional) si el espacio entre pastillas debe calzar exacto al Figma: */
/* .topbar .top-pills{ gap: .75rem; }  // ya lo tienes así */

/* === Ajustes tipografía y espacio Figma === */

/* Texto de las pills (ej: Contacto) */
.topbar .pill__label{
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight:700 !important;   /* Bold */
  font-size:16px !important;
  line-height:100% !important;
}

/* Más espacio entre logo y la primera pastilla */
.site-header .topbar .topbar__inner{
  gap:4rem !important;   /* antes 1rem, ahora un pelín más */
}

/*
 * === HERO Rotator personalizado ===
 * Estas reglas complementan el hero existente para permitir un slider
 * de imágenes y textos (captura de 3 segundos, 3 diapositivas).  La
 * estructura .hero__slider y .hero__slide se define en template-parts/hero.php.
 */

/* Esconder todos los slides por defecto y mostrar sólo el activo */
.hero__slider {
  position: relative;
}
.hero__slide {
  display: none;
}
.hero__slide.is-active {
  display: block;
}

/* Dots de paginación: posición centrada y aspecto básico */
.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.hero__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.hero__dot.is-active {
  background: rgba(255, 255, 255, 0.95);
}

/* Truncar texto en título y extracto del hero */
.hero__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 0.75rem;
}

/* Botón CTA en el hero: Figma 264×45 en desktop, fluido en móvil */
.btn--hero {
  width: 264px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
}
@media (max-width: 640px) {
  .btn--hero {
    width: min(100%, 320px);
    height: 44px;
  }
}

/* Ocultar Gutenslider heredado en la portada. El bloque de Gutenslider
   genera un carrusel duplicado; lo quitamos aquí para que solo quede
   la nueva sección del hero. */
.home .wp-block-eedee-block-gutenslider {
  display: none !important;
}

/* Ajustes adicionales del hero para adaptarse a diferentes tamaños de
   pantalla. Se asegura que la imagen cubra y no se distorsione, y que
   el contenido tenga espacios consistentes. */
.hero__img {
  width: 100%;
  height: clamp(420px, 60vh, 560px);
  object-fit: cover;
  /* Align the hero image content to the top so the top portion is always visible. */
  object-position: top center;
  display: block;
  border-radius: 0;
}
.hero__content {
  inset: auto 0 10% 0;
  padding: 24px 32px;
}
@media (max-width: 768px) {
  .hero__img {
    height: 48vh;
    min-height: 360px;
    /* Maintain top-aligned cropping on narrow screens as well */
    object-position: top center;
  }

  /* Cerramos el bloque @media aquí para evitar que las reglas globales
     definidas a continuación queden encapsuladas dentro de la media query */
}

/*
 * ===============================
 * Swiper hero slider customizations
 * ===============================
 *
 * Estas reglas ajustan la apariencia del nuevo slider del hero cuando
 * se utiliza la librería Swiper.  Se amplían los tamaños de los
 * controles de navegación, se personaliza la paginación (dots) y se
 * eliminan sombras innecesarias en el extracto para mantener un
 * diseño limpio y acorde al Figma.
 */

/* Asegurar que el hero no deja espacio extra debajo de la imagen */
.hero.hero--full {
  margin-bottom: 0;
}
/* Eliminar bordes redondeados de la imagen en el hero completo para que
   quede pegado al bloque siguiente */
.hero.hero--full .hero__img {
  border-radius: 0;
}
/* Quitar cualquier fondo o sombra del extracto de la noticia para que
   sólo se visualice el texto */
.hero__excerpt {
  background: none !important;
  box-shadow: none !important;
}

/* Container Swiper */
.hero__slider.swiper {
  position: relative;
  overflow: hidden;
}
/* Ajuste explícito del wrapper para garantizar que Swiper funcione
   correctamente y se alinee con el layout flex */
.hero__slider .swiper-wrapper {
  display: flex;
}

/* Paginación personalizada: situar en la parte inferior, centrar y
   dimensionar bullets */
.hero__slider .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}
.hero__slider .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  opacity: 1;
  transition: background-color .2s ease, border-color .2s ease;
}
.hero__slider .swiper-pagination-bullet-active {
  background: #C8553D;
  border-color: #C8553D;
}

/* Navegación (flechas) personalizada: mayor tamaño y color blanco */
.hero__slider .swiper-button-prev,
.hero__slider .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 10;
  color: #fff;
  cursor: pointer;
}
.hero__slider .swiper-button-prev {
  left: 16px;
}
.hero__slider .swiper-button-next {
  right: 16px;
}

/* Utilizamos pseudo-elementos para dibujar las flechas con SVG;
   esto permite cambiar fácilmente el color desde CSS */
.hero__slider .swiper-button-prev::after,
.hero__slider .swiper-button-next::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
}
.hero__slider .swiper-button-prev::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.hero__slider .swiper-button-next::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/*
 * ==================================================================
 * Ajustes finales del hero slider (versión SilverGolden 1.0)
 * ------------------------------------------------------------------
 * Estos estilos complementan el hero de ancho completo con Swiper:
 *  - Eliminan el padding vertical del hero para que quede pegado
 *    al bloque siguiente y al menú superior.
 *  - Reducen el tamaño de las fuentes y limitan el ancho del texto
 *    (título y descripción) para ajustarse mejor al diseño de Figma.
 */

/* Eliminar el padding superior e inferior del hero full */
.hero.hero--full {
  padding: 0;
}

/* Ajustar el tamaño y ancho del título dentro del slider */
.hero.hero--full .hero__title {
  font-size: clamp(1.2rem, 2vw + 0.8rem, 2.4rem);
  max-width: 34.3rem;
}

/* Ajustar el tamaño y ancho de la descripción */
.hero.hero--full .hero__excerpt {
  font-size: 1rem;
  line-height: 1.35;
  max-width: 34.3rem;
}

/*
 * ===============================
 * Swiper hero slider customizations
 * ===============================
 *
 * Estas reglas ajustan la apariencia del nuevo slider del hero cuando
 * se utiliza la librería Swiper.  Se amplían los tamaños de los
 * controles de navegación, se personaliza la paginación (dots) y se
 * eliminan sombras innecesarias en el extracto para mantener un
 * diseño limpio y acorde al Figma.
 */

/* Asegurar que el hero no deja espacio extra debajo de la imagen */
.hero.hero--full {
  margin-bottom: 0;
}
/* Eliminar bordes redondeados de la imagen en el hero completo para que
   quede pegado al bloque siguiente */
.hero.hero--full .hero__img {
  border-radius: 0;
}
/* Quitar cualquier fondo o sombra del extracto de la noticia para que
   sólo se visualice el texto */
.hero__excerpt {
  background: none !important;
  box-shadow: none !important;
}

/* Container Swiper */
.hero__slider.swiper {
  position: relative;
  overflow: hidden;
}
/* Ajuste explícito del wrapper para garantizar que Swiper funcione
   correctamente y se alinee con el layout flex */
.hero__slider .swiper-wrapper {
  display: flex;
}

/* Paginación personalizada: situar en la parte inferior, centrar y
   dimensionar bullets */
.hero__slider .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}
.hero__slider .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 4px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  opacity: 1;
  transition: background-color .2s ease, border-color .2s ease;
}
.hero__slider .swiper-pagination-bullet-active {
  background: #C8553D;
  border-color: #C8553D;
}

/* Navegación (flechas) personalizada: mayor tamaño y color blanco */
.hero__slider .swiper-button-prev,
.hero__slider .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  z-index: 10;
  color: #fff;
  cursor: pointer;
}
.hero__slider .swiper-button-prev {
  left: 16px;
}
.hero__slider .swiper-button-next {
  right: 16px;
}

/* Utilizamos pseudo-elementos para dibujar las flechas con SVG;
   esto permite cambiar fácilmente el color desde CSS */
.hero__slider .swiper-button-prev::after,
.hero__slider .swiper-button-next::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
}
.hero__slider .swiper-button-prev::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.hero__slider .swiper-button-next::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}
  .hero__content {
    inset: auto 1rem 8% 1rem;
    padding: 16px;
  }
  .btn--hero {
    width: min(100%, 320px);
    height: 44px;
  }

@media (max-width: 480px) {
  .hero__img {
    height: 44vh;
    min-height: 300px;
  }
  .hero__content {
    inset: auto .75rem 7% .75rem;
    padding: 14px;
  }
}
/* ===== Overrides: Quick Links (debajo del hero) ===== */
.quick-links__grid li[class^="ico-"] > a::before{
  content: "" !important;           /* mata el emoji anterior */
  display: inline-block;
  width: 20px;                      /* ajusta al tamaño real */
  height: 20px;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  vertical-align: middle;
}

/* Íconos específicos */
.quick-links__grid li.ico-tramites   > a::before{ background-image: url('assets/doc.png') !important; }
.quick-links__grid li.ico-calendario > a::before{ background-image: url('assets/calendario.png') !important; }
.quick-links__grid li.ico-directorio > a::before{ background-image: url('assets/telefono_grey.png') !important; }
.quick-links__grid li.ico-permiso    > a::before{ background-image: url('assets/permiso_circulacion.png') !important; }

/*
 * Los íconos de directorio telefónico utilizan ahora un PNG con líneas grisáceas
 * sobre fondo transparente (`assets/telefono_grey.png`).  Con este recurso
 * no es necesario aplicar un filtro invertido, ya que el icono se ve
 * correctamente tanto en pastillas blancas como en el resto de la interfaz.
 */

/*  Íconos de Directorio Telefónico en menús personalizados
 *
 *  Los enlaces personalizados que utilicen la clase `ico-directorio` fuera de
 *  los componentes quick-links y sup-footer (p. ej. menús creados por el
 *  usuario en Apariencia → Menús) no están cubiertos por las reglas
 *  anteriores.  Anteriormente se usaba un PNG blanco (`telefono.png`)
 *  que requería invertir colores para verse sobre fondos claros.  Ahora
 *  utilizamos `assets/telefono_grey.png` con líneas grisáceas para que
 *  se muestre correctamente sin aplicar filtros.
 */
li.ico-directorio > a::before {
  content: "" !important;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  background-image: url('assets/telefono_grey.png') !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  vertical-align: middle;
  /* sin filtros adicionales, ya que el PNG es gris */
}


/* ===== Overrides: Menú superior del footer ===== */
.sup-footer__menu li[class^="ico-"] > .sup-footer-link::before{
  content: "" !important;             /* borra los emojis */
  display: inline-block;
  width: 20px;                        /* ajusta según iconos */
  height: 20px;
  margin-right: 8px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  vertical-align: middle;
}

/* Íconos específicos del footer */
.sup-footer__menu li.ico-tramites   > .sup-footer-link::before{ background-image: url('assets/doc.png') !important; }
.sup-footer__menu li.ico-calendario > .sup-footer-link::before{ background-image: url('assets/calendario.png') !important; }
.sup-footer__menu li.ico-directorio > .sup-footer-link::before{ background-image: url('assets/telefono_grey.png') !important; }
.sup-footer__menu li.ico-permiso    > .sup-footer-link::before{ background-image: url('assets/permiso_circulacion.png') !important; }

/* Quick-links */
.quick-links__grid li a {
  border-radius: 9999px; /* pill total */
}

/* Menú superior del footer */
.sup-footer__menu li .sup-footer-link {
  border-radius: 9999px; /* pill total */
}

/*
 * =======================
 *  Carrusel de eventos
 * -----------------------
 *  Esta sección define el estilo para el nuevo slider de eventos en la
 *  portada.  Se crea un contenedor Swiper con controles de
 *  navegación personalizados, bullets de paginación y una estructura
 *  de dos columnas (imagen izquierda y contenido a la derecha) que
 *  replica la maqueta de Figma.  Todos los selectores se limitan
 *  dentro de `.home-events` para no interferir con otros sliders.
 */



/*
 * Reducir el ancho del contenedor principal de la sección de eventos.
 * La tarjeta del evento ya tiene un ancho máximo de 1105px; este ajuste
 * asegura que el contenedor que la envuelve (y el título de la sección)
 * no se extienda más allá de ese valor.  De esta manera, todo el bloque
 * de eventos queda más comprimido y visualmente alineado al centro de la
 * página entre el vídeo y el menú superior del footer.
 */
.home-events .container {
  /* Aumentamos ligeramente el ancho del contenedor para dar más margen
   * a los lados de las tarjetas y espacio extra para los bullets. */
  max-width: 1125px;
}

/* Ajustar el ancho del carrusel para que no ocupe todo el contenedor y se
   centre entre el video y el footer.  Esto coincide con las medidas de
   `.event-slide` (1105px) y evita que Swiper expanda la slide al 100% de la
   sección.  Establecemos un ancho máximo y centramos el slider. */

/* Por defecto, Swiper asigna a cada `.swiper-slide` un ancho igual al
   contenedor (`100%`).  Sobrescribimos esta propiedad para que cada slide
   se ajuste automáticamente al tamaño de su contenido (nuestra tarjeta de
   evento), evitando que se muestre espacio vacío adicional en el lado
   derecho. */
/* Ajustamos el ancho de cada slide y eliminamos el margen derecho que
   introduce Swiper (`spaceBetween`).  Esto garantiza que cada tarjeta
   ocupe únicamente el espacio necesario y no provoque desbordamientos
   fuera del contenedor. */


/*
 * Algunos estados de Swiper (previo, siguiente, activo) pueden recibir un
 * `margin-right` en línea debido al valor `spaceBetween` en la configuración
 * de la librería.  Aseguramos que estos estados también tengan el margen
 * eliminado para que las tarjetas no se salgan del contenedor.
 */


/* Asegurar que el wrapper sea flex para que Swiper pueda posicionar los slides correctamente */
/* Utilizar flex para el wrapper y centrar los slides en el contenedor */
.home-events .events-slider .swiper-wrapper {
  /*
   * Utilizamos flexbox para que los slides se dispongan en línea de forma natural.
   * Es importante que el wrapper no centre los elementos, ya que Swiper aplica
   * transformaciones de traducción para mover las slides.  Si centramos las
   * slides, Swiper calculaba mal los desplazamientos y podía sacar las
   * tarjetas fuera de su contenedor.  Dejamos que se alineen al inicio.
   */
  display: flex;
  justify-content: flex-start;
}

/* Cada slide de evento se comporta como una tarjeta flexible: dos columnas en desktop y
   disposición vertical en móviles */
/*
 * Redefinimos la estructura del slide de evento para utilizar CSS Grid en lugar de flex.
 * Esto nos permite fijar columnas de ancho específico (552px para la imagen y 457px para
 * el contenido), un gap entre columnas y un padding alrededor, replicando fielmente
 * las medidas del prototipo de Figma.  Al definir un ancho máximo de 1105px (552 + 457 +
 * 32 de gap + 64 de padding), el slider queda centrado dentro de su contenedor.
 */
.home-events .event-slide {
  display: grid;
  grid-template-columns: 552px 457px;
  column-gap: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: none;
  /*box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);*/
  padding: var(--space-4);
  /* Ancho máximo calculado: 552 + 457 + 32 (gap) + 64 (padding) + 20 extra = 1125px
   * Para dar espacio a las flechas en pantallas grandes añadimos 120px extra.
   * 1125 + 120 = 1245px */
  max-width: 1245px;
  margin-left: auto;
  margin-right: auto;
  /* Añadimos espacio en la parte inferior para acomodar los bullets de paginación. */
  padding-bottom: calc(var(--space-4) + 40px);
}

/* Columna de la imagen */
/* Columna de la imagen: ancho fijo de 552px y altura definida.  El grid asigna
   automáticamente la anchura; sólo necesitamos fijar la altura y permitir el
   desbordamiento oculto para recortar la imagen si es necesario. */
.home-events .event-slide__media {
  height: 617px;
  overflow: hidden;
}
.home-events .event-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Ajustes generales de las imágenes dentro del slider de eventos.  Forzamos
 * que cualquier imagen dentro del carrusel se adapte al ancho de su
 * contenedor y mantenga su proporción.  Esto ayuda a corregir problemas
 * de tamaño en dispositivos móviles cuando WordPress agrega atributos
 * width/height en línea. */

/* Columna del contenido */
/* Columna del contenido: utilizamos flexbox para alinear el texto verticalmente.
   El ancho de 457px se define en el grid; eliminamos la asignación de flex. */
.home-events .event-slide__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}

.home-events .event-slide__title {
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  color: #DF8233;
  margin: 0 0 var(--space-1);
  /* Altura mínima para mantener la proporción del título en el diseño */
  min-height: 124px;
}

.home-events .event-slide__excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  text-align: left;
  /* Altura mínima para asegurar la caja del texto descriptivo */
  min-height: 159px;
}

.home-events .event-slide__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 33px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease;
  width: 264px;
}

.home-events .event-slide__btn:hover {
  background: #DF8233;
}

.home-events .event-slide__btn .arrow {
  font-size: 1.2rem;
  line-height: 1;
}

/* Paginación: bullets personalizados en la parte inferior del slider */
/* Paginación: bullets personalizados en la parte inferior del slider.  En Figma
 * se representan como círculos de aproximadamente 30px de diámetro.  El
 * bullet activo se pinta con el color principal de la marca (#C85B3D) y los
 * demás bullets quedan con un borde del color secundario.  Se ubican a
 * continuación del carrusel con un espacio vertical negativo para que no
 * se superpongan con el siguiente contenido. */
.home-events .events-slider .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  /* Posicionamos los bullets dentro de la tarjeta, a cierta distancia del borde inferior */
  bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.home-events .events-slider .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background:  #EDEDED;
  opacity: 1;
  transition: all .2s ease;
  /*transition: background-color 0.2s ease, border-color 0.2s ease;*/
}
.home-events .events-slider .swiper-pagination-bullet-active {
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Botones de navegación (flechas) */

/*
 * Botones de navegación (flechas).
 * Incrementamos el tamaño y eliminamos el fondo blanco para que se vean
 * como en el diseño de Figma: círculos outline con bordes del color
 * principal y una flecha del mismo color en su interior.  Ajustamos
 * además su posición horizontal para que queden alineados justo fuera
 * del carrusel.
 */

.home-events .events-slider .swiper-button-prev:hover,
.home-events .events-slider .swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.05);
}

.home-events .events-slider .swiper-button-prev::after,
/* Redefinimos las flechas utilizando un trazo más grueso y el color
 * principal (#C85B3D).  Reducimos el tamaño de la imagen vectorial
 * para que se adapte al interior de los nuevos botones. */
.home-events .events-slider .swiper-button-prev::after,
.home-events .events-slider .swiper-button-next::after {
  content: '';
  display: block;
  /* Aumentamos la proporción interna de la flecha para que sea más visible */
  width: 60%;
  height: 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.home-events .events-slider .swiper-button-prev::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534E' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.home-events .events-slider .swiper-button-next::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534E' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* Adaptación responsive: apilar columnas en pantallas pequeñas
 * En pantallas menores a 768px, los slides cambian de grid a un layout de columna.
 * Eliminamos el ancho máximo y hacemos que la imagen y el texto ocupen el 100% de
 * la anchura disponible.  También ajustamos las flechas de navegación para
 * reducir su tamaño y reposicionarlas. */
@media (max-width: 768px) {
  .home-events .event-slide {
    display: flex;
    flex-direction: column;
    max-width: none;
    /* Añadimos espacio inferior extra en móviles para los bullets */
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + 40px);
  }
  .home-events .event-slide__media {
    aspect-ratio: 4/3;
    height: auto;
  }
  .home-events .event-slide__media img {
    /* Permitir que la imagen se adapte a su contenido en móviles y anular atributos inline */
  /*  width: 100% !important;
    max-width: 100%;*/
    height: auto !important;
    max-height: none;
    object-fit: cover;
  }

  /* Reforzamos que todas las imágenes del slider se comporten de manera responsiva en móviles */

  .home-events .event-slide__content {
    width: 100%;
  }
  .home-events .event-slide__title {
    min-height: auto;
  }
  .home-events .event-slide__excerpt {
    min-height: auto;
  }
 
  .home-events .events-slider .swiper-button-prev {
    left: -8px;
  }
  .home-events .events-slider .swiper-button-next {
    right: -8px;
  }
}






/* Flecha más notoria (#57534E) */
.home-events .events-slider .swiper-button-prev::after,
.home-events .events-slider .swiper-button-next::after{
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.home-events .events-slider .swiper-button-prev::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.home-events .events-slider .swiper-button-next::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* ====== Imagen en móvil – anular width/height inline de WP ====== */
@media (max-width: 768px){
  /* mantén la tarjeta en columna y con aire inferior para los bullets */
  .home-events .event-slide{
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + 40px);
  }
  /* caja de imagen con proporción estable (evita fotos “gigantes”) */
  /*.home-events .event-slide__media{
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
  }*/
  /* la imagen respeta el contenedor y ignora atributos inline */
  /*.home-events .event-slide__media img{
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    max-height: none;
    object-fit: cover;
  }*/
}



/*MODIFICADO Y UNIFICANDO LAS FLECHAS */
.home-events .events-slider {
  position: relative;
  /* Aumentamos el ancho máximo en desktop para dar margen a las flechas.
   * Originalmente era 1105px; sumamos 120px para que coincida con
   * el incremento en .event-slide (1245px de máximo menos 20px de diferencia).
   */
  max-width: 1225px;
  margin: 0 auto;
  overflow: hidden;      /* que no se vea el siguiente slide */
}

.home-events .events-slider .swiper-button-prev,
.home-events .events-slider .swiper-button-next {
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
/* Posiciona las flechas apenas adentro, sin sacarlas del contenedor */
.home-events .events-slider .swiper-button-prev { left: -3px; }
.home-events .events-slider .swiper-button-next { right: -3px; }

/* Ajustes globales de imágenes: que ignoren atributos width/height 
.home-events .event-slide__media,
.home-events .events-slider img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: cover;
}*/

@media (max-width: 768px) {
  .home-events .event-slide {
    flex-direction: column;
    max-width: none;
    padding: var(--space-3);
    padding-bottom: calc(var(--space-3) + 40px);
  }
}

/* Ocultar la franja superior del footer (menú sup-footer) en la plantilla de noticias */
.page-noticias .sup-footer {
  display: none;
}

/* Estilos para el botón de leer la nota con flecha dentro de un círculo gris */
.page-noticias .news-hero__read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}
.page-noticias .news-hero__read .read-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-noticias .news-hero__read .read-icon {
  font-size: 1.25rem;
  color: var(--color-primary);
  line-height: 1;
}
.page-noticias .news-hero__read .read-label {
  color: #DF8233;
}

/* Botones estilo Figma: fondo naranja y bordes redondeados */
.page-noticias .btn-more,
.page-noticias .news-list__readmore {
  display: inline-block;
  padding: 8px 16px;
  background: var(--color-accent);
  height: 45px;
  width: 264px;
  color: #fff !important;
  border-radius: 30px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.page-noticias .btn-more:hover,
.page-noticias .news-list__readmore:hover {
  filter: brightness(0.95);
}

/* Diseño de la lista de noticias adicional: cards horizontales sin paginación */
.page-noticias .news-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.page-noticias .news-list__item {
  flex: 1 1 calc(33.333% - var(--space-3));
  max-width: calc(33.333% - var(--space-3));
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: #fff;
}
.page-noticias .news-list__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.page-noticias .news-list__meta {
  font-size: 0.75rem;
  color: var(--color-weak);
  margin-bottom: var(--space-2);
}
.page-noticias .news-list__excerpt {
  font-size: 0.875rem;
  margin-bottom: var(--space-3);
  color: var(--color-text);
}
.page-noticias .news-list__readmore {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 992px) {
  .page-noticias .news-list__item {
    flex: 1 1 calc(50% - var(--space-3));
    max-width: calc(50% - var(--space-3));
  }
}

@media (max-width: 600px) {
  .page-noticias .news-list__item {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ===============================================================
 * Página de noticias (template page-noticias.php)
 * ---------------------------------------------------------------
 * Estas reglas estilizan la página de noticias diseñada para la
 * categoría "Noticias".  La estructura consta de un hero con una
 * imagen de 648×859 px a la derecha y un panel de texto a la izquierda,
 * seguido del detalle completo de la noticia y una galería de tres
 * imágenes.  Finalmente, se muestran noticias adicionales en formato
 * lista sin imagen.  Se utilizan variables de tokens definidos al
 * inicio del CSS para mantener coherencia visual.
 */

.page-noticias .news-hero-section {
  padding: var(--space-5) 0;
  background: var(--color-bg);
}

.page-noticias .news-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}

.page-noticias .news-hero__media {
  flex: 0 0 648px;
  max-width: 100%;
  height: 859px;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.page-noticias .news-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-noticias .news-hero__content {
  flex: 1 1 0;
  max-width: 415px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-noticias .news-hero__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-secondary);
  text-transform: uppercase;
}

.page-noticias .news-hero__date {
  font-size: 0.75rem;
  color: var(--color-weak);
}

.page-noticias .news-hero__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 2rem;
  color: #DF8233;
  margin: 0;
}

.page-noticias .news-hero__excerpt {
  font-size: 1rem;
  line-height: 1.5;
  max-height: 84px;
  overflow: hidden;
}

.page-noticias .news-hero__read {
  margin-top: auto;
  /* Aseguramos que el enlace 'Seguir leyendo' conserve el mismo estilo que
     los botones (fondo naranja y texto blanco) definidos al inicio de este
     bloque. No redefinimos el color aquí para no sobreescribir la regla
     anterior que establece color #fff sobre fondo naranja. */
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.page-noticias .news-hero__read span {
  font-size: 1.2rem;
  line-height: 1;
}

.page-noticias .news-detail-section {
  padding: var(--space-5) 0;
}

.page-noticias .news-detail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}

.page-noticias .news-detail__content {
  flex: 1 1 0;
  max-width: 50%;
  min-width: 280px;
}

.page-noticias .news-detail__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.75rem;
  margin-bottom: var(--space-3);
  color: var(--color-primary);
}

.page-noticias .news-detail__text {
  font-size: 1rem;
  line-height: 1.55;
}

.page-noticias .news-detail__gallery {
  flex: 1 1 0;
  max-width: 50%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: var(--space-2);
}

.page-noticias .news-gallery-item {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.page-noticias .news-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Primera imagen de la galería ocupa toda la fila */
.page-noticias .news-gallery-item--lg {
  grid-column: 1 / -1;
}

.page-noticias .news-detail__more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-muted);
}

.page-noticias .news-detail__more-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #DF8233;
  margin: 0;
}

.page-noticias .btn-more {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  /* Aseguramos que el texto del botón 'Seguir leyendo' sea visible sobre el
     fondo naranja.  El uso de !important garantiza que ninguna regla
     posterior sobreescriba este color. */
  color: #fff !important;
}

.page-noticias .news-list-section {
  padding: var(--space-5) 0;
  background: var(--color-bg);
}

.page-noticias .news-list__item {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-muted);
}

.page-noticias .news-list__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}

.page-noticias .news-list__meta {
  font-size: 0.75rem;
  color: var(--color-weak);
  margin-bottom: var(--space-2);
}

.page-noticias .news-list__excerpt {
  font-size: 1rem;
  margin-bottom: var(--space-2);
}

.page-noticias .news-list__readmore {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.page-noticias .news-list__pagination {
  margin-top: var(--space-4);
  text-align: center;
}

.page-noticias .news-list__pagination a {
  margin: 0 6px;
  /* Utilizamos el verde de Figma (#4A6B47) para los enlaces de paginación */
  color: #4A6B47;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
}

/* Estilo hover para los enlaces de paginación */
.page-noticias .news-list__pagination a:hover {
  background: rgba(74, 107, 71, 0.1);
}

/* Estilo de la página actual en la paginación */
.page-noticias .news-list__pagination .current {
  background-color: #4A6B47;
  color: #fff;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-weight: bold;
}

/* Eliminamos la regla duplicada de .current al final del bloque anterior, ya que el peso
   se define aquí junto con otros estilos. */

/* Responsivo para tablets y móviles */
@media (max-width: 992px) {
  .page-noticias .news-hero {
    flex-direction: column;
  }
  .page-noticias .news-hero__media,
  .page-noticias .news-hero__content {
    max-width: 100%;
  }
  .page-noticias .news-hero__media {
    height: auto;
    aspect-ratio: 3/4;
  }
  .page-noticias .news-detail {
    flex-direction: column;
  }
  .page-noticias .news-detail__content,
  .page-noticias .news-detail__gallery {
    max-width: 100%;
  }
  .page-noticias .news-detail__gallery {
    grid-template-columns: 1fr;
  }
  .page-noticias .news-gallery-item--lg {
    grid-column: auto;
  }
}

/* ==========================================================================
   Ajustes adicionales
   --------------------------------------------------------------------------
   A continuación se definen reglas que corrigen problemas observados en la
   versión móvil y actualizan el color de la franja superior (topbar) según
   la última revisión de Figma. Estas reglas se colocan al final del
   stylesheet para que tengan prioridad sobre definiciones anteriores.
   ========================================================================== */

/* Cambiar el color del top de la web (topbar) a un verde específico.
 *  El diseño actualizado de Figma utiliza un verde oscuro (#4A6B47) para la
 *  franja superior que contiene el logotipo y las pastillas de acción. Para
 *  aplicar este cambio sin afectar a otras variables de color, se asigna
 *  directamente el color de fondo a la topbar. */
.site-header .topbar {
  background: #4A6B47;
}

/* Ajustes responsivos para la sección “Equipo”.
 *  En resoluciones reducidas, la tarjeta de presentación del equipo se
 *  desborda porque la imagen mantiene un ancho fijo de 260 px y la grilla
 *  de dos columnas no se adapta. A partir de 768 px de ancho o menos,
 *  reorganizamos el contenido en una sola columna y permitimos que
 *  elementos como la fotografía y el botón se ajusten al 100 % del ancho
 *  disponible. */
@media (max-width: 768px) {
  .team-wrapper {
    grid-template-columns: 1fr;
  }
  /* La fotografía ocupa todo el ancho disponible y conserva su proporción.
     Se añade un margen inferior para separar la imagen del texto. */
  .team-photo img {
    width: 100%;
    height: auto;
    margin-bottom: var(--space-3);
  }
  /* El botón “Ver más” se extiende a lo ancho del contenedor para
     alinearse con el resto del contenido. */
  .team-btn {
    width: 100%;
  }
}

/* ----------------------------------------------
   Página de Noticias (listado)
   ----------------------------------------------
   En la plantilla de página de noticias se solicita ocultar la fotografía de
   cada tarjeta de noticia para que el listado muestre sólo el título, la
   fecha, el extracto y el enlace “Leer más”.  Esta regla se aplica
   únicamente cuando el body contiene la clase `page-noticias`, de modo que
   no afecte al resto de secciones donde las tarjetas sí deben mostrar la
   imagen. */
.page-noticias .news-card__media {
  display: none;
}

/* Ajustar tamaño de los íconos de contacto en el pie de página
 * Cuando sustituimos los glifos por imágenes (pin, teléfono, horario),
 * necesitamos asignar un tamaño fijo para que se alineen correctamente
 * con el texto.  Estas reglas se aplican a los elementos con clase
 * `.contact-icon` dentro de la lista de contacto del footer. */
.footer-contact-list .contact-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Ajustamos el peso de la tipografía de los textos de contacto a 400 para
   evitar que se vean demasiado pesados (algunos navegadores aplicaban un
   peso 600 por defecto en este contexto). */
.footer-contact-list span{
  font-weight:400;
}

/* ===================================================================
 * Carrusel de noticias
 * ===================================================================
 * Ajustes visuales para el carrusel de noticias en la portada.  La
 * estructura utiliza Swiper para deslizar cuatro tarjetas de
 * noticias.  Reutilizamos la paleta y los tamaños de los bullets
 * del carrusel de eventos para mantener coherencia visual.  No se
 * incluyen flechas de navegación; sólo bullets clicables.
 */
.home-news .news-slider {
  position: relative;
  /* Añadimos espacio inferior para acomodar los bullets debajo de las tarjetas */
  padding-bottom: 48px;
  /* Por defecto ocultamos el contenido que se desborda para que los
     slides adicionales no sean visibles. Sin embargo, en escritorios
     necesitamos permitir que las flechas de navegación sobresalgan
     ligeramente fuera del carrusel.  Cambiamos a `overflow: visible`
     y dejamos que Swiper administre el recorte del carrusel. */
  overflow: visible;
}
.home-news .news-slider .swiper-wrapper {
  display: flex;
}
.home-news .news-slider .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  /* Ubicamos los bullets 16px por debajo de las tarjetas (al igual que
     en el carrusel de eventos) para darles más aire y evitar que se
     superpongan con el botón "Seguir leyendo" */
  bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.home-news .news-slider .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: #EDEDED;
  opacity: 1;
  transition: all .2s ease;
}
.home-news .news-slider .swiper-pagination-bullet-active {
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Flechas de navegación para el carrusel de noticias */
.home-news .news-slider .swiper-button-prev,
  .home-news .news-slider .swiper-button-next {
  top: 50%;
  /* Igualamos el tamaño de las flechas al carrusel de eventos.  Un círculo
     de 48px armoniza con el diseño y permite que la flecha sea claramente
     visible en escritorio. */
  width: 48px;
  height: 48px;
  /* Ajustamos el margen vertical para centrar la flecha respecto al
     carrusel.  Con 48px de alto, el desplazamiento a -24px centra el
     botón en la mitad de la altura del contenedor. */
  margin-top: -24px;
  background: transparent;
  border: none;
  /* Eliminamos cualquier sombra para que luzcan como los controles
     del carrusel de eventos */
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.home-news .news-slider .swiper-button-prev {
  left: -3px;
}
.home-news .news-slider .swiper-button-next {
  right: -3px;
}

.home-news .news-slider .swiper-button-prev::after,
.home-news .news-slider .swiper-button-next::after {
  content: '';
  display: block;
  width: 60%;
  height: 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.home-news .news-slider .swiper-button-prev::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.home-news .news-slider .swiper-button-next::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* === Sección: Cards de Enlaces === */
.links-cards {
  padding: 40px 0;
  background-color: #f7f8f8;
}

.links-cards .wrap {
  width: min(1100px, 90%);
  margin: 0 auto;
}

.links-cards-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding: 0;
  margin: 0;
}

.links-card {
  text-align: center;
}

.links-card a {
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
}

.links-card a:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.links-card img {
  width: 100%;
  height: auto;
  max-width: 300px;
  max-height: 250px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* Normaliza tamaño de las cards: 300x250 y sin deformación */
.links-card a{
  display: block;
  width: 100%;
  max-width: 300px;         /* respeta el límite de diseño */
  aspect-ratio: 6 / 5;      /* 300x250 = 6:5 */
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.links-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* llena la card, puede recortar un poquito */
  object-position: center;
  display: block;
}

/* Ajustes finos sección Enlaces destacados */
.links-cards { padding: 32px 0 16px; background: #f7f8f8; }
.links-cards .wrap { width: min(1100px, 90%); margin: 0 auto; }

.links-cards h2 { 
  font-size: clamp(1.4rem, 1.8vw, 1.6rem);
  font-weight: 700; 
  color: #1b1f23; 
  margin: 0 0 18px; 
}

.links-cards-grid {
  list-style: none; 
  display: grid; 
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px; 
  padding: 0; 
  margin: 0;
}

@media (max-width: 1024px){ .links-cards-grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 768px) { .links-cards-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 480px) { .links-cards-grid{ grid-template-columns: 1fr; } }

.links-card a{
  display: block; 
  width: 100%; 
  max-width: 300px; 
  aspect-ratio: 6/5;       /* 300x250 */
  margin: 0 auto; 
  background: #fff; 
  border-radius: 10px; 
  overflow: hidden; 
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.links-card a:hover{ transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.14); }

.links-card img{ 
  width: 100%; 
  height: 100%; 
  object-fit: cover;       /* usa contain si no quieres recorte */
  object-position: center; 
  display: block; 
}


/* Ajuste para que las imágenes con texto no se recorten */
.links-card img {
  width: 100%;
  height: 100%;
  object-fit: contain !important; /* en vez de cover */
  object-position: center;
  background-color: #fff; /* mantiene fondo limpio */
}

/* === Videoteca (grid + modal) === */
.yt-grid{ padding:32px 0; background:#f7f8f8; }
.yt-grid .wrap{ width:min(1100px,90%); margin:0 auto; }
#yt-grid-title{ margin:0 0 16px; font-weight:700; }

/* Grid 4 por fila (responsive) */
.yt-cards{ 
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px;
}
@media (max-width:1024px){ .yt-cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){  .yt-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px){  .yt-cards{ grid-template-columns:1fr; } }

.yt-card{ display:flex; flex-direction:column; gap:8px; }
.yt-card a.yt-open{
  display:block; border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.08); transition:transform .2s, box-shadow .2s;
  aspect-ratio: 16 / 9; /* miniatura 16:9 */
}
.yt-card a.yt-open:hover{ transform:translateY(-3px); box-shadow:0 8px 16px rgba(0,0,0,.14); }
.yt-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.yt-title{ font-size:.98rem; margin:0; }
.yt-date{ font-size:.85rem; color:#666; }

/* Paginación */
.yt-pager{ display:flex; align-items:center; gap:10px; justify-content:center; margin:18px 0 0; }
.yt-pager button{ 
  border:0; padding:8px 12px; border-radius:999px; background:#eceff1; cursor:pointer; 
}
.yt-pager button[disabled]{ opacity:.45; cursor:not-allowed; }
.yt-pages{ list-style:none; display:flex; gap:8px; margin:0; padding:0; }
.yt-pages button{ min-width:36px; }
.yt-pages .is-active{ background:#ff8a3d; color:#fff; }

/* Modal */
.yt-modal{ position:fixed; inset:0; display:none; }
.yt-modal.is-open{ display:block; }
.yt-modal_backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.65);
}
.yt-modal_dialog{
  position:relative; width:min(960px,92vw); margin:6vh auto; background:#000; border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.35); overflow:hidden;
}
.yt-modal_close{
  position:absolute; top:8px; right:10px; z-index:5; width:36px; height:36px;
  border:0; border-radius:999px; background:rgba(255,255,255,.15); color:#fff; font-size:22px; cursor:pointer;
}
.yt-modal_body{ position:relative; aspect-ratio:16/9; background:#000; }
.yt-player, .yt-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }