@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');


/*Colores para los textos*/
:root {
  --color-blanco: #fff;
  --color-negro:#222;
  --salmon:#F28773;
  --amarillo:#eca020;
}

body {
	background-color: var(--color-negro) ;
	font-size: 16px;
	font-family: "Crimson Text", serif;
	padding-top: 56px;
	}

.navbar {background-color: var(--color-negro);}
.navbar span {color:var(--color-blanco); font-family: "Outfit", sans-serif;}
.navbar a {color:var(--color-blanco); transition: .2s}
.navbar a:hover {color: var(--salmon);}
.navbar .navbar-toggler {border: 1px solid var(--color-blanco); color: var(--color-blanco) !important; transition: .2s}
.navbar .navbar-toggler:hover {background-color: var(--color-blanco); color: var(--color-negro) !important; border:none !important;}

p {color:var(--color-blanco);}

a {font-size: .9rem; text-decoration: none; font-weight: 400; text-transform: uppercase !important; color:var(--color-blanco); font-family: "Outfit", sans-serif; margin-left:32px; }

hr {margin: 0.5rem auto 0 auto; color: var(--color-blanco); background-color: currentColor; border: 0; opacity: .75; width: 88px; height: 1px !important;}

button {transition: .2s; background-color: #ff7e6f; color: var(--color-negro) !important; padding: 8px 24px; border-radius: 25px; border: none; font-size: 1.2rem; font-weight: 600; }
button:hover {background-color:var(--color-blanco); color: var(--color-negro);}

        #bg-banner-principal {
            height: 100vh;
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .atropos {
            width: 100%;
            height: 100%;
        }
        .atropos-inner {
            width: 100%;
            height: 100%;
            background-image: url('../img/bg-pezerrante.jpg');
            background-size: cover;
            background-position: center;
        }
        .banner-content {
            position: absolute;
            z-index: 1;
            padding: 2rem;
            width: 80%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        #toggle-effect {
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            background-color: rgba(255,255,255,0.7);
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
        }
        @media (max-width: 768px) {
            .atropos-inner {
                background-size: 100% auto;
                background-image: url('../img/bg-pez-errante-mv.jpg') !important;
            }
		        .banner-content h1 {font-size: 3.5rem !important;}
		        .banner-content {margin: 60px 0 0 0 !important;}
		        #bg-banner-principal {height: 440px !important;}
        }

                #log-container {
            position: fixed;
            bottom: 60px;
            left: 10px;
            right: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            font-size: 12px;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1001;
        }
        

/*#bg-banner-principal {background-image: url('../img/bg-pezerrante.jpg'); background-size: cover; background-position: center; min-height: 480px; margin: 0 0 !important;}*/
#bg-banner-principal h1 {font-size: 6rem; color: var(--color-blanco); font-family: "Anton", sans-serif; letter-spacing: 0.2rem; font-weight: 400 !important; text-shadow: 5px 2px 10px rgba(0, 0, 0, 0.6); margin-bottom: -10px;}
#bg-banner-principal span	{text-shadow: 0px 0px 4px rgba(0, 0, 0, 1); font-size: 18px; color: var(--color-blanco); font-weight: 400;}
#bg-banner-principal .parrafos {margin: 16px auto 1px auto !important; box-sizing: border-box; text-shadow: 1px 1px 14px rgba(0, 0, 0, 1); max-width: 320px; line-height: 1.2rem; font-size: 1.1rem;}
#hidden-fb {display: none !important;}

#somos-pe {padding: 0 0;}
#somos-pe .imagen-fondo { background-image: url('../img/somos-pez-errante.jpg'); background-size: cover; background-position: center; padding: 0;color: white;}
#somos-pe .filtro-negro { background-color: rgba(0, 0, 0, 0.8); padding: 0; display: inline-block; margin: 0 0;}
#somos-pe .filtro-negro .row { height: 100%; /* Asegura que la fila ocupe todo el alto del filtro negro */ margin: 0; /* Elimina el margin por defecto de la clase .row */ }
#somos-pe .filtro-negro .col-md-12 { height: 100%; /* Asegura que la columna ocupe todo el alto de la fila */ display: flex; /* Utiliza display: flex para alinear el contenido verticalmente */ justify-content: center; /* Alinea el contenido horizontalmente */ align-items: center; /* Alinea el contenido verticalmente */ color: #fff; /* Color del texto */ }
#somos-pe .container-fluid .row {padding: 160px 40px 144px 40px;}
#somos-pe h2 {font-size: 1.9rem; line-height: 2.1rem; text-shadow: 0px 0px 8px rgba(0, 0, 0, 1); color:#ffe7a2;}
#somos-pe p {font-size: 1.6rem; line-height: 1.8rem; text-shadow: 0px 0px 8px rgba(0, 0, 0, 1); margin:0 0; }
#somos-pe span {color:var(--salmon);}
#somos-pe hr {margin: 0 0 24px 0 !important; width: 32px !important;}
#somos-pe button {margin-top: 24px !important;}

