/* =============================================================================
   AQUALODGE · CABECERA ÚNICA — 14-ago-2026
   -----------------------------------------------------------------------------
   POR QUÉ EXISTE ESTE FICHERO
   El sitio tenía DOS familias de CSS: 17 páginas con assets/v9.css y 8 con estilos
   propios dentro de <style>. La cabecera había derivado en tres tamaños distintos
   (medido en vivo el 14-ago sobre las 25 páginas):

       portada      header 97 px · logo 56 px · padding 20/34 · position:absolute
       7 páginas    header 67 px · logo 42 px · padding 12/34 · position:fixed
       17 páginas   header 65 px · logo 42 px · padding 11/30 · position:fixed

   Además el logo saltaba a 40 px en la portada en móvil, el menú se plegaba a
   hamburguesa en 1180 px en unas páginas y en 1150/1020 en otras, y el cajón
   móvil cambiaba de fondo y de sangrado.

   ESTE FICHERO ES LA ÚNICA VERDAD DE LA CABECERA. Se enlaza EL ÚLTIMO en el
   <head> de las 25 páginas, después de v9.css y después de los <style> propios.

   CÓMO GANA SIN !important
   Todas las reglas van prefijadas con `header#top` (specificity 1-x-x). Eso vence
   a `header.solid …` (0-2-1) y a las reglas dentro de @media de cada página
   (0-1-1), que es lo que provocaba la deriva. No hace falta ni un !important.
   Si algún día hay que cambiar el alto de la cabecera, se cambia AQUÍ y solo aquí.

   VALORES CANÓNICOS (los de las 17 páginas, que eran mayoría y los más cuidados)
       alto 65 px = 11 px + logo 42 px + 11 px + 1 px de línea inferior
   ============================================================================= */

/* --- caja del header --------------------------------------------------------
   `position:fixed` SIEMPRE. La portada lo tenía en `absolute` y pasaba a `fixed`
   al hacer scroll: ese cambio era justo el salto que se veía.                  */
header#top,
header#top.solid{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(248,244,238,.94);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);
          backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line-2,#F2E9D9);
  box-shadow:0 1px 0 rgba(255,255,255,.6), 0 6px 22px -12px rgba(11,42,74,.28);
  transition:none;            /* la cabecera ya no encoge: nada que animar */
}

header#top .header-in,
header#top.solid .header-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:11px 30px; max-width:1440px; margin:0 auto;
  transition:none;
}

/* --- logo -------------------------------------------------------------------
   42 px de alto en TODAS las páginas, en TODOS los anchos y con o sin scroll.  */
header#top .logo,
header#top.solid .logo{ display:inline-block; line-height:0 }

header#top .logo-img,
header#top.solid .logo-img{
  height:42px; width:auto; display:block; transition:none;
}

/* --- menú de escritorio ----------------------------------------------------- */
header#top nav.main-nav{
  display:flex; align-items:center; gap:17px; align-self:stretch;
}
header#top nav.main-nav>a,
header#top nav.main-nav .has-drop>a{
  position:relative; white-space:nowrap;
  font-size:12.5px; font-weight:500; letter-spacing:1.15px;
  color:var(--navy,#0D2440); text-transform:uppercase; padding:7px 0;
  transition:color .25s var(--ease,cubic-bezier(.22,.61,.36,1));
}
header#top nav.main-nav a.btn-gold{
  margin-left:6px; padding:12px 20px; letter-spacing:1.7px;
}

/* --- hamburguesa ------------------------------------------------------------ */
header#top .burger{
  display:none; background:none; border:none; cursor:pointer;
  padding:7px; z-index:10; border-radius:4px;
}
header#top .burger span{
  display:block; width:24px; height:2px; margin:5px 0; border-radius:2px;
  background:var(--navy,#0D2440);
  transition:.3s var(--ease,cubic-bezier(.22,.61,.36,1));
}
header#top .burger:hover span{ background:var(--gold-deep,#B8934F) }

/* --- cajón del menú móvil ---------------------------------------------------
   Vive DENTRO de header#top, después de .header-in, en las 25 páginas.        */
header#top .mobile-nav{
  display:none; flex-direction:column;
  background:var(--paper,#FCFAF5); padding:8px 26px 26px;
  border-top:1px solid var(--line-2,#F2E9D9);
  box-shadow:0 18px 30px -14px rgba(11,42,74,.3);
  max-height:82vh; overflow-y:auto; overscroll-behavior:contain;
}
header#top .mobile-nav.open{ display:flex }
header#top .mobile-nav a{
  display:flex; align-items:center; min-height:44px;   /* objetivo táctil */
  padding:13px 2px; font-size:13px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--navy,#0D2440); font-weight:500;
  border-bottom:1px solid var(--line-2,#F2E9D9);
}
header#top .mobile-nav a.sub{
  padding-left:16px; font-size:11.6px; letter-spacing:1.1px;
  color:var(--muted,#8a8577); border-bottom-color:rgba(234,224,204,.5);
}
header#top .mobile-nav a.sub::before{ content:"—"; color:var(--gold,#C9A15C); margin-right:8px }
header#top .mobile-nav .btn{ margin-top:18px; border:none }

/* --- puntos de ruptura ------------------------------------------------------
   Un solo juego para las 25 páginas. Antes había 1330/1180 en unas y
   1290/1150/1020 en otras, así que entre 1020 y 1180 px una página enseñaba el
   menú completo y la siguiente ya la hamburguesa.                             */
@media(max-width:1330px){
  header#top nav.main-nav{ gap:12px }
  header#top nav.main-nav>a,
  header#top nav.main-nav .has-drop>a{ font-size:11.4px; letter-spacing:.65px }
  header#top nav.main-nav a.btn-gold{ padding:11px 14px; letter-spacing:1.2px }
}
@media(max-width:1180px){
  header#top nav.main-nav{ display:none }
  header#top .burger{ display:block }
}

/* El logo y el sangrado NO cambian en móvil: mismo alto y mismo margen que en
   escritorio. La portada bajaba a 40 px y a 24 px de sangrado; ya no. */

/* --- el bloque que va justo debajo de la barra -------------------------------
   La cabecera es fija y mide 65 px exactos, así que la primera sección tiene que
   arrancar en 65. Estaba en `margin-top:66px` en las páginas de estilos propios
   (.rhero), en 65 en v9.css (.phero) y en 64 en un @media de v9.css: 1 px de
   hueco en unas y 1 px metido debajo de la barra en otras. Se iguala a 65.
   Va con `body` delante para ganarle también a la regla de dentro del @media.  */
body .rhero,
body .phero{ margin-top:65px }
