/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0
*/

/* Fuentes */

@font-face {
  font-family: 'Biro Script Plus';
  src: url('fonts/BiroScriptPlus.woff2') format('woff2'),
       url('fonts/BiroScriptPlus.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Base */
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  background-color: #0a0f1a;
  color: #f0f0f0;
}

/* Hero con parallax y overlay */
.hero {
  height: 80vh;
  background: url('http://saucethenon.com.ar/wp-content/uploads/2025/08/medusas-scaled.jpg') center/cover no-repeat fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: oceanMotion 8s ease-in-out infinite;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 40, 0.5);
  z-index: 1;
}
.hero h1,
.hero p {
  position: relative;
  z-index: 2;
}
.hero h1 {
  margin: 0 0 10px;
  color: #ffffff;
}
.hero p {
  font-size: 1.3rem;
  max-width: 680px;
  margin: 0 20px;
  color: #cdeeff;
}

.sauce-titulo {
	font-family: 'Biro Script Plus', cursive;
	font-size: 8em;
}

@media (max-width: 600px) {
	.sauce-titulo {
		font-size: 4.5em;
	}
}

/* Balanceo sutil del fondo */
@keyframes oceanMotion {
  0% { background-position: center; }
  50% { background-position: center 10px; }
  100% { background-position: center; }
}

/* Burbujas */
.bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.bubbles span {
  position: absolute;
  bottom: -100px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: rise 12s infinite ease-in;
}
.bubbles span:nth-child(1) { left: 10%; width: 20px; height: 20px; animation-delay: 0s; }
.bubbles span:nth-child(2) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 10s; }
.bubbles span:nth-child(3) { left: 30%; width: 25px; height: 25px; animation-delay: 4s; }
.bubbles span:nth-child(4) { left: 40%; width: 10px; height: 10px; animation-delay: 1s; animation-duration: 8s; }
.bubbles span:nth-child(5) { left: 50%; width: 18px; height: 18px; animation-delay: 3s; }
.bubbles span:nth-child(6) { left: 60%; width: 12px; height: 12px; animation-delay: 5s; animation-duration: 9s; }
.bubbles span:nth-child(7) { left: 70%; width: 22px; height: 22px; animation-delay: 0s; animation-duration: 11s; }
.bubbles span:nth-child(8) { left: 80%; width: 14px; height: 14px; animation-delay: 2s; }
.bubbles span:nth-child(9) { left: 90%; width: 19px; height: 19px; animation-delay: 4s; animation-duration: 10s; }
.bubbles span:nth-child(10) { left: 95%; width: 16px; height: 16px; animation-delay: 6s; }

@keyframes rise {
  0% { transform: translateY(0) scale(1); opacity: 0.4; }
  50% { opacity: 0.7; }
  100% { transform: translateY(-120vh) scale(0.8); opacity: 0; }
}

/* Descripción */
.descripcion {
  padding: 5em 10em;
  margin: auto;
  line-height: 1.6;
  color: #d6e9f5;
  background-color: #0a0f1a;
  text-align: justify;
}

@media (max-width: 768px) {
	.descripcion {
		padding: 4em 3em;
	}
}

/* Redes */
.contacto {
  text-align: center;
  padding: 40px 20px;
}
.contacto h2 {
  margin-bottom: 20px;
  color: black;
}
.redes a {
  display: inline-block;
}

#contacto .redes i {
  font-size: 2em;   /* tamaño de los iconos */
  color: black;    /* color inicial */
  margin: 0 15px;    /* separación entre iconos */
  transition: color 0.3s, transform 0.3s;
}

/* Efecto hover */
#contacto .redes i:hover {
  color: #111449;    /* cambia de color al pasar el mouse */
  transform: scale(1.2); /* agranda un poquito */
}

/* Footer */
footer {
  text-align: center;
  background-color: #050812;
  padding: 15px;
  font-size: 0.9rem;
  color: #7aa3c9;
}