:root{
  --deep: #04121a;
  --ink: #eaf6ff;
  --accent: #7de3d0;
  --accent2: #ff6b8b;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:#02080d;
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Lienzos fijos ocupando toda la pantalla */
#gl, #bubbles, #depth{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
}
#bubbles{ z-index:1; pointer-events:none; }

/* Viñeta / oscurecimiento de profundidad */
#depth{
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 35%, transparent 40%, rgba(2,12,20,.55) 100%),
    linear-gradient(180deg, rgba(3,20,30,.25) 0%, transparent 25%);
  opacity:.85;
  transition:opacity .3s ease;
}

/* Contenido por encima del agua */
main{ position:relative; z-index:3; }

.panel{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8vh 6vw;
  text-align:center;
}
.panel[data-panel="0"]{ align-items:center; }

.inner{
  position:relative;
  max-width:640px;
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1s ease, transform 1s ease;
  will-change:opacity,transform;
}
.panel.visible .inner{ opacity:1; transform:translateY(0); }

/* Halo difuminado que oscurece suavemente el agua tras el texto */
.inner::before{
  content:"";
  position:absolute;
  inset:-22% -28%;
  z-index:-1;
  background:radial-gradient(ellipse 66% 66% at 50% 50%,
    rgba(2,12,20,.78) 0%,
    rgba(2,12,20,.62) 34%,
    rgba(2,12,20,.34) 58%,
    rgba(2,12,20,.12) 74%,
    transparent 86%);
  filter:blur(38px);
  pointer-events:none;
}

/* Hero: capa fija que se hunde con el scroll (transform/opacity vía JS) */
.hero .inner{
  position:fixed;
  top:50%;
  left:50%;
  width:min(640px, 90vw);
  margin:0;
  opacity:1;
  transform:translate(-50%,-50%);
  transition:none;      /* el hundimiento lo controla el scroll, no la transición */
  will-change:transform,opacity,filter;
}

/* Logo */
.logo{
  width:min(58vw, 420px);
  height:auto;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.6));
}
.logo--small{ width:min(40vw, 240px); margin-bottom:.4rem; }

.kicker{
  font-size:.78rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.4rem;
  font-weight:500;
  text-shadow:0 1px 10px rgba(0,0,0,.85);
}

h1{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-size:clamp(4rem,16vw,11rem);
  line-height:.9;
  letter-spacing:.01em;
  text-shadow:0 8px 60px rgba(0,0,0,.55);
}
h1 span{ color:var(--accent); font-weight:500; font-style:italic; }

h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  font-size:clamp(2.4rem,7vw,4.6rem);
  line-height:1.02;
  margin-bottom:1.4rem;
  text-shadow:0 2px 12px rgba(0,0,0,.7), 0 8px 46px rgba(0,0,0,.55);
}

.lead{
  font-size:clamp(1.1rem,2.4vw,1.5rem);
  font-weight:300;
  line-height:1.5;
  margin-top:1.6rem;
  color:#dff2ff;
  text-shadow:0 2px 20px rgba(0,0,0,.7);
}

p{ text-shadow:0 1px 6px rgba(0,0,0,.75), 0 3px 22px rgba(0,0,0,.6); }

.panel p:not(.lead):not(.kicker):not(.small){
  font-size:clamp(1rem,2vw,1.2rem);
  font-weight:300;
  line-height:1.7;
  color:#d6ecf7;
  max-width:52ch;
  margin:0 auto;
}
.small{ margin-top:1rem; font-size:.95rem; color:#9fc4d4; }
em{ color:var(--accent); font-style:italic; }

.cta{
  display:inline-block;
  margin-top:2.4rem;
  padding:1rem 2.6rem;
  border:1px solid rgba(125,227,208,.6);
  border-radius:999px;
  color:var(--accent);
  text-decoration:none;
  font-size:.95rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
  background:rgba(125,227,208,.06);
  transition:all .4s ease;
}
.cta:hover{
  background:var(--accent);
  color:var(--deep);
  box-shadow:0 0 40px rgba(125,227,208,.5);
  transform:translateY(-2px);
}

/* Indicador de scroll */
#scrollHint{
  position:fixed;
  bottom:3vh; left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:rgba(234,246,255,.75);
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  transition:opacity .5s ease;
}
.chevron{
  width:16px; height:16px;
  border-right:2px solid rgba(234,246,255,.7);
  border-bottom:2px solid rgba(234,246,255,.7);
  transform:rotate(45deg);
  animation:dive 1.8s ease-in-out infinite;
}
@keyframes dive{
  0%{ transform:rotate(45deg) translate(0,0); opacity:0; }
  40%{ opacity:1; }
  100%{ transform:rotate(45deg) translate(6px,6px); opacity:0; }
}

