/* Blog de JPFB – main.css
   Estilo unificado (blog + comentarios)
   Última edición: 2025-10-12
*/

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height: 1.6;
  color: var(--ink);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeLegibility;
}

/* ===== Variables ===== */
:root{
  --paper:#0b101a;
  --ink:#e9edf3;
  --ink-2:#c9d1dd;
  --line:#1e293b;
  --line-2:#22314a;
  --accent:#22c55e;              /* verde para títulos de la ficha */
  --muted:#94a3b8;
  --radius:14px;
  --shadow:0 15px 35px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.22);
  --maxw:1100px;
  --glass-65:rgba(11,17,26,.65);
  --glass-70:rgba(11,17,26,.70);

  /* Verdes (planta) */
  --green-dark:#1B3D2F;
  --green-glass:rgba(27,61,47,.55);
  --green-border:rgba(46,125,93,.6);
  --ink-inv:#EAF7EF;

  /* Layout helpers */
  --edge-gap:14px;               /* separación uniforme arriba/abajo de paneles */
  --footer-h:56px;               /* alto visual del footer fijo */
}

/* ===== Fondo ===== */
body{
  background:url("/img/hero.webp") no-repeat center top fixed;
  background-size:cover;
  background-attachment:fixed;
  color:var(--ink);
}

/* ===== Tipografía global ===== */
h1,h2,h3{line-height:1.25;margin:0 0 .6em}
h1{font-size:clamp(1.9rem,1.2rem + 2.2vw,2.7rem)}
h2{font-size:clamp(1.35rem,1rem + 1.2vw,1.95rem)}
h3{font-size:clamp(1.12rem,.95rem + .8vw,1.28rem)}
p{margin:0 0 1.05em}

/* ===== Enlaces ===== */
a{color:var(--ink);text-decoration:none;transition:opacity .2s}
a:hover,a:focus-visible{opacity:.85}

/* ===== Contenedores ===== */
.container{width:min(100% - 28px,var(--maxw));margin-inline:auto}

