@import url('fonts.css');

:root {
    --primario-3: hsl(286, 100%, 3%);
    --primario-6: hsl(286, 100%, 6%);
    --primario-9:hsl(286, 100%, 9%);

    --primario-3-75: hsla(286, 100%, 3%, 75%);
    --primario-3-65: hsla(286, 100%, 3%, 65%);
    --primario-3-55: hsla(286, 100%, 3%, 55%);
    --primario-3-45: hsla(286, 100%, 3%, 45%);

    --primario-exito: hsl(109, 96%, 72%);
    --primario-error: hsl(359, 100%, 70%);

    --secundario-600: hsl(196, 58%, 63%);
    --secundario-500: hsl(196, 58%, 53%);
    --secundario-400: hsl(196, 58%, 43%);
    --secundario-300: hsl(196, 58%, 33%);
    --secundario-200: hsl(196, 58%, 15%);
    --secundario-100: hsl(196, 58%, 7%);

    --secundario-600-55: hsla(196, 58%, 63%, 55%);
    --secundario-500-65: hsl(196, 58%, 53%, 65%);
    --secundario-400-75: hsl(196, 58%, 43%, 75%);
    
    --base: hsl(55, 55%, 91%);
    
    --acento: hsl(210, 100%, 67%);
    --acento-hover: hsl(210, 100%, 78%);

    --acento-2 : hsl(32, 100%, 66%);
    --acento-2-hover: hsl(32, 100%, 78%);

    --h1-bienvenida: clamp(32px, 5vw , 64px);
    --h2-bienvenida: clamp(20px, 4vw, 32px);
    --p-bienvenida: clamp(16px, 4vw, 20px);

    --h1-secciones: clamp(32px, 5vw , 56px);
    --h2-secciones: clamp(22px, 4vw, 28px);
    --h3-secciones: clamp(16px, 3vw, 20px);

    --p-secciones: clamp(16px, 3vw, 18px);
    --precio: 24px;

    --a-primary-nav: clamp(16px, 3vw, 18px);
}

/*Global*/
html {
    box-sizing: border-box;
    margin: 0;
    font-weight: 400;
    line-height: 1.3;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    font-family: 'Lato Regular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: inherit;
}

a,
ul,
p,
label,
input,
span,
button,
select {
    font-size: var(--p-secciones);
    line-height: 1.7;
}

li {
    font-size: var(--p-secciones);
    line-height: 2.1;
}

h1 {
    font-family: 'Lato Bold';
    text-align: center;
    font-size: var(--h1-secciones);
    line-height: 1.1;
    margin: 0;
}

h2 {
    font-family: 'Lato Bold';
    text-align: center;
    font-size: var(--h2-secciones);
    color: var(--acento);
    margin: 0;
}

h3 {
    font-family: 'Lato Bold';
    text-align: center;
    font-size: var(--h3-secciones);
    margin: 0;
}

img {
    max-width: 100%;
    overflow: clip;
    margin: 0;
    padding: 0;
}

ul {
    font-size: var(--p-secciones);
    padding: 0.5rem 2rem;
    list-style: disc;
}

li {
    padding: 0;
    margin: 0;
}

a:link,
a:visited {
    display: inline; /* Revisar */
    text-decoration: none;
    color: var(--base);
    font-weight: 400;
}

a:hover,
a:active {
    color: var(--acento-hover);
}

/*Limpiar esta clase*/
a.btn-principal:link,
a.btn-principal:visited {
    background-color: var(--acento);
    color: var(--primario-3);
    padding: 12px 32px;
    font-size: var(--p-secciones);
    font-weight: 700;
    border-radius: 8px;
    text-align: center;
}

a.btn-principal:hover,
a.btn-principala:active {
    background-color: var(--acento-hover);
    color: var(--primario-3);
}

.btn-principal {
    background-color: var(--acento);
    color: var(--primario-3);
    padding: 12px 32px;
    font-size: var(--p-secciones);
    font-weight: 700;
    border-radius: 8px;
    text-align: center;
    border: none;
    cursor: pointer;
}

.btn-principal:hover {
    background-color: var(--acento-hover);
    color: var(--primario-3);
}

a.btn-outline:link,
a.btn-outline:visited {
    color: var(--acento);
    padding: 12px 32px;
    font-size: var(--p-secciones);
    border: 2px solid var(--acento);
    border-radius: 8px;
    text-align: center;
}

a.btn-outline:hover,
a.btn-outline:active {
    border: 2px solid var(--acento-hover);
}

