/* ════════════════════════════════════════
   Main Stylesheet
   ════════════════════════════════════════ */


:root {
  /* Bootstrap Overrides / Base Colors */
  --bs-primary: #3a225d;
  --bs-primary-rgb: 58, 34, 93;
  --bs-secondary: #e4e4f2;
  --bs-secondary-rgb: 228, 228, 242;

  /* ─── VARIABLES PARA EL BOTÓN PRIMARY EN ROOT ─── */
  --bs-btn-bg: var(----bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-color: #ffffff;
  
  /* Estados Hover (Pasar el ratón) */
  --bs-btn-hover-bg: #3a225d; /* Un tono un poco más oscuro */
  --bs-btn-hover-border-color: #3a225d;
  --bs-btn-hover-color: #ffffff;

  /* Estados Active (Clic) y Focus */
  --bs-btn-active-bg: #e4e4f2;
  --bs-btn-active-border-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  /* ────────────────────────────────────────────── */

  /* Colores de enlace */
  --bs-link-color: #000;
  --bs-link-hover-color: #3a225d;
  --bs-link-color-rgb: 0, 0, 0;
  --bs-link-hover-color-rgb: 58, 34, 93;

  /* Paleta Específica */
  --color-primero: #3a225d;
  --color-segundo: #e4e4f2;
  --color-tercero: #867999;
  --color-cuarto: #333;
  --color-quinto: linear-gradient(to bottom, #eaeaea 0%, #ffffff 50%, #eaeaea 100%) !important;
  --color-sexto: #666;
  --color-negro: #000;
  --color-blanco: #ffffff;
}


/* ==========================================================================
   BOTONES PERSONALIZADOS (BOOTSTRAP OVERRIDES)
   ========================================================================== */

/* Estilo global para todos los botones de bloques de WordPress */
.wp-block-button__link,
.wc-block-components-button__text,
.woocommerce-message a.button,
.woocommerce .actions button,
.search-submit {
  background-color: var(--color-primero);
  color: var(--color-blanco);
  border: 2px solid var(--color-blanco);
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  font-size: clamp(1rem, 1vw + 1.2rem, 1.4rem);
  line-height: 120%;
  border-radius: 0px;
}

.wp-block-button__link:hover,
.wc-block-components-button__text:hover,
.woocommerce-message a.button:hover,
.woocommerce .actions button:hover,
.search-submit:hover {
  background-color: var(--color-blanco);
  color: var(--color-primero);
  border: 2px solid var(--color-primero);
  text-decoration: none;
}

.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--color-primero) ;
  border: 1px solid var(--color-primero) ;
}
.is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-blanco);
  color: var(--color-primero) ;
}

@media (min-width: 768px) {
  .wp-block-button__link {
    font-size: 1.8rem;
  }
} /* end media*/
@media (min-width: 1200px) {
  .wp-block-button__link {
    padding:1.8rem 4rem;
    font-size: 2.5rem;
  }
} /* end media*/



/* ==========================================================================
   COLORES
   ========================================================================== */




/* --- Primero --- */
.has-color-primero{
  color: var(--color-primero) !important;
}
.has-color-primero-background-color {
  background-color: var(--color-primero) !important;
}

