/* ============================================= Tipografía ============================================= */
@font-face {
  font-family: "NeueMontrealRegular"; /* Cambié el nombre para que sea más descriptivo */
  src: url("./assets/fonts/NeueMontreal-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NeueMontrealMedium"; /* Nombre más acorde con el peso */
  src: url("./assets/fonts/NeueMontreal-Medium.otf") format("opentype");
  font-weight: 600; /* 600 es semi-bold */
  font-style: normal;
}

@font-face {
  font-family: "NeueMontrealBold"; /* Incluí 'Italic' en el nombre para mayor claridad */
  src: url("./assets/fonts/NeueMontreal-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

/* ============================================ HTML Global ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: NeueMontrealRegular, Arial, Helvetica, sans-serif;
}
:root {
  --global-red: #ed1f41;
  --global-white: #f8f8f6;
  --global-black: #0a0a0a;
  --global-gray-1: #9ca3a8;
  --global-gray-2: #252e36;

  --font-size-xsm: 0.8rem;
  --font-size-sm: 1rem;
  --font-size-md: 1.8rem;
  --font-size-bg: 2.5rem;

  --global--padding: 40px;
  --global-border-radius: 40px;

  --family-normal: NeueMontrealRegular;
  --family-medium: NeueMontrealMedium;
  --family-bold: NeueMontrealBold;
}

/* ======================================== Contenedor Principal ======================================== */

.container {
  position: relative;
  background-color: rgb(235, 233, 233);
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: var(--global--padding);
}
/* ========================================= Sección Principal ========================================= */
.principal {
  position: relative;
  background-color: var(--global-black);
  width: 50%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.principal article {
padding: var(--global--padding);
}
.principal__card-black{
  background-color: white;
  
}
/* ========================================== Sección Proximas ========================================== */
.proximas {
  position: relative;
  min-height: 100vh;
  width: 50%;
  padding: var(--global--padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.box--card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.box--card section {
  display: flex;
  gap: 20px;
  font-size: var(--font-x-sm);
  justify-content: space-between;
}
.box--card p {
  display: flex;
  flex-direction: column;
  /* width: 25%; */
}
.box--card .horarios{ 
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: start;
}
.box--card .horarios p{ 
  width: 25%;
}
.proximas h3,
.proximas h4 {
  display: flex;
  flex-direction: column;
}

/* ========================================= Sección Hoja Rurta ========================================= */

.hoja--ruta {
  position: relative;
  padding: 0px 40px;
  width: 50%;
  min-height: 100vh;
  background-color: var(--global-black);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.acordeon {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acordeon details {
  border-bottom: 1px solid var(--global-white);
  font-size: var(--font-size-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.acordeon summary{
  padding: 10px 0px;
}
.acordeon section {
  font-size: var(--font-size-xsm);
  padding: 0px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.acordeon p, .acordeon li{
  line-height: 1.5rem;
}

/* ===================================== Sección Especializaciones ===================================== */

.especializaciones {
  position: relative;
  height: auto;
  width: 50%;
  padding: var(--global--padding);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.especializaciones article {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.especializaciones ul {
  list-style: none;
  padding: 0 10px;
}
.especializaciones li::before {
  content: "-"; /* Agregar el guion como marcador */
  position: absolute;
  left: 40px; /* Alinear el guion al borde izquierdo */
  color: black; /* Puedes cambiar el color del guion si lo deseas */
}

/* ====================================== Sección Certificaciones ====================================== */

.certificaciones {
  position: relative;
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--global-black);
  color: white;
  padding: var(--global--padding);
  gap: 20px;
}
.certificaciones--card {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.certificaciones--card picture {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: safe;
  align-items: center;
}

.certificaciones--card img {
  width: auto;
  max-width: 100px;
  height: var(--font-size-bg);
  object-fit: contain;
}

.certificaciones--card article {
  width: calc(50% - 10px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.porcentajes {
  width: 100%;
  display: flex;
  gap: 20px;
}
.porcentajes article {
  width: 100%;
}

.porcentajes span {
  font-size: 4rem;
  font-family: var(--family-medium);
}
.porcentajes p {
  font-size: var(--font-x-sm);
}
/* ========================================= Sección Formulario ========================================= */
.formulario {
  position: fixed;
  background-color: white;
  width: 50%;
  height: 100%;
  min-height: 100vh;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.formulario img {
  width: 100%;
  min-height: 150px;
  max-height: 200px;
  object-fit: cover;
  object-position: unset;
}
.formulario .info {
  padding: 20px 40px;
}

.formulario form {
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.formulario input {
  border: none;
  border-bottom: 1px solid var(--global-black);
  padding: 5px;
  font-size: var(--font-size-sm);
}
.formulario select {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--global-black);
  padding: 5px;
  font-size: var(--font-size-sm);
}

.formulario--card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--global-black);
}
.formulario--card div {
  display: flex;
  gap: 10px;
}
.formulario--card .tel {
  display: flex;
  gap: 0;
}
.formulario--card .tel input:first-child {
  border-right: 1px solid var(--global-black);
  width: 30%;
}

.formulario--card input {
  width: 100%;
}

.formulario--card .sede {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--font-size-sm);
}

.terminos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.terminos input {
  width: 20px;
  height: 20px;
  border: 1px solid var(--global-red);
}

.form--btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px 40px;
}
.form--btn button {
  background-color: var(--global-red);
  border: none;
  border-radius: var(--global-border-radius);
  -webkit-border-radius: var(--global-border-radius);
  -moz-border-radius: var(--global-border-radius);
  -ms-border-radius: var(--global-border-radius);
  -o-border-radius: var(--global-border-radius);
  padding: 10px 20px;
  color: var(--global-white);
  min-width: 200px;
  font-size: var(--font-size-sm);
}

.form--btn button:hover {
  background-color: var(--global-black);
}

.close {
  position: absolute;
  right: 20px;
  top: 20px;
  display: none;
}
.close button {
  border: none;
  padding: 15px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  background-color: var(--global-red);
  color: white;
}

/* =============================================== Footer =============================================== */
footer {
  position: relative;
  background-color: var(--global-black);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  min-height: 100px;
  color: white;
  padding: var(--global--padding);
}

footer div {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
}

footer a {
  color: var(--global-white);
}

/* =============================================== POP UP =============================================== */
.pop-up {
  position: fixed;
  width: 100%;
  height: 60px;
  background-color: var(--global-red);
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* border-top: 2px solid var(--global-black); */
  display: none;
}
.pop-up button {
  border-radius: 40px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  padding: 10px 20px;
  border: none;
  background-color: var(--global-black);
  color: white;
}

/* ====================================== Asignación de variables ====================================== */
.global--red {
  color: var(--global-red);
}
.global--white {
  color: var(--global-white);
}
.global--black {
  color: var(--global-blackk);
}
.global--gray_1 {
  color: var(--global-gray-1);
}
.global--gray_2 {
  color: var(--global-gray-2);
}

.font-xsm {
  font-size: var(--font-size-xsm);
}

.font-sm {
  font-size: var(--font-size-sm);
}
.font-md {
  font-size: var(--font-size-md);
}
.font-bg {
  font-size: var(--font-size-bg);
}

.family-normal {
  font-family: var(--family-normal);
}
.family-medium {
  font-family: var(--family-medium);
}
.family-bold {
  font-family: var(--family-bold);
}

/* ========================================== Estilos Globales ========================================== */
a,
button {
  cursor: pointer;
  text-decoration: none;
}

fieldset {
  border: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: NeueMontrealMedium, Arial, Helvetica, sans-serif;
}
p,
span,
a,
button {
  font-family: NeueMontrealRegular, Arial, Helvetica, sans-serif;
}

details summary {
  list-style: none;
  cursor: pointer;
  position: relative;
}

details summary::before {
  content: "";
  background-image: url("./assets/icons/plus-lg.svg");
  /*Asegúratedequelarutaseacorrecta*/
  background-size: 20px 20px;
  background-repeat: no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
  color: rgb(63, 9, 9);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}
details[open] summary::before {
  background-image: url("./assets/icons/dash-lg.svg");
}