:root{
  --nav-h: 64px; /* altura mínima de la barra superior */
}

html, body { height: 100%; }
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }

body{
  margin:0;
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:#111;
  background:#fff;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top));
}

body.is-home{
  background:#fff url("../imagenes/fondo.jpg") no-repeat center top fixed;
  background-size:cover;
}

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

.hero{
  text-align:center;
  padding: clamp(36px, 8vw, 96px) 12px clamp(20px, 5vw, 40px);
}
.hero img{ margin-inline:auto; margin-bottom:12px }
.hero h1{ margin:.4em 0 .2em; font-weight:700; }
.hero, .hero h1, .hero p{ color:#111; text-shadow:none; }
.hero p{ margin:.25em 0; font-weight:400; }
.hero hr{
  width:240px; max-width:40%;
  margin:12px auto;
  border:none; border-top:1px solid #e6e6e6;
}

body.is-home .hero,
body.is-home .hero h1,
body.is-home .hero p{ color:#fff; }
body.is-home .hero p{ color:rgba(255,255,255,.85); }
body.is-home .hero hr{ border-top:1px solid rgba(255,255,255,.6); }
body.is-home .hero *{ text-shadow:0 1px 2px rgba(0,0,0,.35); }

.topbar{
  position:fixed; left:0; right:0; top:0;
  min-height: var(--nav-h);
  z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  background:#222; /* gris oscuro */
  color:#fff;      /* texto blanco */
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  overflow:visible;
}

.nav__list{
  display:flex; gap:22px;
  list-style:none; padding:0; margin:0;
  align-items:center; justify-content:center;
  flex-wrap:wrap;
}
.nav__list > li{ position:relative }
.nav__list a{
  color:#fff; text-decoration:none; font-weight:600;
}

.nav__list > li > ul{
  position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  min-width:220px;
  background:#2b2b2b; border:1px solid #444;
  padding:8px 0; margin:8px 0 0; list-style:none; display:none;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  z-index:1010;
}
.nav__list > li:hover > ul{ display:block }
.nav__list > li > ul > li > a{
  display:block; padding:10px 14px; white-space:nowrap;
  color:#fff; font-weight:500;
}
.nav__list > li > ul > li > a:hover{ background:#3a3a3a }

.nav__toggle{
  position:absolute; right:16px; top:50%;
  transform:translateY(-50%);
  width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  font-size:26px; line-height:44px; color:#fff;
  display:none;
}
/* Interlineado 1.5 solo en textos del contenido */
.page p,
.page li,
.page blockquote,
.page dd{ line-height: 1.5; }

/* Si querés que el hero también tenga 1.5: */
.hero p{ line-height: 1.5; }


@media (max-width:900px){
  .nav__toggle{ display:block }

  /* Panel del menú (oscuro). Oculto completamente cuando está cerrado. */
  .nav__list{
    position:fixed; left:0; right:0; top: calc(var(--nav-h) + env(safe-area-inset-top));
    display:grid; gap:10px;
    background:#222; color:#fff;
    border-top:1px solid #333;
    padding:16px 16px 24px;
    transform:translateY(-120%);  /* fuera de pantalla */
    transition:transform .25s ease;
    will-change:transform;
    pointer-events:none;
    z-index:1100;
  }
  .nav__list.is-open{
    transform:translateY(0);
    pointer-events:auto;
  }

  .nav__list a{ color:#fff; }

  .nav__list > li > ul{
    position:static; display:none; border:0; box-shadow:none; padding:0 0 8px; margin:0;
    transform:none; background:transparent;
  }
  .nav__list > li:focus-within > ul,
  .nav__list > li > a:focus + ul{ display:block }

  /* SIN flechitas en mobile */
  .nav__list > li > a{ padding-right:0; }
  .nav__list > li > a::after,
  .nav__list > li > a + ul::before{ content:none; }
}

@media (min-width:901px){
  .nav__toggle{ display:none !important; }
}

.nav__toggle:focus,
.nav__list a:focus{ outline:2px solid #fff; outline-offset:2px }
@media (hover:hover){
  .nav__list a:hover{ text-decoration:underline }
}