/* ===== Nuevas estilos - fila (desktop) / columna (mobile) - botones ===== */

.bases{
  display: flex;
  flex-direction: column;
  gap: 16px;


  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

/* Imagen */
.bases .promociones_img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;    
}


.bases .con_tit{
  display: flex;
  flex-direction: column;   
  gap: 14px;
}

.bases .con_tit h4{
  margin: 0;
}

/* ===== Desktop ===== */
@media (min-width: 930px){
  .bases{
    flex-direction: row;    
    align-items: center;
    gap: 60px;
  }

  /* Columna imagen */
  .bases .promociones_img{
    flex: 0 0 520px;      
    max-width: 520px;
  }

  
  .bases .con_tit{
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;  
    align-items: flex-start; 
    justify-content: center;
    gap: 16px;
  }

  .bases .con_tit h4{
    margin: 0;
    text-align: left;      
    width: 100%;
  }

  .bases .cont_btn{
    margin-top: 0;
  }
}


/* ===== Mobile fine-tuning (opcional) ===== */
@media (max-width: 929px){
  .bases .cont_btn a{
    width: fit-content; 
  }
}






/* ===== Base común para ambos botones ===== */
.btn-action{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 22px;
  border-radius: 14px;

  font-size: 16px;
  font-weight: 600;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;

  transition: all .2s ease;
}

/* ===== Botón Ver Legal (outline) ===== */
.btn-legal{
  background: #ffffff;
  border: 2px solid #c7d2de;
  color: #0b1b2b;
}

.btn-legal:hover{
  background: #f3f6fa;
}

/* Icono info */
.btn-legal .icon-info{
  width: 20px;
  height: 20px;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #0b1b2b;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

/* ===== Botón Ganadores (solid naranja) ===== */
a.btn-ganadores{
  background: #f58220;
  border: 2px solid #f58220;
  color: #ffffff !important;
}

a.btn-ganadores:hover{
  background: #e56f12;
  border-color: #e56f12;
}





.encuestas{
  display: flex;
  flex-direction: column;  
  gap: 16px;


  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}


.encuestas .promociones_img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;    
}


.encuestas .con_tit{
  display: flex;
  flex-direction: column;  
  gap: 14px;
}

.encuestas .con_tit h4{
  margin: 0;
}

/* ===== Desktop ===== */
@media (min-width: 930px){
  .encuestas{
    flex-direction: row;     
    align-items: center;
    gap: 60px;
  }

 
  .encuestas .promociones_img{
    flex: 0 0 520px;      
    max-width: 520px;
  }

  
  .encuestas .con_tit{
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;  
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
  }

  .encuestas .con_tit h4{
    margin: 0;
    text-align: left;       
    width: 100%;
  }

  .encuestas .cont_btn{
    margin-top: 0;
  }
}


/* ===== Mobile fine-tuning (opcional) ===== */
@media (max-width: 929px){
  .encuestas.cont_btn a{
    width: fit-content; 
  }
}


.encuestas{
  display: flex;
  flex-direction: column;   /* mobile */
  gap: 16px;
}

/* Título con icono */
.encuestas h3{
  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 2rem;
  font-weight: 800;
  color: var(--GrisMasOscuro);
}

.encuestas h3 img{
  width: 32px;
  height: auto;
  flex-shrink: 0;
}

/* Botón Bases */
.encuestas a{
  align-self: flex-start;

  padding: 14px 28px;
  border-radius: 14px;

  font-size: 1.1rem;
  font-weight: 600;

  color: var(--GrisMasOscuro);
  text-decoration: none;

  border: 2px solid var(--GrisMedio);
  background: var(--Blanco);

  transition: all .2s ease;
}

.encuestas a:hover{
  background: var(--CelesteClaro);
}

/* ===== Desktop ===== */
@media (min-width: 930px){
  .encuestas{
    flex-direction: row;     
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }

  .encuestas h3{
    margin: 0;
  }

  .encuestas a{
    align-self: center;        
  }
}