/* ══════════════════════════════════════════════════════════════════════════
   EXPEDICIONES PACÍFICO SUR — hoja de estilo
   Generada por build_web.py · no editar a mano (se pisa en el próximo build)
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Agua */
  --tinta:      #06171F;
  --tinta-2:    #0A2430;
  --marea:      #114C5C;
  --marea-viva: #1B7A8C;
  --niebla:     #A7C0C4;
  --espuma:     #EAF3F3;

  /* Tierra */
  --papel:      #F7F4EE;
  --papel-2:    #EFE9DE;
  --verde:      #2E7D63;

  /* Acento: el sol bajo sobre el agua */
  --ambar:      #D9963C;
  --ambar-claro:#F2BE71;

  --texto:      #16323C;
  --texto-suave:#4A6873;
  --linea:      rgba(17,76,92,.16);
  --linea-osc:  rgba(167,192,196,.2);

  --radio:      14px;
  --radio-chico:9px;
  --sombra:     0 1px 2px rgba(6,23,31,.06), 0 8px 28px rgba(6,23,31,.08);
  --sombra-alta:0 2px 6px rgba(6,23,31,.10), 0 22px 60px rgba(6,23,31,.16);

  --ancho:      1180px;
  --angosto:    760px;

  --display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--fuente);
  font-size:17px; line-height:1.65;
  color:var(--texto); background:var(--papel);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--display); font-weight:600; line-height:1.1;
  letter-spacing:-.015em; margin:0 0 .5em;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
h1{ font-size:clamp(2.1rem,4.8vw,3.6rem); }
h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); }
h3{ font-size:clamp(1.1rem,1.9vw,1.36rem); }
h4{ font-family:var(--display); font-weight:600; font-size:1.08rem; margin:0 0 .25em; }
p{ margin:0 0 1em; }
a{ color:var(--marea-viva); text-decoration:none; }
a:hover{ text-decoration:underline; }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
     overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.saltar{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ambar); color:var(--tinta); padding:.7rem 1.2rem;
  font-weight:600; border-radius:0 0 var(--radio-chico) 0;
}
.saltar:focus{ left:0; }
:focus-visible{ outline:3px solid var(--ambar); outline-offset:2px; border-radius:4px; }

.contenedor{ width:min(100% - 2.6rem, var(--ancho)); margin-inline:auto; }
.contenedor-angosto{ width:min(100% - 2.6rem, var(--angosto)); }

/* ── Dato pendiente de confirmar ──────────────────────────────────────── */
.pendiente{
  background:#FFE9BF; color:#6B4708; padding:.08em .45em; border-radius:5px;
  border:1px dashed #C89432; font-size:.92em; font-style:normal; font-weight:500;
}
.pendiente::before{ content:"⚑ "; opacity:.7; }
.seccion-oscura .pendiente,.pie .pendiente,.hero .pendiente,
.seccion-luna .pendiente,.cta-final .pendiente{
  background:rgba(242,190,113,.16); color:var(--ambar-claro);
  border-color:rgba(242,190,113,.5);
}

/* ══ CABECERA ═══════════════════════════════════════════════════════════ */
.cabecera{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .32s ease, box-shadow .32s ease;
}
.cabecera-in{ display:flex; align-items:center; gap:1.4rem; min-height:74px; }
.cabecera.pegada,
body:not([data-pagina="index"]) .cabecera{
  background:rgba(6,23,31,.93);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.07);
}

.logo{ display:flex; align-items:center; gap:.65rem; color:var(--espuma);
       text-decoration:none; flex:0 0 auto; }
.logo:hover{ text-decoration:none; }
.logo-svg{ width:40px; height:40px; flex:0 0 auto; color:var(--ambar-claro); }
.logo-txt{ display:flex; flex-direction:column; line-height:1.05; }
.logo-txt b{
  font-family:var(--fuente); font-size:.63rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--niebla);
}
.logo-txt i{
  font-family:var(--display); font-style:normal; font-weight:600;
  font-size:1.14rem; color:var(--espuma); letter-spacing:-.01em;
}

.nav{ display:flex; gap:.25rem; margin-left:auto; align-items:center; }
.nav a{
  color:var(--espuma); opacity:.86; font-size:.93rem; font-weight:500;
  padding:.5rem .72rem; border-radius:8px; text-decoration:none;
  transition:opacity .2s, background .2s;
}
.nav a:hover{ opacity:1; background:rgba(255,255,255,.09); text-decoration:none; }
.nav a[aria-current="page"]{ opacity:1; color:var(--ambar-claro); }
.nav a.nav-cta{
  background:var(--ambar); color:var(--tinta); font-weight:600; opacity:1;
  margin-left:.4rem;
}
.nav a.nav-cta:hover{ background:var(--ambar-claro); }

.idioma{
  color:var(--niebla); font-size:.78rem; font-weight:700; letter-spacing:.1em;
  padding:.4rem .62rem; border:1px solid rgba(167,192,196,.36);
  border-radius:7px; text-decoration:none; flex:0 0 auto;
}
.idioma:hover{ color:var(--espuma); border-color:var(--espuma); text-decoration:none; }