#musica-pe {padding: 0 0;}
#musica-pe .imagen-fondo { background-image: url('../img/musica-pez-errante.jpg'); background-size: cover; background-position: center; padding: 0;color: white;}
#musica-pe .filtro-negro { background-color: rgba(0, 0, 0, 0.8); padding: 0; display: inline-block; margin: 0 0;}
#musica-pe .filtro-negro .row { height: 100%; /* Asegura que la fila ocupe todo el alto del filtro negro */ margin: 0; /* Elimina el margin por defecto de la clase .row */ }
#musica-pe .filtro-negro .col-md-12 { height: 100%; /* Asegura que la columna ocupe todo el alto de la fila */ display: flex; /* Utiliza display: flex para alinear el contenido verticalmente */ justify-content: center; /* Alinea el contenido horizontalmente */ align-items: center; /* Alinea el contenido verticalmente */ color: #fff; /* Color del texto */ }
#musica-pe .container-fluid .row {padding: 160px 40px 144px 40px;}
#musica-pe h2 {font-size: 1.9rem; line-height: 2.1rem; text-shadow: 0px 0px 8px rgba(0, 0, 0, 1); color:#ffe7a2;}
#musica-pe p {font-size: 1.6rem; line-height: 1.8rem; text-shadow: 0px 0px 8px rgba(0, 0, 0, 1); margin:0 0; }
#musica-pe hr {margin: 0 0 24px 0 !important; width: 32px !important; display: inline-block;}
#musica-pe span {color:var(--salmon);}
#musica-pe button {margin: 24px 0 !important;}

#redes-pe {padding: 0 0;}
#redes-pe .imagen-fondo { background-image: url('../img/redes-sociales-pez-errante.jpg'); backdrop-filter: blur(10px); background-size: cover; background-position: center; padding: 0;color: white;}
#redes-pe .filtro-negro { background-color: rgba(0, 0, 0, 0.8); padding: 0 !important; margin: 0 0;}
#redes-pe .filtro-negro .row { height: 100%; /* Asegura que la fila ocupe todo el alto del filtro negro */ margin: 0; /* Elimina el margin por defecto de la clase .row */ }
#redes-pe .filtro-negro .col-md-12 { height: 100%; /* Asegura que la columna ocupe todo el alto de la fila */ display: flex; /* Utiliza display: flex para alinear el contenido verticalmente */ justify-content: center; /* Alinea el contenido horizontalmente */ align-items: center; /* Alinea el contenido verticalmente */ color: #fff; /* Color del texto */ }
#redes-pe .container-fluid .row {padding: 160px 40px 144px 40px !important;}
#redes-pe h2 {font-size: 1.9rem; line-height: 2.1rem; text-shadow: 0px 0px 8px rgba(0, 0, 0, 1); color:#ffe7a2;}
#redes-pe p {font-size: 1.6rem; line-height: 1.8rem; text-shadow: 0px 0px 8px rgba(0, 0, 0, 1); margin:0 0; }
#redes-pe span {color:var(--salmon);}
#redes-pe  hr {margin: 24px auto 0 auto !important; width: 32px !important;}
#redes-pe button {padding: 10px 11px; border-radius: 30px; border: none; margin: 24px 4px 48px 4px; font-size: 3rem;}
#redes-pe button ion-icon {font-size: 2rem;}
#redes-pe .video {border-radius: 8px; margin: 0 0 40px 0;}

#videos-pe {padding: 0 0;}
#videos-pe .imagen-fondo { background-image: url('../img/videos-pez-errante.jpg'); backdrop-filter: blur(10px); background-size: cover; background-position: center; padding: 0;color: white;}
#videos-pe .filtro-negro { background-color: rgba(0, 0, 0, 0.8); padding: 0 !important; margin: 0 0;}
#videos-pe .filtro-negro .row { height: 100%; /* Asegura que la fila ocupe todo el alto del filtro negro */ margin: 0; /* Elimina el margin por defecto de la clase .row */ }
#videos-pe .filtro-negro .col-md-12 { height: 100%; /* Asegura que la columna ocupe todo el alto de la fila */ display: flex; /* Utiliza display: flex para alinear el contenido verticalmente */ justify-content: center; /* Alinea el contenido horizontalmente */ align-items: center; /* Alinea el contenido verticalmente */ color: #fff; /* Color del texto */ }
#videos-pe .container-fluid .row {padding: 160px 40px 144px 40px !important;}
#videos-pe h2 {font-size: 1.9rem; line-height: 2.1rem; text-shadow: 0px 0px 8px rgba(0, 0, 0, 1); color:#ffe7a2;}
#videos-pe p {font-size: 1.6rem; line-height: 1.8rem; text-shadow: 0px 0px 8px rgba(0, 0, 0, 1); margin:0 0; }
#videos-pe span {color:var(--salmon);}
#videos-pe  hr {margin: 16px 0 24px 0 !important; width: 32px !important;}
#videos-pe button {margin: 24px 0 48px 0 !important;}
#videos-pe .video {border-radius: 8px; margin: 0 0 40px 0;}

.fondo-linea { display: inline-block; /* Hace que el fondo se ajuste al contenido */ background-color: rgba(0, 0, 0, 1); /* Color de fondo semi-transparente */ padding: 8px 16px; /* Espaciado interno */ border-radius: 8px; /* Bordes redondeados */ margin-bottom: 1px; /* Espaciado entre líneas */ }

.card-glass { height: fit-content !important; background: rgba(255, 255, 255, 0.2); /* Fondo blanco semi-transparente */ backdrop-filter: blur(10px); /* Desenfoque de fondo */ border-radius: 15px; /* Bordes redondeados */ border: 1px solid rgba(32, 32, 32, 0.5); /* Borde blanco semi-transparente */ color: #fff; /* Color del texto */ padding: 20px; /* Espaciado interno */ transition: transform 0.3s; /* Transición suave al hacer hover */ }

/*        .card-glass:hover {
            transform: scale(1.05); /* Efecto de aumento al pasar el mouse */
        }*/