/* GENERADO POR cascara.mjs · NO se edita a mano.
   Para cambiar la cabecera, el menú o el pie: se cambia en global.css,
   inicio.css o nuestro.css y se vuelve a correr `node cascara.mjs`.
   Lo escrito a mano para la cáscara va en cascara-propio.css.

   :root NO entra aquí: este archivo lo cargan también las páginas de
   siempre, DESPUÉS de css/nucleo.css, y le habría cambiado el --gold,
   el --ink y el --paper al sitio entero sin que nadie lo pidiera. Las
   variables van encerradas en la cáscara, en la línea de abajo. */
.gnh-header,.gnh-menu,.gnh-closingFooter{--ink:#0d0e0c;--warm:#f3f0e9;--paper:#e7e2d8;--gold:#a8933b;--white:#f7f3ec;--black:#080806;--line:rgba(17,17,15,.18);--serif:'Bodoni Moda',serif;--sans:'Manrope',sans-serif}

/* ── movimiento que la cáscara usa ── */
@keyframes brandEnter{from{opacity:0;transform:translate3d(-50%,-34px,0)}}

/* ── de global.css ── */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url('/nuevo/fonts/bodoni-moda-latin-opsz-normal.woff2') format('woff2-variations')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 900;font-display:swap;src:url('/nuevo/fonts/bodoni-moda-latin-opsz-italic.woff2') format('woff2-variations')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/nuevo/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url('/nuevo/fonts/eb-garamond-latin-wght-normal.woff2') format('woff2-variations')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;src:url('/nuevo/fonts/eb-garamond-latin-wght-italic.woff2') format('woff2-variations')}
@font-face{font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;src:url('/nuevo/fonts/karla-latin-wght-normal.woff2') format('woff2-variations')}

