blockquote {
  padding-inline-start: var(--spacing-largest);
  border-color: var(--color-accent);
  border-inline-start: var(--border-large);
}




/* TÍTULO NOTICIAS */
.titulo-noticias {
  position: relative;
  margin: 30px 0 0;}

.titulo-noticias:after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: 5px;
  right: 0;
  left: 0;
  height: 4px;
  background: #0060AC;
}
.h2::after {
  box-sizing: border-box;
  margin-block-start: 0;
}
.titulo-noticias h2
 {   
  font-size: 32px;
  
}

.titulo-noticias h2 {
  font-size: 32px;
  line-height: 28px;
  position: relative;
  padding-right: 10px;
  display: inline-block;
  margin: 0;
  background: #fff;
  position: relative;
  z-index: 5;
}


/*============================ 
BOX LINKS LISTING 
============================ */ 
/* Contenedor principal */ 
.box-links-listing { 
margin: 0; 
margin-block-end: var(--vertical-rhythm-spacing); } 

/* Lista de items */ 
.box-links-listing__list { 
display: flex; /* Flex por defecto */ 
flex-direction: column; /* Apilado en móvil */ 
flex-wrap: wrap; 
gap: 1.25rem; 
justify-content: space-between; 
padding: 1rem 0 1.5rem; 
margin: 0; list-style: none; 
}
 
/* Cada item */ 
.box-links-listing__list-item { 
margin: 0; flex: 1 1 100%; /* 100% ancho en móvil */ 
box-sizing: border-box; 
}

/* Flex en PC (4 elementos por fila) */ 
@media (min-width: 1024px) { 
.box-links-listing__list { flex-direction: row; } 
.box-links-listing__list-item { flex: 1 1 calc(25% - 1rem); /* 4 columnas con gap */ } } 

/* Dos elementos por fila en moviles en horizontal */
@media (min-width: 767px) and (max-width: 1023px) {
  .box-links-listing__list {
    display: grid;
  }

  .box-links-listing__list-item {
    flex: 0 0 50%;
  }
}

/* Estilos de los links internos */ 
.box-link { 
position: relative; 
width: 100%; 
height: 100%; 
} 

.box-link > * {
 margin-block-end: var(--box-link-content-spacing); 
padding-inline: var(--box-link-content-spacing); 
} 
.box-links-listing .box-link__title { 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
font-size: var(--font-size-medium-large); 
} 

.box-links-listing .box-link__link { 
display: flex; 
gap: var(--spacing-smallest); 
justify-content: space-between; 
align-items: center; 
padding: var(--spacing) var(--spacing-small); 
background-color: #1F5F86; 
border: solid 3px #1F5F86; 
text-decoration: none; 
color: var(--color-white); 
height: 100%; 
border-radius: 8px;
box-shadow: 2px 4px 16px 0 rgba(0,0,0,0.1);
transition: border-radius 0.3s, background-color 0.3s, border 0.3s;
}

.box-links-listing a.box-link__link:hover,
.box-links-listing a.box-link__link:active 
.box-links-listing a.box-link__link:focus {
border-radius: 24px;
background-color: #000; 
border: solid 3px #000; 
color: var(--color-white);
box-shadow: 2px 4px 16px 0 rgba(0,0,0,0.1);
}


.box-links-listing .box-link__icon { 
height: var(--spacing); 
width: auto; 
flex-shrink: 0; 
fill: var(--color-white); 
}


 
/* Ocultos por defecto */ 
.box-links-listing__list-item.hidden {
display: none; 
} 

/* Mostrar al activar checkbox */ 
.mostrar-mas-toggle:checked ~ 
.box-links-wrapper 
.box-links-listing__list-item.hidden { 
display: block; 
} 

/* Botón "Mostrar más" */ 
.mostrar-mas-btn { 
display: inline-block; 
padding: 0.8rem 1.5rem; 
margin: 0 0 2rem; 
border: 2px solid #000; 
background-color: #fff; 
color: #000; 
font-weight: 600; 
font-size: 1rem; 
cursor: pointer; 
text-align: center; 
width: fit-content; 
align-self: flex-start; 
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease;
border-radius: 8px;                
} 

.mostrar-mas-btn:hover { 
border-radius: 24px;
background-color: #000;
color: #fff;
}

.mostrar-mas-btn::before { 
content: "Mostrar más"; 
} 

.mostrar-mas-btn:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 4px;
}

.mostrar-mas-toggle:checked ~ 
.box-links-wrapper 
.mostrar-mas-btn { 
background-color: #000; 
color: #fff; 
} 

.mostrar-mas-toggle:checked ~ 
.box-links-wrapper 
.mostrar-mas-btn:hover { 
background-color: #fff; 
border-color: #000;
color: #000; 
} 

.mostrar-mas-toggle:checked ~ 
.box-links-wrapper 
.mostrar-mas-btn::before { 
content: "Mostrar menos"; 
} 

/* Checkbox oculto */ 
.mostrar-mas-toggle { 
display: none; 
} 

/* Wrapper */ 
.box-links-wrapper { 
display: flex; 
flex-direction: column; 
}

/* ================================
   ÚLTIMAS NOTICIAS – TARJETAS
   ================================ */

/* Grid */
.noticias-grid .views-view-responsive-grid {
  align-items: stretch;
  margin-block-start: 1rem;
}

/* Cada item */
.noticias-grid .views-view-responsive-grid__item-inner {
  height: 100%;
    box-shadow: 2px 4px 16px 0 rgba(0, 0, 0, 0.1);
    border-radius: 24px;
}

/* Link = contenedor flex REAL */
.noticias-grid .lgd-teaser__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ================================
   IMAGEN
   ================================ */

.noticias-grid .lgd-teaser__image {
  flex-shrink: 0;
}

/* Imagen pegada a los lados */
.noticias-grid .lgd-teaser__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;

  /* Bordes superiores */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;

  transition: border-radius 0.3s ease;
}

/* Hover / focus: imagen */
.noticias-grid
.views-view-responsive-grid__item-inner:hover
.lgd-teaser__image img,
.noticias-grid
.views-view-responsive-grid__item-inner:focus-within
.lgd-teaser__image img {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

/* ================================
   CONTENIDO (BORDE AQUÍ)
   ================================ */

.noticias-grid .lgd-teaser__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  border: 3px solid #ccc;
  border-top: none; /* clave */
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #fff;
  transition:
    border-radius 0.3s ease,
    background-color 0.3s ease;
}

