/* ==========================================================
   STYLE CUSTOM – ISFDyT Nº46
   Extraído de estilos inline funcionales
   Objetivo: separar estilo sin romper nada
========================================================== */

/* ==========================================================
   BASE
========================================================== */
body {
  padding-top: 140px;
}
/* ===== BASE NECESARIA PARA QUE LAS SECCIONES SE VEAN ===== */
section {
  position: relative;
}

.container {
  position: relative;
}

section{
  scroll-margin-top:150px;
}
/* ==========================================================
   TOP BAR
========================================================== */
#topbar{
  background:#1f6fb2;   /* tu azul */
  color:#ffffff;
  font-size:14px;
}

#topbar a{
  color:#ffffff;
  text-decoration:none;
  padding:4px 8px;
}

#topbar a:hover{
  text-decoration:underline;
}

/* info (mail, tel, ig) */
#topbar .topbar-info span{
  font-size:14px;
  white-space:nowrap;
}

/* comportamiento en pantallas chicas */
@media (max-width:768px){

  #topbar{
    text-align:center;
  }

  #topbar .topbar-info{
    justify-content:center;
    gap:10px;
    margin-top:5px;
  }

  #topbar .cta{
    justify-content:center;
    margin-top:5px;
  }

}
/* ========================================================== */


.cta a {
  background: #ffc107;
  color: #000000;
  font-weight: 600;
  border-radius: 20px;
  padding: 6px 16px;
  text-decoration: none;
  margin-left: 6px;
}
.topbar{
  background:#2e6da4;
  color:white;
  font-size:14px;
}

.topbar a{
  font-size:13px;
  font-weight:500;
  padding:6px 12px;
  border-radius:20px;
}

/* en pantallas chicas los botones pasan abajo */
@media (max-width:768px){

  .contact-info{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .top-buttons{
    width:100%;
    justify-content:center;
  }

}


/* ==========================================================
   HEADER / MENÚ PRINCIPAL
========================================================== */
#header {
  background: #145a96;
}

#header .nav-link {
  color: #ffffff;
  font-weight: 600;
  padding: 12px 14px;
}

#header .nav-link:hover {
  text-decoration: underline;
}

/* ==========================================================
   DROPDOWNS
========================================================== */
.dropdown-menu {
  border-radius: 14px;
  border: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  padding: 10px 0;
  font-size: 14px;
}

.dropdown-item {
  padding: 8px 20px;
}

.dropdown-item:hover {
  background: #f1f5f9;
}

/* Dropdown hover desktop */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}

/* ==========================================================
   HERO
========================================================== */
#hero img {
  max-height: 420px;
  object-fit: cover;
}

.hero-title {
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 1.6rem;
  margin-bottom: 20px;
  text-align: center;
}

/* ==========================================================
   PRICING / NOTICIAS  (PATRÓN BASE)
========================================================== */

/* Aseguramos el espaciado de las tarjetas contenedoras */
.pricing .box {
  padding: 20px !important; /* Mantenemos este valor */
  background: #fff !important;
  text-align: center !important;
  box-shadow: 0px 0 20px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e1e7ec !important;
  border-radius: 8px !important;
  position: relative !important;
  overflow: hidden !important; /* Importante para las esquinas redondeadas */
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important; /* Forzamos altura igual para todas */
}

/* --- ESTILO DEL H3 (FRANJA GRIS AZULADA) --- */
.pricing .box h3 {
  background: #f3f6fa !important; /* El color gris claro de fondo */
  
  /* Márgenes negativos laterales e inferior */
  /* El -20px debe ser igual al padding de la box para llegar al borde */
  margin: -20px -20px 20px -20px !important; 
  
  /* Padding interno del texto para que respire dentro de la franja */
  padding: 15px 10px !important;
  
  /* Borde inferior metálico */
  border-bottom: 1px solid #e1e7ec !important;
  
  /* Estilo de la letra */
  color: #0b5ed7 !important; /* Azul institucional */
  font-size: 18px !important;
  font-weight: bold !important;
  font-family: "Raleway", sans-serif !important;
  text-transform: none !important; /* Evitamos mayúsculas forzadas */
}

/* Ajustes para el contenido (p, ul, imágenes) */
.pricing .box p,
.pricing .box ul,
.pricing .box .d-block.mt-2 {
  text-align: left !important; /* Alineamos contenido a la izquierda */
  font-size: 14px !important;
  line-height: 20px !important;
  margin-top: 10px !important;
}

.pricing .box ul {
  list-style: none !important; /* Quitamos viñetas */
  padding: 0 !important;
}

/* Botón "Ver más" siempre abajo */
.pricing .btn-buy {
  background: #1977cc !important;
  display: inline-block !important;
  padding: 8px 25px !important;
  border-radius: 50px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: 0.3s !important;
  text-decoration: none !important;
  margin-top: auto !important; /* Empuja el botón abajo */
}