/* ===== Encabezado ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-70);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;flex-direction:column;text-decoration:none}
.brand-main{
  color:#fff;
  font-weight:400;
  font-size:clamp(1.1rem, 1rem + 1vw, 1.8rem);
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  line-height:1.15;
}

/* ===== Navegación ===== */
#nav-toggle{position:absolute;left:-9999px}
.nav-burger{
  display:none;cursor:pointer;width:42px;height:36px;border-radius:10px;
  border:1px solid var(--line-2);align-items:center;justify-content:center;
  background:var(--glass-70);backdrop-filter:blur(6px)
}
.nav-burger::before{content:"≡";font-size:1.2rem;color:#fff}
.site-nav{display:flex;gap:18px;align-items:center}
.site-nav a{color:#fff;padding:.5rem .4rem;border-radius:10px}
.site-nav a:hover{background:var(--glass-65)}
.menu-dropdown{position:relative}
.menu-dropdown summary{list-style:none;cursor:pointer;padding:.5rem .4rem;border-radius:10px;color:#fff}
.menu-dropdown[open] summary,.menu-dropdown summary:hover{background:var(--glass-65)}
.menu-dropdown .menu-panel{
  position:absolute;top:100%;left:0;min-width:220px;display:flex;flex-direction:column;gap:6px;
  padding:10px;margin-top:6px;background:var(--glass-70);border:1px solid var(--line);
  border-radius:12px;backdrop-filter:blur(8px);box-shadow:var(--shadow)
}
.menu-dropdown .menu-panel a{color:#fff;white-space:nowrap;padding:6px 10px;border-radius:8px}
.menu-dropdown .menu-panel a:hover{background:var(--glass-65)}
@media(max-width:820px){
  .nav-burger{display:flex}
  .site-nav{
    position:fixed;inset:60px 12px auto 12px;background:var(--glass-70);
    border:1px solid var(--line);border-radius:16px;padding:12px;display:none;
    flex-direction:column;gap:6px;box-shadow:var(--shadow);backdrop-filter:blur(10px)
  }
  #nav-toggle:checked ~ .nav-burger + .site-nav{display:flex}
}

/* ===== Portada ===== */
.home-hero{padding-top:18px;padding-bottom:8px}
.home-hero-subtitle{
  font-size:1rem;
  font-style:italic;          /* cursiva */
  color:#e5e7eb;
  text-shadow:0 2px 6px rgba(0,0,0,.6);
  margin:0 0 8px;             /* el subtítulo se queda arriba */
  text-align:center;
}

/* Ensanchar la portada para 4 tarjetas de 420px (sin scroll) */
.home-hero.container{
  width:min(100% - 28px, 1728px);  /* 4×420 + 3×16 */
}

/* ======= FICHAS ======= */
.home-feature-list{
  display:grid;
  grid-template-columns: repeat(4, 420px);  /* 4 columnas fijas */
  gap:16px;
  justify-content:center;                   /* centradas */
  overflow:visible;                         /* sin scrollbar */
  margin-top:68px;                          /* ⬅︎ antes 28px: baja SOLO las tarjetas */
}
.card{
  background:var(--glass-65);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(4px)
}
.post-card{width:420px !important;min-height:520px !important;margin:0}

/* Título de ficha */
.card-title{font-size:1.05rem;font-weight:800;color:var(--accent);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.card-title a{color:var(--accent) !important;}
.card-title:hover{opacity:.95;text-decoration:underline}

/* Chips / meta / resumen */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.85rem;color:#e6edf6;background:rgba(0,0,0,.35);border:1px solid var(--line-2)}
.chip-date{color:#cfd8e3}
.card-meta-line{font-size:.95rem;color:var(--ink-2)}
.card-excerpt{color:#e2e8f0}

/* ===== Botones base ===== */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.40rem .60rem;  /* alto | ancho */
  width:max-content;
  min-width:0;
  white-space:nowrap;
  margin-inline:auto;
  gap:.5ch;
  text-decoration:none;
  cursor:pointer;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:var(--glass-70);
  color:#fff;
  backdrop-filter:blur(2px);
  transition:background-color .18s ease, color .18s ease,
             border-color .18s ease, transform .06s ease;
}
.btn:hover,.btn:focus-visible{
  background:var(--green-glass);
  border-color:var(--green-border);
  color:var(--ink-inv);
  transform:translateY(-1px);
  outline:0;
}
.btn:active{transform:translateY(0)}
.btn-block{text-align:center;}

/* ===== Artículo interno ===== */
/* CENTRADO correcto del bloque de artículo, como antes */
.article-stack{
  margin: var(--edge-gap) auto;                  /* mismo espacio arriba/abajo + centrado */
  width: min(100% - 28px, 1000px);               /* contenedor centrado */
}
.article-hero{
  background:var(--glass-70);
  border:1px solid var(--line);
  border-radius:18px 18px 0 0;
  padding:clamp(16px,3vw,24px);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
  max-width:1000px;
  margin:0 auto;                                 /* aseguro centrado */
}
.article-hero h1{margin:0}
.article{
  background:var(--glass-65);
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 18px 18px;
  padding:clamp(16px,3vw,28px);
  box-shadow:var(--shadow);
  backdrop-filter:blur(4px);
  max-width:1000px;
  margin:0 auto;                                 /* aseguro centrado */
}
.article .content{
  color:var(--ink);
  max-width:72ch;
  margin:0 auto;
  font-size:1.06rem;
  line-height:1.75;
  letter-spacing:.1px;
  hyphens:auto
}
.article .content p{margin:0 0 1.05em}
.article .content ul,.article .content ol{padding-left:1.2rem;margin:.6em 0 1.1em}
.article .content li + li{margin-top:.35em}
.article .content strong{color:#f3f7ff}
.article .content em{color:#dbe7fb}
blockquote{margin:1rem auto;padding:.9rem 1rem;background:var(--glass-70);border:1px solid #1a2942;border-radius:14px;color:#dbe7ff;backdrop-filter:blur(4px)}
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
pre{background:var(--glass-70);border:1px solid #1a2942;padding:12px 14px;border-radius:12px;overflow:auto;backdrop-filter:blur(4px)}
code{background:var(--glass-70);border:1px solid #1a2942;padding:.12rem .35rem;border-radius:8px}

/* ===== Footer ===== */
.site-main{
  flex:1 0 auto;
  /* deja hueco inferior = alto del footer + gap para que no lo tape */
  padding-bottom: calc(var(--footer-h) + var(--edge-gap));
}
.site-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  border-top:1px solid var(--line);
  background:var(--glass-70);
  backdrop-filter:blur(10px);
}
.footer-inner{
  padding:18px 14px;
  color:var(--ink-2);
  font-size:.95rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  text-align:left;
}
@media (max-width: 700px){
  .footer-inner{flex-direction:column; text-align:center;}
}
.footer-inner .brand{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6)}

.footer-icons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

.footer-icon {
  height: 26px;
  width: auto;
  vertical-align: middle;
  filter: brightness(0.9);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.footer-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

/* ===== Footer icons refinement ===== */
.footer-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;                  /* ← separación equidistante */
  margin-left: 16px;
  vertical-align: middle;
}

.footer-icon {
  height: 36px;               /* ← tamaño más grande */
  width: auto;
  border: 2px solid #d4af37;  /* ← borde dorado (#d4af37 es gold suave) */
  border-radius: 8px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.footer-icon:hover {
  transform: scale(1.15);
  border-color: #ffbf00;      /* dorado más vivo en hover */
  box-shadow: 0 0 10px rgba(255, 191, 0, 0.6);
}

/* ⚙️ Ajustes para centrar el contenido del footer con simetría */
.footer-inner {
  display: flex;
  justify-content: center;            /* centra todo */
  align-items: center;
  gap: 40px;                           /* separación entre izquierda y derecha */
}
.footer-left, .footer-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.footer-right {
  margin-left: 40px;
}

/* ===== Footer refinado ===== */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--glass-70);
  backdrop-filter: blur(10px);
  margin-top: auto;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 50;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(92%, 1200px);
  margin: 0 auto;
  padding: 12px 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}
/* Columna izquierda: texto + íconos */
.footer-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Íconos */
.footer-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}
.footer-icons img {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #ffbf00;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.footer-icons img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(255, 191, 0, 0.6);
}
/* Texto “Hecho con Hugo” */
.footer-right .hugo-link {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.footer-right .hugo-link:hover {
  color: #ffbf00;
  text-shadow: 0 0 8px rgba(255, 191, 0, 0.6);
  cursor: pointer;
}

/* === Footer centrado y equidistante con el HTML actual === */
.site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  border-top: 1px solid var(--line);
  background: var(--glass-70);
  backdrop-filter: blur(10px);
}
.footer-inner{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  align-items: center;
  column-gap: 48px;
  padding: 14px 0;
  color: var(--ink-2);
  font-size: .95rem;
}
.footer-left{ display: contents; }
.footer-icons{
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.footer-icons img{
  height: 32px; width: auto;
  border: 2px solid #D4AF37;
  border-radius: 8px;
  padding: 3px;
  background: rgba(0,0,0,.22);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.footer-icons img:hover{
  transform: scale(1.12);
  border-color: #FFBF00;
  box-shadow: 0 0 10px rgba(255,191,0,.55);
}
.hugo-link{
  color: var(--ink-2);
  text-decoration: none;
  transition: color .25s, text-shadow .25s;
}
.hugo-link:hover{
  color: #FFBF00;
  text-shadow: 0 0 8px rgba(255,191,0,.55);
  cursor: pointer;
}
/* espacio para footer fijo */
.site-main{
  padding-bottom: 72px;
}