/* Hover / focus: contenido */
.noticias-grid
.views-view-responsive-grid__item-inner:hover
.lgd-teaser__content,
.noticias-grid
.views-view-responsive-grid__item-inner:focus-within
.lgd-teaser__content {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  background-color: var(--color-grey-lighter);
}

/* ================================
   TEXTO
   ================================ */

.noticias-grid h3.lgd-teaser__title {
  margin: 0;
}

.noticias-grid .lgd-teaser__title span {
  display: block;
  padding: 0.5rem 0.5rem 0.5rem;
  font-weight: bold;
  color: #113555;
}

.noticias-grid .lgd-teaser__date .field__item {
  padding: 0 0.5rem 0.1rem;
  font-weight: bold;
  color: #1F5F86;
}

.noticias-grid .lgd-teaser__body {
  flex-grow: 1; /* iguala alturas */
}

.noticias-grid .lgd-teaser__body .field__item {
  padding: 0 1.5rem 0 0.5rem;
  color: #333;
}

/* ================================
   ACCESIBILIDAD
   ================================ */

.noticias-grid .lgd-teaser__link:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 4px;
}

/* ================================
   FLECHA FONT AWESOME
   ================================ */

/* Contenedor relativo para posicionar la flecha */
.noticias-grid .lgd-teaser__content {
  position: relative;
}

/* Flecha */
.noticias-grid .lgd-teaser__content::after {
  content: "\f061"; /* arrow-right */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;

  position: absolute;
  right: 1rem;
  bottom: 1rem;

  font-size: 2rem;
  color: #113555;

  transition: color 0.3s ease, transform 0.3s ease;
}

/* Hover / focus: cambia color */
.noticias-grid
.views-view-responsive-grid__item-inner:hover
.lgd-teaser__content::after,
.noticias-grid
.views-view-responsive-grid__item-inner:focus-within
.lgd-teaser__content::after {
  color: #1f5f86;
  transform: translateX(4px); /* pequeño movimiento opcional */
}


/* ================================
   ENLACE "MÁS NOTICIAS"
   ================================ */

.view-ultimas-noticias .more-link {
  text-align: left;
  margin-top: 1.5rem;
  margin-bottom: 35px;
  padding-left: 0px;
}

.view-ultimas-noticias .more-link a {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #113555;
  color: #ffffff;
  border: 2px solid #113555;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border-radius: 8px;
}

/* Hover y click */
.view-ultimas-noticias .more-link a:hover,
.view-ultimas-noticias .more-link a:active {
  background-color: #ffffff;
  color: #113555;
  border-color: #113555;
  border-radius: 24px;
}

.view-ultimas-noticias .more-link a:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 4px;
}




/* PROXIMOS EVENTOS */
/* Contenedor del grid usando Flexbox */
.proximos-eventos {
  display: flex;
  flex-wrap: wrap; /* permite que los items pasen a la siguiente fila */
  gap: 30px; /* espacio entre celdas */
  justify-content: center; 
  background:#113555;
  padding: 1.5rem 1.2rem 0 1.2rem;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-bottom: 1.5rem;
}

/* Cada celda */
.proximos-eventos .views-view-responsive-grid__item {
  flex: 0 1 calc(50% - 15px); /* 50% del ancho menos la mitad del gap */
  display: flex;
  flex-direction: column;
  background-color: #fff;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.proximos-eventos .views-view-responsive-grid__item:hover {
border-radius: 24px;
background-color: var(--color-grey-lighter);
}

/* Imagen arriba */
.proximos-eventos .views-view-responsive-grid__item img {
  width: 100%;
  height: 50%; 
  object-fit: cover;
  display: block;
}

/* Quita el subrayado de toda la card enlazada */
.lgd-event-card__link {
  text-decoration: none;
}

/* Por si LocalGov lo reaplica en hover/focus */
.lgd-event-card__link:hover,
.lgd-event-card__link:focus {
  text-decoration: none;
}

/* Mantén el color del texto */
.lgd-event-card__link,
.lgd-event-card__link * {
  color: inherit;
}


/* Contenido centrado */
.lgd-event-card__content {
  text-align: center;
}

/* Título del evento */
.lgd-event-card__title {
  color: #113555;
  margin: 0.3rem 0 0.5rem;
  line-height: 1.3rem;
}

/* Asegura que el span interno no rompa estilos */
.lgd-event-card__title span {
  color: inherit;
}

/* Fecha del evento */
.lgd-event-card__date {
  font-size: 0.9rem;
  font-weight: 800;
}

/* El enlace debe ocupar toda la card */
.lgd-event-card__link {
  display: block;
  text-decoration: none;
  height: 100%;
}

