*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Montserrat', sans-serif;
}

body{overflow-x:hidden; background:#f4f4f4;}

/* HEADER */
header{
  width:100%;
  padding:20px 60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(8px);
  z-index:10;
  animation:fadeDown 0.8s ease;
}

.navbar {
  width: 100%;
  padding: 25px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}



.logo{
  color:#004f61;
  font-weight:800;
}

nav a{
  margin-left:25px;
  text-decoration:none;
  color:#004f61;
  font-weight:600;
  transition:0.3s;
}
nav a:hover{
  color:#f7a600;
  transform:scale(1.08);
}

/* HERO */
.hero{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 20px;
  background-size:cover;
  background-position:center;
  background-image: url(./imgs/Rectangle\ 38.png);
  margin: 1rem;
}
/* aca tenes que poner la imagen de fondo */

.hero-content{
  margin-top:80px;
  animation:fadeUp 1s ease;
  
}

.hero h1{
  font-size:52px;
  color:#004f61;
  font-weight:800;
}
.hero p{
  font-size:18px;
  color:#f7a600;
  margin: 1rem;
}

.cta-btn{
  margin-top:25px;
  padding:15px 30px;
  background:#f7a600;
  color:white;
  border:none;
  border-radius:8px;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  transition:0.3s;
}
.cta-btn:hover{
  transform:scale(1.1);
  background:#ffb733;
}

/* NOSOTROS */
.nosotros{
  width:90%;
  background:white;
  margin:60px auto;
  border-radius:12px;
  padding:50px 30px;
  text-align:center;
  box-shadow:0px 4px 12px rgba(0,0,0,0.1);
  animation:fadeUp 1s ease;
}

.nosotros h2{
  font-size:32px;
  font-weight:800;
  color:#004f61;
}

.resaltado{color:red;}

.iconos-container{
  display:flex;
  justify-content:space-around;
  margin-top:40px;
  flex-wrap:wrap;
}

.icon-block{
  width:200px;
  text-align:center;
  transition:0.3s;
}

.icon-block:hover{
  transform:translateY(-8px);
}

.icon-block img{
  width:100px;
  /* aca va el icono */
}

.icon-block p{
  font-weight:700;
  color:#f7a600;
  margin-top:10px;
}

/* GOOGLE */
.google-section{
  text-align:center;
  margin:60px 0 20px;
}

.google-section img{
  width:220px;
}

.stars{
  font-size:32px;
  color:#f7a600;
  margin-top:10px;
}

/* REVIEWS */
.reviews{
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  width:90%;
  margin:40px auto;
}

.review{
  width:300px;
  background:white;
  border-radius:10px;
  padding:20px;
  box-shadow:0px 4px 12px rgba(0,0,0,0.1);
  transition:0.3s;
}

.review:hover{
  transform:scale(1.04);
}

.usuario{
  display:flex;
  align-items:center;
  margin-top:15px;
  gap:10px;
}
.usuario img{
  width:45px;
  height:45px;
  border-radius:50%;
  /* aca va la foto */
}

.stars-small{
  color:#f7a600;
  font-size:16px;
}

/* ANIMACIONES */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);}
}
@keyframes fadeDown{
  from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);}
}

/* RESPONSIVE */
@media(max-width:900px){
  header{padding:15px 25px;}
  nav a{margin-left:15px;}
  .hero h1{font-size:32px;}
  .reviews{flex-direction:column; align-items:center;}
}

@media(max-width:600px){
  .hero h1{font-size:28px;}
  .hero p{font-size:16px;}
  .cta-btn{font-size:16px; padding:12px 25px;}
  nav a{font-size:14px;}
  .icon-block{width:150px;}
}

/* ---------- NAVBAR DESKTOP ---------- */
.navbar {
  width: 100%;
  padding: 25px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 20;
}

.navbar ul {
  display: flex;
  list-style: none;
  gap: 35px;
}

.navbar a {
  text-decoration: none;
  color: #005468;
  font-weight: 500;
  transition: 0.3s;
}

.navbar a:hover {
  color: #F9A21B;
}

/* ---------- HAMBURGUESA OCULTA EN DESKTOP ---------- */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: #005468;
  transition: 0.3s;
  border-radius: 4px;
}

/* ---------- RESPONSIVE NAV ---------- */
@media (max-width: 850px) {
  /* Ocultar menú horizontal */
  .navbar ul {
    display: none;
  }

  /* Mostrar hamburguesa */
  .hamburger {
    display: flex;
  }

  /* Menú desplegable */
  #nav-menu {
    position: absolute;
    top: 75px;
    right: 0;
    width: 100%;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-radius: 0 0 15px 15px;
    padding: 20px 0;
    display: none;
    animation: fadeMenu 0.3s ease forwards;
  }

  #nav-menu.active {
    display: block;
  }

  #nav-menu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  #nav-menu a {
    font-size: 18px;
  }
}

/* ---------- ANIMACIÓN DEL MENÚ ---------- */
@keyframes fadeMenu {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- ANIMACIÓN ICONO HAMBURGUESA ---------- */
.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------- NAVBAR DESKTOP ---------- */
.navbar {
  width: 100%;
  padding: 25px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 20;
}

.navbar ul {
  display: flex;
  list-style: none;
  gap: 35px;
}

.navbar a {
  text-decoration: none;
  color: #005468;
  font-weight: 500;
  transition: 0.3s;
}

.navbar a:hover {
  color: #F9A21B;
}

/* ---------- HAMBURGUESA OCULTA EN DESKTOP ---------- */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: #005468;
  transition: 0.3s;
  border-radius: 4px;
}

/* ---------- RESPONSIVE NAV ---------- */
@media (max-width: 850px) {
  /* Ocultar menú horizontal */
  .navbar ul {
    display: none;
  }

  /* Mostrar hamburguesa */
  .hamburger {
    display: flex;
  }

  /* Menú desplegable */
  #nav-menu {
    position: absolute;
    top: 75px;
    right: 0;
    width: 100%;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-radius: 0 0 15px 15px;
    padding: 20px 0;
    display: none;
    animation: fadeMenu 0.3s ease forwards;
  }

  #nav-menu.active {
    display: block;
  }

  #nav-menu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }

  #nav-menu a {
    font-size: 18px;
  }
}

/* ---------- ANIMACIÓN DEL MENÚ ---------- */
@keyframes fadeMenu {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- ANIMACIÓN ICONO HAMBURGUESA ---------- */
.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}