/* ===========================
   Buscador  
   =========================== */
form input[type=email],form input[type=number],form input[type=password],form input[type=search],form input[type=tel],form input[type=text],form select,form textarea {
    font-weight: 200 !important; 
    padding-left: 40px;   
}

.button:active, .hs-button:active, button:active {
      background-color: #ffffff !important;
}

.search{
  border-radius: 8px;
  margin: 8px auto 1px;
  padding: 5px 10px;
  position: relative;
  width: min(500px, 100%);
  background: white;
  border: 1px solid #D7D7D7;
  font-weight: 200 !important;
}
.search__input{
  width:100%; height:44px; padding:0 48px 0 16px;
  background:var(--bg-soft); color:#9D9D9C !important;
  border:1px solid transparent; border-radius:999px; outline:none;
  transition:border .2s, box-shadow .2s;
  font-weight: 200 !important;
}
.search__input::placeholder{color:var(--muted)}
.search__input:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(30,107,255,.25)}
.search__btn{
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  min-width:32px; border:0; border-radius:999px;
  background: #ffffff;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow);
  font-weight: 200 !important;
  padding-right: 10px;
  padding-left: 10px;
}
.search__btn:hover{ background:#ffffff !important; border:0; }
.search__btn svg{width:18px; height:18px; fill:#9D9D9C}

/* ===========================
   Tabs
   =========================== */
.tabs{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  margin:10px 0 18px; flex-direction:row;
}
@media (max-width: 992px){ .tabs{ overflow-x:auto; } }

.tab{
  appearance:none; border-radius:15px; border:0;
  background:#fff; color:#B1B1B1; padding:15px 10px; cursor:pointer;
  transition:all .2s; font-weight:600; letter-spacing:.1px; width:100%; justify-content:center;
}
.tab[aria-selected="true"], .tab:hover{ background:#063052; color:#fff; border:0; }
.tab:focus-visible{ outline:3px solid rgba(30,107,255,.35); }

/* Versión de tabs uniforme */
.tabs{ justify-content:center; align-items:stretch; gap:20px; width:100%; padding:10px 2vw 8px; }
.tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff !important; border:1px solid #fff !important; height:70px;
  color:#9D9D9C !important; 
}
.tab img{ width:28px; height:28px; filter: brightness(0) saturate(100%) invert(74%) sepia(7%) saturate(28%) hue-rotate(21deg) brightness(85%) contrast(86%); }
.tab:hover, .tab.is-active{ background:#fff !important; color:#C7CD24 !important; border:1px solid #C7CD24 !important; }
.tab:hover img, .tab.is-active img{
  filter: brightness(0) saturate(100%) invert(80%) sepia(92%) saturate(410%) hue-rotate(4deg) brightness(83%) contrast(97%);
}
@media (max-width:768px){
  .tabs{ flex-direction:column; }
  .tab{ border-right:2px solid #e2e2e2; border-bottom:none; width:100%; }
  .tab:last-child{ border-bottom:2px solid #e2e2e2; }
}

/* ===========================
   Layout 2 columnas
   =========================== */
.news__layout{
  display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start;
  margin-top:40px; padding-top:40px; border-top:1px solid #D7D7D7;
}
.left-column{ display:flex; flex-direction:column; gap:24px; }

.filter{
  background:#fff; border:1px solid #ddd; border-radius:8px; padding:16px; height:fit-content;
}
.filter .solution-checkboxes{ display:flex; flex-direction:column; gap:8px; }
.filter .cb-label{ display:flex; align-items:center; gap:10px; cursor:pointer; color: #6A6A6A; font-size: 14px !important; font-weight: 400; }
.filter input[type="checkbox"]{ width:18px; height:18px; accent-color:#C7CD24; }

.filter .cb-label:has(input[type="checkbox"]:checked) {
  font-weight: 600 !important;
}

/* Forzar que el texto respete las mayúsculas/minúsculas originales */
.filter .cb-label {
  text-transform: none !important;
}

.filter .cb-label,
.filter .cb-label *,
.cb-label {
  text-transform: none !important;
}




/*---- Responsive ----*/
/*---- Responsive ----*/
@media (max-width: 767px) {
  .news__layout {
    grid-template-columns: 1fr !important;
    margin-top: 15px;
    padding-top: 15px;
    gap: 16px;
    overflow-x: hidden;
  }

  .left-column,
  .filter {
    width: 100%;
    max-width: 100%;
  }

  .filter {
    margin-bottom: 16px;
  }
}

/* ===========================
   GRID de tarjetas
   =========================== */
.news .grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-flow:row dense;
  align-items:stretch; /* ✅ hace que todas las cards tengan misma altura */
  transition:opacity 180ms ease;
}
@media (max-width:767px){
  .news .grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
}
.grid.fade-out{ opacity:0; }
.grid.fade-in{ opacity:1; }

.news .grid > *{
  display:contents;
  min-width:0;
}
@supports not (display: contents){
  .news .grid > *{ display:block; width:100%; min-width:0; }
}

/* ===========================
   Tarjeta
   =========================== */
.news .card{
  grid-column:auto;
  width:100% !important;
  max-width:none !important;
  min-width:0; box-sizing:border-box;
  position:relative; overflow:hidden; border-radius:12px;
  background:#fff;
  min-height:280px; /* ✅ altura mínima consistente */
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:var(--shadow); isolation:isolate;
}
.news .card--wide{ grid-column:1 / -1; min-height:220px; }
@media (max-width:767px){ .news .card--wide{ grid-column:auto; } }

.card__img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(110%) brightness(.9); transform:scale(1.02); transition:transform .35s ease;
}
.card::after{ content:""; position:absolute; inset:0; background:#fff; z-index:0; }
.card:hover .card__img{ transform:scale(1.06); }

.card__body{
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:20px; position:relative; z-index:1; height:100%; min-width:0;
}
.card__body h3{ color:#6A6A6A; font-weight:bold; }

.pills{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.pill{
  font-size:.72rem; background:#D1CE0533; color:#8D8B06; border:1px solid #D1CE0533;
  padding:4px 8px; border-radius:999px; text-transform:uppercase; font-weight:400;
}
.pill--brand{ background:#F0F0EF; color:#9D9D9C; border-color:#F0F0EF; }


 
/*--------- Responsive texto ------*/

@media (max-width:767px){

        .card h3{
        font-size:15px !important; 
      }

      .card p, .card p strong, .card p {
            font-size: 13px !important;


        }
  
  
  .pills {
    display: flex;
    justify-content: center;
}


      

  }

.card h3{
  color:#6A6A6A; font-family:Montserrat, sans-serif; font-weight:700;
  text-decoration:none; text-transform:none; font-size:20px !important; margin-bottom:1px;
}
.card p{ color:#6A6A6A !important; }
.card p, .card p strong, .card p b{
  color:#6A6A6A !important; font-weight:400 !important; font-style:normal !important; text-decoration:none !important;
}

.card__title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:8px;
  overflow-wrap:anywhere; word-break:break-word;
}
.card__excerpt{
  color:#6A6A6A !important; font-size:15px; font-weight:400; font-family:'Montserrat', sans-serif;
  margin-top:5px !important; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere; word-break:break-word;
}
.card__excerpt h3, .card__excerpt strong{
  all:unset; color:#6A6A6A !important; font-family:'Montserrat', sans-serif;
  font-weight:400; font-size:15px !important; display:inline;
}

.card__cta{
  position:absolute; right:20px; bottom:8px; width:33px; height:33px;
  border-radius:999px; border:0; z-index:10; display:grid; place-items:center;
  background:#C7CD24; transition:transform .2s, background .2s, border-color .2s;
}

/* ===========================
   Paginación
   =========================== */
.pager{ display:flex; align-items:center; gap:12px; justify-content:center; margin:18px 0 0; }
.pager button, .pager span{
  min-width:32px; display:grid; place-items:center; border-radius:2px; border:1px solid #D7D7D7;
  background:#fff; color:#9D9D9C; cursor:pointer; font-weight:600;
}
.pager .is-active{ background:#fff; border-color:#0A67B1; color:#9D9D9C; }
.pager .arrow{ font-size:18px; line-height:1; }

/* ✅ Estilos específicos para next y prev */
.pager__btn:first-child,
.pager__btn:last-child {
  background-color: #C7CD24 !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
}
.pager__btn:first-child:hover,
.pager__btn:last-child:hover {
  background-color: #AEB51F !important;
}

/* Botones intermedios */
.pager__btn {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  color: #333;
  padding: 8px 12px;
  border-radius: 3px;
  transition: all 0.2s ease;
}
.pager__btn[aria-current="page"] {
  background-color: #C7CD24;
  color: #fff;
  border-color: #C7CD24;
}
.pager__btn:hover:not([aria-current="page"]):not(:first-child):not(:last-child) {
  background-color: #e8e8e8;
}

/* Ocultar cards sin quitarlas del DOM */
.card.is-hidden{ display:none; }


/* --- Ajuste para que nada se salga del contenedor en móvil --- */
@media (max-width: 767px) {

  /* Forzar que el layout no cree scroll horizontal */
  body, html {
    overflow-x: hidden;
  }

  .news__layout {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0 10px; /* pequeño padding lateral para evitar corte */
    box-sizing: border-box;
  }

  .left-column,
  .filter,
  .right-column,
  .news .grid,
  .news .card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Si hay algo posicionado absoluto, que no rompa el ancho */
  [style*="position:absolute"] {
    max-width: 100% !important;
  }

  /* Evita que el grid cause overflow */
  .news .grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
    justify-items: center;
  }

  /* Las cards no deben tener width extra */
  .news .card {  
    width: 100% !important; 
    margin: 0 auto;  
  } 
}







 

/* Evitar que el CTA tape el texto */ 
.card__body {
  padding-bottom: 17px !important;
}  

/* Aumenta si tienes textos más largos */
@media(max-width: 768px){
  .card__body {
    padding-bottom: 60px !important;
  }
}