.pricing .btn-buy:hover {
  background: #145a96 !important;
}

/* Etiquetas "Importante" (Dobladas en la esquina) */
.pricing .advanced, 
.pricing .advancedRed {
  width: 200px !important;
  position: absolute !important;
  top: 18px !important;
  right: -68px !important;
  transform: rotate(45deg) !important;
  z-index: 1 !important;
  font-size: 13px !important;
  padding: 1px 0 3px 0 !important;
  font-weight: bold !important;
  color: #fff !important;
  text-align: center !important;
}

.pricing .advanced { background: #1977cc !important; }
.pricing .advancedRed { background: #e43c5c !important; }

/* Ajuste de imágenes para que no desborden */
.pricing .box img {
  border-radius: 4px !important;
  margin-bottom: 10px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Espaciado entre filas (mt-4) */
.pricing .row > div {
  margin-bottom: 30px !important;
}


/* ==========================================================
   ENLACES — mismo patrón que `.portfoio #portfolio-flters`
   HTML: <section class="icon-boxes">
========================================================== */

/* ENCABEZADO DE LA SECCION */
.icon-boxes .section-title{
text-align:center;
margin-bottom:30px;
}

.icon-boxes .section-title h2{
font-size:36px;          /* mas chico */
font-weight:600;
letter-spacing:1px;
color:#2c3e50;
margin-bottom:10px;
}

/* texto debajo del titulo (si lo usas) */
.icon-boxes .section-title p{
font-size:13px;
color:#777;
margin:0;
}

/* TITULO DE CADA CARD */
.icon-boxes .title{
font-size:14px;          /* mas chico */
font-weight:600;
margin:10px 0;
color:#34495e;
}

/* TEXTO DESCRIPTIVO */
.icon-boxes .description{
font-size:12px;          /* mas chico */
line-height:1.5;
color:#666;
}

/* ICONO */
.icon-boxes .icon i{
font-size:26px;          /* icono mas elegante */
color:#f39c12;
margin-bottom:8px;
}

/* CAJA */
.icon-boxes .icon-box{
padding:20px;
border-radius:10px;
background:white;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
transition:0.3s;
}

.icon-boxes .icon-box:hover{
transform:translateY(-4px);
box-shadow:0 8px 25px rgba(0,0,0,0.15);
}


/* ==========================================================*/
/* ==========================================================
   CARRERAS – ajuste fino sin exagerar tamaños
   HTML: <section id="portfolio" class="portfoio">
========================================================== */

.portfoio #portfolio-flters {
  padding: 0;
  margin: 0 auto 25px auto;
  list-style: none;
  text-align: center;
  border-radius: 50px;
}

.portfoio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 18px 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #444;
  margin: 0 3px 10px;
  transition: all 0.3s ease-in-out;
  border-radius: 50px;
}

.portfoio #portfolio-flters li:hover,
.portfoio #portfolio-flters li.filter-active {
  color: #fff;
  background: #0880e8;
}

.portfoio .portfolio-item {
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
}

.portfoio .portfolio-item img {
  position: relative;
  top: 0;
  transition: all 0.6s cubic-bezier(0.645,0.045,0.355,1);
}

.portfoio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: -50px;
  z-index: 3;
  transition: all 0.3s ease-in-out;
  background: #0880e8;
  padding: 15px 20px;
}

.portfoio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
}

.portfoio .portfolio-item .portfolio-info p {
  color: #fff;
  font-size: 14px;
  margin-bottom: 0;
}

.portfoio .portfolio-item:hover img {
  top: -30px;
}

.portfoio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}
/* ===============================
   PORTFOLIO ajuste tarjeta
================================ */

/* caja azul */
.portfolio .portfolio-info{
  padding:15px 18px;     /* antes era muy grande */
  min-height:auto;       /* evita que quede tan alta */
}

/* titulo */
.portfolio .portfolio-info h4{
  font-size:18px;
  margin-bottom:4px;
}

/* texto duración */
.portfolio .portfolio-info p{
  font-size:14px;
  margin-bottom:0;
}

/* link (icono cadena) en blanco */
.portfolio .portfolio-info a{
  color:#fff !important;
  font-size:20px;
}

/* hover del icono */
.portfolio .portfolio-info a:hover{
  color:#e6e6e6 !important;
}



/* ===============================
   ajuste SOLO franja azul
================================ */

/* caja azul */
.portfoio .portfolio-item .portfolio-info{
  padding:10px 14px;   /* mas compacto */
}

/* titulo */
.portfoio .portfolio-item .portfolio-info h4{
  font-size:16px;
  margin-bottom:2px;
}

/* texto duración */
.portfoio .portfolio-item .portfolio-info p{
  font-size:13px;
  margin-bottom:0;
}

