@charset "UTF-8";

@font-face {
	font-family: 'fatfrank';
	src: url('fonts/FatFrank-Regular.woff2') format('woff2'),
		 url('fonts/FatFrank-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'quasimoda';
	src: url('fonts/Quasimoda-Medium.woff2') format('woff2');
	src: url('fonts/Quasimoda-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'quasimoda';
	src: url('fonts/Quasimoda-Bold.woff2') format('woff2');
	src: url('fonts/Quasimoda-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'quasimoda';
	src: url('fonts/Quasimoda-MediumItalic.woff2') format('woff2');
	src: url('fonts/Quasimoda-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: 'quasimoda';
	src: url('fonts/Quasimoda-Heavy.woff2') format('woff2');
	src: url('fonts/Quasimoda-Heavy.woff') format('woff');
	font-weight: 800;
	font-style: normal;
}

/* Barra de colores */
.color-bar div:nth-child(1) { background-color: #e5007d; }
.color-bar div:nth-child(2) { background-color: #06999a; }
.color-bar div:nth-child(3) { background-color: #007d3b; }
.color-bar div:nth-child(4) { background-color: #d52845; }
.color-bar div:nth-child(5) { background-color: #333c86; }
.color-bar div:nth-child(6) { background-color: #9C27B0; }
.color-bar div:nth-child(7) { background-color: #F06292; }

/* Fondo */
body{
	background-color: whitesmoke;
	font-family: "quasimoda", sans-serif;
	font-weight: 500;
	font-style: normal;
	color: black;
	text-align: justify;
}
/* Estilos de texto */
h1 {
font-family: "fatfrank", sans-serif;
font-weight: normal;
font-style: normal;
    color: var(--main-color);
}
p{
font-family: "quasimoda", sans-serif;
font-weight: 500;
font-style: normal;
color: black;
text-align: justify;
}

pc{
font-family: "quasimoda", sans-serif;
font-weight: 700;
font-style: normal;
    text-align: center;
    padding-bottom: 0;
    padding-top: 1vw;
    color: darkslategray;
}

pt{
font-family: "quasimoda", sans-serif;
font-weight: 700;
font-style: normal;
    text-align: center;
    padding-bottom: 0;
    padding-top: 1vw;
    color: darkslategray;
}

b{
font-family: "quasimoda", sans-serif; 
font-weight: 700;
font-style: normal;
text-align: justify;
color: var(--main-color);
}

b2{
font-family: "fatfrank", sans-serif;
font-weight: normal;
font-style: normal;
    text-align: justify;
    padding-left: 2.2em;
    letter-spacing: 0.1em;
    padding-top: 0vw;
	color: whitesmoke;
}

i{
font-family: "quasimoda", sans-serif;
font-weight: 500;
font-style: normal;
color: black;
}

 .btn-rosa { background-color: #e5007d; }
  .btn-rojo { background-color: #d52845; }
    .btn-turquesa { background-color: #06999a; }
    .btn-verde { background-color: #007d3b; }
    .btn-azul { background-color: #333c86; }
    .btn-morado { background-color: #9C27B0; }



/* Estilos para pantallas verticales (móviles) */
@media (max-aspect-ratio: 1/1) {
	p{
        font-size: 3.5vw;
      }
      
      pc{
        font-size: 3vw;
      }
		pt{
			font-size: 3vw;
		}
      
      b{
        font-size: 3.5vw;
      }
      
      
      h1{
        font-size: 7vw;
      }
      
      b2{
        font-size: 6vw;
      }
	
    /* Ajustes de texto para móvil */
    .home-icon-desktop {
    display: none;
  }
	.cont {
        padding-top: 10vw;
    }
    
    .contc {
        padding-top: 15vw;
    }
    
    /* Botones inferiores modernos */
    .mobile-nav-buttons {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        padding: 3vw;
		gap: 2vw;
        z-index: 100;
        background-color: whitesmoke;
        box-shadow: none;
    }
	
	.nav-button.home{
		background-color: whitesmoke;
		box-shadow: none;
	}
	
	.home-icon{
		width: 12vw;
		height: 12vw;
		fill: var(--main-color);
		transition: transform 0.3s ease;
	}
	
	.nav-button.home:hover .home-icon {
  transform: scale(1.2);
	}
	

    .nav-button {
        width: 15vw;
        height: 15vw;
        background-color: whitesmoke;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        border: none;
        position: relative;
        overflow: hidden;
    }

    .nav-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

    .nav-arrow {
        width: 12vw;
        height: 12vw;
        transition: transform 0.3s ease;
    }

    .nav-button:hover .nav-arrow {
        transform: scale(1.2);
    }

    .nav-button.prev {
        background-color: var(--main-color);
    }

    .nav-button.prev .nav-arrow {
        fill: whitesmoke;
    }

    .nav-button.next {
        background-color: var(--main-color);
    }

    .nav-button.next .nav-arrow {
        fill: whitesmoke;
    }

    body {
        padding-bottom: 25vw;
    }
    
    /* Ocultar menú flotante en móvil */
    .floating-menu {
        display: none;
    }
	pc{
		display: none;
	}
    
    /* Asegurar que el menú superior no se solape */
    .sbmenu {
        display: none;
    }
}

/* Estilos para pantallas horizontales (escritorio) */
@media (min-aspect-ratio: 1/1) {
    
	p{
        font-size: 2vw;
      }
      
      pc{
        font-size: 2vw;
      }
		pt{
			font-size: 1.5vw;
		}
      
      b{
        font-size: 2vw;
      }
      
      h1{
        font-size: 4vw;
      }
      
      b2{
        font-size: 3vw;
      }
	/* Ocultar botones móviles */
    .home-icon-desktop {
    position: absolute;
    right: 2vw;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
  .home-icon {
          width: 3vw;   /* Ajusta este tamaño según prefieras */
          height: 3vw;
          transition: transform 0.3s ease;
      }
      .nav-button.home { 
        background: transparent; /* Quita el fondo gris */
        border: none;            /* Quita el borde */       /* Color del icono */
        outline: none;           /* Quita la línea de enfoque al hacer clic */
      }
      .nav-button.home:hover .home-icon {
          transform: scale(1.2);
      }
  .home-svg {
    width: 2.5vw;
    height: 2.5vw;
    fill: whitesmoke;
    transition: transform 0.3s ease;
  }
  
  .home-icon-desktop:hover .home-svg {
    transform: scale(1.1);
  }
	
	.mobile-nav-buttons {
        display: none;
    }
    
    /* Restaurar menú flotante */
    .floating-menu {
        position: fixed;
        bottom: -150px;
        left: 0;
        right: 0;
        background: gainsboro;
        width: 100%;
        height: auto;
        z-index: 1000;
        transition: bottom 0.4s ease-out;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: none;
    }

    .floating-menu.visible {
        bottom: 0;
    }

    .floating-menu .contenedor-botones {
        position: relative;
        top: auto;
        margin-top: 0;
        width: 100%;
        padding: 1vw 0;
        display: flex;
        justify-content: space-between;
    }

    .floating-menu .boton-nav {
        display: inline-block;
        text-decoration: none;
        color: #333;
        transition: all 0.3s ease;
        width: 30vw;
        padding: 0 2vw;
        background: transparent !important;
    }

    .floating-menu .boton-nav:hover {
        color: #526c80;
        transform: scale(1.1);
    }

    .floating-menu .boton-nav pc {
        font-size: 1.5vw;
    }

    .floating-menu .boton-nav h1 {
        font-size: 1.5vw;
        color: var(--main-color);
    }

    body {
        padding-bottom: 8vh;
    }
    
    /* Ajustes de texto para desktop */
    .cont {
        padding-top: 15vw;
    }
}