/* Foco de teclado: borde amarillo en la CARD */
.lgd-event-card:focus-within {
  outline: 3px solid #ffcc00;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Evita que el foco se vea al hacer clic con ratón */
.lgd-event-card__link:focus {
  outline: none;
  background-color: transparent;
}

.lgd-event-card__link:focus a {
  outline: none;
  background-color: transparent;
}

/* Contenedor del enlace "Más eventos" */
.proximos-eventos + .more-link,
.proximos-eventos .more-link,
.more-link {
  width: 100%;
  margin: 0px 0 30px 0;
}

/* Estilo del botón */
.proximos-eventos .more-link a {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #fff;
  color: #113555;
  border: 4px solid #113555;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

/* Hover: invertir colores */
.proximos-eventos .more-link a:hover,
.proximos-eventos .more-link a:focus {
  background-color: #0060AC;
  color: #fff;
  border-radius: 24px;
}


/* TÍTULO PRÓXIMOS EVENTOS */
.titulo-eventos {
  position: relative;
  margin: 30px 0 0;
  background: #113555;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-block-end: -1.5rem;

}

/* Línea azul debajo del título */
.titulo-eventos:after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: 5px;
  left: 20px;  /* espacio desde el borde izquierdo */
  right: 10px;    /* línea hasta el borde derecho */
  height: 4px;
  background: #0060AC;
  z-index: 1;
}

/* Ajuste del H2 dentro del contenedor */
.titulo-eventos h2 {
  font-size: 32px;
  line-height: 28px;
  position: relative;
  display: inline-block;
  margin: 0;
  padding-left: 20px; /* espacio entre borde izquierdo y texto */
  padding-right: 10px;
  background: #113555;
  z-index: 5;  /* asegura que el texto quede por encima de la línea */
  color: #ffffff; /* texto en blanco */
  margin-top: 20px;
}

/* TÍTULO FARMACIAS */
.titulo-farmacias {
  position: relative;
  margin: 30px 0 0;
  background: #2e7d32;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-block-end: -1.5rem;
}

/* Línea verde debajo del título */
.titulo-farmacias:after {
  content: '';
  display: inline-block;
  position: absolute;
  bottom: 5px;
  left: 20px;  /* espacio desde el borde izquierdo */
  right: 10px;    /* línea hasta el borde derecho */
  height: 4px;
  background: #96d0a8;
  z-index: 1;
}

@media (min-width: 768px) {
.titulo-farmacias:after {
  left: 35px;  /* espacio desde el borde izquierdo */
  }
}

/* Ajuste del H2 dentro del contenedor */
.titulo-farmacias h2 {
  font-size: 32px;
  line-height: 28px;
  position: relative;
  display: inline-block;
  margin: 0;
  padding-left: 20px; /* espacio entre borde izquierdo y texto */
  padding-right: 10px;
  background: #2e7d32;
  z-index: 5;  /* asegura que el texto quede por encima de la línea */
  color: #ffffff; /* texto en blanco */
  margin-top: 20px;
}

@media (min-width: 768px) {
  .titulo-farmacias h2 {
    padding-left: 0;
  }
}

/* =========================================================
    FARMACIAS GUARDIA
   CONTENEDOR VERDE (INTERIOR, NO EL LAYOUT)
   ========================================================= */

/* =========================================================
   FONDO VERDE DEL CONTENEDOR DE CADA BLOQUE
   ========================================================= */
.views-element-container.farmacia-guardia,
.views-element-container.block-views-blockfarmacia-de-guardia-hasta-9-00-block-1,
.views-element-container.block-views-blockfarmacia-de-guardia-desde-9-00-block-1 {
  background-color: #2e7d32; /* verde institucional */
  padding: 1.5rem 2rem 2rem;
  
  /* Forzar que tarjetas tengan igual altura */
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* espacio entre tarjetas */
}
.views-element-container.block-views-blockfarmacia-de-guardia-desde-9-00-block-1 {
  padding-top: 0px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-bottom: 1.5rem;
}
.layout__region .block-views-blockfarmacia-de-guardia-hasta-9-00-block-1 {
  margin-block-end: 0;
}

/* =========================================================
   MARGEN IZQUIERDO SOLO EN ESCRITORIO
   ========================================================= */
/* Móvil vertical → sin margen */
@media (max-width: 639px)  {
  .views-element-container.farmacia-guardia,
  .views-element-container.block-views-blockfarmacia-de-guardia-hasta-9-00-block-1,
  .views-element-container.block-views-blockfarmacia-de-guardia-desde-9-00-block-1,
  .titulo-farmacias {
    margin-left: 0;
  }
}

/* Móvil horizontal → margen 2rem */
@media (min-width: 640px) and (max-width: 1023px) {
  .views-element-container.farmacia-guardia,
  .views-element-container.block-views-blockfarmacia-de-guardia-hasta-9-00-block-1,
  .views-element-container.block-views-blockfarmacia-de-guardia-desde-9-00-block-1,
  .titulo-farmacias {
    margin-left: 2rem;
  }
}

/* Tablets y PC grandes → margen 2rem */
@media (min-width: 1024px) {
  .views-element-container.farmacia-guardia,
  .views-element-container.block-views-blockfarmacia-de-guardia-hasta-9-00-block-1,
  .views-element-container.block-views-blockfarmacia-de-guardia-desde-9-00-block-1,
  .titulo-farmacias {
    margin-left: 2rem;
  }
}



/* =========================================================
   TARJETA BLANCA (CADA FARMACIA)
   ========================================================= */
.views-element-container .views-row {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 8px;
  /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* para igualar altura con flex */
  height: 100%;
}

/* =========================================================
   TEXTO SUPERIOR: DE GUARDIA
   ========================================================= */
.view-farmacia-de-guardia-hasta-9-00 .views-row::before {
  content: "De guardia hasta las 09:00 h.";
}

.view-farmacia-de-guardia-desde-9-00 .views-row::before {
  content: "De guardia desde las 09:00 h.";
}

.view-farmacia-de-guardia-hasta-9-00 .views-row::before,
.view-farmacia-de-guardia-desde-9-00 .views-row::before {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: #2e7d32;
  margin-bottom: 1rem;
}

/* =========================================================
   CONTENIDO INTERIOR DE CADA TARJETA
   ========================================================= */

/* Nombre de la farmacia */
.views-row .views-field-field-titulo-farmacia {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #1b1b1b;
}

/* Teléfono */
.views-row .views-field-field-telefono a {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #2e7d32;
  text-decoration: none;
}

.views-row .views-field-field-telefono a:hover {
  text-decoration: underline;
}

/* Dirección */
.views-row .views-field-field-direccion a {
  color: #333;
  text-decoration: none;
}

.views-row .views-field-field-direccion a:hover {
  text-decoration: underline;
}

/* =========================================================
   OPCIONAL: IGUALAR ALTURAS DE TODAS LAS TARJETAS DEL CONTENEDOR
   ========================================================= */
.views-element-container.farmacia-guardia {
  display: grid;
  grid-template-columns: 1fr; /* apiladas verticalmente */
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .views-element-container.farmacia-guardia {
    /* En el futuro si quieres dos columnas horizontales */
    grid-template-columns: 1fr 1fr;
  }

  /* Igualar altura de tarjetas con grid */
  .views-element-container.farmacia-guardia .views-row {
    display: flex;
    flex-direction: column;
  }
}
/* =========================================================
   ICONOS ANTES DE TELÉFONO Y DIRECCIÓN
   ========================================================= */

/* Teléfono */
.views-row .views-field-field-telefono a::before {
  font-family: "Font Awesome 5 Free"; /* Font Awesome */
  content: "\f095"; /* Código Unicode de fas fa-phone */
  font-weight: 900; /* necesario para solid */
  margin-right: 0.5rem;
  color: #2e7d32;
}

/* Dirección */
.views-row .views-field-field-direccion a::before {
  font-family: "Font Awesome 5 Free"; /* Font Awesome */
  content: "\f3c5"; /* Código Unicode de fas fa-map-marker-alt */
  font-weight: 900; /* solid */
  margin-right: 0.5rem;
  color: #2e7d32;
}

/* =========================================================
   PÁGINA LISTADO EVENTOS
   ========================================================= */

/* ===============================
   EVENT LISTING – BASE (MÓVIL)
================================ */
.lista-eventos .view-content,
.view-localgov-events-search .view-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.lista-eventos .views-row,
.view-localgov-events-search .views-row {
  padding: 0;
  border-radius: 0px;
  box-shadow: none;
}

.event-listing__link-inner {
  display: block;        /* ocupa todo el ancho de contenido */
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;    /* para que sea relativo al contenido */
  z-index: 2;            /* sobre fondo pero debajo de flecha */
  padding: 0; 
}

.event-listing__categories {
  position: relative; /* categorías por encima de todo */
  z-index: 2;         /* por si acaso */
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ======================================================
   BASE
====================================================== */

.event-listing {
  position: relative;
  background: #fff;
  overflow: hidden;
  border-radius: 8px;
  transition: border-radius 0.3s ease;
}

/* Borde siempre visible */
.event-listing::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #ccc;
  border-radius: inherit;
  pointer-events: none;
}

.event-listing:hover::after {
  border: 3px solid #1f5f86;

}

/* Layout principal */
.event-listing__layout {
  display: flex;
  flex-direction: column; /* por defecto móvil */
  align-items: stretch;
  gap: 0;
}

/* Item completamente clickable */
.event-listing > .event-listing__link {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* Foco accesible */
.event-listing > .event-listing__link:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 4px;
  border-radius: inherit;
}

.event-listing__title {
  color:#113555;
  margin-block-end: 0.1rem;
}

.event-listing:hover .event-listing__title {
  color:#1f5f86;
  margin-block-end: 0.1rem;
}

.event-listing__body p {
  font-size: 1.1rem;
  margin-block-end: 1rem;
}


/* ======================================================
   IMAGEN COMO BACKGROUND
====================================================== */

.event-listing__image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Ocultamos el <img> visualmente pero accesible */
.event-listing__image img {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ======================================================
   MÓVIL
====================================================== */
.event-listing__content {
  padding: 1rem;
}
.event-listing__image {
  aspect-ratio: 16 / 9;
  z-index: 1;

}

/* Categorías en fila */
.event-listing__categories {
  margin-block-start: 1rem;
}
.event-listing__categories .field__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.event-listing__categories .field__item {
  margin: 0;
  padding: 0.25rem 0.5rem;
  background: #113555;
  border-radius: 8px;
}

.event-listing__categories .field__item:hover,
.event-listing__categories .field__item:focus {
  background: #1f5f86;
  border-radius: 50px;
}

.event-listing__categories .field__item  a {
 color: #fff;
 text-decoration: none;
}

.event-listing__categories .field__item a:hover,
.event-listing__categories .field__item a:hover {
background-color: transparent;
box-shadow: none;
}



/* ======================================================
   TABLET GRANDE / DESKTOP
====================================================== */
@media (min-width: 600px) {

  .event-listing {
    border-radius: 8px;
  }

  .event-listing:hover {
    border-radius: 24px;
  }

  .event-listing__layout {
    flex-direction: row;
    align-items: stretch;
  }

  /* IMAGEN IZQUIERDA – 1/3 del ancho */
  .event-listing__image {
    flex: 0 0 40%;
    min-height: 100%;
  }

  /* CONTENIDO DERECHA – 2/3 del ancho */
  .event-listing__content {
    flex: 1;
    padding: 1.5rem 3rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Borde sin lado de la imagen */
  .event-listing::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid #ccc;
    border-left: none; /* elimina borde izquierdo para imagen */
    border-radius: inherit;
    pointer-events: none;
  }

    .event-listing:hover::after {
    border: 3px solid #1F5F86;
  }

  /* Flecha  */
  .event-listing::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Solid */
    content: "\f061"; /* Código Unicode de fas fa-arrow-right */
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 2.5rem;
    color: rgba(0,0,0,0.6);
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 4;
  }

  .event-listing:hover::before {
    transform: translateX(4px);
    color: #1f5f86;
  }
}

.lista-eventos .event-meta,
.view-localgov-events-search .event-meta,
.view-taxonomy-term .event-meta {
  display: flex;
  align-items: center; /* centra verticalmente icono y texto */
  gap: 0.5rem;        /* separa icono del texto */
}

.lista-eventos .event-list-meta__text,
.view-localgov-events-search .event-list-meta__text,
.view-taxonomy-term .event-list-meta__text {
  display: flex;        /* para que múltiples <time> queden en línea */
  flex-wrap: wrap;      /* si el texto es muy largo, permite saltos de línea */
  align-items: center;  /* centra verticalmente cada línea */
  gap: 0.25rem;         /* espacio entre los elementos internos, ej. "al" */
  letter-spacing: -0.02rem;
  color:#0f0f0f;
  font-weight: bold;
}

.lista-eventos .event-list-meta__icon,
.view-localgov-events-search .event-list-meta__icon,
.view-taxonomy-term .event-list-meta__icon {
  width: 20px;
  font-size: 1.2rem;
  color: #113555
}

.lista-eventos .event-listing:hover .event-list-meta__icon,
.view-localgov-events-search .event-listing:hover .event-list-meta__icon,
.view-taxonomy-term .event-listing:hover .event-list-meta__icon {
  color: #1f5f86
}



/* La imagen recibe un enlace clicable encima */
.event-listing__image-link {
  position: absolute;
  inset: 0; /* cubre todo el contenedor padre */
  display: block;
  z-index: 2; /* encima de la imagen, debajo de categorías si es necesario */
}

/* Asegurar que el contenedor de la imagen sea relativo */
.event-listing__image {
  position: relative; /* para que el enlace absoluto se posicione sobre ella */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}




/* =========================================================
   PÁGINA LISTADO NOTICIAS NEWSROOM
   ========================================================= */

/* ===============================
   GLOBAL & BOX-SIZING
================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ===============================
   NEWS LISTING – BASE (MÓVIL)
================================ */


.lista-noticias .view-content,
.view-localgov-news-search .view-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.view-localgov-news-list.view-display-id-all_news .views-row,
.view-localgov-news-search .views-row {
  padding: 0; /* quitar el padding que estaba generando la franja */
  border-radius: 0;
  box-shadow: none;
}

.news-listing__link-inner {
  display: flex;               /* cambia block por flex */
  flex-direction: column;      /* organiza hijos en columna: título + meta */
  justify-content: center;     /* centra verticalmente */
  width: 100%;                 /* mantiene ancho completo */
  height: 100%;                /* mantiene altura completa */
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 2;
}


/* ======================================================
   BASE
====================================================== */
.news-listing {
  position: relative;
  background: #fff;
  overflow: hidden;
  border-radius: 8px;
  transition: border-radius 0.3s ease;
  width: 100%;
  max-width: 100%;
}

/* Borde visible */
.news-listing::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #ccc;
  border-radius: inherit;
  pointer-events: none;
}

