/* ===== Colores base ===== */
:root{
  --bg-a:#06b6d4;
  --bg-b:#0891b2;
  --bg-c:#0e7490;

  --ink:#eaf6fb;
  --ink-80:rgba(234,246,251,.80);
  --ink-60:rgba(234,246,251,.60);
  --ink-40:rgba(234,246,251,.40);

  --card:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.28);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--ink);
  /* Fondo uniforme en todo el documento */
  background: linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 50%, var(--bg-c) 100%);
  background-attachment: fixed;               /* evita "cortes" al hacer scroll */
  overflow-x:hidden;
}

/* ===== Capa de degradado adicional (más suave y homogénea) ===== */
.ocean-bg{
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 50%),
    radial-gradient(120% 120% at 80% 90%, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 50%);
  transform: translateZ(0);
}

/* ===== Header ===== */
.header{
  position:fixed; inset:0 0 auto 0;
  padding:22px 24px;
  display:flex; justify-content:center; align-items:center;
  z-index:50;
}
.nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; gap:56px;
}
.nav-item{ position:relative }
.nav-link{
  color:rgba(255,255,255,.84);
  text-decoration:none;
  font-weight:300; letter-spacing:2px; text-transform:uppercase;
  font-size:.92rem; padding:.5rem 0; display:inline-block;
  transition:color .25s ease;
}
.nav-link:hover{ color:#fff }
.nav-link.is-active{
  position:relative; color:#fff;
}
.nav-link.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px;
  margin:auto; width:110px; background:rgba(255,255,255,.55); border-radius:2px; /* antes dorado */
}

/* Dropdowns */
.dropdown{
  position:absolute; left:50%; top:100%; transform:translateX(-50%);
  background:rgba(255,255,255,.95); color:#0e7490;
  border-radius:10px; padding:.5rem 0; min-width:180px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transition:.25s ease; margin-top:.5rem; z-index:60;
}
.nav-item:hover .dropdown{ opacity:1; visibility:visible }
.dropdown-item{
  display:block; padding:.7rem 1.1rem; text-decoration:none;
  color:rgba(14,116,144,.9); text-transform:uppercase; letter-spacing:1px;
  font-size:.74rem; font-weight:300; position:relative;
}
.dropdown-item:hover{ background:rgba(6,182,212,.10); color:#0e7490 }
.sub-dropdown{
  position:absolute; left:100%; top:0; margin-left:.5rem;
  background:rgba(255,255,255,.95);
  border-radius:10px; padding:.5rem 0; min-width:160px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; transition:.25s ease;
}
.dropdown-item:hover .sub-dropdown{ opacity:1; visibility:visible }

/* ===== Layout ===== */
.container{ padding-top:96px }

/* ===== Split ===== */
.split{
  display:grid; gap:28px;
  grid-template-columns: 1.1fr 1fr;
  align-items:stretch;
  padding:20px 24px 0;
}
@media (max-width: 1024px){
  .split{ grid-template-columns:1fr; }
}

/* ===== Héroe (panel que cubre izq + der) ===== */
.split--hero{
  position: relative;
  min-height: calc(100svh - 160px);
  margin-bottom:28px;
  padding:20px 24px 0;
}
.split--hero::before{
  content:"";
  position:absolute; inset:0; border-radius:26px;
  background:
       radial-gradient(290% 120% at 20% 10%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 50%),
    /* en lugar de un fondo sólido diferente, usa un tinte semitransparente */
    linear-gradient(380deg, rgba(20,143,168,.72) 0%, rgba(12,127,155,.72) 100%) !important;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.22);
  z-index:0;
  -webkit-backdrop-filter: blur(8px) saturate(115%); backdrop-filter: blur(8px) saturate(115%);

}
.split > *{ position:relative; z-index:1 }

