/* ==========================
   style.css completo
   Basado en tu CSS original + cambios solicitados:
   - Menú en 2 corridas (4x2) en pantallas anchas
   - Pasa a 2 columnas en pantallas medianas
   - Por debajo de 900px el header se vuelve vertical y el menú es visible en columna
   - Header blanco, título negro, enlaces gris; línea roja bajo header
   ========================== */

/* Variables de color (adaptadas) */
:root{
  --primary: #006fb3;
  --accent: #a8b7c7;
  --accent-dark: #0a132d;
  --uc-primary: #ed3a4f;   /* rojo para la línea inferior */
  --bg-overlay: rgba(10,19,45,0.45);
  --text-on-dark: #ffffff;
  --header-height: 76px;
  --font-sans: 'tahoma', sans-serif;
  --menu-gray: #6c757d;   /* color de los enlaces */
  --menu-gray-hover: #343a40;
  --title-black: #111111;
}

/* Reset y base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font-sans);color:var(--text-on-dark)
    ;background:#000}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ==========================
   HEADER
   ========================== */
/* Header básico */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  background: #ffffff;               /* header blanco */
  z-index:100;
  border-bottom: 4px solid var(--uc-primary);  /* línea roja debajo del header */
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

/* Alineación interior y espaciado */
.header-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 20px;                 /* ajusta altura del header */
}

/* Marca (logo + título) */
.brand{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Logo suelto, mayor tamaño, sin caja */
.brand-logo{
  width:96px;         /* tamaño más grande: ajusta si necesitas mayor/menor */
  height:auto;
  object-fit:contain;
  display:block;
  background: transparent;  /* sin fondo rojo ni caja */
  border-radius: 4px;
}

/* Título principal junto al logo: todo en negrita y negro */
.brand-title{
  font-size:20px;      /* ajusta escala según el logo */
  line-height:1;
  margin:0;
  font-weight:700;
  color:var(--title-black);       /* título negro */
  letter-spacing:0.2px;
}

/* ==========================
   NAV: diseño en dos corridas en pantallas anchas
   ========================== */
.main-nav {
  display: block;
}

/* convertir el UL en grid: 4 columnas, 2 filas por defecto */
.main-nav ul{
  display: grid;
  grid-template-columns: repeat(4, auto); /* 4 columnas */
  grid-auto-rows: auto;                    /* filas automáticas */
  gap: 6px 12px;                           /* fila-gap y columna-gap */
  align-items: center;
  justify-content: end;                   /* alinear el grid a la derecha */
  margin: 0;
  padding: 0;
  min-width: 520px;
}

/* cada item mantiene el estilo de enlace */
.main-nav li{ list-style:none; }
.main-nav a{
  display:inline-block;
  color:var(--menu-gray);
  font-weight:500;
  font-size:14px;
  padding:8px 10px;
  border-radius:6px;
  transition: background .12s ease, color .12s ease, transform .08s ease;
}

/* Hover/Focus */
.main-nav a:hover,
.main-nav a:focus{
  background: rgba(0,0,0,0.04);
  color: var(--menu-gray-hover);
  transform: translateY(-2px);
  text-decoration:none;
  outline:none;
}

/* estilo hover alternativo sencillo (si lo prefieres) */
.main-nav a:hover { color: var(--menu-gray-hover); }

/* aumentar gap en pantallas muy anchas */
@media (min-width: 1200px) {
  .main-nav ul { gap: 10px 18px; min-width: 640px; }
}

/* Punto intermedio: 2 columnas x 4 filas */
@media (max-width: 1100px) and (min-width: 721px) {
  .main-nav ul{
    grid-template-columns: repeat(2, auto);
    justify-content: end;
    min-width: 420px;
    gap: 8px 12px;
  }
}

/* ==========================
   Ajustes para que el menú baje y sea vertical por debajo de 900px
   ========================== */
@media (max-width: 900px) {
  .header-inner{
    /* pasar de fila a columna: logo arriba, menú debajo */
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px;
  }

  /* centrar marca en móvil y reducir logo */
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    justify-content:flex-start;
  }

  .brand-logo{
    width:84px; /* ajusta si quieres más grande/pequeño */
    height:auto;
  }

  .brand-title{
    font-size:18px;
    font-weight:700;
    color:var(--title-black);
  }

  /* Nav ahora ocupa toda la anchura y los items en columna */
  .main-nav{
    width:100%;
    order: 2; /* asegurar que vaya debajo de la marca */
    display:block;
  }

  .main-nav ul{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:stretch;
    justify-content:flex-start;
    padding: 8px 0;
    margin: 0;
    width:100%;
  }

  .main-nav li{ width:100%; }

  .main-nav a{
    display:block;
    width:100%;
    padding:10px 12px;
    color:var(--menu-gray);
    background: transparent;
    border-radius:6px;
    text-align:left;
  }

  .main-nav a:hover,
  .main-nav a:focus{
    background: rgba(0,0,0,0.04);
    color:var(--menu-gray-hover);
    transform:none;
  }

  /* Añadir padding-top al body para que el contenido no quede tapado por el header fijo
     Ajusta el valor si cambias la altura real del header */
  body{ padding-top: calc(16px + 96px + 12px); }
}

/* === CONTENEDOR GENERAL DEL POEMA === */

.poem-container {
    max-width: 800px;
    margin: 140px auto 80px auto; /* margen por header fijo */
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.poem-description {
    font-size: 1px;
    color: #444;
    margin-bottom: 25px;
    text-align: center;
}

.poem-description a {
    color: #0066cc;
}

.poem-box p {
    font-size: 16px;
    line-height: 1.2;
    color: #222;
    white-space: pre-line;
    text-align: center;
}

/* === VIDEO === */

.video-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.video-wrapper iframe {
    width: 100%;
    max-width: 700px;
    border-radius: 8px;
}

/* === BOTONES FLOTANTES === */

.floating-btn {
    position: fixed;
    bottom: 20px;
    padding: 10px 16px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    z-index: 1500;
}

.floating-btn.left {
    left: 20px;
}

.floating-btn.right {
    right: 20px;
}

.floating-btn:hover {
    opacity: 0.8;
}

/* === RESPONSIVE === */

@media (max-width: 600px) {
    .poem-container {
        margin: 130px 20px 80px 20px;
        padding: 25px;
    }

    .poem-box p {
        font-size: 16px;
    }
}



/* ==========================
   MENÚ HAMBURGUESA MOBILE
   ========================== */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--title-black);
}

/* Mostrar botón y ocultar menú por defecto en pantallas pequeñas */
@media (max-width: 900px) {
  .nav-toggle {
    display: block;
    position: absolute;
    right: 20px;
    top: 22px;
    z-index: 200;
  }

  .main-nav {
    display: none; /* oculto por defecto */
    width: 100%;
    background: #ffffff;
    padding: 20px 0;
  }

  /* Cuando se active la clase open, el menú aparece */
  .main-nav.open {
    display: block;
  }
}