/*=================================================
=============== ELEMENTOS OCULTOS =================
=================================================*/
#recuadro-contacto-wrapper{
    display: none; /* No se muestra el recuadro de contacto sino el de "Llámanos aquí" */
}

#cuadros-internas-wrapper{
    display: none;
}


:root{
  --tl-primary: #F14E32;
  --tl-primary-hover: #D33C1E;
  --tl-accent: #208EB0;
  --tl-text: #2B2B2B;
  --tl-muted: #646464;
  --tl-shadow: 0px 2px 6px rgba(0,0,0,0.25);
  --tl-radius: 12px;
}

/* -------- Banner ------ */
.contenedorBanner{
  background-image: url(/media/web/banner_partner_2.jpg);

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 420px;
  position: relative;
}
/* Overlay blanco translúcido para “apagar” un poco la imagen */
.contenedorBanner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .10); /* ajusta opacidad según gusto */
  pointer-events: none;
}

.contenedorBanner h1{
  font-family: 'Roboto';
  font-weight: 600;
  line-height: 47px;
  color: #2B2B2B;
  max-width: 840px;
  position: relative;
  top: 190px;
  left: 135px;
}

@media (max-width:500px){
  .contenedorBanner{ min-height: 300px; }
  .contenedorBanner h1{
    font-size: 30px;
    line-height: 37px;
    left: 24px;
    top: 150px;
    max-width: 90%;
  }
}

/* -------- Intro + CTA superior -------- */
.contenedor-boton-subtexto{
  width: 95%;
  max-width: 1350px;
  margin: 60px auto 0 auto;

  display: flex;
  flex-wrap: wrap;
  gap: 24px;

  justify-content: center;   /* centramos el contenido */
  align-items: center;
  text-align: center;        /* el propio contenedor ya centra su texto */
}

.boton-inicial a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  height: 54px;

  background: var(--tl-primary);
  color: #fff;
  text-decoration: none;

  font-family: 'Roboto';
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;

  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
}

.boton-inicial a:hover{ background: var(--tl-primary-hover); }

.subTexto p,
.util-italic{
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 21px;
  color: var(--tl-muted);
   margin: 0 auto; 
  text-align: center; 
  max-width: 800px;
}

@media (max-width:992px){
  .contenedor-boton-subtexto{
    flex-direction: column;
    text-align: center;
  }
  .subTexto p{ text-align: center; }
}

@media (max-width:500px){
  .subTexto p,
  .util-italic{
    font-size: 15px;
    line-height: 18px;
  }
  .boton-inicial a{
    height: 50px;
    font-size: 16px;
    line-height: 19px;
    width: 100%;
    max-width: 260px;
  }
}

/* -------- Títulos de sección -------- */
#listado-partners h2,
.container-fluid .row.justify-content-center h2{
  font-family: 'Roboto';
  font-weight: 600;
  font-size: 40px;
  line-height: 47px;
  text-align: center;
  color: #2B2B2B;
  margin: 0;
}

@media (max-width:500px){
  #listado-partners h2,
  .container-fluid .row.justify-content-center h2{
    font-size: 25px;
    line-height: 32px;
  }
}

/* -------- Listado de partners -------- */
#listado-partners .row.mt-3{ margin-top: 1rem !important; }

#listado-partners .tarjeta-partner{
  background: #fff;
  border: 0;                    /* quitamos borde default card */
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}

#listado-partners .tarjeta-partner:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Cabecera visual del logo dentro de .ratio */
#listado-partners .tarjeta-partner .ratio{
  background: #F8F9FA; /* bg-light */
  border-top-left-radius: var(--tl-radius);
  border-top-right-radius: var(--tl-radius);
}

/* Por si el proyecto no trae util de object-fit */
.object-fit-contain{ object-fit: contain; }

/* Contenidos card */
#listado-partners .tarjeta-partner .card-body{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

#listado-partners .tarjeta-partner .card-title{
  font-family: 'Roboto';
  font-weight: 700;
  font-size: 20px;
  line-height: 23px;
  color: var(--tl-text);
  margin: 0 0 .25rem 0;
}

#listado-partners .tarjeta-partner .card-text{
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--tl-muted);
  margin: 0 0 .5rem 0;

  /* segurar altura razonable si meten tochos (front) */
  overflow: hidden;
}

/* === Normaliza TODOS los <a class="btn"> de esta página === */
#listado-partners .tarjeta-partner .btn,
.partners-cta-final .btn,
.boton-inicial a{
  display: inline-flex;           /* como el que sí se ve bien */
  align-items: center;             /* centra vertical */
  justify-content: center;         /* centra horizontal */
  border-radius: 20px;
  line-height: 1;                
}

/* Botón de tarjeta: tamaño y tipografía coherentes */
#listado-partners .tarjeta-partner .btn{
  min-height: 44px;                  /* en vez de height fija */
  padding: 0 16px;                 
  font-family: 'Roboto';
  font-weight: 600;
  font-size: 16px;
}

/* Respeta tu color corporativo para outline-primary */
#listado-partners .tarjeta-partner .btn-outline-primary{
  --bs-btn-color: #208EB0;
  --bs-btn-border-color: #208EB0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #208EB0;
  --bs-btn-hover-border-color: #208EB0;
}

/* CTA final grande (misma solución que el botón inicial) */
.partners-cta-final .btn-primary.btn-lg{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 54px;                  /* en vez de height */
  padding: 0 24px;
  line-height: 1;

  background: #F14E32;
  border-color: #F14E32;
  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);

  font-family: 'Roboto';
  font-weight: 600;
  font-size: 18px;
}

.partners-cta-final .btn-primary.btn-lg:hover{
  background: #D33C1E;
  border-color: #D33C1E;
}

/* Alert vacío */
#listado-partners .alert{
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow);
  font-family: 'Roboto';
  font-size: 16px;
  line-height: 26px;
  color: var(--tl-muted);
}

/* -------- CTA final (usa estructura de tu TPL) -------- */
.container-fluid .row.justify-content-center .btn-primary.btn-lg{
  background: var(--tl-primary);
  border-color: var(--tl-primary);
  border-radius: 20px;

  font-family: 'Roboto';
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;

  height: 54px;
  padding: 0 24px;
  box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
}

.container-fluid .row.justify-content-center .btn-primary.btn-lg:hover{
  background: var(--tl-primary-hover);
  border-color: var(--tl-primary-hover);
}

/* Separadores inline del TPL (altura en vw) no se tocan */

/* -------- Ajustes responsivos de grilla -------- */
@media (max-width:710px){
  #listado-partners .row.g-4{ --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
}

@media (max-width:500px){
  #listado-partners .tarjeta-partner .card-title{
    font-size: 18px; line-height: 22px;
  }
  #listado-partners .tarjeta-partner .card-text{
    font-size: 14px; line-height: 22px;
  }
}

/* -------- Utilidad extra por coherencia visual -------- */
a{ color: var(--tl-accent); } /* links informativos como en otras internas */


/* === Limitar ancho como en el resto de internas === */
#listado-partners{
  width: 95%;
  max-width: 1600px;   
  margin-left: auto;
  margin-right: auto;
}

/* El CTA final del TPL ya tiene la clase; solo falta acotarlo */
.partners-cta-final{
  width: 95%;
  max-width: 1350px;
  margin-left: auto;
  margin-right: auto;
}