.news-listing:hover::after {
  border-color: #1f5f86;
}

/* Layout principal */
.news-listing__layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 200px;
}

/* ======================================================
   TÍTULO / TEXTO
====================================================== */
.news-listing__title {
  color: #113555;
  margin-block-end: 0.25rem;
  line-height: 1.2;
  font-size: 1.4rem;
}

.news-listing:hover .news-listing__title {
  color: #1f5f86;
}

.news-listing__body p {
  font-size: 1rem;
  margin-block-end: 1rem;
}

/* ======================================================
   IMAGEN
====================================================== */
.news-listing__image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 16 / 9;
  z-index: 1;
  width: 100%;
  flex: none;
}

/* Link encima de la imagen */
.news-listing__image-link {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 2;
}

/* ======================================================
   CONTENIDO
====================================================== */
.news-listing__content {
  padding: 1rem;
  width: 100%;
  display: flex;            /* convierte el contenedor en flex */
  flex-direction: column;   /* organiza los hijos verticalmente */
  justify-content: center;  /* centra verticalmente todo el bloque */
  height: 200px;            /* ajusta según tu diseño */
}

/* ======================================================
   META (FECHA)
====================================================== */
.lista-noticias .news-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lista-noticias .news-list-meta__icon {
  width: 20px;
  font-size: 1.2rem;
  color: #113555;
}

