body {
      margin: 0;
      font-family: 'Open Sans', sans-serif;
      background-color: #00030a;
      color: #f0f0f0;
    }
    header {
      background-color: #000;
      color: white;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0px 0px 14px #000;
    }
    nav a {
      margin: 0 15px;
      color: #FFFFFF;
      text-decoration: none;
      font-weight: bold;
      display: inline-block;
      transition: all 0.2s ease;
      outline-color:#FFFFFF;
    }
    nav a:hover{
      outline: 1px solid #000;
      outline-offset: 10px;
    }
    .hero {
      background-color: #020E1A;
      background-image: url('../img/Logo-cfp-402.webp');
      background-blend-mode: multiply;
      background-repeat: no-repeat;
      background-position: center 0;
      background-size: cover;
      height: 90vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      box-shadow: inset 0px 0px 14px #000;
    }
.hero h1 {
font-size: 4em;
  margin: 0;
  color: #ff1758;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: normal;
}
    .hero p {
      font-size: 1.5em;
      margin-bottom: 20px;
    }
    .hero button {
      
    }


.btn-style510 {
padding: 15px 30px;
  font-size: 1em;
  margin: 10px;
  border-radius: 5px;
  background-color: black;
  cursor: pointer;
  font-weight: bold;
  position: relative;
  color: #17deff;
  overflow: hidden;
  border: 2px solid #17deff;
  box-shadow: 0px 0px 4px #17deff, inset 0px 0px 4px #17deff;
  letter-spacing: 1px;
  &::before,
  &::after {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100px) skewX(-15deg);
    content: "";
  }
  &::before {
    width: 60px;
    background: rgba(255, 255, 255, 0.5);
    filter: blur(30px);
    opacity: 0.5;
  }
  &::after {
    width: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.2);
    filter: blur(5px);
  }
  &:hover {
    background-color: #4a00ec;
    border-color: #FFFFFF;
    color: #FFFFFF;
    box-shadow: 0px 0px 8px #FFFFFF, inset 0px 0px 4px #FFFFFF;
    &::before {
      opacity: 1;
    }
    &::before,
    &::after {
      transform: translateX(300px) skewX(-15deg);
      transition: all 0.9s ease;
    }
  }
}


.btn-style510:active {
  transform: scale(0.95);
  background: #290037;
}

.btnmin {
  font-size: 0.9em;
  padding: 10px 20px;
}

.btn-b{
  background-color: #ff1758;
  box-shadow: 5px 5px 14px #000;
  border-color: #ff1758;
  color:#FFFFFF;
  &:hover {
    background-color: #4a00ec;
    border-color: #FFFFFF;
    color: #FFFFFF;
    box-shadow: 0px 0px 8px #FFFFFF, inset 0px 0px 4px #FFFFFF;
}
}

    .features {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
      background: #1a1a1a;
      padding: 40px 20px;
      text-align: center;
      z-index: 1;
  position: relative;
    }