/* Izquierda */
.split__media{
  min-height:520px;
  border-radius:22px;
  overflow:hidden;
}
.split__media.no-photo{ background:transparent; border:0; box-shadow:none; }
.media__img{ display:none }
.media__content{ height:100% }
.media__content--topLeft{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  padding:56px 48px;
}

/* Tipos héroe */
.heroTitle{
  margin:0;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight:200; letter-spacing:.5px; color:#fff;
}
.heroTitle--flat{ margin-bottom:22px }
.heroSubtitle{
  margin:0;
  color:var(--ink-80);
  font-weight:300; line-height:1.7; max-width:62ch;
}

/* Derecha (form transparente) */
.split__form{
  background:transparent;
  border:0; border-radius:22px;
  padding:6px 6px 24px 6px;
  display:flex; align-items:flex-start;
}
.form{ width:100% }
.form__grid{
  display:grid; gap:16px; grid-template-columns:1fr 1fr;
}
.form__field{ display:flex; flex-direction:column; gap:6px }
.form__field--full{ grid-column:1/-1 }
label{
  font-size:.86rem; color:var(--ink-60); font-weight:400;
}
input, select, textarea{
  width:100%; color:#fff; font-size:1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  border-radius:12px; padding:14px 14px;
  outline:none; transition:border-color .2s ease, background .2s ease;
}
input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.55) }
input:focus, select:focus, textarea:focus{
  border-color: var(--ink); background: rgba(255,255,255,.10);
}

/* Botón estilo “ghost” (reemplaza dorado) */
.btn{
  width:100%; margin-top:18px; cursor:pointer;
  padding:16px 18px; font-size:.95rem;
  text-transform:uppercase; letter-spacing:2px;
  border-radius:12px; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.45);
  transition:all .25s ease;
}
.btn--ghost:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.70);
}

/* ===== Sección Ubícanos ===== */
.section{ padding:24px 24px 42px }
.soft-panel{
  position:relative; overflow:hidden; border-radius:20px;
  padding:24px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
}
.soft-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.10) 0%,
    rgba(255,255,255,.06) 50%,
    rgba(255,255,255,0) 100%);
}
.section__head{ margin-bottom:14px }
.h2{
  display:flex; align-items:center; gap:10px;
  margin:0; font-size:clamp(1.6rem, 2.4vw, 2rem); font-weight:500;
}
.pin{ color:#fff }
.h3{ margin:.4rem 0 .2rem; font-weight:500 }
.text{ margin:.25rem 0; font-weight:300 }
.phone{
  color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35)
}
.phone:hover{ border-bottom-color:#fff }

/* Grilla datos */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr } }

/* Mapa */
.map-frame{ margin:18px auto 0; display:flex; justify-content:center }
.map-embed{
  width:min(100%, 1100px); aspect-ratio:16/9; min-height:340px;
  border-radius:18px; overflow:hidden; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.28); box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block }

/* ===== Peces nadando (animación suave) ===== */
.fish-container{
  position:fixed; inset:0; pointer-events:none; z-index:0;
}
.fish{ position:absolute; animation-timing-function:ease-in-out; animation-iteration-count:infinite }
.fish-1{ top:20%; left:-12%; animation:swim1 26s infinite }
.fish-2{ top:62%; right:-14%; animation:swim2 30s infinite; animation-delay:-6s }
.fish-3{ top:40%; left:-18%; animation:swim3 34s infinite; animation-delay:-10s }
.fish-4{ top:12%; right:-15%; animation:swim4 32s infinite; animation-delay:-14s }