/* --- Segundo --- */
.has-color-segundo{
  color: var(--color-segundo) !important;
}
.has-color-segundo-background-color {
  background-color: var(--color-segundo) !important;
}
/* --- Tercero --- */
.has-color-tercero{
  color: var(--color-tercero) !important;
}
.has-color-tercero-background-color {
  background-color: var(--color-tercero) !important;
}
/* --- Cuarto --- */
.has-color-cuarto{
  color: var(--color-cuarto) !important;
}
.has-color-cuarto-background-color {
  background-color: var(--color-cuarto) !important;
}
/* --- Quinto --- */
.has-color-quinto{
  color: var(--color-quinto) !important;
}
.has-color-quinto-background-color {
  /* Fondo degradado vertical: gris (#eaeaea) -> blanco (#fff) -> gris (#eaeaea) */
  background: linear-gradient(to bottom, #eaeaea 0%, #ffffff 50%, #eaeaea 100%) !important;
}
/* --- Sexto --- */
.has-color-sexto{
  color: var(--color-sexto) !important;
}
.has-color-sexto-background-color {
  background-color: var(--color-sexto) !important;
}

/* --- Blanco --- */
.has-color-blanco-color {
  color: var(--color-blanco) !important;
}
.has-color-blanco-background-color {
  background-color: var(--color-blanco) !important;
}

/* --- Negro --- */
.has-color-negro-color {
  color: var(--color-negro) !important;
}
.has-color-negro-background-color {
  background-color: var(--color-negro) !important;
}

/* --- Gris --- */
.has-gris-color {
  color: var(--color-gris) !important;
}
.has-gris-background-color {
  background-color: var(--color-gris) !important;
}




html {
  scroll-behavior: smooth;
}

/* Sobrescribimos el selector de WordPress */
.wp-block-columns.has-background {
  padding: 0; /* O ajusta a 0.5em si quieres un mínimo */
}
:where(.wp-block-columns) {
  margin-bottom:0;
}

/* ════════════════════════════════════════
  CONTENEDORES
   ════════════════════════════════════════ */


   /* ==========================================================================
   CONTENEDORES PERSONALIZADOS (Bootstrap Override)
   ========================================================================== */

   .container-fluid {
    padding-left: 0!important;
    padding-right: 0!important;
  }

  .container {
    padding-right: calc(var(--bs-gutter-x) * .9);
    padding-left: calc(var(--bs-gutter-x) * .9);
  }

/* 1. Ajuste general para evitar saltos bruscos en pantallas medianas/grandes */
@media (min-width: 576px) {
  .container {
    max-width: 94%;
  }
}

/* 2. Pantallas de escritorio estándar (Equivale al salto XXL de Bootstrap 5) */
@media (min-width: 1350px) {
  .container {
    max-width: 1320px; /* O 1360px si lo prefieres más ancho */
  }
}

/* 3. Pantallas de escritorio grandes (Ej. Monitores de 24"+) */
@media (min-width: 1480px) {
  .container {
    max-width: 1440px;
  }
}

/* 4. Pantallas Gigantes / 4K (Evita el estiramiento infinito) */
@media (min-width: 1920px) {
  
  /* Limitamos el container-fluid aquí para que no se desparrame en UltraWide */
  .container-fluid {
    max-width: 1920px;
    margin-right: auto;
    margin-left: auto;
  }
}




/* ════════════════════════════════════════
  contact form 7
   ════════════════════════════════════════ */

.wpcf7 {
  max-width: 100% !important;
}

.wpcf7-form
  :is(input[type="text"], input[type="tel"], input[type="email"], textarea) {
  border: 1px solid var(--color-negro) ;
  border-radius: 0;
  background: var(--color-blanco) !important;
  padding: 10px 15px;
  /* font-size: 20px; */
  width: 100% !important;
}

.wpcf7 input[type="submit"] {
  width: 100%;
  background: var(--color-tercero);
  border: 2px solid var(--color-blanco);
  padding-inline: clamp(0.5rem, 0.5vw + 1rem, 0.7rem);
  padding-block: 1.5rem;
  border-radius: 0;
  font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem);
  line-height: 1;
  color: var(--color-blanco); 
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}
.wpcf7 input[type="submit"]:hover {
  background: var(--color-blanco) ;
  border: 2px solid var(--color-tercero);
  color: var(--color-primero);
  
}

.wpcf7 input[type="submit"]:disabled {
  background: #666;
  color: var(--color-blanco);
}
.wpcf7-acceptance .wpcf7-list-item {
  margin: 0 !important;
}
.wpcf7 form .wpcf7-response-output {
  margin: 0 !important;
  padding: 20px !important;
  background-color: var(--color-blanco);
  font-size: 15px;
}
.wpcf7 form.sent .wpcf7-response-output {
  background-color: #ddd;
}

.wpcf7-form ::placeholder {
  color: #6f6f6e !important;
  font-weight: normal;
  font-size: 18px;
}
.wpcf7-not-valid-tip {
  color: orange !important;
  font-weight: 600;
  font-size: 15px;
  padding: 10px;
}
.wpcf7-form textarea {
  height: 140px;
}

/* Evita el foco azul feo de los navegadores */
.wpcf7-form *:focus {
  outline: none !important;
  box-shadow: none !important;
}

.wpcf7-acceptance {
  font-size: 14px;
  line-height: 1;
}
.form-privacidad {
  font-size: 13px;
  line-height: 1.2;
}

.wpcf7-acceptance a:hover,
.form-privacidad a:hover {
  text-decoration: underline;
}
.wpcf7-acceptance a:hover,
.form-privacidad a:hover,
.wpcf7-acceptance a,
.form-privacidad a {
  color: var(--color-negro) ;
}