/* icono link */
.portfoio .portfolio-item .portfolio-info a{
  color:#fff !important;
  font-size:14px;   /* icono mas chico */
  top:10px;
}

/* hover icono */
.portfoio .portfolio-item .portfolio-info a:hover{
  color:#e6e6e6 !important;
}
/* ===============================
   TEAM - estilo prolijo
================================ 
*/

.team .member{
  background:#fff;
  padding:20px;
  border-radius:12px;

  box-shadow:0 8px 20px rgba(0,0,0,0.12);

  transition:0.3s;

  display:flex;
  align-items:center;
}

.team .member:hover{
  transform:translateY(-6px);

  box-shadow:0 18px 45px rgba(0,0,0,0.18);
}
/* contenedor imagen */
.team .pic{
  width:110px;
  height:110px;
  min-width:110px;
  border-radius:50%;
  overflow:hidden;
  margin-right:20px;
}

/* imagen */
.team .pic img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.4s;
}

/* zoom suave */
.team .member:hover .pic img{
  transform:scale(1.08);
}

/* nombre */
.team .member-info h4{
  font-size:18px;
  font-weight:600;
  margin-bottom:5px;
}

/* cargo */
.team .member-info span{
  display:block;
  font-size:14px;
  color:#6c757d;
  font-style:italic;
}
/* ===============================
   CTA - galeria instituto
================================ */

#cta{
  padding:60px 0;
}

/* centra el bloque del slider */
#cta .col-lg-9{
  margin:auto;
  float:none;
}

/* tamaño de la ventana del carrusel */
#cta .bx-wrapper{
  margin:0 auto;
  max-width:900px;   /* cambiar este valor agranda o achica */
  border:none;
  box-shadow:none;
  background:none;
}

/* tamaño de las imagenes */
#cta .bxslider img{
  width:100%;
  height:490px;      /* altura visible */
  object-fit:cover;
  border-radius:6px;
}

/* circulos de navegacion */
.bx-wrapper .bx-pager{
  margin-top:15px;
  text-align:center;
}

.bx-wrapper .bx-pager.bx-default-pager a{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#d0d0d0;
  margin:0 4px;
  display:inline-block;
}

.bx-wrapper .bx-pager.bx-default-pager a.active{
  background:#05579e;
}

/* ===============================
   CTA - galeria instituto
================================ */

#cta{
  padding:60px 0;
}

/* centra el bloque del slider */
#cta .col-lg-9{
  margin:auto;
  float:none;
}

/* tamaño de la ventana del carrusel */
#cta .bx-wrapper{
  margin:0 auto;
  max-width:900px;   /* cambiar este valor agranda o achica */
  border:none;
  box-shadow:none;
  background:none;
}

/* tamaño de las imagenes */
#cta .bxslider img{
  width:100%;
  height:490px;      /* altura visible */
  object-fit:cover;
  border-radius:6px;
}

/* circulos de navegacion */
.bx-wrapper .bx-pager{
  margin-top:15px;
  text-align:center;
}

.bx-wrapper .bx-pager.bx-default-pager a{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#d0d0d0;
  margin:0 4px;
  display:inline-block;
}

.bx-wrapper .bx-pager.bx-default-pager a.active{
  background:#05579e;
}
/* =====================================
   SERVICES - FIX PARA IMAGENES
===================================== */

.services .icon-box img{
width:100%;
height:140px;
object-fit:cover;
margin-top:10px;
border-radius:6px;
}

/* tarjetas secciones */

.card-seccion{
border:1px solid #ddd;
border-radius:8px;
padding:12px;
margin-bottom:30px;
text-align:center;
background:#fff;
}

.card-seccion h4{
font-size:16px;
margin-bottom:10px;
}

.card-seccion img{
width:100%;
height:160px;
object-fit:cover;
border-radius:6px;
}
/* titulo */
.titulo-secciones{
text-align:center;
margin-bottom:40px;
font-weight:600;
}

/* tarjeta */
.card-seccion{
background:#fff;
border-radius:10px;
padding:14px;
margin-bottom:30px;

border:1px solid #e5e5e5;

/* sombra suave */
box-shadow:0 4px 18px rgba(0,0,0,0.08);

transition:0.25s;
}

/* efecto al pasar mouse */
.card-seccion:hover{
transform:translateY(-4px);
box-shadow:0 10px 28px rgba(0,0,0,0.15);
}

/* titulo */
.card-seccion h4{
font-size:17px;
margin-bottom:12px;
color:#333;
}

/* imagen */
.card-seccion img{
width:100%;
height:190px;
object-fit:cover;

border-radius:8px;

/* marco interno tipo ventana */
border:3px solid #f8f8f8;
}
/* ===== SECCIONES diseño final ===== */

.secciones{
padding:60px 0;
}