@keyframes swim1{
  0%{ transform:translateX(0) scaleX(1) }
  50%{ transform:translateX(120vw) translateY(-20px) scaleX(1) }
  51%{ transform:translateX(120vw) translateY(-20px) scaleX(-1) }
  100%{ transform:translateX(0) scaleX(-1) }
}
@keyframes swim2{
  0%{ transform:translateX(0) scaleX(-1) }
  50%{ transform:translateX(-120vw) translateY(24px) scaleX(-1) }
  51%{ transform:translateX(-120vw) translateY(24px) scaleX(1) }
  100%{ transform:translateX(0) scaleX(1) }
}
@keyframes swim3{
  0%{ transform:translateX(0) rotate(0deg) }
  25%{ transform:translateX(45vw) translateY(-30px) rotate(4deg) }
  50%{ transform:translateX(120vw) translateY(18px) rotate(-3deg) }
  51%{ transform:translateX(120vw) translateY(18px) scaleX(-1) rotate(-3deg) }
  75%{ transform:translateX(45vw) translateY(-26px) scaleX(-1) rotate(2deg) }
  100%{ transform:translateX(0) scaleX(-1) rotate(0deg) }
}
@keyframes swim4{
  0%{ transform:translateX(0) scaleX(-1) }
  30%{ transform:translateX(-60vw) translateY(-22px) scaleX(-1) }
  70%{ transform:translateX(-120vw) translateY(12px) scaleX(-1) }
  71%{ transform:translateX(-120vw) translateY(12px) scaleX(1) }
  100%{ transform:translateX(0) scaleX(1) }
}

/* ===== Responsivo ===== */
@media (max-width:1024px){
  .split{ grid-template-columns:1fr }
  .split__media{ min-height:440px }
  .media__content--topLeft{ padding:44px 28px }
}
@media (max-width:640px){
  .nav-links{ gap:28px }
  .split__form{ padding:18px }
  .form__grid{ grid-template-columns:1fr }
}


/* === EXTRA · Dark Premium (pégalo al final) ===================== */

/* 1) Un matiz oscuro global en el card del héroe (no toca tu ::before) */
:root{ --hero-dark: rgba(6,20,28,.42); }
.split--hero{ isolation:isolate; } /* asegura capas limpias */
.split--hero::after{
  content:""; position:absolute; inset:0; border-radius:26px; pointer-events:none;
  background:
    /* capa oscura + viñeteado suave */
    linear-gradient(180deg, var(--hero-dark) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.10) 100%),
    radial-gradient(120% 90% at 20% 12%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 58%);
  mix-blend-mode: soft-light; /* profundidad sin perder color */
  z-index:0;
  
}


/* 5) Marco del mapa un poco más fino y “glass” */
.map-embed{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); }
.map-embed::after{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
}

/* 6) Si el navegador soporta backdrop-filter, damos un pelín de glass al card */
@supports (backdrop-filter: blur(6px)){
  .split--hero::after{ backdrop-filter: blur(2px) contrast(1.02); }
}


/* ==== FIX: panel héroe sin corte y con bordes redondeados reales ==== */

/* 1) El propio bloque tiene radio y recorta todo adentro */
.split--hero{
  border-radius: 24px;        /* el radio que quieres */
  overflow: hidden;           /* CLAVE: recorta bordes/sombras internas */
  isolation: isolate;         /* capas limpias */
  margin-top: -110px;          /* deja tu ajuste aquí si lo usas */
}

/* 2) Los pseudo-elementos heredan el mismo radio */
.split--hero::before,
.split--hero::after{
  border-radius: inherit;     /* asegura esquinas iguales */
}

/* 3) Quita la “línea” superior: evita el borde duro y el inset agresivo */
.split--hero::before{
  /* corregimos el typo RGBA y suavizamos el fondo del panel */
  background:
    radial-gradient(290% 120% at 20% 10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 50%),
    linear-gradient(380deg, rgba(20,143,168,.65) 0%, rgba(12,127,155,.65) 100%) !important;

  border: 1px solid rgba(255,255,255,.14);   /* borde sutil */
  box-shadow: 0 18px 40px rgba(0,0,0,.22);   /* SIN inset */
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);
}

/* 4) La capa extra (viñeteado) también respeta esquinas y no dibuja “cortes” */
.split--hero::after{
  background:
    linear-gradient(180deg, rgba(6,20,28,.36) 0%, rgba(0,0,0,.14) 55%, rgba(0,0,0,.08) 100%),
    radial-gradient(120% 90% at 20% 12%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 58%);
  mix-blend-mode: soft-light;
  backdrop-filter: blur(2px) contrast(1.02);
}