.hamburguesa{
  display:none; background:none; border:0; cursor:pointer;
  width:44px; height:44px; padding:10px; flex:0 0 auto;
}
.hamburguesa span{
  display:block; height:2px; background:var(--espuma); border-radius:2px;
  margin:4px 0; transition:transform .28s, opacity .2s;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ══ HERO ═══════════════════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:min(94svh,880px);
  display:flex; align-items:center; background:var(--tinta);
  overflow:hidden; padding:8rem 0 4rem;
}
.hero-fondo{ position:absolute; inset:0; }
.hero-escena,.hero-foto{ width:100%; height:100%; object-fit:cover; }
.hero-fondo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,23,31,.55) 0%, rgba(6,23,31,.16) 36%,
                    rgba(6,23,31,.48) 76%, rgba(6,23,31,.95) 100%),
    linear-gradient(90deg, rgba(6,23,31,.84) 0%, rgba(6,23,31,.36) 48%,
                    rgba(6,23,31,0) 74%);
}
.hero-in{ position:relative; z-index:2; max-width:46rem; }
.hero-eyebrow{
  font-family:var(--fuente); font-size:.78rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--espuma);
  opacity:.78; margin:0 0 .4rem;
}
.hero-titulo{
  color:#fff; margin:0 0 .3em; font-weight:400;
  font-size:clamp(2.4rem,6.4vw,4.6rem); line-height:1.02;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero-titulo span{ display:block; font-weight:600; }
.hero-titulo em{
  display:block; font-style:italic; font-weight:400;
  color:var(--ambar-claro);
}
.hero-lema{
  font-family:var(--display); font-style:italic; font-size:1.18rem;
  color:var(--ambar); margin:0 0 1.1rem;
}
.hero .kicker{ color:var(--niebla); opacity:.9; }
.hero-bajada{
  color:var(--espuma); font-size:clamp(1rem,1.6vw,1.14rem);
  max-width:36rem; opacity:.94; margin-bottom:2rem;
}
.kicker{
  font-size:.72rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ambar); margin:0 0 .9rem;
}
.hero-botones{ display:flex; flex-wrap:wrap; gap:.75rem; }

.ola{ animation:vaiven 9s ease-in-out infinite; }
.ola.o2{ animation-duration:12s; animation-direction:reverse; }
.ola.o3{ animation-duration:15s; }
@keyframes vaiven{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-120px)} }
.salto{ animation:saltar 7s ease-in-out infinite; transform-origin:1150px 600px; }
@keyframes saltar{ 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-14px) rotate(2deg)} }

/* ══ FRANJA DE ATRIBUTOS ════════════════════════════════════════════════ */
.franja-atributos{
  background:var(--tinta-2); border-block:1px solid rgba(255,255,255,.07);
  padding:1.1rem 0;
}
.franja-atributos ul{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 1.8rem;
  list-style:none; padding:0; margin:0;
}
.franja-atributos li{
  display:flex; align-items:center; gap:.55rem;
  color:var(--niebla); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}
.atr-ico{ width:22px; height:22px; color:var(--ambar); flex:0 0 auto; }
.atr-ico svg{ width:100%; height:100%; }