.lista-noticias .news-list-meta__text {
  font-weight: bold;
  letter-spacing: -0.02rem;
  color: #0f0f0f;
}

.news-listing:hover .news-list-meta__icon {
  color: #1f5f86;
}

.news-list-meta__text {
  font-weight: bold;
}

.news-meta.news-meta--date {
  display: inline-flex;      /* flex en línea */
  align-items: center;       /* centra verticalmente */
  gap: 0.25em;               /* espacio entre icono y texto */
  margin-top: 1.3rem;
}

.news-list-meta__icon i {
  font-size: 1.3rem;            /* igualar tamaño al texto, ajusta si es necesario */
  padding-top: 0.2rem;
}

.news-list-meta__text .field__item {
  display: inline;            /* fuerza que el div del field se comporte como inline */
  margin-left: 0.2em;         /* opcional: pequeño espacio antes de la fecha */
}



/* ======================================================
   TABLET / DESKTOP
====================================================== */
@media (min-width: 600px) {

  .news-listing:hover {
    border-radius: 24px;
  }

  .news-listing__layout {
    flex-direction: row;
    align-items: stretch;
  }

  /* Imagen izquierda */
  .news-listing__image {
    flex: 0 0 40%;
    min-height: 100%;
    aspect-ratio: auto;
  }

  /* Contenido derecha */
  .news-listing__content {
    flex: 1;
    padding: 1.5rem 3rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: auto;
  }

  /* Borde sin lado imagen */
  .news-listing::after {
    border-left: none;
  }

  /* Flecha */
  .news-listing::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f061";
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 2.5rem;
    color: rgba(0,0,0,0.6);
    transition: transform 0.3s ease, color 0.3s ease;
    z-index: 4;
  }

  .news-listing:hover::before {
    transform: translateX(4px);
    color: #1f5f86;
  }
}

/* ======================================================
   AJUSTES MÓVIL POST-GIRO
====================================================== */
@media (max-width: 599px) {
  .news-listing__layout {
    flex-direction: column !important;
  }

  .news-listing__image {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .news-listing__content {
    flex: none;
    width: 100%;
    padding: 1rem;
  }

  .news-listing::after {
    border-width: 2px;
    border-left: 3px solid #ccc; /* restaurar borde izquierdo */
  }
}
/* ================================
   BOTÓN "SUSCRÍBETE A NOTICIAS"
   ================================ */

.feed-icons {
  margin-top: 2rem;
  text-align: center; /* o center si lo prefieres */
}

.feed-icons .feed-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.8rem 1.5rem;
  border-radius: 8px; /* botón tipo pill */
  background-color: #113555;
  color: #fff;

  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;

  transition: all 0.3s ease;
}

/* Hover */
.feed-icons .feed-icon:hover, 
.feed-icons .feed-icon:active {
  background-color: #1f5f86;
  border-radius: 50px;
  color: #fff
}

/* Focus accesible */
.feed-icons .feed-icon:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 3px;
}

/* Opcional: icono RSS delante */
.feed-icons .feed-icon::before {
  content: "\f09e"; /* Font Awesome RSS */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}


/* ===============================
   TRÁMITES DESTACADOS
   ================================ */

/* Espacio entre eventos-farmacias y título trámites */
.block .block-block-content .block-block-contentb7bc2975-7995-4ace-b72f-170282bc85d3 {
  margin-top: 3.5rem;
}
/* Grid de trámites */
.tramites-destacados {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas en PC y tablets */
  gap: 20px; /* espacio entre rectángulos */
  margin-top: 20px; /* espacio antes del grid */
  margin-bottom: 20px;
}