@media only screen and (min-width: 1024px) {
  .wpcf7-form input[type="text"],
  .wpcf7-form input[type="tel"],
  .wpcf7-form input[type="email"],
  .wpcf7-form textarea {
    font-size: 26px;
  }
  .wpcf7-form ::placeholder {
    font-size: 26px;
  }

} /*  end css */


/* ════════════════════════════════════════
  BASICOS
   ════════════════════════════════════════ */


body {
  font-size: clamp(0.85rem, 1vw + 1rem, 1.5rem);
  line-height: 120%;
  letter-spacing: 0.01em;
  color: var(--color-negro) ;
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  background-color: #fdfbf7;
}
.post p {
  font-size: clamp(1rem, 1.2vw + 1rem, 1.4rem);
  line-height: 120%;
  font-weight: 300;
}
.post .entry-summary p {
  font-size: clamp(1rem, 1.2vw + 1rem, 2.2rem);
  line-height: 120%;
  font-weight: 300;
}

.listado-articulos article:nth-child(odd) {
  background-color: rgba(134, 121, 153, 0.3);
}

/* Aplica un fondo blanco (o cualquier otro) a los elementos PARES (2, 4, 6...) */
.listado-articulos article:nth-child(even) {
  background-color: #ffffff;
}


.lead {
  font-size: clamp(1rem, 1.2vw + 1rem, 2.5rem);
  line-height: 120%;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}
img {
  max-width: 100%;
  height: auto;
}
.wp-block-image {
  margin-bottom: 0 !important;
}
.text-decoration-none a {
  text-decoration: none;
}


/* ════════════════════════════════════════
  TAMAÑOS TEXTOS 
   ════════════════════════════════════════ */

.has-small-font-size {
    font-size: 0.875rem !important;
}

.has-normal-font-size {
    font-size: 1rem !important;
}

.has-large-font-size {
   font-size: clamp(1.2rem, 1.4vw + 1rem, 2.4rem)!important;
  line-height: 120%;
  font-weight: 400;

}

.has-huge-font-size {
    font-size: clamp(2rem, 3vw + 1rem, 4rem)!important;
}




p strong, li strong {
  font-weight: 600;
}

.text-underline a {
  text-decoration: none;
}
.text-white a {
  color: var(--color-blanco);
}
.text-white a:hover {
  text-decoration: underline;
  color: var(--color-blanco);
}

/* line-height solo titulares */
 :is(h1, .h1,  h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, [class^="display-"]) {
  line-height: 110%;
  font-weight: 400;
} 

/* Selecciona cualquier strong dentro de encabezados o clases de display */
 :is(h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, [class^="display-"]) strong, p strong {
 font-weight: 600;
} 

/* Titulares y Clases de Titular */
h1,
.h1 {
  font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem);
}

h2,
.h2 {
  font-size: clamp(2.2rem, 2.5vw + 1rem, 3rem);
}

h3,
.h3 {
  font-size: clamp(2rem, 2vw + 1rem, 2.5rem);
}

h4,
.h4 {
  font-size: clamp(1.4rem, 1.5vw + 1rem, 1.5rem);
}

/* Displays (Titulares gigantes de Bootstrap) */
.display-1 {
  font-size: clamp(2.5rem, 4vw + 1rem, 6rem);
}
.display-2 {
  font-size: clamp(2rem, 3vw + 1rem, 5rem);
}
.display-3 {
  font-size: clamp(1.8rem, 2.2vw + 1rem, 4rem);
}
.display-4 {
  font-size: clamp(1.6rem, 1.8vw + 1rem, 3rem);
}
.display-5 {
  font-size: clamp(1.4rem, 1.5vw + 1rem, 2.5rem);
}
.display-6 {
  font-size: clamp(1rem, 1vw + 1rem, 1rem);
}

.bg-inicio .wp-block-cover {
  min-height: 300px;
}
@media (min-width: 768px) {
  .bg-100 .wp-block-cover,
  .bg-100 .wp-block-cover-image {
    min-height: 100%;
  }
  .bg-inicio .wp-block-cover {
    min-height: 400px;
  }
} /* end media*/

@media (min-width: 1200px) {
  .bg-inicio .wp-block-cover {
    min-height: 600px;
  }
} /* end media*/