/* ══ SECCIONES ══════════════════════════════════════════════════════════ */
.seccion{ padding:clamp(3.6rem,7vw,6.4rem) 0; }
.seccion-oscura, .seccion-luna{
  background:var(--tinta); color:var(--espuma);
  background-image:
    radial-gradient(120% 80% at 12% 0%, rgba(27,122,140,.22), transparent 60%),
    radial-gradient(90% 70% at 96% 100%, rgba(217,150,60,.12), transparent 62%);
}
.seccion-oscura h2,.seccion-oscura h3,.seccion-oscura h4,
.seccion-luna h2,.seccion-luna h3{ color:#fff; }
.seccion-oscura a,.seccion-luna a{ color:var(--ambar-claro); }

.seccion-cabeza{ max-width:46rem; margin-bottom:clamp(2rem,3.6vw,3.2rem); }
.seccion-cabeza-sep{ margin-top:clamp(2.6rem,5vw,4rem); }
.seccion-intro{
  font-size:clamp(1rem,1.4vw,1.12rem); color:var(--texto-suave); margin-bottom:0;
}
.seccion-oscura .seccion-intro,.seccion-luna .seccion-intro{ color:var(--niebla); }

.pagina-cabeza{
  background:var(--tinta); color:#fff;
  padding:clamp(7.5rem,13vw,10rem) 0 clamp(2.6rem,4.5vw,4rem);
  background-image:
    radial-gradient(100% 90% at 78% 0%, rgba(27,122,140,.3), transparent 62%),
    radial-gradient(80% 70% at 4% 100%, rgba(217,150,60,.14), transparent 60%);
}
.pagina-cabeza h1{ color:#fff; margin-bottom:.35em; }
.pagina-cabeza p{ color:var(--niebla); max-width:44rem; font-size:1.08rem; margin:0; }

.nota-tecnica{
  margin-top:1.6rem; font-size:.82rem; line-height:1.6;
  color:var(--texto-suave); max-width:52rem;
}
.seccion-oscura .nota-tecnica,.seccion-luna .nota-tecnica{
  color:var(--niebla); opacity:.72;
}

/* ══ BOTONES ════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.86rem 1.6rem; border-radius:999px; border:1.5px solid transparent;
  font-family:var(--fuente); font-size:.97rem; font-weight:600;
  cursor:pointer; text-decoration:none; line-height:1;
  transition:transform .18s ease, background .22s, border-color .22s, box-shadow .22s;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primario{ background:var(--ambar); color:var(--tinta);
               box-shadow:0 6px 20px rgba(217,150,60,.35); }
.btn-primario:hover{ background:var(--ambar-claro); }
.btn-fantasma{ border-color:rgba(234,243,243,.45); color:var(--espuma);
               background:rgba(255,255,255,.05); }
.btn-fantasma:hover{ border-color:var(--espuma); background:rgba(255,255,255,.12); }
.seccion:not(.seccion-oscura):not(.seccion-luna) .btn-fantasma{
  border-color:var(--linea); color:var(--marea); background:rgba(17,76,92,.04);
}
.seccion:not(.seccion-oscura):not(.seccion-luna) .btn-fantasma:hover{ border-color:var(--marea); }
.btn-chico{ padding:.6rem 1.15rem; font-size:.9rem; background:var(--marea); color:#fff; }
.btn-chico:hover{ background:var(--marea-viva); }
.btn-grande{ padding:1.05rem 2.3rem; font-size:1.05rem; }
.btn-ancho{ width:100%; }
.btn svg{ width:20px; height:20px; }

/* ══ LA SALIDA ══════════════════════════════════════════════════════════ */
.salida-cuadro{
  display:grid; gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:1.4fr 1fr; align-items:start;
  margin-bottom:clamp(2.4rem,4vw,3.4rem);
}
.salida-datos{
  display:grid; grid-template-columns:auto 1fr; gap:0; margin:0;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  overflow:hidden; box-shadow:var(--sombra);
}
.dato-salida{
  display:contents;
}
.salida-datos dt{
  padding:.95rem 1.2rem; font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--texto-suave);
  border-bottom:1px solid var(--linea); background:rgba(17,76,92,.03);
  white-space:nowrap;
}
.salida-datos dd{
  margin:0; padding:.95rem 1.2rem; font-weight:500;
  border-bottom:1px solid var(--linea);
}
.salida-datos .dato-salida:last-child dt,
.salida-datos .dato-salida:last-child dd{ border-bottom:0; }

.salida-precio{
  background:var(--tinta); color:var(--espuma); border-radius:var(--radio);
  padding:1.8rem 1.6rem; text-align:center;
  background-image:radial-gradient(90% 70% at 50% 0%, rgba(217,150,60,.18), transparent 65%);
}
.precio-et{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--niebla); margin-bottom:.4rem;
}
.precio{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(2.1rem,4.4vw,2.9rem); color:#fff; line-height:1.05;
}
.precio-u{
  display:block; font-size:.86rem; color:var(--ambar-claro);
  margin:.3rem 0 1.4rem;
}

/* ══ LISTAS CON CHECK ═══════════════════════════════════════════════════ */
.rejilla-dos{
  display:grid; gap:clamp(1.8rem,4vw,3.4rem);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.check{ list-style:none; padding:0; margin:0; }
.check li{ position:relative; padding-left:1.8rem; margin-bottom:.65rem; font-size:.97rem; }
.check li::before{ position:absolute; left:0; top:.02em; font-weight:700; font-size:1.05em; }
.check.si li::before{ content:"✓"; color:var(--ambar); }
.check.no li::before{ content:"·"; color:var(--niebla); font-size:1.6em; top:-.3em; }
.check.no li{ opacity:.72; }
.lista-check h3{ margin-bottom:1rem; }

/* ══ CÓMO ES LA JORNADA ═════════════════════════════════════════════════ */
.jornada-bloques{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.jornada-bloque{
  border-left:2px solid rgba(242,190,113,.35); padding:.2rem 0 .2rem 1.4rem;
}
.jornada-bloque b{
  display:block; font-family:var(--display); font-size:1.5rem;
  font-weight:600; color:var(--ambar-claro); line-height:1.1;
}
.jornada-et{
  display:block; font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--niebla); margin:.25rem 0 .6rem;
}
.jornada-bloque p{ color:var(--niebla); font-size:.95rem; margin:0; }

/* ══ MAPA DE LA ZONA DE PESCA ═══════════════════════════════════════════ */
.mapa{
  display:grid; gap:clamp(1.4rem,3vw,2.4rem);
  grid-template-columns:1.1fr 1fr; align-items:center;
}
.mapa-lienzo{
  border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--linea); box-shadow:var(--sombra);
}
#mapa{
  height:clamp(320px,44vw,460px); width:100%;
  background:#A9D6E6; z-index:0;
}
#mapa.mapa-falla{
  display:grid; place-items:center;
  background:repeating-linear-gradient(45deg,#E6EFE9,#E6EFE9 10px,#DCE7E0 10px,#DCE7E0 20px);
}
.mapa-sinjs{ color:var(--texto-suave); font-size:.9rem; text-align:center; padding:1rem; }