/* Cada trámite */
.tramites-destacados .tramite {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #e6eef4;
  padding: 15px 20px;
  text-decoration: none;
  color: #000;
  transition: background-color 0.3s;
  transition: border-radius 0.3s;
  border-radius: 8px;
  box-shadow: 2px 4px 16px 0 rgba(0,0,0,0.1);
 
}

.tramites-destacados .tramite:hover,
.tramites-destacados .tramite:focus,
.tramites-destacados .tramite:active {
  background-color: #d0dbe6;
  border-radius: 24px;
}

.tramites-destacados .tramite .nombre {
  font-weight: 600;
  font-size: 1.05rem;
}

.tramites-destacados .tramite i {
  font-size: 1.1rem;
}

/* Botón Más trámites */
.tramites-destacados .boton-mas-tramites {
  display: inline-block;           /* tamaño adaptado al contenido */
  background-color: #113555;       /* fondo azul oscuro */
  color: #ffffff;                  /* texto blanco */
  border: 2px solid #113555;       /* borde azul oscuro */
  padding: 0.8rem 1.5rem;          /* padding exacto */
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;                
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, border-radius 0.3s;
  margin-top: 10px;
  justify-self: start;             /* alineado a la izquierda */
}

/* Hover y click: invertir colores */
.tramites-destacados .boton-mas-tramites:hover,
.tramites-destacados .boton-mas-tramites:active {
  background-color: #ffffff;       /* fondo blanco */
  color: #113555;                  /* texto azul oscuro */
  border-color: #113555;           /* borde azul oscuro */
  border-radius: 24px;                /* cuadrado */

}

/* Responsive */
/* Móviles verticales (<768px): 1 columna */
@media (max-width: 767px) {
  .tramites-destacados {
    grid-template-columns: 1fr;
  }
}