@media (min-width: 991px) {
  .foto-solo-movil {
    display: none;
  }
  /* line-height solo titulares */
 :is(h1, h2, h3, h4, h5, h6, [class^="display-"]) {
  line-height: 100%;
} 


} /* end media*/



.custom-logo {
  width: 240px;
  height: auto; /* Mantener proporción */
  margin-top: 15px;
  margin-bottom: 15px;
  color: var(--color-blanco) ;
}
.custom-logo-footer {
  width: clamp(180px, 16vw + 50px, 240px);
  height: auto; /* Mantener proporción */
}

.site-footer {
  background: var(--color-negro);
  padding: 3rem 0 2rem;

}

.site-footer a {
  color: var(--color-blanco) ;
  text-decoration: none;
  font-weight: 400;
  font-size:16px;
}

.site-footer a:hover {
  text-decoration: underline;
}


@media only screen and (max-width: 1399px) and (min-width: 990px) {
  
  .custom-logo {
  width: 14vw;
  margin-top:25px;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    font-size: 1.2vw!important;
  }
  .site-footer p {
    font-size: 16px;
    line-height: 120%;
  }
}/* end css */
@media only screen and (min-width: 1400px) {
  .custom-logo {
  width: 340px;
  }

}/* end css */

.widget ul {
  padding-left: 0;
}
.widget li {
  list-style: none;
  margin: 0;
}


/* menu legales*/
.footer-widget ul{
  list-style: none;
  margin: 5px auto;
  padding-left: 0;
  text-align: center;
}
.footer-widget ul li  {
  display: block;
  padding: 5px auto;
  text-align: left;
}
.footer-widget ul  li a    {
  color: var(--color-negro) ;
  text-decoration: none;
  font-size:15px;
}
.footer-widget ul li a:hover,
.footer-widget ul .current-menu-item a {
  color: var(--color-negro) ;
  text-decoration: underline;
}

@media only screen and (min-width: 600px) {
  .footer-widget ul li  {
    display: inline-block;
    padding: 5px;
  }
  .footer-widget ul li:not(:last-child)::after {
    content: ' / ';
    font-size:15px;
    color: var(--color-negro) ; /* Asegura el color por si acaso */
    padding-left: 5px; /* Para darle un espacio elegante */
    
   }
} /*  end css */

.redes img {
  margin:0 4px;
}
.redes img:hover {
  opacity: 0.7;
}

/* paginas legales */ 
.legales h2 {
  font-size: 26px;
  margin: 25px 0;
}
.legales h3, .legales h4 {
  font-size: 22px;
}
.legales p,
.legales li,
.legales {
  font-size: 16px;
  line-height: 120%;
}

:lang(es) .only-en,
:lang(en) .only-es {
  display: none;
}