.btn-dark {
    background-color: var(--primario-3);
    color: var(--acento);
    padding: 12px 32px;
    font-size: var(--p-secciones);
    font-weight: 700;
    border: 1px solid var(--acento);
    border-radius: 8px;
    text-align: center;
}

.btn-dark:hover {
    background-color: var(--primario-6);
    color: var(--acento-hover);
    cursor: pointer;
}

.breadcrumbs {
    padding: 0.5rem 1rem;
    background-color: var(--primario-3);
}

.breadcrumbs ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
}

.breadcrumbs a:link,
.breadcrumbs a:visited {
    color: var(--base);
}

.breadcrumbs a:hover,
.breadcrumbs a:active {
    color: var(--acento-hover);
}

:focus {
    outline: 3px solid var(--acento);
    outline-offset: 4px;
    border-radius: 8px;
}

:focus:not(:focus-visible) { 
    outline: none 
}

.saltar-principal {
    position: fixed;
    top: -200px;
}

.saltar-principal:focus {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: var(--acento);
    text-align: center;
    padding: 28px 0;
    z-index: 9999;
    outline: none;
}

.sr-only {
    display: block;
    width: 1px;
    height: 1px;
    overflow: hidden;
    left: -4000px;
    top: -4000px;
}

/* Scroll */
@supports selector(::-webkit-scrollbar) {
    /* width */
    ::-webkit-scrollbar {
        width: 10px;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
        background: var(--secundario-100);
      }
      
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: var(--secundario-300);
        border-radius: 16px;
      }
      
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: var(--acento);
      }
}

