/* ============================================================
   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;
  stroke-linecap:round;
  stroke-linejoin:round;
}
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;}
}

/* ============ MENÚ CENTRADO (solo PC y tableta) ============
   El menú (INICIO / REGISTRAR SEDE / MI PANEL) se centra respecto a toda la
   página, que es el mismo centro de las tarjetas de contenido. El logo queda
   a la izquierda y el botón «Salir» (admin) a la derecha, sin moverse.
   En celular (hasta 760px) todo sigue como estaba. */
@media (min-width: 761px){
  .header-inner{ position:relative; }
  .header-inner nav.main-nav{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    margin-left:0;
  }
  /* La rayita decorativa al final del menú ya no empuja el centro: se coloca a un lado. */
  .header-inner nav.main-nav .end-divider{
    position:absolute;
    left:100%;
    top:50%;
    transform:translateY(-50%);
    margin-left:clamp(24px,3vw,48px);
  }
}

/* =====================================================================
   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>
   ============================================================ */

/* =====================================================================
   MEJORAS PARA ANDROID / CELULAR — hasta 760px (v. 2026-10-02)
   Todo está dentro de media queries: la vista de PC y tableta NO cambia.
   - Encabezado más bajo: logo y nombre en una sola línea (antes el logo
     iba arriba y el nombre debajo, dejando media fila vacía).
   - Etiquetas del menú un poco más grandes (antes 9.5–10.5px) y áreas
     de toque de al menos 44px de alto.
   - Un respiro entre el encabezado y el contenido.
   - Sin rebote horizontal ni resaltado gris al tocar.
   ===================================================================== */
@media (max-width: 760px){
  html{ scroll-padding-top: calc(var(--header-h, 92px) + 8px); }
  body{
    padding-top: calc(var(--header-h, 92px) + 12px);
    overscroll-behavior-x: none;
  }
  /* Con el respiro de arriba, la portada no necesita tanto relleno */
  .hero{ padding-top: 24px; }

  /* --- Encabezado compacto --- */
  .header-inner{ padding: 6px 14px 4px; row-gap: 2px; align-items:center; }
  .brand-mark{ flex-direction: row; gap: 8px; align-items: center; }
  .brand-mark img{ width: 34px; }
  .brand-mark span{ font-size: 11.5px; letter-spacing: .4px; }

  nav.main-nav{ padding-top: 0; }
  nav.main-nav .nav-item{
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    gap: 2px;
    padding: 2px 4px;
  }
  nav.main-nav .nav-item svg{ width: 21px; height: 21px; }
  nav.main-nav .nav-item span{ font-size: 11px; letter-spacing: .2px; }
  nav.main-nav .nav-item[aria-current="page"] span{ color: var(--copper); }

  /* Lo que se agregue como contenido nunca debe ensanchar la pantalla */
  main, .pagina, .porton{ max-width: 100%; }
  img, video, canvas, svg{ max-width: 100%; }
  textarea, input, select{ max-width: 100%; }
  /* 16px en los campos evita el zoom automático al enfocar en Android/iOS */
  input[type="text"], input[type="url"], input[type="search"], input[type="email"],
  input[type="tel"], input[type="password"], input[type="number"], textarea, select{
    font-size: 16px;
  }
}

@media (max-width: 380px){
  .brand-mark span{ font-size: 10.5px; }
  nav.main-nav .nav-item span{ font-size: 10.5px; letter-spacing: 0; }
  nav.main-nav .nav-item{ padding: 2px 2px; }
}