.lang-item a {
  color: #999;
  font-weight: 600;
  text-decoration: none;
  font-size: 16px;
}
.lang-item a:hover,
.lang-item.current-lang a {
  color: var(--color-tercero);
  
}
/* boton nav-bar menu movil */
.navbar-toggler-icon {
  background-image: url('data:image/svg+xml,<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve"><g><rect x="2.2" y="9.6" style="fill:%23000;" width="45.7" height="6.4"/><rect x="2.2" y="21.8" style="fill:%23000;" width="45.7" height="6.4"/><rect x="2.2" y="34" style="fill:%23000;" width="45.7" height="6.4"/></g></svg>');
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler-icon:focus,
.btn-close:focus {
  outline: none !important;
  border: none !important;
  border-width: 0;
  box-shadow: none !important;
  border: none;
}

.navbar-nav li a.nav-link {
  color:#fff;
  font-size: clamp(1rem, 1vw + 1rem, 1.4rem);
  line-height: 1;
  text-transform: uppercase;
}
.nav-secondary  li a {
  padding-inline: 5px;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-secondary .navbar-toggler-icon{
  filter: invert(1);
}
.dropdown-menu {
  background: transparent!important;
  padding-left: 30px;
  --bs-dropdown-padding-y: 0.25rem;
}

.navbar-nav .dropdown-menu li  {
  padding-block: 0rem;
  line-height: 1;
  
}
.navbar-nav .dropdown-menu li a.nav-link  {
  text-transform: none;
  font-size: clamp(0.8rem, 1vw + 1rem, 1rem);
  
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: #fff;
}

/* añade funcionalidad dropdown en rollover  */
@media only screen and (min-width: 992px) {
  
  .nav-secondary  li  {
  margin-right: 10px;
  margin-left: 10px;
  min-height: 40px;
}
  
} /*  end css */









@media only screen and (min-width: 992px) {

    /* barra fija solo ordenador */
    #wrapper-navbar {
      position: fixed;
      min-height: 100px;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 0;
      /* transition: background var(--transition), box-shadow var(--transition), padding var(--transition); */
      background: rgba(253,251,247,.9); 
    }

    .paddtop{
      padding-top: 100px;
    } 


  /* main primary */
  .navbar-nav li {
    text-align: left;
    line-height: 1.2;
    padding-bottom: 4px;
    border-bottom:8px solid transparent;
    margin-left:10px;
  }

  .navbar-nav li a.nav-link {  
    color: var(--color-negro) ;
    text-wrap: nowrap;
   
  }

  .navbar-nav li:hover,   .navbar-nav li.active {
    color: var(--color-negro) ;
    border-bottom:8px solid var(--color-primero) ;
    
  }

  .navbar-nav li a.nav-link:focus {
    outline: none;
    text-decoration: none;
    text-decoration-thickness: 0;
  }

  .navbar-nav li  {
    font-weight: 500;
  }
  .navbar-nav .dropdown-menu li {
    font-weight: 400;
    background-color: #fff;
    padding-bottom: 0;
    padding-left: 5px;
    border-bottom:0;
    margin-left: 0;
  }
  .navbar-nav .dropdown-menu li:hover {
    font-weight: 400;
    background-color: var(--color-primero) ;
    color:#fff;
    padding-bottom: 0;
  }
  .navbar-nav .dropdown-menu li:hover a, .navbar-nav .dropdown-menu li:hover a:hover {
    color:#fff;
  }

  .dropdown-menu {
    background: transparent!important;
    padding-left: 0;
    padding-top: 12px;
    padding-bottom: 0;
    border-top:none;
    border-right:none;
    border-left:none;
    border-bottom:8px solid var(--color-primero) ;
  }
  
  .dropdown:hover .dropdown-menu {
    display: block;
  }
  .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color:  var(--color-segundoi) ;
  }


  .site-footer {
    padding: 1.5rem 0 1.5rem;
  }

} /* end media */


@media only screen and (min-width: 1440px) {

  /* barra fija solo ordenador */
  #wrapper-navbar {
    min-height: 120px;
  }

  .paddtop{
    padding-top: 120px;
  } 
}

/* read-more */
.understrap-read-more-link {
  text-decoration: none;
  display: inline-block;
  padding: 15px 40px 15px 0;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 74'%3E%3Cpolygon points='8.9,72.5 6.1,69.6 38.7,37 6.1,4.4 8.9,1.6 44.3,37' fill='%233a225d'/%3E%3C/svg%3E");
  background-position: 100% center;
  background-repeat: no-repeat;
  background-size: 35px auto;
  color: inherit;
  font-weight: normal;
  transition: background-position 0.4s ease, transform 0.4s ease, color 0.4s ease, font-weight 0.4s ease;
}
.understrap-read-more-link:hover {
  animation: desplazarFlecha 1.2s ease-in-out infinite;
  
  /* Desplazamos el texto 15px a la derecha */
  transform: translateX(15px);
  
  /* Cambiamos el color y el grosor del texto */
  color: var(--color-tercero);
  
}

@media only screen and (min-width: 768px) {
  .understrap-read-more-link {
    font-size: 29px;
    border-radius: 40px;
    min-width: 150px;
  }
} /* end css */
@media only screen and (min-width: 1200px) {
  .understrap-read-more-link {
    font-size: 36px;
    border-radius: 50px;
  }
} /* end css */


.text-white a,
.text-white p {
  color: #fff;
}
.text-white a:hover {
  text-decoration: underline;
  color: #fff;
}


/* boton cookies cookieyes*/
.cky-btn-revisit-wrapper {
  background-color: var(--color-tercero) !important;
}
.cky-btn-customize,
.cky-btn-reject,
.cky-btn-accept,
.cky-btn-preferences {
  border-color: var(--color-tercero) !important;
  color: var(--color-negro)  !important;
  background-color: #fff !important;
}



/* ==========================================================================
   PAGINACIÓN (WordPress + Bootstrap)
   ========================================================================== */

/* 1. Contenedores
   -------------------------------------------------------------------------- */
.navigation {
  max-width: 1440px;
  margin-inline: auto;
  padding: 1rem 0.5rem;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 40px 0;
}