/* Fondos */
.fondo-1 {
    /* background: hsl(286, 100%, 3%); */
    background-image: 
        url('../img/grad-3.png'),
        linear-gradient(
            162deg,
            var(--primario-3) 0%,
            var(--primario-3) 65%,
            var(--primario-9) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
}

.fondo-2 {
    /* background: hsl(286, 100%, 3%); */
    background-image: 
        url('../img/grad-4.png'),
        linear-gradient(
            162deg,
            var(--primario-3) 0%,
            var(--primario-3) 65%,
            var(--primario-9) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
}

.fondo-3 {
    background-image: 
        linear-gradient(
            162deg, 
            var(--primario-3-75) 0%,
            var(--primario-3-75) 65%,
            var(--primario-9) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    background-attachment: fixed;
}

.fondo-4 {
    background: hsl(286, 100%, 3%);
    background-image: 
        url('../img/grad-1.png'),
        linear-gradient(
            162deg,
            var(--primario-3) 0%,
            var(--primario-3) 65%,
            var(--primario-9) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
}

/*------------------------------------------*/
/*Estructura*/
body {
    display: grid;
    margin: 0;
    color: var(--base);
    min-height: 100vh;
    background-color: var(--primario-3);
}

main {
    display: grid;
    grid-template-columns: 100%;
    padding-top: 76.34px;
}

header {
    color: var(--base);
    background-color: var(--primario-3);
    padding: 1rem;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

header img {
    max-width: 36px;
}

.menu-boton span {
    font-size: 36px !important;
}

.menu-boton {
    background-color: transparent;
    background-image:url(../img/menu.svg);
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    width: 2em;
    aspect-ratio: 1;
    cursor: pointer;
}

.menu-boton:hover {
    background-image:url(../img/menu-2.svg);
}

.menu-boton[aria-expanded="true"] {
    background-image: url(../img/close-2.svg);
    transition: background-image ease-in-out 350ms;
}

nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.primary-navigation {
    display: flex;
    flex-direction: column;
    padding: 3rem 0;
    
    position: fixed;
    top: 76.34px;
    right: 0;
    left: 0;
    z-index: 999;

    transform: translateX(0%) translateY(-150%);
    transition: transform 350ms ease-out;
}

.primary-navigation[data-visible="true"] {
    transform: translateX(0%) translateY(0%);
    transition: transform 350ms ease-out;
}

@supports (backdrop-filter: blur(1em)) {

    .primary-navigation {
        background-color: var(--primario-3-45);
        backdrop-filter: blur(2em);
    }

}

/* Compatibilidad iOS 9*/
@supports (-webkit-backdrop-filter: blur(1em)) {
    .primary-navigation {
        background-color: var(--primario-3-45);
        backdrop-filter: blur(2em);
        -webkit-backdrop-filter: blur(2em);
    }
}

.primary-navigation ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 100%;
}

.primary-navigation a:link,
.primary-navigation a:visited {
    color: var(--base);
    font-weight: 300;
    font-size: var(--a-primary-nav);
}

.primary-navigation a:hover,
.primary-navigation a:active {
    color: var(--acento);
}

/* Redes y social */
.redes {
    display: none;
}

a.btn-icon-linkedin:link,
a.btn-icon-linkedin:visited,
a.btn-icon-instagram:link,
a.btn-icon-instagram:visited,
a.btn-icon-tiktok:link,
a.btn-icon-tiktok:visited,
a.btn-icon-youtube:link,
a.btn-icon-youtube:visited,
a.btn-icon-facebook:link,
a.btn-icon-facebook:visited {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    width: 1.5rem;
    aspect-ratio: 1;
}

.btn-icon-instagram {
    background-image:url('../img/Instagram.svg');
}

.btn-icon-linkedin {
    background-image:url('../img/LinkedIn.svg');
}

.btn-icon-tiktok {
    background-image:url('../img/TikTok.svg');
}

.btn-icon-facebook {
    background-image:url('../img/Facebook.svg');
}

.btn-icon-youtube {
    background-image:url('../img/YouTube.svg');
}

a.btn-icon-linkedin:hover,
a.btn-icon-linkedin:active {
    background-image:url('../img/LinkedIn-hover.svg');
}

a.btn-icon-instagram:hover,
a.btn-icon-instagram:active {
    background-image:url('../img/Instagram-hover.svg');
}

a.btn-icon-tiktok:hover,
a.btn-icon-tiktok:active {
    background-image:url('../img/TikTok-hover.svg');
}

a.btn-icon-facebook:hover,
a.btn-icon-facebook:active {
    background-image:url('../img/Facebook-hover.svg');
}

a.btn-icon-youtube:hover,
a.btn-icon-youtube:active {
    background-image:url('../img/YouTube-hover.svg');
}

a.btn-icon-whatsapp:link,
a.btn-icon-whatsapp:visited {
    display: inline-block;
    background-image: url('../img/WhatsApp.svg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 3rem;
    aspect-ratio: 1;

    position: fixed;
    bottom: 1rem;
    right: 1rem;
}

/* Móvil */
a.btn-icon-whatsapp:link[href="https://api.whatsapp.com/send?text=%C2%A1Hola!%20Me%20gustaría%20hacer%20una%20consulta&phone=5491173594045"] {
    display: inline-block;
}

/* Escritorio */
a.btn-icon-whatsapp:link[href="https://web.whatsapp.com/send?text=%C2%A1Hola!%20Me%20gustaría%20hacer%20una%20consulta&phone=5491173594045"] {
    display: none;
}

section,
footer {
    padding: 6rem 2rem;
    display: grid;
    align-content: center;
    align-items: center;
    min-height: 8vh;
}

footer {
    justify-content: start;
    padding: 1rem;
    background-color: var(--primario-3);
}

footer ul {
    margin: 0;
    padding: 0;
    display: flex;
    text-align: left;
    gap: 1rem;
    list-style: none;
}

footer ul:first-of-type {
    flex-direction: column;
}

/**-------------------------------------------------------------------**/
/* Bienvenida */

.bienvenida {
    position: relative;
    justify-content: stretch;
    justify-items: center;
    gap: 0.2rem;
}

#particles-js {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 0;
}

.bienvenida h1 {
    font-size: var(--h1-bienvenida);
    order: 2;
    width: min(100%, 560px);
    z-index: 1;
}

.bienvenida h2 {
    font-size: var(--h2-bienvenida);
    color: var(--acento-2);
    order: 1;
    width: min(100%, 560px);
    z-index: 1;
}

.bienvenida p {
    font-size: var(--p-bienvenida);
    text-align: center;
    order: 3;
    width: min(100%, 480px);
    z-index: 1;
    margin: 0;
}

/* Nuestro equipo */

.equipo-wrapper {
    justify-content: center;
    justify-items: center;
}

.equipo {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 250px;
    gap: 1rem;
    padding: 2rem 2rem;
    margin: 1.5rem 0;
    width: 100%;
    overflow-x: auto; /* Considerar a overflow: hidden para escritorio? */
    overscroll-behavior-inline: contain;
}

.equipo article {
    display: grid;
    justify-content: center;
    justify-items: center;
    align-content: start;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    background-color: var(--primario-3-75);
    border-radius: 1rem;
    border: 1px solid var(--acento);

}

.equipo article h2 {
    color: var(--base);
    font-size: 18px;
    color: var(--secundario-500);
}


/**-------------------------------------------------------------------**/
/* Seminarios y Cursos | Index */
.seminarios h3 {
    color: var(--acento);
}

.seminarios {
    gap: 2rem;
}

.seminarios .catalogo-contenido {
    display: grid;
    grid-template-columns: repeat(auto-fit, 1fr);
    gap: 1.5rem;
}

.seminarios article {
    display: grid;
    align-content: space-between;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid var(--acento);
    border-radius: 0.5rem;
    background-color: var(--primario-3-75);
}

.seminarios article h3 {
    /* font-size: 16px;
    line-height: 32px; */
    color: var(--acento);
    order: 1;
}

.seminarios article h2 {
    /* font-size: 24px;
    line-height: 32px; */
    font-family: 'Noto Sans', sans-serif;
    color: var(--base);
    order: 2;
}

.seminarios article ul {
    order: 3;
}

.seminarios article h4 {
    color: var(--acento);
    font-size: 32px;
    line-height: 150%;
    margin: 0;
    text-align: center;
    order: 4;
}

.seminarios article a {
    order: 4;
}

/* Animación secciones */
.bienvenida {
    min-height: 75vh;
}


/* Seminarios | Cursos Inscripción */
.seminario-inscripcion {
    background-image: url('../img/Seminaros.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.seminario-inscripcion h2 {
    color: var(--acento);
    order: 1;
}

.seminario-inscripcion h1 {
    order: 2;
}

.seminario-g-form,
.curso-g-form {
    min-height: 10vh;
    padding: 0;
    margin: 0;
}

.seminario-g-form iframe,
.curso-g-form iframe {
    width: 100%;
    border: none;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.seminario-g-form iframe {
    min-height: 1695px;
}

.curso-g-form iframe {
    min-height: 950px;
}

.volver {
    background-color: transparent;
    background-image:url(../img/keyboard_arrow_down-2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    width: 3em;
    aspect-ratio: 1;
    cursor: pointer;
    transform: rotate(180deg);
}

.curso-footer,
.seminario-footer {
    min-height: 5vh;
    padding: 0 2rem;
}

.curso-footer > p,
.seminario-footer > p {
    width: min(650px, 100%);
}

/* Modal */
.modal-inscripcion[data-visible="false"] {
    display: none;
}

.modal-inscripcion[data-visible="true"] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
}

.form-inscripcion {
    border: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cerrar-modal {
    background-color: var(--primario-3);
    background-image: url(../img/close-2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    cursor: pointer;
    border: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
}

.cerrar-modal:focus {
    border-radius: 0;
}

.confirmacion {
    height: 90vh !important;
    align-content: center;
    align-items: start;
}

/**-------------------------------------------------------------------**/
/* Seminarios | Cursos Index */

.curso-bienvenida {
    justify-items: center;
    gap: 0;
}

.curso-bienvenida > * {
    width: min(560px, 100%);
}

.curso-bienvenida h1 {
    order: 2;
}

.curso-bienvenida p {
    display: none;
    order: 3;
}

.curso-bienvenida h2 {
    text-align: center;
    order: 1;
}

.curso-descripcion {
    display: grid;
    grid-template-columns: 100%;
    justify-items: stretch;
    align-content: start;
    align-items: start;
    gap: 0;
}

.curso-descripcion .izquierda {
    position: relative; /* Revisar */
    display: grid;
    justify-items: stretch;
}

.curso-descripcion .derecha-inscripcion {
    position: sticky;
    bottom: 0;
    background-color: var(--primario-3);

    padding: 1rem;

    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: start;
}

.curso-descripcion .derecha-inscripcion div {
    display: grid;
}

.curso-descripcion .derecha-inscripcion span {
    color: var(--acento);
}

.curso-descripcion .derecha-inscripcion span:nth-child(1) {
    font-size: var(--precio);
    display: block;
    text-align: center;
}

.curso-descripcion .tab {
    padding: 1rem;
    background-color: var(--secundario-100);
    border-bottom: 1px solid var(--base);
    position: sticky;
    top: 75.34px;
}

.curso-descripcion .descripcion[data-visible="false"] {
    padding: 0;
    max-height: 0;
    overflow: hidden;
}

.curso-descripcion .descripcion[data-visible="true"]{
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    align-content: start;
    max-height: auto;
    padding: 2rem;
    background-color: var(--secundario-200);
}

.curso-descripcion ul {
    margin: 0;
    padding: 0;
    padding-left: 2rem;
}

.curso-descripcion p {
    margin: 0;
}

.descripcion-fechas .fechas {
    background-color: var(--primario-3);
    display: grid;
    grid-template-columns: 1fr;
    padding: 1rem;
    border: 2px solid var(--acento);
    border-radius: 0.5rem;
    gap: 0.5rem;
}

.descripcion-fechas .fechas strong {
    color: var(--acento);
}

.tab {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
}

.tab-control {
    display: inline-block;
    background-color: transparent;
    background-image: url(../img/keyboard_arrow_down.svg);
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    width: 2em;
    aspect-ratio: 1;

    transform: rotate(0deg);
    transition: transform ease-in-out 350ms;
}

.tab-control[aria-expanded="true"] {
    transform: rotate(-180deg);
    transition: transform ease-in-out 350ms;
}

.tab:hover .tab-control {
    background-image: url(../img/keyboard_arrow_down-2.svg);
}

.tab:hover {
    cursor: pointer;
    color: var(--acento);
}

/**-------------------------------------------------------------------**/
/* Sobre nosotros */
.sobre-nosotros {
    display: grid;
    justify-content: center;
    justify-items: center;
}

.sobre-nosotros p,
.sobre-nosotros ul,
.sobre-nosotros ol {
    width: min(560px, 100%);
    margin: 0;
}

/**-------------------------------------------------------------------**/
/* Formularios */
.main-form section {
    justify-items: center;
}

form {
    display: grid;
    gap: 2rem;
    width: min(450px, 100%);
}

form input,
form button,
form select {
    padding: 0.4rem 0.6rem;
    border: none;
    border-radius: 0.3rem;
}

form select {
    padding: 0.55rem 0.6rem;
}

form button {
    background-color: var(--acento);
    font-weight: 600;
    cursor: pointer;
}

form button:hover {
    background-color: var(--acento-hover);
}

.form-input {
    display: grid;
    gap: 0.25rem;
    position: relative;
}

.info-label {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

form span[data-visible=true] {
    display: static;
    color: var(--acento);
    justify-self: right;
    position: absolute;
    top: 68px;
    font-size: 12px;
}

form span[data-visible=false] {
    display: none;
}

.form-check {
    position: static;
    display: grid;
    grid-template-columns: 6% 94%;
    gap: 0.25rem;
}

.form-check span[data-visible=true] {
    display: static;
    color: var(--acento);
    position: static;
    font-size: 12px;
    text-align: right;
    justify-self: stretch;
    grid-column: span 2;
}

.info {
    background-image: url(../img/info.svg);
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 1/1;
    width: 1.5rem;
    color: var(--primario-3);
    justify-self: end;
}

.info:hover {
    cursor: pointer;
}

.info-desc[data-visible=false] {
    display: none;
}

.info-desc[data-visible=true]{
    font-size: var(--p-secciones);
    position: absolute;
    top: 0;
    right: 0;
    padding: 1rem;
    background-color: var(--acento);
    border: 2px solid var(--primario-9);
    border-radius: 4px;
    color: var(--primario-3);
    display: grid;
    gap: 0.2rem;
    grid-template-columns: 10fr 1fr;
    justify-content: stretch;
    justify-items: left;
    z-index: 9999;
}

.cerrar-info {
    cursor: pointer;
    justify-self: end;
}

/**-------------------------------------------------------------------**/
@media screen and (min-width: 600px) {
    /* Aplica a los formularios dentro de los iframes */
    .main-form {
        padding-top: 0;
        padding-left: 0;
    }

    .form-seminarios {
        width: min(700px, 100%);
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2,auto);
        justify-content: start;
        align-content: center;
        align-items: center;
        gap: 2rem;
    }

    .form-input {
        grid-column: span 1;
        align-self: start;
    }
    .modal-inscripcion[data-visible="true"] {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        display: grid;
        justify-content: center;
        justify-items: end;
        align-content: center;
        align-content: center;
    }

    @supports (backdrop-filter: blur(1em)) {

        .modal-inscripcion[data-visible="true"] {
            background-color: var(--primario-3-45);
            backdrop-filter: blur(1em);
        }
    
    }
    
    /* Compatibilidad iOS 9*/
    @supports (-webkit-backdrop-filter: blur(1em)) {
        .modal-inscripcion[data-visible="true"] {
            background-color: var(--primario-3-45);
            backdrop-filter: blur(1em);
            -webkit-backdrop-filter: blur(1em);
        }
    }
    
    .form-inscripcion {
        border: none;
        width: 100vw;
        height: 75vh;
        overflow: hidden;
    }
    
    .cerrar-modal {
        aspect-ratio: 1;
        position: static;
        top: 5rem;
        right: 5rem;
    }
    
    .cerrar-modal:focus {
        border-radius: 0;
    }
    
    .confirmacion {
        height: 90vh !important;
        align-content: center;
        align-items: start;
    }

    form span[data-visible=true] {
        top: 82px;
    }

    .seminarios .catalogo-contenido {
        grid-template-columns: repeat(auto-fit, 25rem);
        justify-content: center;
    }

}


@media screen and (min-width: 728px) {
   
    .descripcion-fechas .fechas {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, auto);
        justify-content: stretch;
        justify-items: stretch;
    }

    .descripcion-fechas .fechas p:nth-child(1) {
        grid-column: 1/1;
        grid-row: 1/3;
    }

    .descripcion-fechas .fechas p:nth-child(2) {
        grid-column: 2/4;
        grid-row: 1/1;
    }

    .descripcion-fechas .fechas p:nth-child(3) {
        grid-column: 2/4;
        grid-row: 3/2;
    }

    .descripcion-fechas .fechas button {
        align-self: center;
        grid-column: 4/5;
        grid-row: 1/3;
    }

    .form-inscripcion {
        border: none;
        width: 90vw;
    }

    footer ul {
        flex-direction: row;
        text-align: left;
    }

    /* Móvil */
    a.btn-icon-whatsapp:link[href="https://api.whatsapp.com/send?text=%C2%A1Hola!%20Me%20gustaría%20hacer%20una%20consulta&phone=5491173594045"] {
        display: none;
    }

    /* Escritorio */
    a.btn-icon-whatsapp:link[href="https://web.whatsapp.com/send?text=%C2%A1Hola!%20Me%20gustaría%20hacer%20una%20consulta&phone=5491173594045"] {
        display: inline-block;
    }

}

@media screen and (min-width: 1125px) {

    main {
        padding-top: 0;
        padding-left: 72px;
    }

    header {
        top: 0;
        left: 0;
        bottom: 0;
        width: 72px;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 7% 7% 80%;
        gap: 0.3rem;
        align-content: start;
        justify-items: center;

        background-color: var(--primario-3);
        border-bottom: none;
    }

    section {
        min-height: 70vh;
        justify-content: stretch;
        gap: 2rem;
    }

    .primary-navigation {
        padding: 3rem 0;
        
        top: 0;
        left: 72px;
        bottom: 0;

        width: 24rem;
    
        transform: translateX(-150%) translateY(0%);
    }
    
    .primary-navigation[data-visible="true"] {
        transform: translateX(0%) translateY(0%);
        transition: transform 350ms ease-in-out;
    }

    .redes {
        align-self: end;
        
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0.3rem;
    }

    .seminarios .catalogo-contenido {
        grid-template-columns: repeat(auto-fit, 30rem);
        justify-content: center;
    }
        
    .breadcrumbs {
        position: sticky;
        top: 0;
        z-index: 99999;
    }

    .curso-descripcion {
        display: grid;
        grid-template-columns: 6fr 1.5fr;
        justify-items: stretch;
        align-content: start;
        gap: 2rem;
    }

    .curso-bienvenida p {
        display: block;
        width: min(100%, 448px);
    }

    .curso-descripcion .derecha-inscripcion {
        position: sticky;
        top: 120px;
        padding: 2rem;
        background-color: var(--primario-3);
        grid-template-columns: 100%;
        grid-template-rows: auto;
        justify-items: stretch;
    }

    .curso-descripcion .tab {
        position: static;
    }

    .curso-descripcion .descripcion[data-visible="true"]{
        grid-template-columns: 1fr 1fr;
        gap: 1rem 2rem;
    }

    .descripcion-fechas {
        grid-template-columns: 1fr !important;
    }

    .seminario-g-form iframe {
        min-height: 1595px;
    }
    
    .curso-g-form iframe {
        min-height: 950px;
    }

    .form-inscripcion {
        border: none;
        width: 80vw;
    }

    footer {
        padding: 3rem 8rem 2rem;
    }

    footer ul:last-of-type {
        display: none;
    }

}