/* Marcadores propios */
.marca-zona{
  background:var(--ambar); color:var(--tinta);
  border:2.5px solid #fff; border-radius:50%;
  display:grid !important; place-items:center;
  font-family:var(--fuente); font-weight:700; font-size:.88rem;
  box-shadow:0 2px 8px rgba(6,23,31,.35);
}
.marca-embarque{
  background:var(--tinta); color:var(--ambar-claro);
  border:2.5px solid #fff; border-radius:50%;
  display:grid !important; place-items:center; font-size:1.15rem;
  box-shadow:0 2px 10px rgba(6,23,31,.45);
}
.leaflet-popup-content{ font-family:var(--fuente); font-size:.88rem; line-height:1.5; }
.leaflet-popup-content b{ font-family:var(--display); font-size:1rem; }
.leaflet-container{ font-family:var(--fuente); }


.zonas{ list-style:none; padding:0; margin:0; display:grid; gap:1.1rem; }
.zonas li{ display:flex; gap:.9rem; align-items:flex-start; }
.z-n{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:var(--ambar); color:var(--tinta);
  display:grid; place-items:center;
  font-family:var(--display); font-weight:600; font-size:1rem;
}
.zonas b{ display:block; font-family:var(--display); font-size:1.08rem; font-weight:600; }
.zonas p{ margin:.2rem 0 0; font-size:.92rem; color:var(--texto-suave); line-height:1.55; }

.mapa-nota{ margin:1rem 0 0; font-size:.78rem; color:var(--texto-suave); }

