/* ============================================================
   PORTADA.CSS — CURSO GNOSIS
   Header fijo + nav + hero, exactos a index.html (portada.jpeg).
   NO incluye el carrusel de "Últimas noticias": eso varía por página.

   IMPORTANTE: este archivo pone las columnas de mármol como fondo fijo
   de TODO el sitio (no solo del hero), para que cualquier página luzca
   igual con solo enlazar este archivo — sin rediseñar su interior.
   El header/nav/hero siguen igual; lo que cambia es que ahora también
   aplica el fondo universal detrás del contenido propio de cada página
   (tarjetas, formularios, etc.), que sigue viéndose encima sin tocarlo,
   siempre que tenga su propio fondo opaco (blanco, por ejemplo).

   Cómo usarlo en cada hoja:
   1) Cargar las fuentes en el <head>:
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
      (si la página ya carga Playfair Display por su cuenta, no hace falta duplicarlo)
   2) <link rel="stylesheet" href="portada.css">
   3) Nada más. El fondo universal y el header/hero se aplican solos.
      Si la página necesita header+hero completos, pegar header-hero.html;
      si solo necesita el header (como una subpágina), usar <a class="nav-item">
      en vez de <div class="nav-item"> — el CSS funciona igual con ambos.
   4) Ajustar rutas de imágenes: logo.png (marca) y fondo.jpg (fondo)
      deben estar en el mismo directorio de cada página, o cambia la ruta abajo.
   5) Pegar también el pequeño script que ajusta --header-h (ver nota al final).
   ============================================================ */

:root{
  --marble-1:#f4ece2;
  --marble-2:#efe2d0;
  --cream:#fbf8f3;
  --paper:#fdfbf7;
  --navy:#101a2e;
  --navy-soft:#2b3a52;
  --copper:#a8611c;
  --copper-light:#c98a41;
  --gold:#c79a4b;
  --gold-deep:#a97f34;
  --ink:#181614;
  --ink-soft:#4a443c;
  --rule:#d8cbb4;
  --hairline: rgba(16,26,46,0.16);
}

*{box-sizing:border-box;}
html{background:var(--cream);}
body{
  isolation:isolate;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-top: var(--header-h, 92px);
}
img{max-width:100%;}

/* ============ FONDO UNIVERSAL (columnas, fijo detrás de todo) ============ */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(250,246,239,0.08), rgba(250,246,239,0.08)),
    url('fondo.jpg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}

/* ============ HEADER ============ */
header.site{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:30;
  background:rgba(252,250,246,0.97);
}
header.site a{ color:inherit; text-decoration:none; }
.header-inner{
  max-width:1440px;
  margin:0 auto;
  display:flex;
  align-items:center;
  padding: 14px clamp(16px,3vw,48px);
  gap: clamp(14px,2.4vw,34px);
}
.brand-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
}
.brand-mark img{
  width:52px;
  height:auto;
  display:block;
}
.brand-mark span{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.5px;
  color:var(--ink);
  white-space:nowrap;
}
.divider{
  width:1px;
  align-self:stretch;
  background:var(--hairline);
  flex:0 0 auto;
}
.brand-sub{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
  flex:0 0 auto;
}
.brand-sub .vms{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-style:italic;
  font-size:30px;
  color:var(--copper);
  letter-spacing:0.5px;
}
.brand-sub .vms-sub{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:11.5px;
  letter-spacing:0.7px;
  color:var(--navy);
  margin-top:2px;
  white-space:nowrap;
}

nav.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(48px,7vw,112px);
  margin-left:clamp(48px,7.9vw,126px);
  flex-wrap:nowrap;
}
nav.main-nav .nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
nav.main-nav .nav-item svg{
  width:26px;
  height:26px;
  stroke:var(--copper);
  fill:none;
  stroke-width:1.5;
}
nav.main-nav .nav-item span{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:0.6px;
  color:var(--navy);
  white-space:nowrap;
}
.end-divider{
  width:1px;
  height:34px;
  background:var(--hairline);
  margin-left:calc(4.6vw - clamp(48px,7vw,112px));
  flex:0 0 auto;
  display:block;
}
.menu-toggle{display:none;}

/* ============ HERO ============ */
.hero-wrap{
  position:relative;
  background-image:
    linear-gradient(rgba(250,246,239,0.08), rgba(250,246,239,0.08)),
    url('fondo.jpg');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}
