:root{
  --bg:#ffffff;
  --fg:#111827;
  --muted:#6b7280;
  --primary:#f59e0b;
  --primary_2:#f57c0b;
  --primary-ink:#111827;
  --secondary:#000;
  --secondary-ink:#ffffff;
  --card:#0b0b0b;
  --dark-muted:#8c8d91;
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
}

/* Containers */
.container{max-width:1200px;margin:0 auto;padding:0 15px;width:100%}
.container-2{max-width:850px}
.container-3,
.container-4{align-items:center}
.container-4{max-width:1300px}

/* Header */
.site-header{color:#000;background:#fff;position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;gap:16px;padding:12px 0}
.logo{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.5px;margin:0 auto}
.logo img{width:279px;height:auto}

/* Nav */
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav a{color:#000;text-decoration:none;font-weight:500}
.nav a:hover{color:#4b4a49}
.nav-toggle{display:none}
.nav[aria-expanded="true"]{display:block;position:absolute;right:10px;top:60px;background:#000;border:1px solid #334155;border-radius:12px;padding:10px 12px}
.nav[aria-expanded="true"] ul{flex-direction:column;gap:10px;display:flex}
.navbar{background-color: black!important;}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:600!important}
.hero {
  padding-bottom: 30px !important; /* adjust so buttons are clear */
}
.btn-2 { display:flex!important; text-decoration:none!important; font-weight:500!important; align-items:center!important; margin-top:40px!important; justify-content:center!important; text-align:center!important; }
.btn-small { padding:13px 20px!important; font-size:20px!important; border-radius:12px!important; max-width:140px!important; }
.btn-primary { background:#f59e0b!important; color:#111827!important; border-color:#f59e0b!important; }
.btn-primary:hover, .btn-primary:focus { background:#d48806!important; border-color:#d48806!important; color:#111827!important; }
.btn-secondary { background:#000!important; color:#fff!important; border-color:#000!important; }
.btn-secondary:hover, .btn-secondary:focus { background:#111!important; border-color:#111!important; color:#fff!important; }
.btn-outline { background:transparent!important; color:#fff!important; border:2px solid #fff!important; border-color:#fff!important; border-width:2px!important; }
.btn-outline:hover { background:rgba(255,255,255,.06)!important; }
.btn-outline-primary { color:#f59e0b!important; border-color:#f59e0b!important; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background:#f59e0b!important; color:#111827!important; border-color:#f59e0b!important; }
.btn-outline-secondary { color:#000!important; border-color:#000!important; }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background:#000!important; color:#fff!important; border-color:#000!important; }


/* Hero */
.hero{color:#0a0a0a;background:#fff;padding:96px 0;text-align:center}
.hero h1{font-size:64px;line-height:1.15;margin:0 0 16px;font-weight:300;font-family:'Roboto',sans-serif;letter-spacing:-1.6px}
.hero p{color:#d1d5db;max-width:760px;margin:0 auto; line-height:1.25;}
#bases-hero p,#api-hero p,#enriquecimiento-hero p{max-width:1300px}
#enriquecimiento-de-datos-hero p{max-width:1100px;margin:0 auto}
.hero-actions{display:flex;margin-top:24px;justify-content:center}
.hero .btn-primary{background:var(--primary);color:var(--secondary-ink);border-color:var(--primary);}

/* Pills, headings, subtitles */
.pill{color:#111;background:#e5e7eb;border-radius:14px;padding:16px 18px;height:40px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:500;font-size:18px;margin:10px}
#bases h2{font-size:40px;line-height:1.1;margin:0 0 16px;font-weight:400}
.B2C_h2{font-size:38px;margin:0 0 10px;color:black}
.BSC_p{font-size:20px;color:var(--muted);font-weight:470}


.features .card {
  background-color: #0b0b0b; /* Dark background */
  color: #fff; /* White text */
  border-radius: 16px; /* Rounded corners */
  padding: 30px 20px; /* Space inside cards */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25); /* Soft shadow */
  border: 1px solid #1f2937; /* subtle border for depth */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* hover effect */
}

.features .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.features .card h3 {
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: 600;
}

.features .card p {
  font-size: 16px;
  color: #d1d5db;
  flex-grow: 1;
}

.features .card::after {
  content: attr(data-after);
  display: block;
  margin: 20px 10px 0 10px;
  font-size: 20px;
}

/* Feature/layout grids */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.features-2{display:flex;flex-direction:row;align-items:center;gap:64px;width:100%;padding:0}
.features-3{display:grid;grid-template-columns:repeat(2,50%);width:1000px;margin:0 auto;justify-items:center}
.h1-title{color:#111827;font-weight:600;font-size:56px;line-height:1.1;margin:0 auto 25px}
.p-sub{color:var(--dark-muted)!important;font-size:15pt;max-width:1300px; line-height:1.4; max-width: 1300px; margin: 0 auto;font-weight: 450; text-align:left;  }

/* Grids used across pages */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.grid-3{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:30px 0}

/* Cards */
.card{background:#ffffff!important;color:#000000!important;border-radius:16px!important;border:2px solid #e8e9eb!important; padding:20px;}
.card h3{margin:0 10px 10px 10px!important;font-size:22px}
.card p{margin:10px!important;color:#474a4e!important}

.card-5{border-radius:16px;padding:0;overflow:hidden}
.card-2-wide{width:100%;margin:0 10px}
.card-2{display:flex;flex-direction:column;justify-content:space-between;color:#0b0b0b;background:#fff;border-radius:16px;padding:0;border:1px solid #d9dee4;height:100%}
.card-2 .card-body{padding:16px 20px 0 20px;text-align:center}
.card-2-text{padding:0 20px; text-align:left; padding:15px;}
.card-2-p{margin:0 0 10px;font-size:22px;color:var(--muted);font-weight:530}
.card-2-h3{font-size:27px;font-weight:550;margin:0!important}

.card-3{color:#0b0b0b;background:#fff;border-radius:16px;padding:0 0 30px;border:1px solid #d9dee4;text-align:left;width:400px;display:flex;flex-direction:column;height:670px}
.card-3 .card-2-text{display:flex;flex-direction:column;flex:1 1 auto;gap:8px;height:300px}
.card-3 .card-2-text>:last-child{margin-top:auto}

.card-4{background:#F5F3EE;color:#111827;border-color:#e5e7eb;margin:0 auto}

/* KPI / quote / testimonial */
.kpi h2{font-size:40px;margin:0 0 12px}
.kpi .actions{display:flex;gap:12px;margin-top:12px}
.quote{font-size:40px;font-weight:800;text-align:center;padding:40px 0 16px;line-height:1.2}
.testimonial{display:flex;align-items:center;justify-content:center;gap:12px}
.testimonial .avatar{width:36px;height:36px;border-radius:50%;border:2px solid #f59e0b;display:block}
.testimonial .meta{text-align:left}
.testimonial .name{font-weight:700;color:#111827}
.testimonial .role{color:var(--muted);font-size:14px}

/* Overlap panel under hero */
.overlap{position:relative;margin-top:-130px}


@media(max-width:993px){
  .overlap{
    position:relative;
    margin-top:-40px!important;
  }
}
.panel{background:#fff;border-radius:28px;padding:40px 50px;box-shadow:0 12px 28px rgba(0,0,0,.08)}
.overlap p{font-family:"Inter:Medium",sans-serif;word-break:break-word;font-weight:500;font-size:18px;letter-spacing:-.09px;color:rgba(0,0,0,.55);line-height:1.45}

/* Misc */
.muted{color:var(--muted)}
.muted-2{color:var(--muted)!important;text-align:left;font-size:18px;font-weight:500}
.section{padding:46px 0}
.section-2{padding:56px 180px}
.section-3{padding:10px 0}
.illustration{max-width:80%;height:auto;display:block;border-radius:10px}
.illustration_2{height:450px;border-radius:21px;max-width:650px}
.illustration-card{height:263.13px;display:block;border-top-left-radius:16px;border-top-right-radius:16px}
.site-main{background-color:#fff}


/* Footer */
.site-footer{border-top:1px solid #e5e7eb;padding:24px 0;background:#fff}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800}
.footer-nav a{color:#fff;margin-right:12px;text-decoration:none}
.footer-nav a:hover{color:#f3f4f6}
.site-footer--dark{background:#000;color:#fff;border-top:none;}

/* Image/porqué layout */
.image-porque{width:544px;height:432px;background:url(6030257.png);border-radius:16px;flex:none;order:1;flex-grow:1}
.porque-content{flex:none;order:0;align-self:stretch;flex-grow:1}

/* Card image styling */
.card-2 img{width:100%;height:250px;object-fit:cover;border-top-left-radius:16px;border-top-right-radius:16px;display:block}

/* Responsive adjustments (condensed) */
@media (max-width:1560px){
  .features-2{flex-direction:column;height:auto;gap:32px;padding:0 10px}
  .grid-3{grid-template-columns:1fr;gap:40px;padding:10px 0}
  .porque-content{width:100%;height:auto;padding:0}
  .illustration{max-width:80%}
}

@media (max-width:1200px){
  .features{grid-template-columns:repeat(2,1fr)}
  .section-2{padding:48px 40px}
}

@media (max-width:992px){
  .container{padding:0 30px}
  .section-2{padding:50px 30px}
  .card-2 h2{font-size:20px}
  .card-2 p{font-size:16px}
  .illustration-card{height:220px}
}

@media (max-width:900px){
  .features{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav-toggle{display:inline-block;margin-left:auto;background:transparent;color:#fff;border:1px solid #334155;border-radius:8px;padding:6px 10px}
  .hero h1{font-size:40px;letter-spacing:-1px}
  .hero{padding:72px 0;min-height:auto!important;background-position:center;background-size:cover}
  .section-2{padding:40px 16px}
}

@media (max-width:768px){
  .container{padding:0 20px}
  .section-2{padding:40px 20px}
  .card-2 img{height:auto}
  .illustration-card{height:200px}
}

@media (max-width:576px){
  .container{padding:0 15px}
  .section-2{padding:30px 15px}
  .card-2,.card-2-wide{width:100%;margin:0 0 20px;max-width:none}
  .card-2 h2{font-size:18px}
  .card-2 p{font-size:14px}
  .illustration-card{height:180px}
  .header-inner{gap:10px}
  .logo img{width:200px;max-width:60vw}
  .hero .btn{width:100%;text-align:center}
  .quote{font-size:28px}
  .col-sm-6{flex:0 0 100%;max-width:100%}
}

/* Tablets mid-range */
@media (min-width:577px) and (max-width:768px){ .col-sm-6{flex:0 0 100%;max-width:100%} }
@media (min-width:769px) and (max-width:992px){ .col-md-4{flex:0 0 50%;max-width:50%} }
@media (min-width:993px){ .col-md-4{flex:0 0 33.333333%;max-width:33.333333%} }

/* Desktop large tweaks */
@media (min-width:1201px){
  .container{padding:0 50px}
  .section-2{padding:80px 50px}
  .card-2 p{font-size:17px}
  .illustration-card{height:260px}
}
/*
* ADD THESE STYLES to your existing CSS file
* to correctly render the custom-colored and image-backed blog cards
*/

/* Sets a consistent height for all blog cards, crucial for the layout */
.card.h-100 {
/* Adjust this min-height to control the overall card size */
min-height: auto; 
display: flex;
flex-direction: column;
border: 1px solid #e8e9eb !important; /* Retaining border as per original CSS */
overflow: hidden; /* Important for containing image and gradient */
}

/* Base style for ALL blog cards with image background and text overlay */
.blog-card-img {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
border: none !important; /* Removing the standard card border if necessary */

/* The part that holds the background image and text title */
flex-grow: 1; /* Makes this section fill the space up to the footer */
display: flex;
flex-direction: column;
justify-content: flex-end; 
padding-bottom: 0 !important; /* Ensure content is right at the footer */
}

/* Gradient Overlay for Text Readability over the image */
.blog-card-img::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; 
/* Gradient from light/transparent at top to dark at the middle/bottom */
z-index: 1;

}



/* Ensure the text content is above the gradient and is aligned to the bottom */
.blog-card-img .card-body {
position: relative;
z-index: 2;
flex-grow: 1; 
height:350px;
display: flex;
flex-direction: column; /* Pushes content to the bottom of the image area */
padding:40px !important; /* Add padding here, not margin on h2 */
height: 300px;
}

/* Ensure the title text is visible and sized correctly */
.blog-card-img .card-title {
color: rgb(255, 255, 255) !important;
font-size: 1.5rem; /* fs-3 is ~1.5rem, but explicitly setting it */
margin-top: 0 !important;
}

/* The footer section remains consistent and separate */
.blog-card-img .card-footer {
position: relative;
z-index: 3; /* Keep footer content clearly visible */
border-top: 1px solid #e8e9eb !important;
padding: 1rem 1.5rem 3rem 1.5rem!important; 
height: 260px;
}

/* Target the paragraph directly when it is hovered. */
.h2-hover:hover {
color: var(--primary) !important;
transition: color 0.3s ease;
}

/* Optional: Set the initial state */
.h2-hover {
color: #474a4e!important;
transition: color 0.3s ease;
}
/* 1. Estilos iniciales del elemento flecha */
.hover-arrow {
/* Posicionamiento y color */
color: white; 
font-size: 5rem;
font-weight: bold;
position: absolute;
bottom: 10px; /* Ajusta la posición vertical sobre la imagen */
right: 40px;  /* Ajusta la posición horizontal */
z-index: 3; /* Asegura que esté por encima de la imagen/degradado */

/* Estado inicial: oculto y desplazado hacia la izquierda */
opacity: 0;
transform: translateX(-10px);

/* Transición suave para la animación */
transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 2. Definir el comportamiento al hacer hover */
/* Al hacer hover sobre el contenedor de la imagen (.card-body), 
cambia el estilo de la flecha (.hover-arrow) */
.card-body:hover .hover-arrow {
/* Estado final: visible y en posición final */
opacity: 1;
transform: translateX(0); /* Vuelve a su posición original, creando el efecto de "entrada" */
}

/* 3. Asegúrate de que el contenedor de la imagen es el punto de referencia */
/* El 'card-body' YA tiene 'position: relative;' en tus estilos, 
pero lo incluyo aquí como recordatorio: */
.blog-card-img .card-body {
position: relative; /* CRUCIAL para que la flecha se posicione respecto a este contenedor */
/* ... el resto de tus estilos del card-body ... */
}
.btn-cookie-settings:hover {
color: #666!important;
background-color: #f79320!important;
}


.btn-cookie-settings {
position: fixed;
bottom: 0;
right: 100px;
background-color: #f79320!important;
color: #fff!important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
z-index: 10;
}
@media (max-width:560px){
  .container-3-porque{
    padding-left:10px !important;
    padding-right:10px!important;
  }
}
@media (max-width:1000px){
  .p_bdd{
    margin-left:10px!important;
    margin-right:10px!important;
  }
}
@media (max-width:1200px){
.img-desaparece{
  display:none !important;
}
@media(max-width:1200px){
  .img-desaparece-glossary{
    display:none!important;
  }
}
.container-3-porque {
  display: block !important;
}
}
/*
* COMIENZO DE ESTILOS AÑADIDOS PARA LA PLANTILLA DEL BLOG POST
* Estas clases dan formato a la página de artículo individual.
*/

/* Ajustes generales del contenido del artículo */
.post-header {
text-align: center;
margin-bottom: 40px;
}
/* Estilo para el título principal del post en la cabecera */
.post-header .h1-title {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
margin: 0 auto 15px;
max-width: 800px;
color: var(--fg);
}
/* Estilo para la píldora/categoría en la cabecera */
.post-header .pill {
background: var(--primary);
color: var(--primary-ink);
margin: 0 0 15px 0;
font-size: 16px;
padding: 10px 18px;
}
/* Estilo para la imagen destacada */
.post-header .illustration {
max-width: 100%;
height: auto;
margin-top: 30px;
border-radius: 16px;
}

/* Estilos de Tipografía dentro del Cuerpo del Artículo */
.article-content p {
font-size: 1.15rem; /* Un poco más grande para mejor lectura */
line-height: 1.8;
color: var(--fg);
margin-bottom: 25px; /* Espaciado entre párrafos */
}

/* Ajuste para h2 principal de sección (usando la clase B2C_h2) */
.article-content .B2C_h2 {
font-size: 38px;
font-weight: 700;
line-height: 1.2;
margin: 40px 0 15px 0 !important;
color: var(--fg);
}
/* Ajuste para subtítulos (h3) */
.article-content h3 {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  margin: 30px 0 15px 0 !important;
  color: var(--fg);
}
/* Ajuste para h4, h5, etc. si fueran necesarios */
.article-content h4 {
  font-size: 22px;
  font-weight: 600;
  margin: 25px 0 10px 0 !important;
}


/* ESTILOS DEL ÍNDICE DE CONTENIDOS (TOC) */
.toc-card {
/* Sustituye el borde general por uno distintivo a la izquierda */
border: none !important; 
border-left: 5px solid var(--primary);
padding: 20px 25px;
margin-bottom: 40px;
background: #f7f7f7 !important; /* Fondo suave para destacarlo */
border-radius: 16px;
}
.toc-card h3 {
font-size: 24px;
font-weight: 700;
margin-top: 0 !important;
margin-bottom: 15px;
color: var(--fg);
}
.toc-card ol {
list-style-type: none; 
padding-left: 0;
margin: 0;
}
.toc-card li {
margin-bottom: 8px;
font-size: 17px;
}
.toc-card a {
color: var(--fg);
text-decoration: none;
font-weight: 500;
}
.toc-card a:hover {
color: var(--primary);
}


/* ESTILOS DE LA BIOGRAFÍA DEL AUTOR */
.author-bio {
/* Usamos .card como base, pero personalizamos el fondo y el margen */
padding: 25px;
margin-top: 60px;
background: #f8f8f8 !important; /* Fondo ligeramente gris */
border: 1px solid #e5e7eb !important;
border-radius: 16px !important;
display: flex;
flex-direction: column;
gap: 15px;
}
/* Usamos la clase testimonial pero ajustamos la alineación */
.author-bio .testimonial {
  justify-content: flex-start; 
  gap: 15px;
  padding: 0; /* Aseguramos que no tenga padding extra */
}
.author-bio .avatar {
  flex-shrink: 0;
  width: 60px; /* Avatar más grande */
  height: 60px; 
  border: 3px solid var(--primary); /* Borde primario resaltado */
}
.author-bio .meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.author-bio .name {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
}
.author-bio .role {
  color: var(--muted);
  font-size: 16px;
}
.author-bio p {
  margin: 0 !important; 
  color: var(--fg) !important; 
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Estilo para un Call to Action (CTA) en el cuerpo del artículo */
.article-content .btn-in-article {
  margin: 40px 0; 
  text-align: center;
}
.article-content .btn-in-article .btn-primary {
  font-size: 20px; 
  padding: 18px 30px; 
  border-radius: 16px; 
  width: 100%; 
  max-width: 650px; 
  font-weight: 700;
  /* Los colores se definen en el CSS global (.btn-primary) */
}
.btn.active{
background-color: var(--primary);
}
.btn-outline-primary.active, 
.btn-outline-primary:active {
  background-color: var(--primary) !important; /* Forzar fondo naranja */
  border-color: var(--primary) !important;     /* Forzar borde naranja */
  color: var(--primary-ink) !important;        /* Forzar texto oscuro */
}
.btn-outline-primary.active:focus, 
.btn-outline-primary:active:focus {
  background-color: var(--primary) !important;     /* Mantiene el fondo naranja */
  border-color: var(--primary) !important;         /* Mantiene el borde naranja */
  color: var(--primary-ink) !important;            /* Mantiene el texto oscuro */
  
  /* Reemplaza la sombra azul de foco de Bootstrap por una sombra naranja (o ninguna) */
  box-shadow: 0 0 0 0.25rem rgba(245, 158, 11, 0.5); 
}
.bg-body-tertiary{
  background-color:#ffff !important;
}
/*
* FIN DE ESTILOS AÑADIDOS PARA LA PLANTILLA DEL BLOG POST
*/

/* In assets/css/styles.css */

/* --- HOME PAGE (Black Navbar) --- */
.bg-black-home {
  background-color: black !important;
}

/* Make links/text white on the black background */
.bg-black-home .nav-link {
  color: white !important; 
}

/* Adjust the hamburger icon to be visible on black */
.bg-black-home .navbar-toggler-icon {
  filter: invert(1); 
}


/* --- OTHER PAGES (White Navbar) --- */
.bg-white-page {
  background-color: white !important;
  /* Optional: A subtle border/shadow for better separation from content */
  border-bottom: 1px solid #ddd;
}

/* Make links/text black on the white background */
.bg-white-page .nav-link {
  color: black !important;
}

/* Ensure the hamburger icon is visible on white */
.bg-white-page .navbar-toggler-icon {
  filter: none;
}
.card{
  --bs-card-group-margin:1rem!important;
}
/* --- FOOTER RESPONSIVENESS --- */



/* Target the main container inside the footer (footer-inner-custom) */
@media (max-width: 900px) {
  .site-footer .footer-inner-custom {
      /* Change from space-between to column for stacking */
      flex-direction: column;
      align-items: center; /* Center all stacked elements */
      padding-top: 20px !important;
      padding-bottom: 20px !important;
  }

  /* Target the three main content blocks and remove the large fixed margin */
  .site-footer .align-self-center,
  .site-footer > div:nth-child(1) > div:nth-child(3) {
      /* Remove fixed margin on main content blocks */
      margin: 20px !important; /* Use a smaller, consistent margin for spacing */
      width: 100%; /* Make them take up the full width */
      max-width: 400px; /* Optional: cap the max width for aesthetics on tablets */
      text-align: center; /* Center text content inside blocks */
  }
  
  /* Center the logo and text in the first block */
  .site-footer .align-self-center:nth-child(1) {
      margin-bottom: 0px !important; /* Adjust spacing between logo and contact */
  }

  .site-footer .align-self-center:nth-child(1) > div:nth-child(1) {
      justify-content: center; /* Center logo container */
  }
  
  /* Ensure the contact info (second block) is centered */
  .site-footer .align-self-center:nth-child(2) > div:nth-child(1) {
      justify-content: center; /* Center contact info container */
  }
  .site-footer .align-self-center:nth-child(2) p {
      text-align: center; /* Center phone/email text */
  }

  /* Adjust the newsletter form block */
  .site-footer > div:nth-child(1) > div:nth-child(3) {
      margin-top: 0px !important; /* Adjust spacing with previous block */
  }
  
  .site-footer > div:nth-child(1) > div:nth-child(3) > div {
      text-align: center; /* Center the 'NEWSLETTER' title text */
  }
  
  /* Left align form elements for better usability */
  .site-footer form {
      text-align: left;
  }
  .site-footer form label {
      display: block; /* Make label a block element for full width */
      text-align: left;
      width: 100%;
  }

  /* Legal Nav (bottom section) */
  .site-footer .footer-nav {
      flex-direction: column; /* Stack legal links vertically */
      gap: 10px !important;
      text-align: center;
  }
  
  .site-footer .footer-inner:nth-of-type(2) {
      padding-top: 20px !important;
      padding-bottom: 20px !important;
  }
}

/* Optional: Minor adjustments for very small screens */
@media (max-width: 576px) {
  /* For the two main cookie modal buttons on the initial alert (cookiesModal) */
  .site-footer #cookiesModal .row .col-6 {
      flex: 0 0 100%;
      max-width: 100%;
      padding-left: 4px !important;
      padding-right: 4px !important;
  }
  .site-footer #cookiesModal .row .col-6:first-child {
      margin-bottom: 8px; /* Add space between the stacked buttons */
  }
  
  /* For the three main cookie modal buttons on the admin panel (cookiesAdminModal) */
  .site-footer #cookiesAdminModal .row .col-3,
  .site-footer #cookiesAdminModal .row .col-6 {
      flex: 0 0 100%;
      max-width: 100%;
      padding-left: 4px !important;
      padding-right: 4px !important;
  }
  .site-footer #cookiesAdminModal .row > div {
      margin-bottom: 8px; /* Add space between stacked buttons */
  }
}
@media (max-width: 1050px) {
  .container-fluid{
    padding-right: calc(var(--bs-gutter-x) * 2)!important;
    padding-left: calc(var(--bs-gutter-x) * 2)!important;
  }
}
/* Styling for the active link in the navigation */
.nav-link.active-page {
  /* For white background pages */
  color: var(--primary_2) !important; /* Example: Blue for white background */
  font-weight: 600;
  border-bottom: 2px solid var(--primary_2);
  padding-bottom: 8px !important; 
}

.bg-black-home .nav-link.active-page {
  /* For black background home page */
  color: #f7a120 !important; /* Example: Orange/Yellow for black background */
  border-bottom: 2px solid #f7a120;
}
.links-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.container-fluid-header{
  height:74px; 
  padding-right: calc(var(--bs-gutter-x) * 2.5);    
  padding-left: calc(var(--bs-gutter-x) * 2.5); 
  max-width:1520px!important;
}
.div-footer-1{ display:flex; justify-content:center; align-items:flex-start; padding-top:40px; padding-bottom:40px;}
.div-footer-2{ display: flex; align-items: center; gap: 10px;}
.div-footer-3{ font-size: 14px; color: #fff;}
.div-footer-4{color: #fff; font-size: 16px; margin-bottom: 15px; display: block;}
.img-footer-1{ width: 180px; height: 40px; object-fit: contain;}
.input-footer{ flex-grow: 1; padding: 10px; border-radius: 6px; border: 1px solid #ccc; background-color: #f7f7f7; width: auto;}
.button-footer{border-radius: 6px; font-weight: 600; background: var(--primary); color: var(--primary-ink); border: none; width: 120px;}
.footer-footer{color: #fff; text-decoration: none; font-size: 12px;}

.card-home{box-shadow: 0 12px 28px rgba(0, 0, 0, .08); border:none!important; }
.btn-home{background-color:white; color:black; font-weight:500; border: solid; border-color:#d6d6d6; border-width:2px;}
.background-img-home{color:#fff; background-image: url('../images/home_bg.png');background-size: cover;background-position: center;min-height: 625px;}
/* @media(max-width:) */
@media(max-width:993px){
  .background-img-home{
    min-height: 425px;
  }
}

.pq-hero{background-size: cover; background-position: center; min-height:500px; padding-top:60px; padding-bottom:0; margin-bottom:20px;}
.pq-img{height:210px; object-fit:cover;}

.bdd-li{ font-size:18px!important;}
.bdd-box{background-color:#F0F0F2!important;box-shadow: 2px 19px 28px rgba(0, 0, 0, 0.08); border:none!important; align-items: center;margin-left:3rem;margin-right:3rem;}
.enriquecimiento-box{background-color:#F0F0F2!important;box-shadow: 2px 19px 28px rgba(0, 0, 0, 0.08); border:none!important;}
.glossary-title{font-weight:200; font-size:80px;text-align:left;color:#333!important;border-bottom:none!important;}

@media(max-width:763px){
  .glossary-title{font-size:55px!important;}
}
.even-bolder{font-weight:800;}

.fs-custom1{font-size:38px;}

@media (min-width: 1200px) {
  .text-limit-xl {
      max-width: 550px !important;
  }
}
@media (max-width:993px){
  .h1-sm{font-size:30px!important;}
  .h2-sm{font-size:24px!important;}
  .img-desaparece-2{display:none;}
  .bdd-py{padding-top:.5rem!important; padding-bottom:.5rem!important;}
  .bdd-px{padding-left:0px!important;padding-right:0px!important;}
}
.bdd-py{padding-top:3rem; padding-bottom:3rem;}
.bdd-px{padding-right:3rem; padding-left:3rem;}

.subrayado-hover {
  text-decoration: none; /* Asegura que el enlace NO esté subrayado por defecto */
  transition: text-decoration 0.2s ease; /* Transición suave (opcional) */
}

.subrayado-hover:hover {
  text-decoration: underline; /* Aplica el subrayado SÓLO al pasar el ratón */
}