.accesos{
  list-style:none; padding:0; margin:1.8rem 0 0;
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.accesos li{ border-top:2px solid var(--linea); padding-top:.7rem; }
.accesos b{ font-family:var(--display); font-size:1.1rem; font-weight:600; }
.accesos .km{ color:var(--ambar); font-weight:700; font-size:.9rem; margin-left:.5rem; }
.acc-n{ display:block; font-size:.84rem; color:var(--texto-suave); margin-top:.15rem; }

/* ══ CHINOOK ════════════════════════════════════════════════════════════ */
.seccion-chinook{
  background:var(--tinta); color:var(--espuma);
  background-image:
    radial-gradient(110% 80% at 85% 10%, rgba(217,150,60,.16), transparent 60%),
    radial-gradient(90% 70% at 5% 95%, rgba(27,122,140,.22), transparent 62%);
}
.seccion-chinook h2,.seccion-chinook h3{ color:#fff; }
.chinook-top{
  display:grid; gap:clamp(1.8rem,4vw,3rem);
  grid-template-columns:1.3fr 1fr; align-items:start;
  margin-bottom:clamp(2.2rem,4vw,3.2rem);
}
.chinook-entrada{
  font-family:var(--display); font-size:clamp(1.1rem,1.9vw,1.34rem);
  line-height:1.5; color:var(--espuma); margin:0;
}
.cifras{ display:grid; gap:1.3rem; }
.cifra b{
  display:block; font-family:var(--display); font-size:clamp(1.5rem,2.6vw,1.9rem);
  font-weight:600; color:var(--ambar); line-height:1.05;
}
.cifra span{ display:block; font-size:.82rem; color:var(--niebla); margin-top:.15rem; }

.rejilla-hechos{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.hecho{
  background:rgba(255,255,255,.05); border:1px solid var(--linea-osc);
  border-radius:var(--radio); padding:1.4rem 1.5rem;
}
.hecho h3{ font-size:1.08rem; margin-bottom:.4em; }
.hecho p{ color:var(--niebla); font-size:.94rem; margin:0; }

/* ══ ESPECIES ═══════════════════════════════════════════════════════════ */
.rejilla-especies{
  display:grid; gap:1.3rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.especie{
  background:rgba(255,255,255,.05); border:1px solid var(--linea-osc);
  border-radius:var(--radio); padding:1.4rem 1.5rem;
}
.especie h4{ color:#fff; margin-bottom:.1em; }
.especie em{ font-size:.8rem; color:var(--niebla); opacity:.75; }
.especie p{ color:var(--niebla); font-size:.93rem; margin:.7rem 0 0; }

/* ══ CALENDARIO LUNAR ═══════════════════════════════════════════════════ */
.luna-destacado{
  display:grid; gap:clamp(1.6rem,3.4vw,3rem);
  grid-template-columns:1.5fr 1fr; align-items:start;
  padding-bottom:clamp(1.8rem,3.4vw,2.6rem);
  border-bottom:1px solid var(--linea-osc);
  margin-bottom:clamp(1.8rem,3.4vw,2.6rem);
}
.luna-frase{
  font-family:var(--display); font-size:clamp(1.14rem,2.1vw,1.46rem);
  line-height:1.45; color:var(--espuma); margin:0;
}
.luna-frase b{ color:var(--ambar-claro); font-weight:600; }
.luna-destacado .cifras{ grid-template-columns:repeat(3,1fr); gap:1rem; }

.rejilla-luna{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-bottom:clamp(2.2rem,4vw,3rem);
}
.luna-tarjeta{ border-left:2px solid rgba(242,190,113,.35); padding-left:1.3rem; }
.luna-tarjeta h3{ font-size:1.04rem; margin-bottom:.4em; }
.luna-tarjeta p{ color:var(--niebla); font-size:.92rem; margin:0; }

.cal-pie{ color:var(--niebla); font-size:.95rem; max-width:48rem; }

.cal-meses{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  margin:1.4rem 0 0;
}
.cal-mes{
  background:rgba(255,255,255,.05); border:1px solid var(--linea-osc);
  border-radius:var(--radio); padding:1.1rem;
}
.cal-mes h3{
  font-size:1rem; margin:0 0 .15em; color:#fff;
}
.cal-temp{
  font-size:.62rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ambar); margin:0 0 .8rem;
}
.cal-cab{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:.35rem;
}
.cal-cab span{
  text-align:center; font-size:.58rem; font-weight:700; letter-spacing:.06em;
  color:var(--niebla); opacity:.65;
}
.cal-rejilla{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-dia{
  position:relative; aspect-ratio:1; display:grid; place-items:center;
  border-radius:6px; font-size:.74rem; color:var(--niebla);
}
.cal-dia b{ font-weight:500; }
.cal-vacio{ aspect-ratio:1; }
.cal-dia.fuera{ opacity:.25; }
.cal-dia.en-ventana{
  background:rgba(217,150,60,.2);
  box-shadow:inset 0 0 0 1px rgba(217,150,60,.3);
  color:var(--ambar-claro);
}
.cal-dia.en-ventana b{ font-weight:700; }
.cal-dia.con-luna b{ color:#fff; font-weight:700; }
.cal-luna{
  position:absolute; bottom:1px; right:1px; width:9px; height:9px;
  color:var(--espuma); line-height:0;
}
.cal-luna svg{ width:100%; height:100%; }
.luna-disco{ display:block; }

.cal-leyenda{
  display:flex; flex-wrap:wrap; gap:.9rem 1.6rem; list-style:none;
  padding:0; margin:1.3rem 0 0; font-size:.8rem; color:var(--niebla);
}
.cal-leyenda li{ display:flex; align-items:center; gap:.45rem; }
.cal-leyenda .luna-disco{ width:15px; height:15px; color:var(--espuma); }
.muestra-ventana{
  width:18px; height:14px; border-radius:4px; display:block;
  background:rgba(217,150,60,.28); box-shadow:inset 0 0 0 1px rgba(217,150,60,.45);
}

.ventanas{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  counter-reset:v;
}
.ventana{
  display:flex; align-items:center; gap:.9rem;
  background:rgba(255,255,255,.05); border:1px solid var(--linea-osc);
  border-radius:var(--radio-chico); padding:.85rem 1rem;
}
.v-luna{ width:26px; height:26px; color:var(--ambar-claro); flex:0 0 auto; line-height:0; }
.ventana b{ display:block; font-size:.95rem; color:#fff; font-weight:600; }
.v-detalle{ display:block; font-size:.78rem; color:var(--niebla); opacity:.8; }

/* ══ ANTES DE SALIR ═════════════════════════════════════════════════════ */
.rejilla-practica{
  display:grid; gap:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.practica-bloque h3{ font-size:1.1rem; margin-bottom:.7em; }
.practica-bloque ul{ list-style:none; padding:0; margin:0; }
.practica-bloque li{
  position:relative; padding-left:1.1rem; margin-bottom:.6rem;
  font-size:.94rem; color:var(--texto-suave); line-height:1.55;
}
.practica-bloque li::before{
  content:"—"; position:absolute; left:0; color:var(--ambar); opacity:.7;
}

.seccion-aviso{
  background:var(--papel-2); padding:clamp(2.6rem,5vw,4rem) 0;
}
.seccion-aviso h2{ font-size:clamp(1.5rem,2.8vw,2rem); }
.seccion-aviso p{
  font-size:1.05rem; color:var(--texto-suave); margin:0;
  border-left:3px solid var(--verde); padding-left:1.2rem;
}

/* ══ FAQ ════════════════════════════════════════════════════════════════ */
.faq-item{ border-bottom:1px solid var(--linea-osc); }
.seccion:not(.seccion-oscura) .faq-item{ border-bottom-color:var(--linea); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:1.2rem 3rem 1.2rem 0;
  font-family:var(--display); font-size:clamp(1.02rem,1.6vw,1.18rem);
  font-weight:600; position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:.4rem; top:50%;
  transform:translateY(-50%); font-size:1.6rem; font-weight:300;
  color:var(--ambar); transition:transform .25s; font-family:var(--fuente);
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-r{ padding:0 3rem 1.3rem 0; }
.faq-r p{ margin:0; font-size:.96rem; }
.seccion-oscura .faq-r p{ color:var(--niebla); }
.seccion:not(.seccion-oscura) .faq-r p{ color:var(--texto-suave); }

/* ══ RESERVA ════════════════════════════════════════════════════════════ */
.rejilla-reserva{
  display:grid; gap:clamp(1.8rem,4vw,3.4rem);
  grid-template-columns:1fr 1.15fr; align-items:start;
}
.reserva-precio{
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  margin:1.4rem 0; padding:1.1rem 1.3rem;
  background:var(--tinta); color:#fff; border-radius:var(--radio);
}
.reserva-precio b{
  font-family:var(--display); font-size:clamp(1.7rem,3.2vw,2.2rem);
  font-weight:600; line-height:1;
}
.reserva-precio span{ font-size:.86rem; color:var(--ambar-claro); }
.reserva-check{ margin-bottom:1.6rem; }

.formulario{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:clamp(1.5rem,3vw,2.1rem); box-shadow:var(--sombra);
}
.campo{ margin-bottom:1.05rem; }
.campo-par{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.campo label{
  display:block; font-size:.8rem; font-weight:600; color:var(--texto-suave);
  margin-bottom:.35rem;
}
.campo input,.campo select,.campo textarea{
  width:100%; padding:.72rem .9rem; border:1.5px solid var(--linea);
  border-radius:var(--radio-chico); font-family:var(--fuente);
  font-size:.97rem; color:var(--texto); background:var(--papel);
  transition:border-color .2s, background .2s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--marea-viva); background:#fff; outline:none;
}
.campo textarea{ resize:vertical; min-height:94px; }
.campo input[aria-invalid="true"]{ border-color:#C0392B; }
.miel{ position:absolute; left:-9999px; }
.form-estado{
  margin:.9rem 0 0; font-size:.92rem; font-weight:600; text-align:center;
  min-height:1.2em;
}
.form-estado.ok{ color:var(--verde); }
.form-estado.mal{ color:#C0392B; }

/* ══ FOTOS ══════════════════════════════════════════════════════════════ */
/* Las fotos reales (fotos.py). Si falta el archivo el generador no dibuja la
   figura, así que estas reglas no suponen nada. */
/* ★ La foto real empieza al 30% del ancho (a la izquierda hay una franja generada
   para el texto). En pantallas medianas el recorte 'cover' muestra ~60-75% del
   ancho: hay que anclar a la derecha o se ve solo la proa. En escritorio ancho
   se ve casi entero y conviene correrlo un poco a la derecha, lejos del título. */
.hero-con-foto .hero-foto{ object-position:78% 45%; }
@media (min-width:1200px){ .hero-con-foto .hero-foto{ object-position:35% 45%; } }

.foto{ margin:0; min-width:0; }
.foto img{
  display:block; width:100%; height:auto; border-radius:var(--radio);
  box-shadow:var(--sombra); background:var(--papel-2);
}
.foto figcaption{
  font-size:.82rem; line-height:1.5; color:var(--texto-suave); margin-top:.65rem;
}
.seccion-oscura .foto figcaption,.seccion-chinook .foto figcaption{ color:var(--niebla); }
.seccion-oscura .foto img,.seccion-chinook .foto img{ box-shadow:var(--sombra-alta); }

/* una foto ancha sola: recorte panorámico, el motivo queda arriba del centro */
.foto-ancha{ margin:clamp(1.6rem,3vw,2.6rem) 0 0; }
.foto-ancha img{ aspect-ratio:16/7; object-fit:cover; object-position:50% 38%; }
.seccion-foto{ padding-bottom:0; }
.seccion-foto .foto-ancha{ margin-top:0; }

/* cabecera de página con fotos de fondo: paneles iguales (dos verticales
   llenan el ancho) y un degradado que deja el texto abajo, legible */
.pagina-cabeza.con-fotos{
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  min-height:min(64svh,580px);
  padding:clamp(9rem,15vw,12rem) 0 clamp(2.4rem,4vw,3.4rem);
}
/* ★ FLEX, no grid: en un grid con filas 'auto' el alto de la imagen se medía por
   su tamaño natural (una vertical de 2133 px) y desbordaba: se veía solo el
   cielo. Con flex el alto de cada panel es el de la cabecera, que es definido. */
.cabeza-fotos{
  position:absolute; inset:0; display:flex; gap:3px; background:var(--tinta);
}
.cabeza-fotos img{
  display:block; flex:1 1 0; min-width:0; width:auto; height:100%;
  object-fit:cover; object-position:50% 45%;
}
.pagina-cabeza.con-fotos::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,23,31,.62) 0%, rgba(6,23,31,.18) 38%,
                    rgba(6,23,31,.55) 70%, rgba(6,23,31,.94) 100%);
}
.pagina-cabeza.con-fotos .contenedor{ position:relative; z-index:1; }
.pagina-cabeza.con-fotos h1{ text-shadow:0 2px 30px rgba(0,0,0,.4); }
.pagina-cabeza.con-fotos p{ color:var(--espuma); }

/* galería de solo dos fotos: dos columnas, casi 4:3 */
.galeria.dos{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:clamp(240px,30vw,430px);
}

/* mosaico: 3 columnas con filas de alto FIJO; la grande ocupa 2×2 y las
   verticales 1×2. ★ El alto de fila va explícito: con filas 'auto' y la imagen
   en flex:1 el navegador le daba 0 px a las fotos y solo quedaban los pies. */
.galeria{
  display:grid; gap:1.1rem; grid-auto-flow:dense;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:clamp(190px,21vw,300px);
}
.galeria .foto{ display:flex; flex-direction:column; min-height:0; }
.galeria .foto img{
  flex:1 1 auto; min-height:0; height:100%;
  object-fit:cover; object-position:50% 40%;
}
.galeria .foto figcaption{ flex:none; }
.galeria .foto-v{ grid-row:span 2; }
.galeria .foto-grande{ grid-column:span 2; grid-row:span 2; }
.galeria .foto-grande img{ object-position:50% 30%; }

@media (max-width:860px){
  .galeria{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:clamp(170px,26vw,240px);
  }
}
@media (max-width:600px){
  .pagina-cabeza.con-fotos{ min-height:min(58svh,520px); }
  .galeria,.galeria.dos{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .galeria .foto-grande,.galeria .foto-v{ grid-column:auto; grid-row:auto; }
  .galeria .foto img{ height:auto; aspect-ratio:4/3; }
  .galeria .foto-v img{ aspect-ratio:3/4; }
  .foto-ancha img{ aspect-ratio:4/3; }
}

/* ══ BANDA ILUSTRADA ════════════════════════════════════════════════════ */
/* El chinook generado, a la cabeza de «El chinook» (en la portada, justo bajo
   «Cómo es la jornada»). Los cuatro bordes se funden con DOS máscaras lineales
   en elementos anidados —una horizontal, otra vertical—: así no depende de
   mask-composite y el fondo de la sección se ve a través, sin costura con sus
   degradados. Sin soporte de máscaras se ve la imagen rectangular, que sirve
   igual. ★ El pez ocupa del 11 al 84 % del ancho y del 21 al 77 % del alto:
   los fundidos quedan fuera de él. */
/* ★ La sección sube --solape sobre el relleno inferior de la anterior y su fondo
   nace transparente en ese tramo: así el brillo ámbar de «Cómo es la jornada»
   se apaga de a poco en vez de cortarse en una línea justo encima del pez.
   Por eso mismo acá NO va el brillo ámbar propio (quedaría detrás de la imagen).
   OJO: supone que la sección anterior es OSCURA; sobre una clara se vería la
   franja. Hoy solo se usa en la portada, después de «Cómo es la jornada». */
.seccion-chinook.con-banda{
  --solape:clamp(1rem,3vw,2.8rem);
  padding-top:0; margin-top:calc(-1 * var(--solape));
  background-color:transparent;
  background-image:
    radial-gradient(90% 70% at 5% 95%, rgba(27,122,140,.22), transparent 62%),
    linear-gradient(180deg, rgba(6,23,31,0) 0, var(--tinta) var(--solape), var(--tinta) 100%);
}
.banda{
  position:relative; overflow:hidden; max-width:1320px;
  margin:0 auto calc(-1 * clamp(.4rem,1.6vw,1.6rem));
}
.banda-in{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.banda img{
  display:block; width:100%; height:auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 17%,#000 83%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 17%,#000 83%,transparent 100%);
}
.banda-nota{
  position:absolute; right:clamp(1.2rem,4vw,3rem); bottom:.5rem; margin:0;
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--niebla); opacity:.55;
}
@media (max-width:600px){
  /* en el teléfono la imagen crece un 20 % y se recorta a los lados: el pez
     (11–84 % del ancho) sigue entrando entero y se ve más grande */
  .banda{ margin-bottom:.5rem; }
  .banda-in{ width:120%; margin-left:-9%; }
  .banda-nota{ right:1rem; bottom:.2rem; }
}

/* ══ CTA FINAL ══════════════════════════════════════════════════════════ */
.cta-final{
  background:linear-gradient(135deg,var(--marea) 0%,var(--tinta) 68%);
  color:#fff; text-align:center; padding:clamp(3.2rem,6vw,5rem) 0;
}
.cta-final h2{ color:#fff; margin-bottom:.3em; }
.cta-final p{ color:var(--niebla); margin-bottom:2rem; font-size:1.06rem;
              max-width:40rem; margin-inline:auto; }

/* ══ PIE ════════════════════════════════════════════════════════════════ */
.pie{
  background:var(--tinta); color:var(--niebla);
  padding:clamp(2.8rem,5vw,4.2rem) 0 1.5rem; font-size:.93rem;
}
.pie-top{
  display:grid; gap:2.4rem;
  grid-template-columns:1.4fr .8fr 1.4fr;
}
.pie h3{
  color:var(--espuma); font-family:var(--fuente); font-size:.7rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:1rem;
}
.pie ul{ list-style:none; padding:0; margin:0; }
.pie li{ margin-bottom:.5rem; }
.pie a{ color:var(--niebla); }
.pie a:hover{ color:var(--ambar-claro); }
.pie .logo-svg{ width:46px; height:46px; color:var(--ambar-claro); margin-bottom:.8rem; }
.pie-lema{
  font-family:var(--display); font-style:italic; font-size:1.2rem;
  color:var(--espuma); margin:0 0 .3rem;
}
.pie-kicker{
  font-size:.64rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ambar); margin:0 0 .8rem;
}
.pie-cierre{ font-size:.9rem; opacity:.8; max-width:22rem; }
.pie-social{ display:flex; gap:.7rem; margin-top:.9rem; }
.pie-social a{ color:var(--niebla); }
.pie-social a:hover{ color:var(--ambar-claro); }

.pie-datos{ display:grid; gap:.75rem; margin:0; }
.dato{ display:grid; grid-template-columns:auto 1fr; gap:.2rem; }
.dato dt{
  font-size:.62rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--espuma); opacity:.6;
  grid-column:1/-1;
}
.dato dd{ margin:0; font-size:.9rem; grid-column:1/-1; }

.pie-fondo{
  margin-top:2.4rem; padding-top:1.3rem;
  border-top:1px solid var(--linea-osc);
}
.pie-legal{ font-size:.76rem; opacity:.6; line-height:1.55; max-width:56rem; }
/* Todo a la IZQUIERDA: abajo a la derecha flota el botón de WhatsApp y tapaba
   lo que hubiera ahí (antes el aviso de obra, ahora sería el crédito y su enlace). */
.pie-abajo{
  display:flex; flex-wrap:wrap; gap:.4rem 1.8rem; justify-content:flex-start;
  font-size:.78rem; opacity:.7; margin-top:.8rem;
}
.pie-credito a{ color:var(--ambar-claro); text-decoration:none; }
.pie-credito a:hover{ text-decoration:underline; }

/* ══ WHATSAPP FLOTANTE ══════════════════════════════════════════════════ */
.wa-flota{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:90;
  display:inline-flex; align-items:center; gap:.55rem;
  background:#25D366; color:#06301A; font-weight:700; font-size:.92rem;
  padding:.8rem 1.15rem; border-radius:999px;
  box-shadow:0 6px 24px rgba(37,211,102,.42); text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.wa-flota:hover{
  transform:translateY(-3px); text-decoration:none;
  box-shadow:0 10px 30px rgba(37,211,102,.5);
}

/* ══ REVELADO AL BAJAR ══════════════════════════════════════════════════ */
.revela{ opacity:0; transform:translateY(20px); }
.revela.visible{
  opacity:1; transform:none;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1);
}

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width:1000px){
  .salida-cuadro,.chinook-top,.luna-destacado,.rejilla-reserva,.mapa{
    grid-template-columns:1fr;
  }
  .pie-top{ grid-template-columns:1fr 1fr; }
  .luna-destacado .cifras{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  .hamburguesa{ display:block; }
  .nav{
    /* OJO: la cabecera lleva backdrop-filter y eso la vuelve el bloque
       contenedor de sus hijos position:fixed. Con bottom:0 el panel mediría
       contra los 74px de la cabecera: el alto va EXPLÍCITO. */
    position:fixed; top:74px; left:0; right:0; bottom:auto;
    height:calc(100svh - 74px);
    background:var(--tinta);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:1rem 1.3rem 2.4rem; margin:0;
    border-top:1px solid rgba(255,255,255,.08);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .24s, transform .24s;
    overflow-y:auto; overscroll-behavior:contain;
  }
  .nav.abierta{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:.95rem .4rem; font-size:1.05rem; border-radius:0;
          border-bottom:1px solid rgba(255,255,255,.07); }
  .nav a.nav-cta{ margin:1rem 0 0; text-align:center; border-radius:999px; border-bottom:0; }
  .idioma{ margin-left:auto; }
  .franja-atributos ul{ justify-content:flex-start; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .hero{ min-height:88svh; padding:7rem 0 3.5rem; }
  .hero-botones .btn{ width:100%; }
  .campo-par{ grid-template-columns:1fr; }
  .pie-top{ grid-template-columns:1fr; gap:2rem; }
  .luna-destacado .cifras{ grid-template-columns:1fr; gap:.9rem; }
  .cal-meses{ grid-template-columns:1fr; }
  .ventanas{ grid-template-columns:1fr; }
  .salida-datos{ grid-template-columns:1fr; }
  .salida-datos dt{ border-bottom:0; padding-bottom:.2rem; }
  .salida-datos dd{ padding-top:0; }
  .faq-item summary{ padding-right:2.4rem; }
  .wa-flota span{ display:none; }
  .wa-flota{ padding:.9rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .revela{ opacity:1; transform:none; }
}

@media print{
  .cabecera,.wa-flota,.cta-final,.formulario{ display:none; }
  body{ background:#fff; color:#000; }
  .seccion-oscura,.seccion-luna,.seccion-chinook{ background:#fff; color:#000; }
}