*{font-family: 'Open Sans', sans-serif;}

body{ background-color: #182c45/*#424d5f #080f1b*/; color: #e1e1e1;
background-image: url(../images/bg02.jpeg); background-attachment: fixed; background-size: cover;}
hgroup h1{ padding: 0; margin: 0 0 32px 0;}
hgroup h2{ font-size: 18px; font-weight: lighter; margin-top: 8px;}
hgroup hr{ width: 30%; margin: auto; border-top: 3px solid; border-radius: 20px;}

a img:hover{ box-shadow: 1px 2px 8px rgba(0,0,0,0.5); transform: scale(1.02);}
a .figure .figure-caption{ font-size: 14px; line-height: 17px; color: #ccc}
a .figure .figure-caption b{ font-size: 18px; color: #f1f1f1}

a .figure .figure-img{ border: 2px solid rgba(255,255,255,0.4)}


.card-body.img-oso h5{
  background-image: url(../images/oso.png);
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: 56px;
}

.card-body.img-lapiz h5{
  background-image: url(../images/lapiz.png);
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: 56px;
}
.card-body h5{
  color: #182c45;
  margin-bottom: 24px;
}
h5::after {
  content: " ";
  background-color: #1958b7;
  height: 3px;
  width: 150px;
  display: block;
  margin-top: 10px;
  margin-bottom: 30px;
}
.card-header{
  background-color: #2b3fb0; color:#e1e1e1; 
}
.card-header h4{font-size: 21px; margin: 0; padding: 0;}
.card-body{
  color: #222222;
  background-image: url("https://institutopascal.cl/images/back-textura.jpg");
    background-repeat: repeat;
    background-size: contain;
    background-attachment: fixed;
}
.card-body ul{ padding-bottom: 36px; }


.card-body ul.img-pascal{
  background-image: url(../images/pascal.png);
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: 130px;
}

/*COLORES REDES*/
.fa-tiktok{color:#212121}
.fa-instagram{color:#ac109b}
.fa-square-facebook{color:#343fb4}
.fa-youtube{ color:#c6002c}

/* ══════════════════════════════════
   BOTONES DE SECCIÓN (Uniforme, Tablet…)
══════════════════════════════════ */
.botones-utiles{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; max-width: 640px; margin: 0 auto;
}
.botones-utiles .btn{
  border-radius: 30px; padding: 10px 26px; font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease;
}
.botones-utiles .btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }

/* Espacio entre tarjetas de curso */
.figure{ margin-bottom: 26px; }

/* Resalte de toque discreto */
*{ -webkit-tap-highlight-color: rgba(255,255,255,0.10); }

/* ══════════════════════════════════
   OPTIMIZACIÓN MÓVIL
══════════════════════════════════ */
@media (max-width: 575.98px){
  /* Cursos en 2 columnas en vez de imágenes enormes apiladas */
  .row > [class*="col-"]:has(.figure){
    flex: 0 0 50%; max-width: 50%; padding-left: 8px; padding-right: 8px;
  }
  .figure{ margin-bottom: 18px; }
  a .figure .figure-caption{ font-size: 13px; line-height: 16px; }
  a .figure .figure-caption b{ font-size: 16px; }

  /* Cabecera más compacta */
  hgroup.p-5{ padding: 1.75rem 1rem !important; }
  hgroup img[alt="INSTITUTO PASCAL"]{ width: 160px !important; margin-bottom: 1.5rem !important; }

  /* Botones a ancho cómodo y táctil */
  .botones-utiles{ gap: 10px; }
  .botones-utiles .btn{ flex: 1 1 42%; padding: 11px 14px; }

  h4{ font-size: 1.15rem; }

  /* En táctil evita el hover de zoom "pegado" en las imágenes */
  a img:hover{ transform: none; box-shadow: none; }
  .botones-utiles .btn:hover{ transform: none; box-shadow: none; }
  .botones-utiles .btn:active{ transform: scale(0.97); }
}