/* 5) Inputs con “bordes con esquinas” más marcadas (si los quieres más redondos) */
input, select, textarea { border-radius: 14px; }
.btn { border-radius: 14px; }

/* 6) Otros paneles (Ubícanos/mapa) con esquinas coherentes y sin filete */
.soft-panel,
.map-embed{
  border-radius: 18px;
  overflow: hidden;                     /* evita líneas en los bordes */
}
.soft-panel::before{ border-radius: inherit; }
.map-embed::after{ border-radius: inherit; }

/* 7) Fondo continuo (por si no lo pegaste antes) */
body{ background: transparent !important; }
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background: linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 50%, var(--bg-c) 100%);
  transform: translateZ(0);
}
.ocean-bg{ position:fixed !important; inset:0 !important; z-index:-1 !important; }

  /* ===== NAV (mismo look y comportamiento que el resto del sitio) ===== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px; gap:14px;
  background:linear-gradient(180deg, rgba(10,18,32,.55), rgba(10,18,32,0));
  border-bottom:1px solid rgba(255,255,255,.16);
  backdrop-filter:saturate(130%) blur(6px);
}

.brand{
  font-family:'Playfair Display',serif; font-size:1.15rem; letter-spacing:.4px;
  background:linear-gradient(120deg,var(--aqua),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.menu{ display:flex; list-style:none; gap:26px; align-items:center; position:relative; margin:0; padding:0; }
.menu a{ color:#eaf2f9; text-decoration:none; opacity:.9; transition:.2s; padding:.35rem .4rem; display:inline-block; letter-spacing:.08em; }
.menu a:hover{ opacity:1 }

.lang-toggle{
  padding:.45rem .9rem; border-radius:20px; border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35); color:var(--ink); cursor:pointer; font-size:.9rem;
}

/* Dropdowns + “puentes” para no cortar hover */
.menu li{ position:relative; }
.has-dd > .dd{
  position:absolute; top:100%; left:0; min-width:220px; padding:8px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); border-radius:12px;
  box-shadow:0 18px 36px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(10px) saturate(120%); display:none; z-index:1000;
}
.has-dd > .dd::before{ content:""; position:absolute; left:0; right:0; height:10px; top:-10px; }
.has-dd:hover>.dd, .has-dd:focus-within>.dd, .has-dd > .dd:hover{ display:block; }

.dd, .dd ul{ list-style:none; margin:0; padding:0; }
.dd > ul > li > a{ display:block; padding:10px 14px; color:#eaf2f9; border-radius:10px; white-space:nowrap; }
.dd > ul > li > a:hover{ background:rgba(255,255,255,.10) }

.dd li.has-sub{ position:relative; }
.dd li.has-sub > a::after{ content:"▸"; float:right; opacity:.8; margin-left:6px }
.dd li.has-sub > .sub{
  position:absolute; top:0; left:100%; margin-left:12px; min-width:210px; padding:8px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); border-radius:12px;
  backdrop-filter:blur(10px) saturate(120%); display:none; opacity:0; transform:translateX(6px);
  transition:opacity .18s ease, transform .18s ease; z-index:1001;
}
.dd li.has-sub > .sub::before{ content:""; position:absolute; left:-12px; top:0; bottom:0; width:12px; }
.dd li.has-sub:hover>.sub, .dd li.has-sub:focus-within>.sub, .dd li.has-sub > .sub:hover{ display:block; opacity:1; transform:translateX(0) }

.ecofish-link img{ height:30px; display:block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35)); transform:translateY(1px) }

/* Empuje del contenido debajo del header fijo */
.page-offset{ height:72px; } /* ajusta si tu header es más alto */
.footer{ text-align:center; padding:28px 14px; color:rgba(230,240,255,.8) }