/* 2. Estilos base (Enlaces y Números)
   -------------------------------------------------------------------------- */
.nav-links a,
.nav-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background-color: var(--color-blanco);
  color: var(--color-negro);
  font-weight: 400;
  text-decoration: none;
  border: 2px solid var(--color-tercero);
  transition: all 0.3s ease;
}

/* 3. Estados (Hover y Activo)
   -------------------------------------------------------------------------- */
.nav-links a:hover {
  background-color: var(--color-primero);
  color: var(--color-blanco);
  border-color: var(--color-primero);
}

.nav-links .current {
  background-color: var(--color-tercero);
  color: var(--color-blanco);
  border-color: var(--color-tercero);
  cursor: default;
}

/* 4. Botones de dirección (Prev / Next)
   -------------------------------------------------------------------------- */
.nav-links a.prev,
.nav-links a.next { 
  font-size: 0; /* Oculta el texto nativo */
  padding-inline: 7px;
}

/* Configuración de iconos SVG */
.nav-links a.prev::before,
.nav-links a.next::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.nav-links a.prev::before {
  background-image: url('../img/arrow-left.svg');
}

.nav-links a.next::before {
  background-image: url('../img/arrow-right.svg');
}

/* Inversión de color en hover para ambos iconos */
.nav-links a.prev:hover::before,
.nav-links a.next:hover::before {
  filter: invert();
}

/* 5. Responsive / Media Queries
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .nav-links a,
  .nav-links span {
    padding: 15px 25px;
    font-size: 1.4rem;
  }
  .nav-links a.prev,
  .nav-links a.next { 
    padding-inline: 15px;
  }
}






/* ==========================================
   Estilos Base Escritorio (Pantallas > 991px)
   ========================================== */
.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
  font-size: 14px;
}

.table-responsive table th, 
.table-responsive table td {
  padding: 12px;
  text-align: left;
  border: 1px solid #e0e0e0;
}

.table-responsive table th {
  background-color: #f7f9fa;
  font-weight: bold;
}

/* ==========================================
   RESPONSIVE: Para pantallas menores a 991px
   ========================================== */
@media screen and (max-width: 991px) {
  
  /* Forzamos comportamiento de bloques */
  .table-responsive table, 
  .table-responsive table tbody, 
  .table-responsive table tr { 
    display: block; 
    width: 100%;
  }

  /* Ocultamos la cabecera original por completo */
  .table-responsive table thead {
    display: none;
  }
  
  /* Convertimos cada fila en una tarjeta independiente limpia */
  .table-responsive table tr { 
    border: 1px solid #ccd1d9;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    background: #ffffff;
    overflow: hidden; /* Asegura que los bordes redondeados corten el fondo de las celdas */
  }
  
  /* Convertimos cada celda en un contenedor Flexbox */
  .table-responsive table td { 
    display: flex;
    justify-content: flex-start;
    align-items: start;
    border: none;
    border-bottom: 1px solid #f0f2f5; 
    padding: 12px 16px;
    box-sizing: border-box;
    text-align: left; 
  }
  
  /* Eliminamos el borde inferior en la última celda de la tarjeta */
  .table-responsive table td:last-child {
    border-bottom: 0;
  }
  
  /* Inyectamos el título de la columna a la izquierda vía Flexbox */
  .table-responsive table td::before { 
    content: attr(data-label); 
    flex-shrink: 0;      /* Evita que el título se encoja */
    flex-basis: 35%;     /* El título se queda con el 35% del espacio a la izquierda */
    text-align: left; 
    font-weight: bold;
    font-size: 12px;
    color: #5f6368;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-right: 15px; /* Espacio de separación con el texto de la celda */
    box-sizing: border-box;
  }

  /* Celda destacada (Actividad / Primer elemento) */
  .table-responsive table td:first-child {
    background-color: #f7f9fa;
    font-size: 15px;
    font-weight: bold;
    justify-content: start; /* Centra el contenido si no hay data-label */
    text-align: left;
    border-bottom: 1px solid #ccd1d9;
  }

  /* Si la primera celda NO lleva data-label en tu HTML, ocultamos su espacio */
  .table-responsive table td:first-child::before {
    display: none; 
  }
}