/* ── de inicio.css ── */
.gnh-header{--black:#080806;--white:#f7f3ec;--gold:#a8933b;position:fixed;z-index:60;inset:0 0 auto;height:224px;color:var(--white);pointer-events:none}
.gnh-brand{position:absolute;left:50%;top:42px;width:max-content;border:0;text-align:center;text-decoration:none;pointer-events:auto;transform-origin:50% 0;will-change:transform;animation:brandEnter 1s cubic-bezier(.22,.75,.16,1) both;color:var(--white)}
.gnh-brand span{display:block;font:400 clamp(55px,6.6vw,94px)/.78 'Bodoni Moda',serif;letter-spacing:-.055em}
.gnh-brand em{display:block;margin-top:8px;color:var(--gold);font:italic clamp(18px,2vw,27px)/1 'Bodoni Moda',serif;letter-spacing:.01em}
.gnh-menuButton{position:fixed;z-index:7;right:28px;top:28px;width:44px;height:44px;padding:0;border:0;background:transparent;backdrop-filter:none;box-shadow:none;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;pointer-events:auto}
.gnh-menuButton i{display:block;width:25px;height:1px;border-radius:0;background:currentColor}
.gnh-menuButton i:last-child{margin-left:0;width:25px}
.gnh-menu{position:fixed;z-index:90;inset:0;padding:28px 5vw 45px;background:#0a0907;color:var(--white);transform:translateY(-101%);visibility:hidden;transition:transform .55s cubic-bezier(.76,0,.24,1),visibility .55s}
.gnh-menu.gnh-menuOpen{transform:none;visibility:visible}
.gnh-menuHead{height:70px;border-bottom:1px solid rgba(255,255,255,.25);display:flex;align-items:flex-start;justify-content:space-between;font:600 7px/1 'Manrope',sans-serif;letter-spacing:.2em}
.gnh-menuHead button{border:0;background:none;color:inherit;font:600 7px/1 'Manrope',sans-serif;letter-spacing:.2em}
.gnh-menu nav{width:min(760px,100%);margin:7vh auto 0}
.gnh-menu nav a{min-height:68px;border-bottom:1px solid rgba(255,255,255,.22);display:grid;grid-template-columns:48px 1fr;align-items:center}
.gnh-menu nav small{font:600 7px/1 'Manrope',sans-serif;letter-spacing:.16em;color:#777}
.gnh-menu nav span{font:400 clamp(30px,3.25vw,45px)/1.05 'Times New Roman',Times,serif;letter-spacing:-.02em}
@media(max-width:767px){.gnh-header{height:126px}.gnh-brand{top:27px}.gnh-brand span{font-size:34px}.gnh-brand em{margin-top:4px;font-size:13px}.gnh-menuButton{right:13px;top:13px;width:42px;height:42px}.gnh-menuButton i,.gnh-menuButton i:last-child{width:23px;height:1px}.gnh-menu{padding:22px 18px 35px}.gnh-menu nav{margin-top:6vh}.gnh-menu nav a{min-height:60px;grid-template-columns:38px 1fr}.gnh-menu nav span{font-size:32px}}
@media(prefers-reduced-motion:reduce){.gnh-brand{animation:none}.gnh-brand{will-change:auto}.gnh-menu{transition:none}}
.gnh-closingFooter{position:relative;z-index:3;padding:74px 5vw 28px;color:var(--white);background:radial-gradient(54% 100% at 82% 36%,rgba(198,163,110,.09),transparent 72%)}
.gnh-closingLead{width:min(1240px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(560px,1.35fr) minmax(230px,.65fr);gap:clamp(42px,8vw,120px);align-items:end}
.gnh-closingLead>div>p{margin:0 0 24px;font:600 6px/1 'Manrope',sans-serif;letter-spacing:.22em;color:var(--gold)}
.gnh-closingLead h2{margin:0;font:400 clamp(72px,8vw,118px)/.83 'Times New Roman',Times,serif;letter-spacing:-.04em}
.gnh-closingLead h2 em{color:var(--gold);font-weight:400}
.gnh-closingLead>p{max-width:315px;margin:0 0 9px;font:400 14px/1.72 'Manrope',sans-serif;color:rgba(247,243,236,.62)}
.gnh-closingActions{width:min(1240px,100%);margin:82px auto 0;border-top:1px solid rgba(247,243,236,.18);border-bottom:1px solid rgba(247,243,236,.18);display:grid;grid-template-columns:1fr 1fr}
.gnh-closingActions>a{min-height:176px;padding:34px clamp(25px,4vw,58px);display:flex;flex-direction:column;justify-content:space-between;color:var(--white);text-decoration:none;transition:background .3s ease,color .3s ease}
.gnh-closingActions>a:first-child{border-right:1px solid rgba(247,243,236,.18)}
.gnh-closingActions>a:hover{background:var(--gold);color:var(--black)}
.gnh-closingActions small{font:600 6px/1 'Manrope',sans-serif;letter-spacing:.2em;color:var(--gold)}
.gnh-closingActions>a:hover small{color:var(--black)}
.gnh-closingActions span{font:400 clamp(30px,3.3vw,48px)/.95 'Times New Roman',Times,serif;letter-spacing:-.025em}
.gnh-closingBase{width:min(1240px,100%);margin:66px auto 0;padding-top:22px;border-top:1px solid rgba(247,243,236,.12);display:grid;grid-template-columns:1.4fr 1fr auto auto;gap:28px;align-items:center;color:rgba(247,243,236,.42);font:600 5px/1 'Manrope',sans-serif;letter-spacing:.18em}
.gnh-closingBase a{color:var(--gold);text-decoration:none}
@media(max-width:1050px){.gnh-closingFooter{padding-left:6vw;padding-right:6vw}.gnh-closingLead{grid-template-columns:1fr}.gnh-closingLead>p{margin-top:0}.gnh-closingActions{margin-top:62px}.gnh-closingActions>a{min-height:156px}.gnh-closingBase{grid-template-columns:1fr auto auto}}
@media(max-width:767px){.gnh-closingFooter{padding:54px 20px 25px;background:radial-gradient(90% 55% at 88% 24%,rgba(198,163,110,.09),transparent 75%)}.gnh-closingLead{display:block}.gnh-closingLead>div>p{margin-bottom:18px;font-size:5px}.gnh-closingLead h2{font-size:clamp(55px,16.5vw,70px);line-height:.84}.gnh-closingLead>p{max-width:285px;margin-top:27px;font-size:11px}.gnh-closingActions{margin-top:46px;display:block}.gnh-closingActions>a{min-height:128px;padding:25px 2px}.gnh-closingActions>a:first-child{border-right:0;border-bottom:1px solid rgba(247,243,236,.18)}.gnh-closingActions small{font-size:5px}.gnh-closingActions span{font-size:34px}.gnh-closingBase{margin-top:48px;grid-template-columns:1fr auto;gap:18px 14px;font-size:4px}.gnh-closingBase span:nth-child(2){text-align:right}.gnh-closingBase a{grid-column:1}.gnh-closingBase span:last-child{text-align:right}}
.gnh-closingDirectory{width:min(1240px,100%);margin:82px auto 0;padding-top:48px;border-top:1px solid rgba(247,243,236,.18);display:grid;grid-template-columns:1.35fr .65fr .8fr 1fr;gap:clamp(30px,5vw,76px)}
.gnh-footerBrand{align-self:start;display:flex;flex-direction:column;color:var(--white);text-decoration:none}
.gnh-footerBrand span{font:400 clamp(29px,3vw,43px)/.88 'Times New Roman',Times,serif;letter-spacing:-.03em}
.gnh-footerBrand em{margin:8px 0 0 78px;color:var(--gold);font:400 20px/1 'Bodoni Moda',serif}
.gnh-closingDirectory nav,.gnh-footerContact{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.gnh-closingDirectory nav>p,.gnh-footerContact>p{margin:0 0 11px;font:700 6px/1 'Manrope',sans-serif;letter-spacing:.2em;color:var(--gold)}
.gnh-closingDirectory nav>a{color:rgba(247,243,236,.67);font:500 9px/1.25 'Manrope',sans-serif;text-decoration:none}
.gnh-footerContact>a{color:rgba(247,243,236,.67);font:500 9px/1.25 'Manrope',sans-serif;text-decoration:none}
.gnh-footerContact>span{color:rgba(247,243,236,.43);font:600 6px/1.3 'Manrope',sans-serif;letter-spacing:.15em}
.gnh-socialIcons{margin-top:8px;display:flex;align-items:center;gap:15px}
.gnh-socialIcons a,.gnh-socialIcons>span{width:36px;height:36px;border:1px solid rgba(247,243,236,.25);border-radius:50%;display:grid;place-items:center;color:var(--white);transition:border-color .25s ease,color .25s ease}
.gnh-socialIcons a:hover{border-color:var(--gold);color:var(--gold)}
.gnh-socialIcons svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.gnh-closingBase{grid-template-columns:1fr auto auto}
.gnh-closingBase span:nth-child(2){text-align:center}
.gnh-closingBase span:last-child{text-align:right}
@media(max-width:1050px){.gnh-closingDirectory{grid-template-columns:1.3fr .7fr .8fr}.gnh-footerContact{grid-column:2/4}.gnh-closingBase{grid-template-columns:1fr auto}}
@media(max-width:767px){.gnh-closingDirectory{margin-top:60px;padding-top:39px;grid-template-columns:1fr 1fr;gap:47px 22px}.gnh-footerBrand{grid-column:1/-1}.gnh-footerBrand span{font-size:34px}.gnh-footerBrand em{margin-left:62px;font-size:18px}.gnh-closingDirectory nav>p,.gnh-footerContact>p{font-size:5px}.gnh-closingDirectory nav>a,.gnh-footerContact>a{font-size:8px}.gnh-footerContact{grid-column:1/-1}.gnh-closingBase{margin-top:46px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:4px}.gnh-closingBase span:nth-child(2),.gnh-closingBase span:last-child{text-align:left}}

/* ── de nuestro.css ── */
.gnh-brand img{display: block; margin: 0 auto; width: auto; height: clamp(68px, 7vw, 104px);}
@media (max-width: 767px){.gnh-brand img{height: 44px;}}
.gnh-footerBrand img{width: auto; height: clamp(48px, 4.6vw, 66px);}
@media (max-width: 767px){.gnh-footerBrand img{height: 56px;}}
.nv-idioma{display: inline-flex; gap: 14px; align-items: center;}
.nv-idioma button{border: 0; background: none; padding: 6px 2px; color: inherit; opacity: .45;
  font: 600 7px/1 'Manrope', sans-serif; letter-spacing: .2em; cursor: pointer;}
.nv-idioma button[aria-pressed="true"]{opacity: 1; border-bottom: 1px solid currentColor;}
.gnh-menuHead .nv-idioma{gap: 18px;}
.menu-drawer > p .nv-idioma{margin-left: 18px;}
.gnh-footerBrand{align-items: flex-start;}
.gnh-footerBrand img{width: auto; max-width: 100%; height: clamp(58px, 5.6vw, 76px);}
@media (max-width: 767px){.gnh-footerBrand img{height: 62px;}.gnh-closingLead > div > p{font-size: 9px;}.gnh-closingLead > p{font-size: 13px; line-height: 1.75;}.gnh-closingActions > a{padding: 24px 2px;}.gnh-closingActions small{font-size: 9px;}.gnh-closingDirectory{gap: 38px 22px;}.gnh-closingDirectory nav > p,.gnh-footerContact > p{margin-bottom: 6px; font-size: 9px; letter-spacing: .18em;}.gnh-closingDirectory nav,.gnh-footerContact{gap: 0;}.gnh-closingDirectory nav > a,.gnh-footerContact > a{min-height: 44px; display: flex; align-items: center;
    font-size: 13px; line-height: 1.35;}.gnh-footerContact > span{margin-top: 4px; font-size: 9px;}.gnh-socialIcons{margin-top: 14px; gap: 12px;}.gnh-socialIcons a,.gnh-socialIcons > span{width: 44px; height: 44px;}.gnh-socialIcons svg{width: 19px; height: 19px;}.gnh-closingBase{gap: 10px; font-size: 9px; letter-spacing: .14em;}}
@media (min-width: 768px) and (max-width: 1050px){.gnh-closingDirectory{margin-top: 56px; padding-top: 40px;
    grid-template-columns: 1fr 1fr 1fr; gap: 40px 32px;}.gnh-footerBrand{grid-column: 1 / -1;}.gnh-footerContact{grid-column: auto;}.gnh-closingDirectory nav > p,.gnh-footerContact > p{font-size: 8px;}.gnh-closingDirectory nav > a,.gnh-footerContact > a{min-height: 40px; display: flex; align-items: center;
    font-size: 12px;}.gnh-closingDirectory nav,.gnh-footerContact{gap: 0;}.gnh-footerContact > span{margin-top: 6px; font-size: 8px;}.gnh-socialIcons{margin-top: 12px;}.gnh-socialIcons a,.gnh-socialIcons > span{width: 40px; height: 40px;}.gnh-closingLead > div > p,.gnh-closingActions small{font-size: 8px;}.gnh-closingLead > p{font-size: 13px;}.gnh-closingBase{display: flex; flex-wrap: wrap; gap: 10px 28px;
    font-size: 8px; letter-spacing: .15em;}.gnh-closingBase span:nth-child(2),.gnh-closingBase span:last-child{text-align: left;}}
@media (max-width: 1050px){.gnh-closingBase{color: rgba(247,243,236,.5);}}
.gnh-menuButton{width: 48px; height: 48px;}
.nv-idiomaPie{gap: 6px;}
.nv-idiomaPie button{min-height: 44px; min-width: 44px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 9px/1 'Manrope', sans-serif; letter-spacing: .16em;}
.gnh-closingBase{grid-template-columns: auto 1fr auto auto;}
@media (min-width: 768px) and (max-width: 1050px){.gnh-closingBase{align-items: center;}}
@media (max-width: 767px){.nv-idiomaPie button{font-size: 10px;}}
.nv-entrar{display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; text-decoration: none; color: #fff;
  opacity: .9; transition: opacity .2s;}
.nv-entrar:hover,.nv-entrar:focus-visible{opacity: 1;}
.nv-entrar .nv-ico{width: 24px; height: 24px; opacity: 1; stroke-width: 1.5;}
.gnh-header .nv-entrar{position: fixed; z-index: 7; top: 25px; left: 12px; pointer-events: auto;}
@media (min-width: 768px){.gnh-header .nv-entrar{left: auto; right: 76px; top: 26px;}}
.nv-entrarPie{display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  text-decoration: none; letter-spacing: .15em; text-transform: uppercase;}
.gnh-closingBase .nv-entrarPie{color: #d9c08a; font-size: 9px;}
.footer-small .nv-entrarPie{font-size: 13px;}
@media (min-width: 768px){.footer-small .nv-entrarPie{font-size: inherit;}}
.gnh-closingBase{grid-template-columns: auto auto 1fr auto auto;}
.gnh-menu{overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;}

/* ══════════════════════════════════════════════════════════════════════
   LA CABECERA COMPACTA · `gnh-fija`
   ══════════════════════════════════════════════════════════════════════
   La cabecera de la portada mide 224 px de alto, flota por encima del hero
   sin fondo y el logo entra con su coreografía. Eso es del hero: en una
   página interior no hay hero, así que quedaría un hueco enorme y un logo
   gigante encima del texto.

   Aquí nace ya compacta: una barra negra pegada arriba, el logo centrado y
   chico, el icono de cuenta y la hamburguesa a la derecha — el mismo orden
   y los mismos elementos que en la portada, solo que sentados. `sticky` en
   vez de `fixed` para que ocupe su sitio y no tape la primera línea de la
   página. */
.gnh-header.gnh-fija{
  position: sticky; top: 0; height: auto;
  padding: 13px 0 12px;
  background: #0a0907;
  border-bottom: 1px solid rgba(255,255,255,.10);
  pointer-events: auto;                    /* la portada lo apaga para dejar pasar el hero */
}
.gnh-fija .gnh-brand{
  position: static; left: auto; top: auto;
  width: max-content; margin: 0 auto;
  animation: none; will-change: auto;      /* la coreografía es del hero */
  /* 48 px de alto aunque el logo mida 32: el logo es un enlace a la portada y
     tiene que poder tocarse. Lo cazó revisar.mjs midiendo, no leyendo. */
  min-height: 48px; display: flex; align-items: center;
}
.gnh-fija .gnh-brand img{ display: block; height: 32px; width: auto; }

/* El icono y la hamburguesa son `fixed` en la portada (flotan sobre la foto).
   Dentro de la barra se sientan en ella. Aquí SOLO se dice que van dentro de
   la barra; el tamaño, la altura y el reparto horizontal los pone el bloque
   «una sola geometría» del final de este archivo, que es el único sitio donde
   se escriben esas medidas. */
.gnh-header.gnh-fija .gnh-menuButton,
.gnh-header.gnh-fija .nv-entrar { position: absolute; }
@media (min-width: 768px){
  .gnh-header.gnh-fija{ padding: 17px 0 16px; }
  .gnh-fija .gnh-brand img{ height: 42px; }
}

/* El enlace de la página en la que ya estás. No se le quita el toque —
   sigue siendo un enlace válido— solo se marca, y el lector de pantalla lo
   anuncia por el aria-current que pone el build. */
.gnh-menu nav a[aria-current="page"] span{ color: var(--gold); }
.gnh-menu nav a[aria-current="page"] small{ color: var(--gold); }

/* El pie de la portada se apoya en el negro de `.gnh-page`. En las páginas
   de siempre el fondo ya es negro (css/nucleo.css), pero se deja escrito:
   si mañana alguna página cambia de fondo, el pie no se despinta. */
.gnh-closingFooter{ background-color: #0a0907; }

/* ══════════════════════════════════════════════════════════════════════
   LAS MEDIDAS QUE PIDIÓ CRIS · para toda la cáscara y en todos los anchos
   ══════════════════════════════════════════════════════════════════════
   Del encargo, textual: etiquetas 11–12 px, menú y botones 11–13 px,
   texto 13–16 px, pie 10–12 px, y 44×44 de zona de toque.

   La maqueta venía muy por debajo: los rótulos del pie median 6 px en
   escritorio, el © 5 px, y los números del menú 7 px. Se ven de adorno,
   pero son texto que alguien tiene que poder leer — y a 5 px el gris
   claro sobre negro se quedaba en 3,76:1, por debajo del mínimo.
   Aquí SOLO se sube al suelo de cada rango. El tipo de letra, el
   espaciado entre letras, los colores y la retícula no se tocan.

   ⚠️ Esto cambia también cómo se ve la PORTADA en el ordenador: el pie
   queda más alto porque sus enlaces pasan de 11 px de alto a 44. Es lo
   que hace falta para cumplir el 44×44 que pediste; si prefieres el pie
   apretado de antes, se quita este bloque entero y ya. */

/* el menú */
.gnh-menuHead, .gnh-menuHead button { font-size: 11px; }
.gnh-menu nav small { font-size: 11px; }

/* el pie · rótulos y textos chicos */
.gnh-closingLead > div > p,
.gnh-closingActions small,
.gnh-closingDirectory nav > p,
.gnh-footerContact > p { font-size: 11px; }
.gnh-footerContact > span,
.gnh-closingBase span,
.gnh-closingBase .nv-entrarPie,
.nv-idiomaPie button { font-size: 11px; }
.gnh-closingDirectory nav > a,
.gnh-footerContact > a { font-size: 12px; }

/* el pie · el dedo. min-height en todos los anchos, no solo en el móvil:
   en el ordenador estos enlaces median 11 px de alto. */
.gnh-closingDirectory nav > a,
.gnh-footerContact > a { min-height: 44px; display: flex; align-items: center; }
.gnh-socialIcons a, .gnh-socialIcons > span { width: 44px; height: 44px; }
.nv-idiomaPie button { min-height: 44px; min-width: 44px; }

/* el pie · el gris de la última línea. A 11 px sigue siendo texto chico,
   así que se sube hasta pasar el 4,5:1 sobre el negro del pie. */
.gnh-closingBase { color: rgba(247, 243, 236, .62); }

/* ══════════════════════════════════════════════════════════════════════
   EL HUECO DE ARRIBA
   ══════════════════════════════════════════════════════════════════════
   Las páginas de siempre reservaban 108 px (170 en el ordenador) por
   encima del primer bloque para dejar pasar la cabecera vieja, que
   flotaba. La cabecera nueva NO flota: se sienta y ocupa su sitio, así
   que ese hueco quedaba dos veces y el título arrancaba muy abajo.

   Se descuenta lo que mide la cabecera y queda el mismo aire que había.
   La regla cuelga de `.gnh-fija`: en una página sin cabecera compacta
   —la portada, o /reservar— no se aplica, y así este archivo sigue sin
   pintar nada fuera de la cáscara. */
.gnh-header.gnh-fija ~ #contenido > .cabeza { padding-top: 34px; }
@media (min-width: 768px) { .gnh-header.gnh-fija ~ #contenido > .cabeza { padding-top: 88px; } }

/* ══════════════════════════════════════════════════════════════════════
   EL ICONO DE CUENTA, SIEMPRE EN EL MISMO SITIO
   ══════════════════════════════════════════════════════════════════════
   En la portada estaba a la IZQUIERDA en el teléfono (y a la derecha en el
   ordenador). El encargo del 30/08 dice el orden: «logo centrado, icono de
   cuenta a la derecha, hamburguesa después». Si en una página está a la
   izquierda y en las demás a la derecha, no hay una sola cáscara: hay dos.
   Se pasa a la derecha en todas, justo antes de la hamburguesa.
   30/08 (tarde) · los dos `right` que había aquí escritos a mano se han ido:
   los pone el bloque «una sola geometría» del final, calculados desde la
   posición de la hamburguesa. Eran justo los que hacían que el icono y la
   hamburguesa se pisaran 3 px en la portada. */

/* ══════════════════════════════════════════════════════════════════════
   EL DORADO DE LA CÁSCARA · el del logo al 85 %
   ══════════════════════════════════════════════════════════════════════
   El 28/08 se unificaron los siete dorados de la maqueta en #d6bb4b —el del
   logo bajado al 85 %, que cris eligió viéndolo en su teléfono— escribiéndolo
   en `:root`. Pero la cabecera, el menú y el pie NO llegaron a cambiar: la
   maqueta trae `--gold: #a8933b` escrito directamente en `.gnh-page` y en
   `.gnh-header`, y eso es más específico que `:root`, así que ganaba. O sea:
   el dorado aprobado nunca llegó a la cáscara, y nadie lo vio porque el tono
   viejo es parecido, solo más apagado.

   30/08, cris al enseñárselo: «ponle el 85 %». Se escribe sobre los tres
   elementos de la cáscara, que es donde hay que ganarle a la maqueta. */
.gnh-header, .gnh-menu, .gnh-closingFooter { --gold: #d6bb4b; }

/* ══════════════════════════════════════════════════════════════════════
   EL ICONO Y LA HAMBURGUESA · una sola geometría para todo el sitio
   ══════════════════════════════════════════════════════════════════════
   cris, con una foto de su iPhone: «el login no está alineado al menú y al
   logo; revísalo en todas partes, esto es general».

   Tenía razón y era peor de lo que se ve en la foto. Medido en la portada a
   390 px: el icono quedaba 12 px MÁS ABAJO que la hamburguesa, y además se
   pisaban 3 px — dos zonas de toque montadas una encima de otra. En
   ordenador, 2 px de desfase.

   La causa: los dos son `position:fixed` y cada uno traía su `top` de un
   sitio distinto — la hamburguesa de la maqueta (13 px en teléfono, 28 en
   ordenador) y el icono de nuestro.css (25 y 26). Nadie los había puesto de
   acuerdo, y con dos números escritos a mano en archivos distintos eso vuelve
   a pasar a la primera que alguien toque uno.

   Se escribe UNA vez, con variables, y los dos leen de ahí:
     --gnh-ctrl   el lado de los dos cuadrados (mismo tamaño = mismo centro)
     --gnh-top    a qué altura van los dos
     --gnh-borde  a qué distancia del borde derecho va la hamburguesa
     --gnh-hueco  el aire entre el icono y la hamburguesa
   El icono se coloca SIEMPRE respecto de la hamburguesa
   (`--gnh-borde + --gnh-ctrl + --gnh-hueco`), así que no se pueden volver a
   pisar aunque se mueva la hamburguesa.

   `revisar.mjs` no cazaba esto: los dos medían 48×48 y ninguno se salía de la
   pantalla. Lo caza ahora `test.mjs`, midiendo en las seis páginas y en tres
   anchos que compartan centro y no se toquen. */
.gnh-header {
  --gnh-ctrl: 48px;
  /* 24 y no 13: en el teléfono el logo de la portada tiene su centro en 48 px,
     y con 13 los dos controles quedaban 11 px POR ENCIMA de él — que es la otra
     mitad de lo que cris señaló («no está alineado al menú y al logo»). Con 24
     los tres comparten línea. En las páginas interiores esto no manda: allí la
     barra los centra en su propio alto, y el logo va en esa misma barra. */
  --gnh-top: 24px;
  --gnh-borde: 13px;
  --gnh-hueco: 4px;
}
/* En ordenador NO se centran con el logo a propósito: ahí el logo del hero es
   enorme y su centro baja con el ancho de la pantalla (clamp), así que seguirlo
   dejaría la hamburguesa flotando a 70 px del borde y moviéndose sola. Se
   quedan arriba, como en la maqueta que cris aprobó. Si él quiere que también
   bajen en ordenador, es cambiar este `--gnh-top`. */
@media (min-width: 768px) {
  .gnh-header { --gnh-top: 28px; --gnh-borde: 28px; }
}

.gnh-header .gnh-menuButton,
.gnh-header .nv-entrar {
  width: var(--gnh-ctrl);
  height: var(--gnh-ctrl);
  top: var(--gnh-top);
  left: auto;
}
.gnh-header .gnh-menuButton { right: var(--gnh-borde); }
.gnh-header .nv-entrar { right: calc(var(--gnh-borde) + var(--gnh-ctrl) + var(--gnh-hueco)); }

/* En la cabecera compacta los dos van dentro de la barra, centrados en su
   alto: ahí manda el centro de la barra, no un `top` fijo. El reparto
   horizontal es el mismo de arriba, así que el hueco entre los dos es el
   mismo en todo el sitio. */
.gnh-header.gnh-fija { --gnh-borde: 10px; }
@media (min-width: 768px) { .gnh-header.gnh-fija { --gnh-borde: 22px; } }
.gnh-header.gnh-fija .gnh-menuButton,
.gnh-header.gnh-fija .nv-entrar {
  top: 50%;
  transform: translateY(-50%);
}