/* ====== RESET & BASE ====== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',sans-serif;line-height:1.6;color:#333}

/* ====== HEADER ====== */
header{position:fixed;top:0;width:100%;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);z-index:1000;padding:.5rem 0;box-shadow:0 2px 20px rgba(0,0,0,.1)}
nav{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 2rem}
.logo{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:700;color:#25495c;text-decoration:none}
.logo-img{height:50px;width:auto}
.nav-links{display:flex;list-style:none;gap:2rem}
.nav-links a{text-decoration:none;color:#25495c;font-weight:500;transition:color .3s ease}
.nav-links a:hover{color:#4A9B8B}

/* ====== HERO ====== */
.hero{height:100vh;background:linear-gradient(135deg,rgba(45,107,95,.8),rgba(74,155,139,.8)),url('https://images.unsplash.com/photo-1544161515-cfd626d38fad?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.hero-content{max-width:800px;padding:0 2rem}
.hero h1{font-size:3.5rem;font-weight:700;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}
.hero p{font-size:1.3rem;margin-bottom:2rem;opacity:.9}
.cta-button{display:inline-block;background:#4A9B8B;color:#fff;padding:1rem 2rem;text-decoration:none;border-radius:50px;font-weight:600;font-size:1.1rem;transition:all .3s ease;box-shadow:0 4px 15px rgba(45,107,95,.3);border:none;cursor:pointer}
.cta-button:hover{background:#25495c;transform:translateY(-2px);box-shadow:0 6px 20px rgba(45,107,95,.4)}

/* ====== SECTIONS ====== */
section{padding:5rem 0}
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
.section-title{text-align:center;font-size:2.5rem;font-weight:600;color:#25495c;margin-bottom:3rem}

/* ====== ABOUT ====== */
.about{background:#f8fdfb}
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.about-text h3{font-size:1.5rem;color:#4A9B8B;margin-bottom:1rem}
.about-text p{font-size:1.1rem;line-height:1.8;margin-bottom:1.5rem;color:#5a6c5b}
.info-grid{display:grid;gap:1rem}
.info-item{background:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 4px 6px rgba(45,107,95,.1);border-left:4px solid #4A9B8B}
.info-item strong{color:#25495c}

/* ====== SERVICES / VALUES ====== */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:2rem}
.service-card{background:#fff;border-radius:15px;padding:2rem;box-shadow:0 10px 30px rgba(45,107,95,.1);transition:all .3s ease;border:1px solid #e5f3f0}
.service-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(45,107,95,.15);border-color:#4A9B8B}
.service-icon{width:60px;height:60px;background:linear-gradient(135deg,#4A9B8B,#F7F5EE);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;font-size:1.5rem}
.service-card h3{font-size:1.3rem;font-weight:600;color:#25495c;margin-bottom:1rem}
.service-card p{color:#5a6c5b;margin-bottom:1.5rem;line-height:1.6}
.service-price{font-size:1.5rem;font-weight:700;color:#0E0F11;text-align:center;padding:1rem;background:#f8fdfb;border-radius:10px;margin-bottom:1.5rem}

/* ====== REVIEWS ====== */
.reviews{background:#f8fdfb}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.review-card{background:#fff;border-radius:15px;padding:2rem;box-shadow:0 10px 30px rgba(45,107,95,.1);border-top:5px solid #4A9B8B}
.review-card p{font-style:italic;color:#5a6c5b;margin-bottom:1rem}
.review-card .author{font-weight:600;color:#25495c;text-align:right}
.rating{color:#FFD700;font-size:1.2rem;margin-bottom:.5rem}
.review-form-container{margin-top:4rem;padding:2rem;background:#fff;border-radius:15px;box-shadow:0 10px 30px rgba(45,107,95,.1);max-width:800px;margin-left:auto;margin-right:auto}
.review-form-container h3{text-align:center;color:#25495c;margin-bottom:1.5rem}
#reviewForm input,#reviewForm textarea{width:100%;padding:.8rem;margin-bottom:1rem;border-radius:8px;border:1px solid #ccc;font-family:'Poppins',sans-serif}
#reviewForm textarea{resize:vertical;min-height:100px}
.star-rating{display:flex;flex-direction:row-reverse;justify-content:center;gap:.5rem;margin-bottom:1.5rem}
.star-rating input[type=radio]{display:none}
.star-rating label{font-size:2rem;color:#ccc;cursor:pointer;transition:color .2s}
.star-rating input[type=radio]:checked ~ label,.star-rating label:hover,.star-rating label:hover ~ label{color:#FFD700}
#reviewForm button{width:100%;font-size:1.1rem}

/* ====== CONTACT ====== */
.contact{background:linear-gradient(135deg,#25495c 0%,#4A9B8B 100%);color:#fff;text-align:center}
.contact .section-title{color:#fff}
.contact p{font-size:1.2rem;margin-bottom:2rem;opacity:.9}

/* ====== FOOTER ====== */
footer{background:#1a3e37;color:#fff;text-align:center;padding:2rem 0}
.footer-credit{margin-top:1.5rem}
.footer-brand-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#adb5bd;font-size:.9rem;transition:color .3s ease}
.footer-brand-link:hover{color:#4A9B8B}
.footer-brand-logo{height:24px;margin-right:8px}
.footer-social{margin-top:2rem;display:flex;justify-content:center;gap:1rem}
.footer-social-button{display:inline-block;width:50px;height:50px;background:rgba(74,155,139,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.5rem;color:#fff;transition:all .3s ease}
.footer-social-button:hover{background:#4A9B8B;transform:translateY(-2px)}

/* ====== MOBILE ====== */
.mobile-menu{display:none;flex-direction:column;cursor:pointer}
.mobile-menu span{width:25px;height:3px;background:#25495c;margin:3px 0;transition:.3s}
@media (max-width:768px){
  .nav-links{display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;flex-direction:column;padding:2rem;box-shadow:0 2px 10px rgba(45,107,95,.1)}
  .nav-links.active{display:flex}
  .mobile-menu{display:flex}
  .hero h1{font-size:2.5rem}
  .hero p{font-size:1.1rem}
  .about-content{grid-template-columns:1fr;gap:2rem}
  .services-grid,.reviews-grid{grid-template-columns:1fr}
  .section-title{font-size:2rem}
  .footer-social{margin-top:1.5rem}
}
@media (max-width:480px){
  .hero h1{font-size:2rem}
  .service-card,.review-card,.review-form-container{padding:1.5rem}
  nav{padding:0 1rem}
  .logo span{display:none}
  .container{padding:0 1rem}
}
/* ====== HERO: estilo dinámico con sparkles/orbs ====== */
.hero{
  position: relative;
  overflow: hidden;
  /* Fallback si JS no carga: tu fondo original */
  background:
    linear-gradient(135deg, rgba(45,107,95,0.8), rgba(74,155,139,0.8)),
    url('https://images.unsplash.com/photo-1544161515-cfd626d38fad?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3') center/cover no-repeat;
}

/* Contenedor que ocupa todo para capas */
.hero-bg{
  position:absolute; inset:0;
}

/* Canvas de partículas */
.hero-sparkles{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events: none;
}

/* Velo de color muy suave encima (como el gradient overlay del snippet) */
.hero-soft-overlay{
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom right,
    rgba(20, 184, 166, 0.08),   /* teal-50/40 aprox */
    rgba(216, 180, 254, 0.08),  /* purple-50/40 */
    rgba(191, 219, 254, 0.08)   /* blue-50/40 */
  );
  pointer-events:none;
}

/* Orbes difusos flotando */
.hero-orb{
  position:absolute;
  border-radius:9999px;
  filter: blur(30px);
  opacity: 0.9;
  pointer-events:none;
  animation: orbFloat 9s ease-in-out infinite;
}

.hero-orb--teal{
  top: 80px; left: 80px;
  width: 16rem; height: 16rem;
  background: radial-gradient(closest-side, rgba(94, 234, 212, .28), rgba(34,197,  94, .15));
  animation-duration: 8s;
}

.hero-orb--purple{
  bottom: 80px; right: 80px;
  width: 20rem; height: 20rem;
  background: radial-gradient(closest-side, rgba(216,180,254,.26), rgba(244,114,182,.14));
  animation-duration: 10s;
}

@keyframes orbFloat{
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(20px,-20px) scale(1.12); }
  100% { transform: translate(0,0) scale(1); }
}

/* Ola inferior */
.hero-bottom-wave{
  position:absolute; left:0; right:0; bottom:0;
  height: 8rem;
  background: linear-gradient(to top, rgba(255,255,255,0.55), transparent);
  pointer-events:none;
}

/* Ajustes del contenido del hero para estar encima de las capas */
.hero-content{
  position: relative;
  z-index: 2;
}

/* Responsive ajustes suaves de las orbes */
@media (max-width: 768px){
  .hero-orb--teal{ width:12rem; height:12rem; top:40px; left:40px; }
  .hero-orb--purple{ width:14rem; height:14rem; bottom:40px; right:40px; }
}

/* ====== HERO Overlay & Orbs con tu paleta ====== */
/* Overlay suave encima del hero (velo sutil con tu paleta) */
.hero-soft-overlay{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(
    to bottom right,
    rgba(37, 73, 92, 0.12),   /* #25495c */
    rgba(109,153,161, 0.10),  /* #6d99a1 */
    rgba(115,152,111, 0.10),  /* #73986f */
    rgba(246,252,249, 0.10)   /* #f6fcf9 */
  );
}

/* Orbe 1 (superior izquierda) con azul petróleo + teal */
.hero-orb--teal{
  background: radial-gradient(closest-side,
    rgba(109,153,161, 0.30),  /* centro  #6d99a1 */
    rgba(37, 73, 92,  0.16)   /* borde   #25495c */
  );
}

/* Orbe 2 (inferior derecha) con verde salvia + blanco verdoso */
.hero-orb--purple{
  background: radial-gradient(closest-side,
    rgba(115,152,111, 0.26),  /* centro  #73986f */
    rgba(246,252,249, 0.14)   /* borde   #f6fcf9 */
  );
}

/* Ola inferior del hero (puedes subir/bajar opacidad si quieres) */
.hero-bottom-wave{
  background: linear-gradient(to top, rgba(246,252,249,0.60), transparent); /* #f6fcf9 */
}

/* (Opcional) Fallback del hero si JS no carga: usa tu paleta sobre la foto */
.hero{
  background:
    linear-gradient(135deg,
      rgba(37, 73, 92, 0.80),   /* #25495c */
      rgba(109,153,161, 0.70),  /* #6d99a1 */
      rgba(115,152,111, 0.65)   /* #73986f */
    ),
    url('https://images.unsplash.com/photo-1544161515-cfd626d38fad?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3') center/cover no-repeat;
}

.hero{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(109,153,161,0.75), rgba(115,152,111,0.70), rgba(246,252,249,0.85)),
    url('https://images.unsplash.com/photo-1544161515-cfd626d38fad?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3') center/cover no-repeat !important;
}
/* ====== Partículas de fondo global ====== */
.page-sparkles{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* no bloquea clics/scroll */
  z-index: 0;             /* detrás del contenido */
}

/* Asegura que el contenido esté por encima (ya tienes z-index altos en header) */
body, .container, section,footer {
  position: relative;
  z-index: 1;
}
/* ====== Cookie Banner ====== */
.cookie-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2000;                /* por encima del resto */
  padding: 0.75rem;
  background: rgba(37, 73, 92, 0.98); /* #25495c */
  color: #f6fcf9;               /* texto claro */
  box-shadow: 0 -8px 30px rgba(0,0,0,.15);
  backdrop-filter: blur(6px);
}

.cookie-banner__content{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}

.cookie-banner__text{
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.cookie-banner__link{
  color: #6d99a1;               /* teal grisáceo */
  text-decoration: underline;
}
.cookie-banner__link:hover{ color: #73986f; }

.cookie-banner__actions{
  display: flex;
  gap: 0.5rem;
}

.cookie-btn{
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.cookie-btn:focus{ outline: 3px solid rgba(246,252,249,0.6); outline-offset: 2px; }

.cookie-btn--accept{
  background: #73986f;          /* verde salvia */
  color: #f6fcf9;
  box-shadow: 0 4px 12px rgba(115,152,111,0.35);
}
.cookie-btn--accept:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(115,152,111,0.45);
  background: #688a64;
}

.cookie-btn--decline{
  background: transparent;
  color: #f6fcf9;
  border: 2px solid #6d99a1;
}
.cookie-btn--decline:hover{
  background: rgba(109,153,161,0.15);
}

@media (max-width: 768px){
  .cookie-banner__content{
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .cookie-banner__actions{
    justify-content: flex-start;
  }
}