.migas {
  padding-block: 20px;
  font-size: 16px;
  color: var(--color-sexto);
}
.migas a {
  text-decoration:none;
  color: var(--color-segundo) ;
}
.migas a:hover {
  text-decoration:underline;
}
.migas strong {
  color: var(--color-blanco);
}
@media (min-width: 768px) {
  .migas {
    padding-block: 30px;
    font-size: 22px;
  }
}

.enlaces-especializaciones {
  margin-bottom:15px;
  border-bottom: 4px solid var(--color-primero);
}

.enlaces-especializaciones h3 a {
  text-decoration: none;
  width: 100%;
  display: block;
  padding: 15px 40px 15px 0; 
  
  /* SVG de fondo con color #3a225d */
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 74'%3E%3Cpolygon points='8.9,72.5 6.1,69.6 38.7,37 6.1,4.4 8.9,1.6 44.3,37' fill='%233a225d'/%3E%3C/svg%3E");
  
  /* Posición inicial fija a la derecha del todo */
  background-position: 100% center;
  background-repeat: no-repeat;
  background-size: 35px auto; 
  
  /* Color de texto por defecto */
  color: inherit; 
  font-weight: normal;

  /* Transición suave para cuando entres y salgas con el cursor */
  transition: 
    background-position 0.4s ease, 
    transform 0.4s ease, 
    color 0.4s ease,
    font-weight 0.4s ease;
}

/* Al pasar el cursor, activamos la animación de la flecha y desplazamos el texto */
.enlaces-especializaciones h3 a:hover {
  animation: desplazarFlecha 1.2s ease-in-out infinite;
  
  /* Desplazamos el texto 15px a la derecha */
  transform: translateX(15px);
  
  /* Cambiamos el color y el grosor del texto */
  color: var(--color-primero);
  font-weight: bold;
}

/* Definimos la animación en bucle para la flecha */
@keyframes desplazarFlecha {
  0% {
    background-position: 100% center; /* Empieza pegada a la derecha */
  }
  50% {
    background-position: 98% center;  /* Retrocede a la izquierda para coger impulso (puedes ajustar a 97% o 98% si es mucho) */
  }
  100% {
    background-position: 100% center; /* Vuelve a la derecha. Al coincidir con el 0%, el bucle es infinito y fluido */
  }
}



.link-bloque   {
  position:relative;
}
.link-bloque a  {
  display:block;
  padding: 14%;
  height: 100%;
}
.link-bloque:hover  {
  background-color: var(--color-tercero);
}
.link-bloque:hover a, .link-bloque:hover a:hover{
  color: var(--color-blanco);
}

/*. FAQS CSS. */
.sp-easy-accordion {
  border: 1px solid #000!important;
}

.ea-card.sp-ea-single.ea-expand {
  background-color: var(--color-segundo) !important;
  border: none!important;
  border-bottom:1px solid #000!important;
}
.ea-card.sp-ea-single{
  background-color: var(--color-blanco) !important;
  border: none!important;
  border-bottom:1px solid #000!important;
}
.ea-card.sp-ea-single.ea-expand a , .ea-card.sp-ea-single a {
  color: var(--color-negro) !important;
  font-family: "Outfit", sans-serif!important;
  position: relative;
  padding: 20px 60px 20px 30px!important;
  display: block;
  font-size: 1.5rem!important;
  line-height: 1.2!important;
  font-weight: 500!important;;
}

.eap-icon-ea-expand-minus::before, .eap-icon-ea-expand-plus::before {
  color: var(--color-negro) !important;
  position: absolute;
  top:15px;
  right: 15px;
  content:' ';
  height: 30px;
  width: 30px;
  background-image: url("../img/flecha-faqs.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.eap-icon-ea-expand-plus::before  {
  transform: scaleY(-1);
}
.ea-body  {
  font-size: 1rem!important;
  line-height: 120%!important;
  letter-spacing: 0.01em!important;
  color: var(--color-negro) !important;
  font-family: "Outfit", sans-serif!important;
  font-weight: 300!important;
  padding: 15px 30px!important;
}

@media (min-width: 1200px) {
  .ea-card.sp-ea-single.ea-expand a , .ea-card.sp-ea-single a {
    padding: 40px 70px 40px 50px!important;
    font-size: 2.4rem!important;
    
  }
  .ea-body  {
  padding: 30px 50px!important;
  font-size: 1.2rem!important;
  }
  .eap-icon-ea-expand-minus::before, .eap-icon-ea-expand-plus::before {
    height: 50px;
    width: 50px;
    top:40px;
  }
}