/* Parámetros */
@font-face {
    font-family: 'Franklin-Gothic-Heavy';
    src: url(../fonts/Franklin-Gothic-Heavy.TTF);
}

@font-face {
    font-family: 'Franklin-Gothic-Book';
    src: url(../fonts/Franklin-Gothic-Book.TTF);
}

@font-face {
    font-family: 'Gruppo-Regular';
    src: url(../fonts/Gruppo-Regular.ttf);
}

@font-face {
    font-family: 'Ubuntu-Light';
    src: url(../fonts/Ubuntu-Light.ttf);
}

@font-face {
    font-family: 'Casta-Thin';
    src: url(../fonts/Casta-Thin.otf);
}

/* Variables */
:root {
    /* Colores */
    --afro-black: #181818;
    --afro-yellow: #DEF716;
    --afro-red: #D93100;
    --afro-light-red: #DD6144;
    --afro-purple: #BC1A8F; 
    --afro-light-purple: #D8A8D2; 
    --afro-green: #89FC59; 
    --afro-light-green: #A7D992;

    /* Valores comunes */

    /* Alto del header */
    --height-header-mob: 48px;
    --height-header-tablet: 62px; 
    --height-header-desk: 68px;


    /* Paddings */
    --xsmall: 1%;
    --small: 2%;
    --medium: 4%;
    --large: 10%;

    --padding-section: var(--large) var(--medium);

    /* Transicciones */
    --transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;   

    /* Bordes */
    --border: 1.5px solid var(--afro-black);

    /* Tipografía */
    --main-font: 'Franklin-Gothic-Heavy', 'Arial Narrow', Arial, sans-serif;
    --main-font-light: 'Franklin-Gothic-Book', Arial, sans-serif; 
    --secundary-font: 'Gruppo-Regular', sans-serif;
    --text-font: 'Ubuntu-Light', sans-serif;
    --big-font: 'Casta-Thin', Times, serif;

    /* Cursor */
    --cursor: url("../img/pointer.png"), pointer;
}
    
/* Normalizadores (Hoja de estilos) */
*{
    padding: 0px;
    margin: 0px;
    font-family: var(--text-font);
    box-sizing: border-box;
    /* Activar para ver delimitaciones de los elementos de estrucrura */
    /* outline: 2px dashed purple; */
}

body {
    background-color: var(--afro-black);
    max-width: 100%; 
    overflow-x: hidden;

    /* Para página de ayuda */
    transition: background-color 1s ease;
}

a {
    font-family: var(--text-font);
    color: var(--afro-black);
    text-decoration: none;
    cursor: var(--cursor);
}

a:hover {
    font-weight: bolder;
}

ul {
    list-style: none;
}

/* Diseño scrollbar */
html::-webkit-scrollbar{
    width:20px;
}
  
html::-webkit-scrollbar-track{
    background: var(--afro-black);
}
  
html::-webkit-scrollbar-thumb{
    background: var(--afro-yellow);
}

/* Background color -Para utilizar directamente en html y cambiar el color del contenedor sin tener que crear clases específicas en CSS ya que se han utilizado elementos comunes para utilizar con diferentes colores de fondo*/
.bg-red {
    background-color: var(--afro-red);
}

.bg-light-red {
    background-color: var(--afro-light-red);
}

.bg-purple {
    background-color: var(--afro-purple);
}

.bg-light-purple {
    background-color: var(--afro-light-purple);
}

.bg-yellow {
    background-color: var(--afro-yellow);
}

.bg-light-green {
    background-color: var(--afro-light-green);
}

.bg-green {
    background-color: var(--afro-green);
}

/* Background imágenes de la ventana modal del menú */
.bg-img-1, .bg-img-2, .bg-img-3, .bg-img-4 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bg-img-1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url(../img/escenario-festival-conciencia-afro.jpg);
}

.bg-img-2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url(../img/afrozumba-espacio-afro.jpg);
}