/* titulo */
.titulo-secciones{
text-align:center;
margin-bottom:45px;
font-weight:600;
color:#222;
}

/* tarjeta */
.card-seccion{
background:#ffffff;
border-radius:12px;
padding:16px;
margin-bottom:35px;

border:1px solid #e9e9e9;

box-shadow:0 6px 22px rgba(0,0,0,0.07);

transition:all 0.25s ease;
}

/* hover elegante */
.card-seccion:hover{
transform:translateY(-6px);
box-shadow:0 14px 35px rgba(0,0,0,0.15);
}

/* titulo */
.card-seccion h4{
font-size:18px;
margin-bottom:14px;
color:#2c2c2c;
font-weight:600;
}

/* imagen */
.card-seccion img{
width:100%;
height:200px;
object-fit:cover;

border-radius:10px;

/* marco tipo ventana */
border:4px solid #f5f5f5;

transition:0.3s;
}

/* pequeño zoom */
.card-seccion:hover img{
transform:scale(1.03);
}

/* responsive */
@media (max-width:768px){

.card-seccion img{
height:180px;
}

}

/* ==========================================================
   CONTACT – original style.css
   HTML: <section id="contact" class="contact">
========================================================== */

.contact {
  position: relative;
  background: url('../img/lamataza2.png') fixed center center;
}

.contact::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.7);
}

.contact .container {
  position: relative;
}

/* info */
.contact .info {
  width: 100%;
}

/* íconos */
.contact .info i {
  font-size: 20px;
  background: #0880e8;
  color: #fff;
  float: left;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

/* títulos */
.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #043c6d;
}

/* texto */
.contact .info p {
  padding: 0 0 0 60px;
  margin-bottom: 0;
  font-size: 14px;
  color: #444;
}

.contact .info .email,
.contact .info .phone {
  margin-top: 40px;
}
/* ==========================================================
   FOOTER – original style.css
   HTML: <footer id="footer">
========================================================== */

#footer {
  background: #05579e;
  padding: 0 0 30px 0;
  color: #fff;
  font-size: 14px;
}

#footer .footer-top {
  background: #065fad;
  padding: 60px 0 30px 0;
}

#footer .footer-top .section-title h6 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 24px;
  margin: 0;
}

/* ===============================
   QUIENES SOMOS
================================ */

.quienes{
  padding:60px 0;
}

.quienes p{
  text-align:justify;
  margin-bottom:18px;
  line-height:1.7;
  font-size:16px;
  color:#444;
}

/* bloque de imagen */
.logo-historico{
  margin:35px 0;
}

/* imagen */
.logo-historico img{
  max-width:220px;
  border-radius:10px;
  box-shadow:0 4px 18px rgba(0,0,0,0.15);
  padding:10px;
  background:white;
}

/* texto debajo de la imagen */
.logo-caption{
  margin-top:10px;
  font-size:14px;
  color:#0d6efd;
  font-weight:600;
}

/* mejora titulo de seccion */
.quienes .section-title h2{
  margin-bottom:25px;
}

/* ==========================================================
   Frequently Asked Questions – original style.css
   HTML: <section id="faq" class="faq section-bg">
========================================================== */

/* contenedor */
.faq .faq-list {
  padding: 0 100px;
}

/* lista */
.faq .faq-list ul {
  padding: 0;
  list-style: none;
}

/* items */
.faq .faq-list li {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  position: relative;
}

.faq .faq-list li + li {
  margin-top: 15px;
}

/* pregunta (link) */
.faq .faq-list a {
  display: block;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 15px;          /* tamaño correcto */
  font-weight: 500;
  line-height: 22px;
  padding: 0 30px;
  outline: none;
  cursor: pointer;
  color: #343a40;
}

/* icono de pregunta */
.faq .faq-list .icon-help {
  font-size: 24px;
  position: absolute;
  left: 20px;
  top: 20px;
  color: #75bdfa;
}

/* iconos abrir / cerrar */
.faq .faq-list .icon-show,
.faq .faq-list .icon-close {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
}

/* respuesta */
.faq .faq-list p {
  margin-bottom: 0;
  padding: 10px 0 0 0;
  font-size: 15px;          /* MISMO TAMAÑO que la pregunta */
  line-height: 22px;
  font-family: "Open Sans", sans-serif;
}

/* estados */
.faq .faq-list .icon-show {
  display: none;
}

.faq .faq-list a.collapsed {
  color: #343a40;
}

.faq .faq-list a.collapsed:hover {
  color: #0880e8;
}

.faq .faq-list a.collapsed .icon-show {
  display: inline-block;
}

.faq .faq-list a.collapsed .icon-close {
  display: none;
}

/* responsive */
@media (max-width: 1200px) {
  .faq .faq-list {
    padding: 0;
  }
}
``