.feadiv {
  font-size: 2.5em;
  color: #17deff;
  font-weight: 700;
  float: left;
  width: 50%;
  padding: 20px 0;
}
    .section {
      padding: 60px 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .h2cour, .section h2 {
      color: #17deff;
      margin-bottom: 30px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 3em;
    }
    .courses, .subsedes {
      display: grid;
      gap: 20px;
    }
    .courses{
      grid-template-columns: repeat(auto-fit, minmax(25em, 1fr));
    }
    .subsedes {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    .courses .cardd{
      cursor:pointer;
    }
    .card {
  background:linear-gradient(180deg,#0f141a,#121821);
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #17deff;
  transition-duration: 0.1s;
  cursor: pointer;
  box-shadow: 0px 0px 4px #17deff, inset 0px 0px 4px #17deff;
    }
    .card strong {
      display: block;
      font-size: 1.3em;
      color: #FFFFFF;
      margin-bottom: 10px;
    }
    .curcar strong span {
  color: gold;
  }
    .card p {
      font-size: 0.95em;
      color: #ccc;
    }

.subsedes .card p {
  height: 40px;
  margin-bottom: 0;
}


    footer {
      background: #000;
      color: #ccc;
      padding: 40px 20px;
      text-align: center;
    }
    footer a {
      color: #FFFFFF;
      text-decoration: none;
    }
    .clear{
      clear: both;
    }
    .feapre {
  width: 100%;
}
.features p {
  margin: 0 15%;
  line-height: 29px;
}
footer span {
  font-size: 3em;
  padding: 0 8px;
}
.he1 {
background-color: black;
  padding: 20px 40px;
  box-shadow: 0px 0px 14px #ff1758, inset 0px 0px 14px #ff1758;
  margin-top: 10px;
  border-radius: 72px;
  border: 4px solid #ff7098;
  z-index: 1;
}
.he2 {
  background-color: #000000;
  padding: 1px 40px;
  margin: 50px auto 40px auto;
  border-radius: 50px;
  z-index: 1;
  width: fit-content;
}
.cour button {
  margin: 50px 0px;
}

.card:hover {
  transform: scale(1.05);
}
.fa-quote-left{
  font-size:50px;
}
.come {
  width: 50%;
  float: left;
  text-align: justify;
  font-style: italic;
}
.comentarios{
  overflow: hidden;
}
@media (max-width: 768px) {
  .feadiv {
    width: 100%;
  }
  .come {
    width: 100%;
  }
  .hero h1 {
    font-size: 2.5em;
  }
}
.come span {
  color: #ff1758;
}
nav a:hover{
  color:#17deff;
}


.subsedes .card {
  height: fit-content;
}


.slider {
  overflow: hidden;
  padding: 30px 0;
}

.courcour {
  display: flex;
  width: max-content;
  animation: scroll 60s linear infinite;
}

.curcar {
  flex: 0 0 auto;
  margin: 0 15px;
  font-size: 1.1em;
  white-space: nowrap;
  height: 150px;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.courcour:hover {
  animation-play-state: paused;
}

footer img {
  width: 200px;
}

footer p a {
  color: #ccc;
}


/******animacion fondo*****/
.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(0, 128, 157, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}
/******animacion fondo*****/

.quien{
  text-align: left;
}
.quien a{
  color:#ff1758;
}
.obj{
text-align: left;
background-color: transparent !important;
}
.histo{
text-align: left;
}
.mapinvert{
  filter:invert(0.9);
}
.mapinvert iframe{
  filter:hue-rotate(170deg);
}






    .wrap{max-width:1100px; margin-inline:auto; padding:40px 20px}

    .contact-grid{display:grid; grid-template-columns: 1.45fr .95fr; gap:24px; align-items:start; padding-top:30px;}
    @media (max-width: 960px){ .contact-grid{grid-template-columns:1fr;}}

    .cardd{background:linear-gradient(180deg,#0f141a,#121821); border:1px solid rgba(255,255,255,.06); border-radius:18px; box-shadow:0 3px 18px rgba(0,0,0,.3);}

    /* MAPA + ACCIONES */
    .map-card{padding:16px; position:relative;}
    .map-actions{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 14px}

    .address{display:flex; align-items:flex-start; gap:12px; margin:2px 0 4px;}
    .address strong{font-size:18px}
    .tag{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#a2b2bb}

    .map{width:100%; aspect-ratio: 16/11; border:0; border-radius:12px;}

    /* LADO DERECHO */
    .stack{display:grid; gap:16px}

    .info-card{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:16px;}
    .info-card:hover{ box-shadow:0 0 0 1px rgba(255,255,255,.07), 0 14px 26px rgba(0,0,0,.35) }
    .info-card .icon{ width:34px; height:34px; display:grid; place-items:center; border-radius:14px; background:#000000; border:1px solid rgb(23,222,255); }
    .info-card .icon.pink{border-color:rgb(219,15,128);}
    .info-card .label{font-size:13px; color:#a2b2bb}
    .info-card .value{font-weight:700}
    .info-card a{ color:#FFFFFF; text-decoration:none; }
    .info-card a:hover{ color:#17deff }

    /* HORARIOS */
    .hours{padding:18px}
    .hours h3{margin:0 0 8px; font-size:18px}
    .status{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:700; font-size:13px; margin:6px 0 14px}
    .status.open{background: #28e600; color: #000;}
    .status.closed{background: #ff000c; color: #fff;}

    .hours-list{display:grid; grid-template-columns: 1fr auto; gap:10px 14px; align-items:center;}
    .hours-list div{padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06)}
    .hours-list .day{color:#a2b2bb}
    .hours-list .time{justify-self:end; font-weight:600}
    .hours-list .today{box-shadow: 0px 0px 4px #17deff, inset 0 0 4px #17deff; border: 1px solid #17deff; color:#FFFFFF;}

    /* UTILIDADES */
    .sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
    .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    @media (max-width:560px){ .grid-2{grid-template-columns:1fr} }

    .small{font-size: 12px; margin-bottom: 10px; color: white;}

    .topigual{
      padding: 40px 20px;
    }
    .topigual h3{
      font-family:'Bebas Neue', sans-serif; font-size:2em;
    }
    .iconcur {
  color: #000;
  border-color: #17deff !important;
  border-radius: 50% !important;
  background-color: #17deff !important;
}
.iconcontac{
  border-color: #17deff !important;
  border-radius: 50% !important;
  background-color: #17deff !important;
}
ol {
  list-style-type: upper-roman;
  margin: 0 15%;
}
li::marker {
  color: #ff1758;
  font-weight: bold;
  font-size: x-large;
}
*::selection{
  color: #000;
  background-color: gold;
  text-shadow:none;
  }
  .websel{
    color: gold;
  border-bottom: 6px solid;
  padding-bottom: 4px;
  }

    /* SECCIÓN TARJETAS INFO */
    .curso-info {
      max-width: 1100px;
      margin:auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    .info-cardd {
      padding: 25px;
      text-align: left;
      display: block;
      overflow: hidden;
      position: relative;
    }
    .contopi{
      padding: 76px 25px 25px 25px;
    }
    .info-cardd h3 {
      background-color: gold;
      color: #000;
      margin: 0 0 35px 0;
      z-index: 1;
      position: relative;
      text-align: center;
    }
    .info-cardd p {
      color: #eee;
      margin: 5px 0;
      font-size: 0.95rem;
    }
    .info-cardd i {
      margin-right: 8px;
    }
    .info-cardd a {
      color:#ff1758;
    }
.topigold {
  background-color: gold;
  width: 102%;
  height: 76px;
  position: absolute;
  margin-top: -76px;
  z-index: 0;
  margin-left: -26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.topigold h3 {
  margin: 0 !important;
  word-break: initial;
  width: 93%;
}
.days {
  display: flex;
  justify-content: space-between;
  font-size: 1.8rem;
  font-weight: 700;
}

.days span {
  color: #929d9e;
}
.days span.selected {
  color: #17deff;
}
.curcur {
  color: #FFF;
  background-color: #000c;
  padding: 6px 50px 0px 50px;
  height: fit-content;
  border-radius: 18px;
margin: auto;
  width: fit-content;
}
.curcur span{
  color:gold;
}
.txtcur {
background-color: #000c;
  padding: 40px 50px 40px 50px;
  border-radius: 18px;
  height: fit-content;
  margin: 4% 10% !important;
}
.certificaciones h3 {
  font-size: 2em;
  margin: 10px 0px;
}
.certificaciones {
  border-radius: 18px;
  background-color: #000c;
  padding: 10px 50px 10px 50px;
  margin: 0 auto 0 auto;
  width: max-content;
  height: fit-content;
}
.certis{
  text-align: left;
}

    .subsedes-main {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      height: 100vh;
      width: 100%;
      overflow: hidden;
    }

    .subsede {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
      padding: 20px;
      transition: all 0.5s ease;
      cursor: pointer;
      font-family: 'Bebas Neue', sans-serif;
      background-size: cover;
  background-position: center;
    }

    .subsede h2 {
      font-size: 3rem;
      margin-bottom: 10px;
    }

    .subsede p {
      font-size: 1.2rem;
      margin: 6px 0;
      font-family: 'Montserrat', sans-serif;
    }

    /* Hover efecto */
    .subsede:hover {
      transform: scale(1.05);
      box-shadow: inset 0 0 40px rgba(255,255,255,0.3),
                  0 0 20px rgba(255,255,255,0.5);
      z-index: 2;
      cursor: pointer;
    }

    @media (max-width: 900px) {
      .subsedes-main {
        grid-template-columns: 1fr;
        height: auto;
      }
      .subsede {
        height: 33vh;
      }
    }
    .tagcur{
padding: 10px 27px;
  border-radius: 26px;
    }
 .detallesubse .h2cour {
  width: 100%;
}
.detallesubse{
  height: 90vh;
}
.subsedes a, .courcour a{
  text-decoration: none;
}
.galeria-item{
  cursor:pointer;
  position:relative;
  border: 2px solid #000;
}
.galeria {
  padding: 40px 0;
  background: #111; /* diseño oscuro */
  color: #fff;
  width: 100%; /* ocupa todo el ancho */
}



.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 150px;
  gap: 20px; /* espacio entre imágenes */
  width: 97%;
  margin: auto;
  padding-top: 30px;
}

.galeria-item {
  overflow: hidden; /* evita que la imagen se escape en zoom */
  border-radius: 12px; /* opcional, si querés bordes redondeados */
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* mantiene proporción sin deformar */
  display: block;
  transition: transform 0.6s ease;
}

/* Efecto zoom interno */
.galeria-item:hover img {
  transform: scale(1.2);
  filter: brightness(2);
}

/* ===== Lightbox / Slider (añadido) ===== */
.lb{
  position: fixed;
  inset: 0;
  display: none;              /* se muestra con .open */
  align-items: center;
  justify-content: center;
  z-index: 10000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(14px) brightness(0.6);
  -webkit-backdrop-filter: blur(14px) brightness(0.6);
  padding: 16px;
}
.lb.open{ display: flex; }
body.modal-open{ overflow: hidden; }

.lb__wrap{
  position: relative;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* evita cerrar el lightbox por accidentales clicks en el contenedor */
}

.lb__img{
  z-index: 1;
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 12px 44px rgba(0,0,0,.6);
  transition: opacity .18s ease;
  opacity: 0;
  pointer-events: auto; /* permite interacción (e.g. arrastrar en móvil si necesario) */
}

/* Botones fijos: siempre en la misma posición de la pantalla */
.lb__btn,
.lb__close{
  position: fixed;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(0,0,0,.55);
  border-radius: 999px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-size: 20px;
  outline: none;
  z-index: 10001;
}

.lb__prev{ top: 50%; left: 18px; }
.lb__next{ top: 50%; right: 18px; }


.lb__btn.lb__next:active, .lb__btn.lb__prev:active {
  background-color: #ff1758;
}


/* Close en esquina superior derecha */
.lb__close{
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  font-size: 18px;
}

.lb__btn:focus, .lb__close:focus{ box-shadow: 0 0 0 4px rgba(255,255,255,0.06); }
.lb__btn:hover, .lb__close:hover{ transform: scale(1.03); }

@media (max-width: 900px){
  .lb__prev{ left: 8px; }
  .lb__next{ right: 8px; }
  .lb__btn{ width:48px; height:48px; }
  .lb__close{ top: 8px; right: 8px; }
}
.carg{
  position: absolute;
}

.slider .curcar p {
  max-width: 400px;
  white-space: wrap;
}
.bgcur{
background-color: #020E1A;
  background-blend-mode: normal;
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
  min-height: 90vh;
  box-shadow: inset 0px 0px 14px #000;
  padding: 72px 20px 40px 20px !important;
}
.para {
  text-align: center;
  position: absolute;
  top:50%;
  transform: translate(0,-50%);
}
.imgsede img {
  width: 100%;
  margin-top: 20px;
  border-radius: 10px;
}

/************************/
.bokeh-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bokeh {
  position: absolute;
  border-radius: 50%;
  opacity: 0.2; /* más transparente */
  filter: blur(20px); /* difuminado */
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  from {
    transform: translateY(100vh) scale(1);
    opacity: 0.3;
  }
  to {
    transform: translateY(-20vh) scale(1.2);
    opacity: 0;
  }
}











.subsedes-media {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
}

.subsedes-media .media-item {
  flex: 1 1 50%; /* ocupa la mitad */
  margin: 0;
  padding: 0;
}

.subsedes-media img,
.subsedes-media iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  margin: 0;
  padding: 0;
}

/* Altura definida para escritorio */
.subsedes-media {
  height: max-content;
}
.subsedes-media img,
.subsedes-media iframe {
  height: 100%;
  object-fit: cover;
}

/* Responsive: apilar en pantallas pequeñas */
@media (max-width: 768px) {
  .subsedes-media {
    flex-direction: column;
    height: auto;
  }
  .subsedes-media .media-item {
    flex: 1 1 100%;
    height: 40vh;
  }
}
.map{border-radius:0 !important}
.detallesubse {
  background: linear-gradient(135deg, #0a0a0a, #111);
  padding: 60px 20px;
  position: relative;
  overflow: hidden;
}

.detallesubse h2 {
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3em;
  color: #17deff;
  margin-bottom: 40px;
}

.detalle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: auto;
}

.detalle-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;


  background: linear-gradient(180deg,#0f141a,#121821);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  box-shadow: 0 3px 18px rgba(0,0,0,.3);

}
.detalle-item:hover {
  bbackground: #4a00ec;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 14px 26px rgba(0,0,0,.35);
}

.detalle-item h3 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  color: #fff;
}
.detalle-item p {
  margin: 0;
  color: #ccc;
  font-size: 1rem;
  line-height: 1.6;
}

.icono {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  color: #000;
}
.icono.cyan { background:#17deff; }
.icono.pink { background:#ff1758; color:#fff; }
.icono.gold { background:gold; }

.detalle-item.desc {
  grid-column: span 2; /* ocupa más ancho cuando hay espacio */
}

@media (max-width: 768px) {
  .detalle-item.desc {
    grid-column: span 1;
  }
}




.tile {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 110%;
    transition: transform .5s ease-out;
  }