.bg-img-3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url(../img/residencia-espacio-afro.png);
}

.bg-img-4 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url(../img/contacto-conciencia-afro.jpg);
}

/* Tipografía */
p, li {
    font-family: var(--text-font); 
    font-size: 16px;
    line-height: 1.4em;
    padding-bottom: var(--small);
}

h1 {
    font-family: var(--main-font);
    font-size: 6vw; 
    text-transform: uppercase;
    line-height: 1em;
}

h2 {
    font-family: var(--secundary-font);
    font-size: 7vw;
    font-weight: lighter;
    text-transform: uppercase;
    line-height: 1em;
    letter-spacing: 0.01em;
}

/* Tipografía de big-text */
h3, .big-text {
    font-family: var(--big-font);
    font-size: 10vw;
    font-weight: lighter;
    text-align: center;
    text-transform: uppercase;
    line-height: 1em;
    color: var(--afro-yellow);
    padding-bottom: var(--medium);
}

h4 {
    font-family: var(--main-font);
    font-size: 4vw; 
    text-transform: uppercase;
    padding-bottom: var(--medium);
}

h5 {
    font-family: var(--secundary-font);
    font-size: 4.5vw;
    font-weight: lighter;
    line-height: 1em;
} 

h6{
    font-family: var(--main-font);
    font-size: 3vw; 
    text-transform: uppercase;
}

/* Botón */
.btn {
    font-family: var(--main-font);
    font-size: 16px; 
    text-transform: uppercase;
    color: var(--afro-black);
    background-color: var(--afro-yellow);
    border: var(--border);
    border-radius: 100px;
    padding: 2px 10px;
    transition: var(--transition);
}

.btn:hover {
    color: var(--afro-yellow);
    border-color: #000000;
    background-color: var(--afro-black);
    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.30) inset;
}

/* Reglas generales */

/* Header */
header {
    width: 100%;
    height: var(--height-header-mob);
    position: fixed; 
    top: 0px;
    z-index: 2000; 
    background-color: var(--afro-yellow);
    border-top: var(--border);
    border-bottom: var(--border);

    /*flex*/
    display: flex;
    justify-content: center;
    align-items: center;   
}

.logo {
    /* Nota: Importante para que no haya conflicto lógico con el div del icono hamburguesa y botón */
    z-index: 3000; 
}

.logo img {
    width: 32px;
    height: 100%;     
} 

/* Botón hamburguesa y Botón */
header div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1000;

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