/* Móviles horizontales / tablets medianas (768px - 991px): 2 columnas */
@media (min-width: 768px) and (max-width: 991px) {
  .tramites-destacados {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablets grandes y PC (>992px): 3 columnas por defecto, ya definido */

/* ===============================
   IMAGEN FOOTER
   ================================ */
/* =========================================
   Imagen full-width sobre el footer
   LocalGov Drupal 10
   ========================================= */

/* Contenedor del bloque */
.full-width-footer-image {
  position: relative;
  left: 50%;
  right: 50%;
  width: 99.4vw;
  margin-left: -50vw;
  margin-right: -50vw;

  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}

/* Imagen */
.full-width-footer-image img {
  display: block;
  width: 100%;
  height: 220px;            /* altura desktop */
  object-fit: cover;
  object-position: top center;
  margin: 0;
  padding: 0;
}

/* Quitar espacios del layout LocalGov */
.region-content-bottom {
  padding-bottom: 0;
}

.site-footer {
  margin-top: 0;
  padding-top: 0;
}

/* =========================================
   Responsive
   ========================================= */

/* TABLETS GRANDES (incluye iPad Pro) */
@media (min-width: 769px) and (max-width: 1366px) and (pointer: coarse) {
  .full-width-footer-image img {
    height: 180px;
  }
  .full-width-footer-image {
    width: 100vw;
  }
}

/* TABLETS PEQUEÑAS / MÓVIL LANDSCAPE */
@media (min-width: 481px) and (max-width: 768px) {
  .full-width-footer-image img {
    height: 150px;
  }
  .full-width-footer-image {
    width: 100vw;
  }
}

/* MÓVILES */
@media (max-width: 480px) {
  .full-width-footer-image img {
    height: 100%;
    width: auto;
    object-fit: cover;
    /*min-width: 105%;*/
    object-position: center;
  }
  .full-width-footer-image {
    width: 100vw;
    height: 110px;
    overflow: hidden;  
  }
}

/* MÓVILES MUY PEQUEÑOS */
@media (max-width: 360px) {
  .full-width-footer-image img {
    max-height: 100px;
  }
}

/* =========================================
   CALL OUT TURISMO
   ========================================= */
.callout-turismo {
  width: 100%;
  max-width: 1150px;
  height: 250px;
  margin: 30px auto;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  font-family: Arial, sans-serif;
}

/* Texto */
.callout-texto {
  flex: 1;
  padding: 30px 40px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #113555;
  z-index: 2;
}

.callout-texto h2 {
  color:#fff;
  margin-block-end: 10px;

}

.callout-texto p {
  color:#fff;
  margin-block-end: 0px;

}

/* Botón */
.callout-boton {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: #ffffff;
  color: #113555;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 8px;
  width: fit-content;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.callout-boton:hover,
.callout-boton:focus {
  background-color: #0060AC;
  color: #fff;
  border-radius: 24px;
}

/* Imagen */
.callout-imagen {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.callout-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 80%; /* ajuste escritorio */
  display: block;
}

/* Gradiente lateral en escritorio */
.callout-imagen .callout-gradiente {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%; /* mitad izquierda de la imagen */
  height: 100%;
  background: linear-gradient(to right, #113555 0%, rgba(17,53,85,0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* --- Mobile vertical (texto arriba / imagen abajo) --- */
@media (max-width: 767px) {
  .callout-turismo {
    flex-direction: column;
    height: auto;
  }

  .callout-texto {
    width: 100%;
    padding: 20px;
    background: #113555; /* azul sólido */
  }

  .callout-imagen {
    width: 100%;
    height: 250px;
  }

  .callout-imagen img {
    object-position: 50% 30%;
  }

  /* Gradiente sobre la parte superior de la imagen */
  .callout-imagen .callout-gradiente {
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* solo la parte superior */
    background: linear-gradient(to bottom, #113555 0%, rgba(17,53,85,0) 100%);
  }
}

/* --- Landscape / tablets (simular escritorio) --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .callout-turismo {
    flex-direction: row;
    height: 250px;
  }

  .callout-texto {
    width: 50%;
    padding: 25px 30px;
  }

  .callout-imagen {
    width: 50%;
    height: 100%;
  }

  .callout-imagen img {
    object-position: 60% 30%; /* igual que escritorio */
  }

  /* Gradiente lateral */
  .callout-imagen .callout-gradiente {
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, #113555 0%, rgba(17,53,85,0) 100%);
  }
}

/*==========================================================
                FOOTER 
  ========================================================== */
/* ---------- Contenedor principal ---------- */
.lgd-footer .footer-viver .footer-container {
  display: flex;
  flex-wrap: nowrap; /* mantener en una fila */
  gap: 2rem;
  padding: 0 1.5rem;
  justify-content: space-between; /* fuerza separación entre columnas */
}

/* ---------- Columna combinada Logo + Contacto ---------- */
.lgd-footer .footer-viver .footer-main {
  display: flex;
  gap: 2rem;
  flex: 0 0 60%; /* ocupa 60% del contenedor */
  flex-direction: row;
  align-items: center; /* centra verticalmente logo y contacto */
}

/* Ajuste interno */
.lgd-footer .footer-viver .footer-main .footer-logo {
  flex: 0 0 40%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.lgd-footer .footer-viver .footer-main .footer-contact {
  flex: 1; /* ocupa el resto dentro de la columna combinada */
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centra verticalmente */
  align-items: flex-start;     /* contenido alineado a la derecha */
  text-align: left;         /* texto a la izquierda */
}

.lgd-footer .footer-viver .footer-main .footer-contact strong {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.lgd-footer .footer-viver .footer-main .footer-contact p {
  margin: 0.1rem 0;
  line-height: 1.5;
  color: #fff;
}

/* Evitar que iOS o estilos globales oculten enlaces tel/mail */
.lgd-footer .footer-viver .footer-contact a {
  color: #ffffff !important;
  text-decoration: none;
}

/* Hover / focus */
.lgd-footer .footer-viver .footer-contact a:hover,
.lgd-footer .footer-viver .footer-contact a:focus {
  text-decoration: underline;
}

/* ---------- Columna de redes sociales ---------- */
.lgd-footer .footer-viver .footer-social {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex: 1; /* ocupa el resto disponible, sin width fijo */
  min-width: 150px; /* evita que se encoja demasiado */
}

/* Íconos */
.lgd-footer .footer-viver .footer-social a.social-icon {
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  transition: all 0.3s ease;
  flex-shrink: 0; /* no se encojan */
}

.lgd-footer .footer-viver .footer-social a.social-icon svg {
  width: 35px;
  height: 35px;
  fill: #ffffff;
}

/* Hover */
.lgd-footer .footer-viver .footer-social a.social-icon:hover {
  background-color: #1f5f86;
  border-radius: 50px;
}

/* ---------- RESPONSIVE MÓVIL (<768px) ---------- */
@media (max-width: 930px) {
  .lgd-footer .footer-viver .footer-container {
    flex-wrap: wrap; /* apila columnas */
    gap: 1rem;
  }

  .lgd-footer .footer-viver .footer-main,
  .lgd-footer .footer-viver .footer-social {
    flex: 0 0 100%;
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
  }

  .lgd-footer .footer-viver .footer-main {
    gap: 1rem;
  }

  .lgd-footer .footer-viver .footer-social a.social-icon {
    width: 46px;
    height: 46px;
  }

  .lgd-footer .footer-viver .footer-social a.social-icon svg {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .lgd-footer .footer-viver .footer-main {
    flex-direction: column;
    text-align: center;
  }

  .lgd-footer .footer-viver .footer-main .footer-logo,
  .lgd-footer .footer-viver .footer-main .footer-contact {
    flex: unset;
    align-items: center;
    text-align: center;
  }

  .lgd-footer .footer-viver .footer-main .footer-contact {
    align-items: center;
  }
}

@media (max-width: 991px) and (orientation: landscape) {
  .lgd-footer .footer-viver .footer-main {
    flex-direction: row;
  }

  .lgd-footer .footer-viver .footer-main .footer-logo,
  .lgd-footer .footer-viver .footer-main .footer-contact {
    flex: 0 0 50%;
  }
}

.contact-item {
  display: flex;
  align-items: flex-start;
}

.contact-item i {
  width: 24px;        /* mismo ancho para todos */
  margin-right: 10px;
  text-align: center;
  margin-top: 5px;
}


/* ===========================
    HOUSEKEEPING
   ===========================  */
   .lgd-housekeeping {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* CLAVE para móvil */
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* Menú legal */
.lgd-housekeeping-menu {
  display: flex;
  flex-wrap: wrap; /* los links bajan si no caben */
  gap: 0.75rem 1rem;
}

/* Enlaces */
.lgd-housekeeping-menu a {
  text-decoration: none;
  color: inherit;
}

.lgd-housekeeping-menu a:hover,
.lgd-housekeeping-menu a:focus {
  text-decoration: underline;
}

/* Copyright */
.lgd-housekeeping-copy {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .lgd-housekeeping-copy {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }
    .lgd-housekeeping-menu {
    justify-content: center; /* centra los enlaces */
    text-align: center;
    width: 100%;
  }
}

/* ================================
   EU COOKIE COMPLIANCE
   Banner superpuesto inferior
   ================================ */

/* Evita que el módulo empuje la web */
body.eu-cookie-compliance-banner {
  padding-bottom: 0 !important;
}

/* Contenedor principal del banner */
#sliding-popup {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #E6EEF2;
  color: #113555;
  border-top: 4px solid #113555;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
}

/* Contenido interno */
#sliding-popup .popup-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Texto */
#sliding-popup .popup-text {
  line-height: 1.5;
  max-width: 70%;
}

/* Contenedor de botones */
#sliding-popup .popup-buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Botón ACEPTAR */
#sliding-popup .agree-button {
  background-color: #113555;
  color: #ffffff;
  border: 2px solid #113555;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;
}

#sliding-popup .agree-button:hover {
  background-color: #e4251b;
  color: #ffffff;
  border: 2px solid #fff;
  border-radius: 50px;
  text-decoration: none;
}

/* Botón RECHAZAR / CONFIGURAR */
#sliding-popup .decline-button,
#sliding-popup .find-more-button {
  background: transparent;
  color: #113555;
  border: 2px solid #113555;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;
  box-shadow: none;
  text-shadow: none;
  font-family: var(--button-font-family);
}

#sliding-popup .decline-button:hover {
  background: #113555;
  color: #fff;
  border: 2px solid #113555;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: none;
  text-shadow: none;
}

/* Hover botones */
#sliding-popup button:hover {
  opacity: 0.9;
}

/* Enlaces */
#sliding-popup a {
  color: #113555;
  text-decoration: none;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  #sliding-popup .popup-content {
    flex-direction: column;
    align-items: flex-start;
  }

  #sliding-popup .popup-text {
    max-width: 100%;
  }

  #sliding-popup .popup-buttons {
    width: 100%;
    justify-content: flex-start;
  }
}

