/* =============================================================
   responsive.css — Ajustes finos por punto de quiebre
   (los grids principales ya son responsive en style.css;
   aquí van los detalles de espaciado, tamaño y jerarquía)
   ============================================================= */

/* Tablet grande */
@media (max-width:1080px){
  .contenedor{padding:0 24px}
  .banda-cta{padding:48px}
}

/* Tablet */
@media (max-width:820px){
  .seccion{padding:64px 0}
  .encabezado{margin-bottom:36px}
  .banda-cta{flex-direction:column;text-align:center;align-items:flex-start;padding:40px}
  .pie .malla-pie{margin-bottom:34px}
}

/* Móvil */
@media (max-width:600px){
  .hero-contenido{padding:150px 0 90px}
  .hero .lead{font-size:1.05rem}
  .hero-acciones{flex-direction:column;align-items:stretch}
  .hero-acciones .btn{width:100%}
  .banda-cta{align-items:stretch;text-align:left}
  .banda-cta .btn{width:100%}
  .social-flotante{right:14px;bottom:14px}
  .social-flotante a{width:42px;height:42px}
  .pie-inferior{flex-direction:column;text-align:center}
}

/* Móvil pequeño */
@media (max-width:380px){
  .contenedor{padding:0 18px}
  .marca .texto-marca span{display:none}
}