/* Barra de profundidad lateral */
#depthGauge{
  position:fixed;
  top:50%; right:26px;
  transform:translateY(-50%);
  z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  color:rgba(234,246,255,.6);
}
#depthGauge .track{
  width:3px; height:160px;
  background:rgba(255,255,255,.12);
  border-radius:2px; overflow:hidden;
  position:relative;
}
#depthGauge .fill{
  position:absolute; top:0; left:0;
  width:100%; height:0%;
  background:linear-gradient(180deg,var(--accent),#2b8fbf);
  box-shadow:0 0 12px rgba(125,227,208,.6);
}
#depthGauge .meters{
  font-size:.62rem; letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
  writing-mode:vertical-rl;
}

@media (max-width:640px){
  #depthGauge{ right:12px; }
  #depthGauge .track{ height:110px; }
}

@media (prefers-reduced-motion:reduce){
  .chevron{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   Contenido informativo (sobre el agua profunda y calma)
   ============================================================ */

/* Vidrio */
.glass{
  background:rgba(10,30,38,.52);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  border:1px solid rgba(125,227,208,.16);
  box-shadow:inset 0 1px 1px rgba(190,255,235,.10), 0 14px 40px rgba(0,10,16,.35);
}

/* Navegación fija */
.site-nav{
  position:fixed; top:16px; left:0; right:0; z-index:50;
  display:flex; justify-content:center; padding:0 20px;
  pointer-events:none;
}
.site-nav .bar{
  pointer-events:auto;
  width:min(1080px,100%);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.site-nav .brand{
  display:flex; align-items:center; gap:10px;
  border-radius:999px; padding:10px 22px;
  text-decoration:none;
}
.site-nav .brand img{ height:36px; width:auto; display:block; }
.site-nav .links{
  display:flex; align-items:center; gap:2px;
  border-radius:999px; padding:6px;
}
.site-nav .links a{
  color:rgba(234,246,255,.88);
  text-decoration:none; font-size:.85rem; font-weight:500;
  padding:8px 14px; border-radius:999px; transition:color .3s, background .3s;
}
.site-nav .links a:hover{ color:#fff; background:rgba(125,227,208,.1); }
.site-nav .cta-nav{
  background:var(--accent); color:var(--deep);
  padding:9px 18px; border-radius:999px; font-weight:600; font-size:.85rem;
  text-decoration:none; white-space:nowrap; transition:background .3s, transform .3s;
}
.site-nav .cta-nav:hover{ background:#a7f0e0; transform:translateY(-1px); }
@media (max-width:820px){ .site-nav .links{ display:none; } }

/* Secciones de contenido */
.section{
  position:relative; z-index:3;
  width:min(1080px,92vw);
  margin:0 auto;
  padding:11vh 0;
}
.section-head{ max-width:640px; margin-bottom:3rem; }
.section-head .tag{
  color:var(--accent); font-size:.8rem; font-weight:600;
  letter-spacing:.12em; margin-bottom:1rem;
}
.section-head h2{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(2.4rem,6vw,4.2rem); line-height:.98; letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.section-head p{
  margin-top:1.2rem; color:#cfe6f0; font-weight:300; line-height:1.6;
  max-width:52ch; font-size:1.05rem;
}

/* Grillas */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.spaces{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  border-radius:26px; overflow:hidden; }
@media (max-width:900px){
  .cards{ grid-template-columns:1fr; }
  .spaces{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; }
}
@media (max-width:520px){ .spaces{ grid-template-columns:1fr; } }

/* Tarjeta de servicio */
.card{
  border-radius:26px; padding:26px;
  min-height:320px; display:flex; flex-direction:column;
}
.card .ico{
  width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center; margin-bottom:auto;
  border:1px solid rgba(125,227,208,.22); background:rgba(125,227,208,.06);
}
.card .tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end;
  margin-top:-46px; margin-bottom:auto; max-width:66%; margin-left:auto; }
.card .tags span{
  font-size:.72rem; color:rgba(234,246,255,.85);
  border:1px solid rgba(125,227,208,.18); background:rgba(10,30,38,.5);
  border-radius:999px; padding:4px 10px;
}
.card h3{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic;
  font-size:2rem; line-height:1; margin-top:1.5rem;
}
.card p{
  margin-top:.9rem; font-size:.92rem; color:#d0e6f0; font-weight:300;
  line-height:1.6; max-width:34ch;
}

/* Espacios */
.space{
  border-radius:24px; padding:24px; min-height:190px;
  display:flex; flex-direction:column;
}
.space .num{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
  color:var(--accent); font-size:2.4rem; line-height:1;
}
.space h3{ margin-top:auto; font-size:1.15rem; font-weight:600; }
.space p{ margin-top:.5rem; font-size:.86rem; color:#c2dce6; font-weight:300; line-height:1.45; }

/* Proceso */
.step{ padding:34px 30px; display:flex; flex-direction:column; gap:.7rem; }
.step .n{ color:rgba(125,227,208,.85); font-size:.78rem; font-weight:600; letter-spacing:.18em; }
.step h3{ font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500; font-size:1.7rem; }
.step p{ font-size:.9rem; color:#cfe6f0; font-weight:300; line-height:1.6; }

/* Contacto */
.contact-card{ border-radius:32px; padding:clamp(28px,4vw,52px); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:28px; } }
.contact-info h2{
  font-family:'Cormorant Garamond',serif; font-weight:400;
  font-size:clamp(2rem,5vw,3.4rem); line-height:.98;
}
.contact-info .lines{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.8rem; }
.contact-info a{ color:#e8f6ff; text-decoration:none; display:flex; align-items:center; gap:10px; width:fit-content; font-size:.95rem; }
.contact-info a:hover{ color:var(--accent); }
form.quote{ display:flex; flex-direction:column; gap:12px; }
form.quote input, form.quote select, form.quote textarea{
  width:100%; border-radius:14px; padding:14px 16px;
  background:rgba(4,16,22,.45); color:var(--ink);
  border:1px solid rgba(125,227,208,.18); font:inherit; font-size:.92rem;
}
form.quote input::placeholder, form.quote textarea::placeholder{ color:rgba(234,246,255,.42); }
form.quote textarea{ resize:none; }
form.quote button{
  margin-top:2px; border:none; cursor:pointer;
  background:var(--accent); color:var(--deep); font-weight:600; font-size:.92rem;
  border-radius:14px; padding:15px; transition:background .3s, transform .3s;
}
form.quote button:hover{ background:#a7f0e0; transform:translateY(-1px); }
form.quote .hint{ font-size:.72rem; color:rgba(234,246,255,.45); font-weight:300; line-height:1.5; }

/* Footer */
.site-footer{ position:relative; z-index:3; width:min(1080px,92vw); margin:0 auto; padding:0 0 48px; }
.site-footer .bar{
  border-radius:24px; padding:26px 30px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.site-footer img{ height:26px; width:auto; }
.site-footer nav{ display:flex; flex-wrap:wrap; gap:18px; }
.site-footer nav a{ color:rgba(234,246,255,.75); text-decoration:none; font-size:.88rem; }
.site-footer nav a:hover{ color:var(--accent); }
.site-footer .copy{ font-size:.78rem; color:rgba(234,246,255,.4); }

/* Chips / CTA link underline */
.underline{ position:relative; }
.underline::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:0; background:var(--accent); transition:width .35s ease; }
.underline:hover::after{ width:100%; }

/* Aparición del contenido */
.reveal{ opacity:0; transform:translateY(24px); filter:blur(6px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), filter 1s ease; }
.reveal.in{ opacity:1; transform:none; filter:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
}