.eu-cookie-compliance-message h2 {
    font-size: 1.5rem;
    color: #113555;
}

.eu-cookie-compliance-message p {
    font-size: 1rem;
    display: inline;
    color: #113555;
}


/* ================================
   DIRECTORIO - LISTA DE LUGARES
   ================================ */
.directorio .views-row {
    margin-bottom: 20px; /* ajusta según el espacio que quieras */
    border: 3px solid #CCC;
}

/* Estilo general de los items del pager */
.pager__item {
    background-color: #113555;
    border-radius: 8px;
    padding: 0.5rem 1rem; /* ajusta tamaño interno */
    margin: 0.25rem;    /* separa los items */
    display: inline-block;
    transition: all 0.3s ease; /* suaviza el hover */
    color: white; /* asegura que el texto sea visible */
    cursor: pointer;
    text-align: center;
    font-weight: 600;
}

/* Hover */
.pager__item:hover {
    background-color: #1f5f86;
    border-radius: 24px;
}

/* Si el item tiene un enlace dentro */
.pager__item a {
    display: block;          /* hace que el link ocupe todo el li */
    color: inherit;
    text-decoration: none;
    display: inline-block;

}

/* Mantener el hover también en el link */
.pager__item a:hover {
    text-decoration: none;
    background-color: transparent;
    box-shadow: none;
}

/* Focus accesible solo con teclado en links del pager */
.pager__item a:focus-visible {
    outline: 3px solid #FFD700;  /* borde amarillo accesible */
    outline-offset: 4px;         /* separa el borde del contenido */
    border-radius: 24px;         /* bordes redondeados */
}


/* ================================
      SUBPÁGINAS
   ================================ */

article.node.node--type-localgov-subsites-page {
  padding-inline: 1rem;
  margin-inline: auto;
  max-width: var(--width-container);
}

article.node.node--type-localgov-subsites-page h2 {
color: var(--heading-1-color);
font-family: var(--font-heading-1);
font-size: var(--font-size-h1);
font-weight: var(--heading-1-font-weight);
line-height: var(--heading-1-line-height);
}


/* ================================
   TARJETAS – SUBPÁGINA
   ================================ */
/* Grid principal */
.subpagina-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
  gap: 1rem; /* gap reducido a 1rem */
  align-items: stretch; /* tarjetas alineadas uniformemente en altura */
}

/* Hacer que cada tarjeta crezca con su contenido */
.subpagina-link-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;

  border: 3px solid #ccc;
  border-radius: 8px;
  text-decoration: none;
  background-color: #fff;

  transition: border-radius 0.3s ease, box-shadow 0.3s ease;

  /* Altura automática, pero con flex stretch en grid */
  height: 100%;
}

.subpagina-link-card:hover {
  border-radius: 24px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  background-color: #f2f2f2;
}

.subpagina-link-card:hover .subpagina-card-title,
.subpagina-link-card:hover .subpagina-card-icon {
  color: #1f5f86;
  transition: color 0.3s ease; /* para que el cambio sea suave */
}

/* Contenido */
.subpagina-card-title {
  margin: 0 0 10px;
    color: #113555;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 1.2;
}

.subpagina-card-description {
  margin: 0;
  color: #1e1e1e;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Chevron */
.subpagina-card-icon {
  align-self: flex-end;
  color: #113555;
  font-size: 1.6rem;

  transition: transform 0.3s ease;
}

.subpagina-link-card:hover .subpagina-card-icon {
  transform: translateX(4px);
}

/* Responsive: tablets */
@media (max-width: 1024px) {
  .subpagina-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive: móviles */
@media (max-width: 640px) {
  .subpagina-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Resalta la tarjeta al enfocarla con teclado */
.subpagina-link-card:focus-visible {
  outline: 3px solid #FFD700; /* amarillo brillante */
  outline-offset: 4px;        /* un pequeño espacio entre borde y tarjeta */
  border-radius: 24px;        /* opcional: mismo que hover para consistencia */
}

/* Para navegadores que no soporten focus-visible */
.subpagina-link-card:focus {
  outline: 3px solid #FFD700;
  outline-offset: 4px;
  border-radius: 24px;
}



.mapa-guia .field--name-label {
  display: none !important;
}


/* ================================
       CONTACTO
   ================================ */
.webform-privacy-info {
  font-size: 0.9rem;
  color: #555;
  background: #f7f7f7;
  padding: 1rem;
  border: 3px solid #1f5f86;
  border-radius: 8px;
  margin-top: 1.5rem;
}

.webform-privacy-info ul {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
}

.webform-privacy-info li {
  margin-bottom: 0.4rem;
}

.webform-privacy-info .privacy-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

.webform-privacy-info .privacy-link a {
  font-weight: 500;
}

.form-item, .facet-item, .form-item-webform-terms-of-service {  
  position: relative;
  margin-block-end: 0;
  margin-block-start: 1rem !important;
}

.form-item-search-api-fulltext {
  width: 100%;
}

.enviar-contacto {
  font-weight: 600;
}

/* ================================
       MAPA DIRECTORIO
   ================================ */

.mapa-directorio {
    background-color: #f4f4f4;
    border: none;
    border-radius: 8px;
    margin-block-start: 0 !important;
}

.mapa-directorio legend {
  font-size: 1.4rem;
  padding: 45px 0 0;}

.mapa-directorio .fieldset-legend::before {
  content: "\f279"; /* icono map-marker-alt */
  font-family: "Font Awesome 5 Free";
  font-weight: 500; /* obligatorio para solid */
  margin-right: 8px;
}

.mapa-guia {
    margin-top: -10px;
}

.field--name-postal-address {
  margin-block-start: 10px;
}

.field--name-postal-address .field__label {
  font-size: 1.4rem;
}

.field--name-postal-address .field__label::before {
  content: "\f277"; /* icono map-marker-alt */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* obligatorio para solid */
  margin-right: 8px;
}

.service-statuses {
 margin-block-start: 30px;
}