/* ============ Variables rápidas ============ */
:root{
  --fg:#f5e0b8;
  --fg-2:#d8c6a5;
  --fg-3:#bda986;
  --bg:#000;
  --ink:#2c1a08;
  --border:#f5e0b8;
  --glass: rgba(0,0,0,.55);
  --glass-soft: rgba(0,0,0,.38);
}

/* 🌐 General (PC / Laptop) */
html,body{height:100%;}
body{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  background:url("../img/fondo.png") no-repeat center center fixed;
  background-size:cover;
  font-family:Arial, sans-serif;
  color:var(--fg);
  min-height:100vh;
  overflow-y:auto;
}

/* Titulares y párrafos */
h1,h2,h3{font-weight:700;margin:0 0 12px;}
h1{font-size:1.8rem;line-height:1.15;}
h2{font-size:1.2rem;line-height:1.25;}
p{line-height:1.6;}

/* Títulos de meses (páginas internas de mes) */
.container h1{
  text-align:center;
  font-size:2rem;
  margin-bottom:20px;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* Contenedor central del index (cilindro) */
.container.index{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  max-width:80%;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

/* Contenedor genérico (listados/artículos) — PC */
.container{
  width:95%;
  max-width:960px;
  margin:32px auto;
  padding:28px 18px;
  background:var(--glass);
  border-radius:12px;
  box-sizing:border-box;
}

/* Menú simple (páginas internas) */
.menu{text-align:center;margin-bottom:18px;}
.menu a{
  text-decoration:none;
  color:var(--fg);
  border:2px solid var(--border);
  padding:8px 18px;border-radius:6px;transition:.2s;
}
.menu a:hover{background:var(--fg);color:var(--ink);}

/* Botones genéricos */
.btn{
  display:block;width:200px;margin:10px auto;padding:10px;text-align:center;
  background:transparent;border:2px solid var(--border);border-radius:6px;
  color:var(--fg);font-size:1rem;text-decoration:none;transition:.3s;cursor:pointer;
}
.btn.inline{display:inline-block;width:auto;padding:8px 14px;margin:0;}
.btn:hover{background:var(--fg);color:var(--ink);}

/* Logos */
.logo,.logo-bottom{
  width:220px;
  margin-bottom:10px;display:block;margin-left:auto;margin-right:auto;
}

/* ===== Footer ===== */
/* 1) INICIO (sin .page): footer flotado sobre la imagen, sin marco */
body:not(.page) footer{
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 999;
  background: transparent;
  border: 0;
  text-align: center;
  color: var(--fg);
  font-size: .9rem;
  line-height: 1.1; /* más compacto */
  padding: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
body:not(.page) footer p{ margin:0; padding:0; opacity:.95; }

/* 2) COLUMNAS (body.page): footer fijo al final del documento, NO flotante */
body.page footer{
  position: static;
  transform: none;
  left: auto; right: auto; bottom: auto;
  text-align:center;
  color: var(--fg-2);
  font-size:.9rem;
  line-height:1.1; /* más compacto */
  padding:12px 8px 20px;
  text-shadow:none;
  background: transparent;
  border:0;
  margin-top:20px;
}
body.page footer p{ margin:0; padding:0; }

/* Tarjetas de listado (páginas de mes) */
.card{
  margin-bottom:16px;padding:12px 14px;border:1px solid var(--border);
  border-radius:10px;background:var(--glass-soft);
  transition:background .25s ease, transform .12s ease;
}
.card:hover{background:rgba(245,224,184,.16);transform:translateY(-1px);}
.card h2{font-size:1.05rem;margin:0 0 6px;}
.card .summary{font-size:.95rem;color:var(--fg-2);margin:0;}
.card .date{font-size:.85rem;color:var(--fg-3);margin:6px 0 0;opacity:.95;}
.card a{color:inherit;text-decoration:none;display:block;}

/* Artículo (columnas) */
.article-header{text-align:center;margin-bottom:14px;}
.article-meta{color:var(--fg-3);font-size:.9rem;margin-top:6px;}
.article{background:var(--glass-soft);border:1px solid var(--border);border-radius:10px;padding:18px;}
.article p{font-size:1.02rem;}
.article img,.article video{max-width:100%;height:auto;border-radius:8px;display:block;margin:14px auto;}

/* Imagen del autor */
.author-image{
  width:100px;height:100px;border-radius:50%;object-fit:cover;
  margin:10px auto;border:3px solid #ddd;box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* Herramientas del artículo */
.tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin:12px 0 16px;}
.progress-wrap{height:4px;background:rgba(245,224,184,.25);border-radius:999px;overflow:hidden;margin:6px 0 14px;}
.progress{height:100%;width:0%;background:var(--fg);transition:width .1s linear;}

/* Páginas internas (columnas) – fondo escritorio */
body.page{
  background:url("../img/fondo2.png") no-repeat center center fixed !important;
  background-size:cover !important;
  overflow:auto;height:auto;
}

/* ========== Meses en píldoras (sin caja) ========== */
.month-list{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px;margin:10px auto 6px;max-width:520px;background:transparent;border:none;
}
.month-list .pill{
  display:inline-block;padding:8px 14px;border:1.6px solid var(--border);border-radius:999px;
  color:var(--fg);text-decoration:none;font-size:.95rem;letter-spacing:.2px;
  background:rgba(0,0,0,.22);
  transition:background .2s ease,color .2s ease,transform .08s ease,border-color .2s ease;
}
.month-list .pill:hover{background:rgba(245,224,184,.12);transform:translateY(-1px);}

/* Desktop fino */
@media (min-width:768px){
  .month-list{gap:12px;}
  .month-list .pill{font-size:1rem;padding:10px 16px;}
}

/* 📱 Responsive móvil */
@media (max-width:600px){
  html, body { height:100svh; }

  body{
    background:url("../img/fondocel.jpg") no-repeat center top fixed !important;
    background-size:cover !important;
    overflow:hidden;
    display:flex; flex-direction:column;
  }

  /* Centramos el cilindro y lo bajamos un poco */
  .container.index{
    position:static !important;
    left:auto; top:auto; transform:none !important;
    max-width:90%;
    margin:auto;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    transform:translateY(4svh);
  }

  .container.index h1{
    font-size:.68rem !important;
    line-height:1.08 !important;
    margin-bottom:6px !important;
    letter-spacing:.4px !important;
  }

  /* Píldoras más chicas */
  .month-list{gap:6px;max-width:240px;margin-top:8px;}
  .month-list .pill{
    font-size:.70rem;
    padding:5px 10px;
    border-width:1.4px;
    background:rgba(0,0,0,.18);
  }

  /* Contenedor en páginas internas (móvil) */
  .container{
    max-width:92%;
    padding:20px 14px;
    margin:22px auto;
    border-radius:10px;
  }

  /* Logo más chico SOLO en celular */
  .logo-bottom{ width:115px; }

  /* Footer en móvil */
  body:not(.page) footer{
    bottom: max(8px, env(safe-area-inset-bottom));
    font-size:.85rem;
    text-shadow:0 1px 2px rgba(0,0,0,.6);
  }
  body.page footer{
    padding:10px 8px 16px;
    font-size:.85rem;
    line-height:1.1; /* compacto también en móvil */
  }

  /* Páginas internas sí pueden hacer scroll */
  body.page{
    background:url("../img/fondocel2.png") no-repeat center top fixed !important;
    background-size:cover !important;
    height:auto; overflow:auto;
  }
}