.hero{
  position:relative;
  padding: 66px 24px 40px;
  text-align:center;
}
.hero-inner{
  max-width:900px;
  margin:0 auto;
}
.hero-mark img{
  width:180px;
  margin:0 auto 6px;
  display:block;
}
.hero-title{
  font-family:'Playfair Display',serif;
  font-weight:800;
  font-size:clamp(32px,4.6vw,54px);
  letter-spacing:2px;
  color:#151310;
  margin:2px 0 18px;
}
.hero-rule{
  width:220px;
  height:2px;
  background:linear-gradient(90deg,transparent, var(--gold-deep) 18%, var(--gold-deep) 82%, transparent);
  margin:0 auto 26px;
}
.hero-subtitle{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:clamp(19px,2.5vw,29px);
  line-height:1.28;
  color:#181614;
  margin:0 0 30px;
  letter-spacing:0.3px;
}
.hero-quote{
  font-family:'EB Garamond',serif;
  font-size:clamp(17px,1.9vw,21px);
  line-height:1.55;
  color:var(--ink-soft);
  margin:0 0 6px;
}
.hero-quote .line{display:block;}
.hero-sign{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(16px,1.8vw,19px);
  color:var(--ink-soft);
  margin-top:10px;
}
.hero-spacer{ height:clamp(30px,6vw,90px); }

/* ============ RESPONSIVE (header/hero) ============ */
@media (max-width: 900px){
  nav.main-nav{gap:16px;margin-left:auto;}
  .end-divider{margin-left:6px;}
  .brand-sub .vms{font-size:24px;}
}
@media (max-width: 760px){
  .header-inner{flex-wrap:wrap;row-gap:10px;}
  nav.main-nav{
    width:100%;
    justify-content:space-between;
    margin-left:0;
    order:3;
  }
  .end-divider{display:none;}
  .brand-sub .vms-sub{white-space:normal;}
}
@media (max-width:480px){
  nav.main-nav .nav-item span{font-size:10.5px;}
  nav.main-nav{gap:12px;}
  .hero{padding-top:48px;}
  .hero-mark img{width:130px;}
}

/* =====================================================================
   AJUSTES SOLO PARA CELULAR (Android / iPhone) — hasta 760px.
   Copiados de index.html (solo la parte de header y hero, que es lo
   común a todas las páginas). Todo va dentro de media queries: la vista
   de PC NO cambia.
   ===================================================================== */
@media (max-width: 760px){
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  header.site a, .nav-item{ -webkit-tap-highlight-color:rgba(168,97,28,0.15); }

  /* --- Encabezado más compacto (ocupa menos pantalla al hacer scroll) --- */
  header.site{
    border-bottom:1px solid var(--hairline);
    box-shadow:0 2px 10px rgba(80,60,30,0.08);
  }
  .header-inner{ padding:8px 14px 6px; gap:10px; row-gap:6px; }
  .brand-mark img{ width:44px; }
  .brand-mark span{ font-size:10.5px; letter-spacing:0.3px; }
  .brand-sub .vms{ font-size:26px; }
  .brand-sub .vms-sub{ font-size:10px; letter-spacing:0.4px; }
  nav.main-nav{ padding-top:6px; border-top:1px solid var(--hairline); }
  nav.main-nav .nav-item{ gap:4px; padding:2px 0; }
  nav.main-nav .nav-item svg{ width:22px; height:22px; }
  nav.main-nav .nav-item span{ letter-spacing:0.3px; }

  /* --- Portada (hero) --- */
  .hero{ padding:36px 18px 22px; }
  .hero-mark img{ width:120px; }
  .hero-title{ font-size:clamp(26px,8.2vw,34px); letter-spacing:1px; margin:2px 0 14px; }
  .hero-rule{ width:150px; margin-bottom:18px; }
  .hero-subtitle{ font-size:clamp(14px,4.3vw,19px); line-height:1.32; letter-spacing:0.2px; margin-bottom:20px; }
  .hero-quote{ font-size:17px; line-height:1.5; }
  .hero-sign{ font-size:16px; }
  .hero-spacer{ height:24px; }
}

/* Celulares muy angostos (≈ 360px o menos) */
@media (max-width: 380px){
  .brand-mark span{ font-size:9.5px; }
  .brand-sub .vms{ font-size:22px; }
  nav.main-nav .nav-item span{ font-size:9.5px; letter-spacing:0.1px; }
  .hero-title{ font-size:26px; }
}

/* ============================================================
   NOTA: el header ajusta su propia altura con --header-h vía JS
   (por si el nav pasa a 2 líneas en pantallas chicas). Pega esto
   una sola vez al final del <body> de cada página:

   <script>
   (function(){
     var header = document.querySelector('header.site');
     if(!header) return;
     function ajustarAltoHeader(){
       var h = Math.ceil(header.getBoundingClientRect().height);
       document.documentElement.style.setProperty('--header-h', h + 'px');
     }
     ajustarAltoHeader();
     window.addEventListener('resize', ajustarAltoHeader);
     window.addEventListener('load', ajustarAltoHeader);
     if(document.fonts && document.fonts.ready){
       document.fonts.ready.then(ajustarAltoHeader);
     }
   })();
   </script>
   ============================================================ */