/* Botón hamburguesa */
.btn_menu{
	width: 30px;
	height: 100%;
	background-color: transparent;
	border: none;
	cursor: var(--cursor);
    margin-left: 12px;
    
	/*flex*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.btn_menu span{
	width: 100%;
	height: 4px;
	background-color: var(--afro-black);
	margin: 2px 0;
	transition: transform .2s linear;
}

.bar1{
	transform: rotate(45deg);
}

.bar2{
	transform: rotate(-45deg);
	position: relative;
	top: -8px; 
}

.btn-cta {
    height: 100%;
    font-family: var(--main-font);
    color: var(--afro-black);
    font-size: 20px;
    padding: 12px;
    border-left: var(--border);
    transition: var(--transition);
}

.btn-cta:hover {
    color: var(--afro-yellow);
    background-color: var(--afro-black);
}

/* Footer */
footer {
    border-top: var(--border);
    border-bottom: var(--border);
}

footer p {
    font-family: var(--main-font-light);
    
}
.top-footer {
    text-align: center;
    padding: var(--large); 
    color: var(--afro-black); 
}

.top-footer img {
    width: 20%;
    padding-bottom: var(--large);
}

.top-footer > div {
    text-align: start; 
}

.top-footer p {
    font-size: 18px;
}

.top-footer a {
    font-family: var(--main-font);
    color: var(--afro-black);
}

.top-footer a:hover {
    text-decoration: underline;

}

.buttom-footer, .buttom-footer a {
    color: var(--afro-yellow);
    font-family: var(--main-font-light);
    padding: var(--small);
    text-align: center;
    letter-spacing: 0.5px;
}

.rrss {
    padding-bottom: var(--small);

    /*flex*/
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.rrss img {
    width: 50px;
    padding: 0;
    margin-left: var(--small); 
    transition: var(--transition);
}

.rrss img:hover {
    border: var(--border);
    box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.10) inset;
    border-radius: 100%;
}

.rrss p {
    padding-bottom: 0;
}

/* Ventana Modal - Newsletter */
.newsletter {
    width: 100%; 
    background-color: var(--afro-light-purple);
    border: var(--border);
    padding: var(--small);

    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000; 
}

.newsletter div:first-child {
    /*flex*/
    display: flex;
}

.newsletter span {
    font-family: var(--main-font);
    text-transform: uppercase; 
    width: 100%;
    
    /*flex*/
    display: flex;
    justify-content: flex-end;
}

.newsletter p {
    padding: var(--small) 0;
    font-family: var(--secundary-font);
    font-size: 24px;
    line-height: 1.1em;
}

.newsletter span i {
    color: var(--afro-red);
    padding-left: var(--small);
}

.newsletter-form {
    /*flex*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.newsletter-form input {
    height: 40px;
    background-color: transparent;
    border-bottom: var(--border);
    border-right: 0px;
    border-left: 0px;
    border-top: 0px;
    border-radius: 0px;
    width: 100%;
    color: var(--afro-black);
}

.newsletter-form button {
    font-family: var(--main-font-light);
    text-decoration: uppercase;
    font-size: 24px; 
    background-color: transparent;
    border: var(--border);
    border-color: transparent;
    padding: 4px 8px;
    color: var(--afro-black);
    margin-left: var(--small);
}

.newsletter-form button:hover {
    background-color: var(--afro-yellow);
    border: var(--border);
}

.newsletter-form input::placeholder {
    font-size: 24px;
    font-family: var(--main-font-light);
    color: var(--afro-black);
}

.newsletter-form input:focus {
    border: none; 
    border-bottom: var(--border);
    background-color: var(--afro-yellow);
    font-size: 24px;
    color: var(--afro-black);
    font-family: var(--main-font-light);
    outline: none; 
}

/* Ventana Modal - Menú */
.menu-pop-up {
    position: fixed; 
    top: 0px; 
    right: 0px; 
    width: 100%;
    height: 100vh;
    z-index: 1000; 

    display: none; 

    background-color: var(--afro-black);
    color: var(--afro-yellow);
}

.menu-pop-up nav {
    height: 100%;
    padding-top: var(--height-header-mob);

    /*flex*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2%;
}

.menu-pop-up a {
    font-family: var(--main-font);
    text-transform: uppercase;
    font-size: 5vw;
    color: var(--afro-yellow);
    display: block;
    text-align: center;
}

.menu-pop-up a:hover {
    /* He elegido otro color para crear un efecto sutil */
    color: rgb(255, 255, 73);
}

/* Reglas Especificas */

/* Hero - Home */
.hero {
    display: flex; 
    flex-direction: column-reverse;
}

.hero > .section-text {
    margin-top: var(--height-header-mob);
}

/* Sección imagen y texto */
.main-section {
    display: flex; 
    flex-direction: column-reverse;
}

/* Sección con imagen */
.section-img {
    padding: var(--padding-section);
}

.section-img img{
    width: 100%; 
    object-fit: contain;
}

/* Sección con texto */
.section-text {
    color: var(--afro-black);
    border-bottom: var(--border);
    padding: var(--padding-section);
     
    /* Flex */
    display: flex; 
    flex-wrap: wrap; 
}

.section-text h1{
    order: 2; 
    padding-top: var(--small); 
}

.section-text h5{
    order: 1; 
}

.section-text p {
    padding-bottom: var(--medium);
}

/* Sección con fondo negro */
.section-black {
    color: var(--afro-yellow); 
    padding: var(--padding-section);
    margin-top: var(--height-header-mob);
}

.section-black h2, .section-black div {
    padding-bottom: var(--medium);
}

.section-black h1 {
    padding-bottom: var(--small);
}

.section-black img {
    width: 100%;
    display: block; 
    padding-top: 4%;
}

/* Sección con texto grande */
.section-big-text {
    height: 50vh;
    padding: var(--padding-section);
    text-align: center;

    /*flex*/
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Sección Cards */
.cards {
    /*flex*/
    display: flex;
    flex-wrap: wrap; 
}

.card {
    width: 100%;
    border: var(--border);
    border-right: 0px;
    border-bottom: 0;
    padding: var(--small);

    /*flex*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.card-vacia {
    display: none;
}

.card div:first-child {
    width: 100%;
    padding-bottom: var(--small);

    /*flex*/ 
    justify-content: space-between;
}

.card div:first-child > div:first-child {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card span {
    font-family: var(--main-font);
    font-size: 12px;
    text-transform: uppercase; 
}

.card div:first-child span:first-child {
    padding: var(--xsmall); 
    border: var(--border);    
}

.card div:first-child span:last-child i {
    color: var(--afro-purple);
    padding-left: 4px;   
}

.card img {
    width: 100%;
    border: var(--border);
    margin: var(--small) 0px;  
}

.card img:last-child {
    width: 30px;
    margin: 0px; 
    padding: 2px;
    text-align: end; 
}

.card img:last-child:hover {
    background-color: var(--afro-yellow);  
}

.card p {
    font-size: 14px;
}

.card h4 {
    padding-bottom: 0;
}

/* Titular Secciones */
.titular-section {
    width: 100%;
    text-align: center;
    color: var(--afro-yellow);
}

.titular-section h3 {
    padding-bottom: 0;
}

/* Sección Equipo */
.equipo {
    padding: var(--padding-section);
}

.card-equipo {
    color: var(--afro-yellow);
    border-top: var(--border);
    border-color: var(--afro-yellow);
    padding: var(--medium) 0;
    cursor: var(--cursor);
}

.card-equipo:hover {
    position: relative;
    z-index: 100;
}

.card-equipo > .big-text{
    font-size: 7vw;
    text-align: start;
    padding-bottom: var(--small);
}

.hover-img {
    position: absolute;
    top: 0; 
    left: 0;
    transform: translate(-50%, -50%) scale(.5);
    opacity: 0;

    pointer-events: none;
    z-index: 10;
}

.card-equipo:hover ~ .hover-img{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

/* Sección Ayuda */
.fixed-section {
    /* height: 25vh; */
    position: fixed;
    top: 2%;
    right: 2%;
    left: 2%;
    z-index: 1000;

    /*flex*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.fixed-section div {
    width: 100%;

    /*flex*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.fixed-section a:last-child, .fixed-section p, .fixed-section h6 {
    /* Eliminar el correo electrónico y otros textos que estéticamente no queda bien para mobile y no aportan contenido */
    display: none;
}

.panel {
    min-height: 100vh;
    padding-top: var(--large); 

    /* Flex */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.panel h2 {
    display: block; 
    width: 70%;
    text-align: center;
}

.card-ayuda {
    border: var(--border);
    height: 100%;
    width: 70%;

    /*flex*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: space-between;
}

.card-ayuda > div {
    padding: var(--medium);
    width: 100%;
    border-top: var(--border);
    /*flex*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.titulo-precio{
    font-size: 3vw;

    /*flex*/
    display: flex;
    align-items: flex-end;
}

.titulo-precio h4 {
    width: 50%;
    font-size: 5vw;
    display: block;
    
    padding-bottom: 0;
}

.titulo-precio span {
    display: block;
    width: 50%;
    font-family: var(--secundary-font);
    font-size: 2em;
    text-align: right;
}

.panel .btn {
    z-index: 2000;
}

/* Sección Formulario Contacto */
.form {
    display: flex;
    flex-direction: column;
}

.form .section-text {
    margin-top: var(--height-header-mob);
}

.section-form {
    padding: var(--padding-section);
}

.section-form input {
    background-color: var(--afro-yellow);
    padding: 20px;
    width: 100%;
    margin-bottom: var(--medium);
    border: var(--border);
    border-radius: 0;
}

.section-form input:nth-child(4) {
    padding: 20px 20px 80px 20px;
}

.section-form input::placeholder {
    font-size: 16px;
    font-family: var(--main-font-light);
    color: var(--afro-black);
}

.section-form input:focus {
    background-color: var(--afro-light-purple);
    font-size: 20px;
    color: var(--afro-black);
    font-family: var(--main-font-light);
    outline: none; 
}

.section-form label {
    margin: 20px 0px;
    width: 100%;
    /*flex*/
    display: flex;
}

.legal-text {
    font-family: var(--text-font);
    font-size: 14px;
}

.section-form input:last-child {
    width: fit-content;
    margin-right: var(--small);

    /* Tamaño del checkbox */
    padding: 8px;
}

.section-form form {

    /* Flex - Para colocar el botón a la derecha */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Diseño checkbox */
.mycheck {
  display: inline-flex;
  align-items: center;
  cursor: var(--cursor);
  background-color: var(--afro-black);
  color: var(--afro-black);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  width: 10px;
  height: 10px;
  appearance: none;
  border: var(--border);
  background-position: 0 -2rem;
  background-size: 100%;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
}

.mycheck:checked {
  background-color: var(--afro-yellow);
  color: var(--afro-yellow);
  background-position: 0 0;
} 

/* Sección Actividades */
.actividades {
    padding: var(--padding-section);
    margin-top: var(--height-header-mob);
}

.card-actividad {
    background-color: var(--afro-yellow);
    padding: 2%;
    border: var(--border);
    margin-bottom: var(--large);

    /*flex*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.card-actividad div:first-child {
    width: 100%;
    /*flex*/
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-actividad div:first-child span {
    font-family: var(--main-font);
    font-size: 3vw;
    text-transform: uppercase;
}

.card-actividad div:first-child span:first-child {
    padding: var(--xsmall);
    background-color: var(--afro-light-purple);
    border: var(--border);
}

.card-actividad div:first-child i {
    padding-right: 4px;
    color: var(--afro-purple);
}

.card-actividad img {
    width: 100%;
    object-fit: cover;
    margin: var(--medium) 0;
    border: var(--border);
}

.card-actividad div:last-child > div {
    flex-direction: column;
}

.card-actividad div:last-child > div > div:last-child {
    padding-top: var(--medium);

    /*flex*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.card-actividad div:last-child > div > div:last-child span {
    font-family: var(--main-font);
    font-size: 5vw;
    text-transform: uppercase;
    padding: var(--xsmall);
    border: var(--border);
    color: var(--afro-yellow);
    background-color: var(--afro-black);
}

.card-actividad:hover {
    background-color: var(--afro-light-green);
}

/* Responsive */

/* Responsive Tablet iPad Mini - iPad Pro */
@media all and (min-width:768px){
    /* Tipografía - Tablet */
    p, li {
        font-size: 2.5vw;
    }

    h1 {
        font-size: 5vw; 
    }
    
    h2 {
        font-size: 6vw;
    }
    
    h4 {
        font-size: 3vw;
        padding-bottom: var(--small); 
    }
    
    h5 {
        font-size: 4vw;
    }
    
    /* Botón - tablet*/
    .btn {
        font-size: 24px; 
        padding: 3px 15px;
    }

    /* Header - tablet */
    header {
        height: var(--height-header-tablet);
    }

    .logo img {
        width: 44px; 
    } 

    .btn-cta {
        font-size: 24px;
        padding: 16px;
    }

    /* Footer - tablet */
    .top-footer p {
        font-size: 3vw;
    }

    /* Newsletter - tablet */

    .newsletter {
        width: 50%; 
    }

     /* Card - tablet */
    .card {
        width: 50%;
     }

    .card-vacia {
        display: block;
    }

    .card span {
        font-size: 20px;
    }

    .card p {
        font-size: 16px;
    }

    /* Card - equipo - tablet */
    .card-equipo > .big-text{
        font-size: 6vw;
    }

    /* Card - actividades - tablet */
    .card-actividad div:last-child > div > div:last-child {
        padding-top: var(--small);
    }

    /* Ayuda - Tablet */
    .panel {
        gap: 30px;
    }

    .panel h2 {   
        width: 70%; 
    }

    .card-ayuda { 
        width: 50%;
    }

    .titulo-precio{
        font-size: 2vw;
    }

    .titulo-precio h4 {
        font-size: 4vw;
    }

    /* Formulario */
    .section-form input::placeholder {
        font-size: 20px;
    }

}

/* Responsive Desktop */
@media all and (min-width:1025px) {

    /* Tipografía - Desk*/
    p, li {
        font-size: 1.3vw;
        line-height: 1.4em; 
    }

    h1 {
        font-size: 2.8vw; 
    }

    h2 {
        font-size: 3vw;
    }

    h4 {
        font-size: 1.8vw; 
    }

    h5 {
        font-size: 1.6vw;
    } 

    h6{
        font-size: 1vw; 
    }

    .big-text {
        font-size: 8vw;
    }


    /* Botón - Desk */
    .btn {
        font-size: 20px;
    }

    /* Header - Desk */
    header {
        height: var(--height-header-desk);  
    }
        
    .logo img {
        width: 48px; 
    }
        
    header div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        right: 0px;
        margin: auto; 
        z-index: 2000; 
            
        /*flex*/
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .btn_menu{
        width: 40px; 
        margin-right: 16px; 
    }
        
    .btn-cta {
        font-size: 36px;    
    }

    /* Pop-up Menu - Desk */
    .menu-pop-up nav {
        padding-top: var(--height-header-desk);
    }
    
    .menu-pop-up a {
        font-size: 4em;
    }

    /* Footer - Desk */
    .top-footer {
        padding: var(--medium); 
    
        /*flex*/
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .top-footer > a {
        display: block; 
        width: 40%; 
    }

    .top-footer > div {
        width: 60%;
    }
    
    .top-footer img {
        width: 25%;
        padding-bottom: 0;
    }

    .top-footer p {
        font-size: 24px;
        padding-bottom: var(--medium);
    }

    .rrss {
        padding-bottom: var(--medium);
    }

    .rrss p {
        padding-bottom: 0;
    }

    .rrss img {
        width: 60px;
    }

    .buttom-footer {
        padding: var(--xsmall);

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

    .buttom-footer div {
        width: 20%;
        text-align: end;
    }

    .buttom-footer a {
        padding-right: var(--medium); 
    }

    .buttom-footer a:last-child {
        padding-right: 0; 
    }

    .buttom-footer p {
        padding: 0;
        font-size: 14px;
    }

    /* Newsletter - Desk */
    .newsletter {
        width: 35%; 
        padding: var(--xsmall);
    }

    /* Hero - Desk */
    .hero, .main-section {
        height: 100vh;
        margin-top: var(--height-header-desk); 
    
        /*flex*/
        display: flex;
        align-items: flex-end;
        flex-direction: row;
    }

    /* Sección con imagen - Desk */
    .section-img {
        width: 50%;
        height: 100%;
        border-right: var(--border);

        /*flex*/
        display: flex;
        justify-content: center;
        align-items: flex-end; 
    }

    .section-img img{
        width: 100%;
    }

    /* Sección con texto - Desk */
    .section-text {
        width: 50%;
        border-bottom: 0;
        
        /*flex*/
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }

    /* Sección Fondo Negro - Desk */
   .section-black {
        padding: 0;
        height: 100vh;
        margin-top: var(--height-header-desk);
        /*flex*/
        display: flex;
        align-items: flex-end;
    } 

    .section-black div {
        padding: var(--padding-section);
        width: 50%;
    }

    .section-big-text {
        height: 100vh;
    }

    .section-black img { 
        width: 80%;
        
    }

    /* Sección Cards - Desk */

    .card span {
        font-size: 20px;
    }

    .card img {
        margin: var(--small) 0;  
    }

    .card img:last-child {
        width: 60px;
        padding: 4px;
    }

    .card p {
        font-size: 20px;
    }

    /* Sección Cards Equipo - Desk */
    .card-equipo {
        padding: var(--small) 0;

        /*flex*/
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    
    .card-equipo > .big-text{
        font-size: 3vw;
        display: block; 
        width: 40%;
    }

    .card-equipo p {
        display: block;
        width: 60%;
    }

    /* Ayuda Section - Desk */
    .fixed-section {
        min-height: 90vh;
        bottom: 2%;
        background-color: transparent;
        padding: 0;
        border: none; 
        

        /* Flex */
        justify-content: space-between;
    }

    .fixed-section div:first-child {
        align-items: flex-start;
    }

    .fixed-section div {
        width: 100%;

        /* Flex */
        flex-direction: row;
        align-items: flex-end;
    }

    .fixed-section a:last-child, .fixed-section p, .fixed-section h6 {
        /* Eliminar el correo electrónico y otros textos que estéticamente no queda bien para mobile y no aportan contenido */
        display: block;
    }

    .fixed-section p {
        width: 30%;
        padding-bottom: 0;
    }

    .text-left {
        text-align: left;
    }

    .text-right{
        text-align: right;
    }

    .panel {
        min-height: 100vh;
        padding-bottom: 0;
        padding-top: 0;
    
        /* Flex */
        justify-content: center;
        gap: 40px; 
    }

    .panel h2 {
        width: 40%;
    }

    .card-ayuda {
        /*flex*/
        flex-direction: row;
    }

    .card-ayuda > div {
        padding: var(--small);
        border-left: var(--border);
        border-top: 0; 
    }

   .titulo-precio {
        font-size: 1vw;
   }

   .titulo-precio h4 {
        font-size: 2vw;
   }
    
    /* Sección Formulario Contacto - desk */
    .form {
        flex-direction: row;
        align-items: flex-start;
    }

    .form .section-text {
        width: 50%;
        margin-top: var(--height-header-desk);
        border-bottom: 0;
    }

    .section-form {
        width: 50%;
        margin-top: var(--height-header-desk);
        border-left: var(--border);
    }

    /* Sección Actividades - Desk */
    .card-actividad {
        padding: var(--xsmall);
        margin-bottom: var(--medium);
    }

    .card-actividad div:first-child span:first-child {
        padding: 0.5%;
        font-size: 1.2vw;
    }

    .card-actividad div:first-child span:last-child {
        font-size: 1.2vw;
    }

    .card-actividad div:last-child {
        padding-top: var(--xsmall);
        
        /*flex*/
        display: flex;

        /* ¡Para que ocupe todo el espacio disponible! */
        align-items: stretch;
    }

    .card-actividad div:last-child img {
        margin: 0;
        width: 40%;
    }

    .card-actividad div:last-child div {
        width: 100%;
        padding: var(--small);
            
        justify-content: space-between;
    }

    .card-actividad div:last-child div > div {
        padding: 0;
    }
    
    .card-actividad div:last-child > div > div:last-child span {
        font-size: 1.5vw;
    }
    
}