/* =========================================
   ravmn — hoja de estilos común
   ========================================= */

/* ===== Tokens (oscuro por defecto) ===== */
:root{
  --bg:#0a0b0d; --panel:#121317; --ink:#e7e8ec; --muted:#a9afbb; --line:#20232a;
  --accent:#ffd166;             /* se puede sobreescribir por JS según hora */
  --r:14px; --maxw:980px;       /* portada usa 860px; 980px funciona para todas */
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#fafafa; --panel:#ffffff; --ink:#0b0d0f; --muted:#596171; --line:#e7e7ea;
    --shadow:0 10px 24px rgba(0,0,0,.07);
  }
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  letter-spacing:.01em;
  background-image:
    radial-gradient(800px 500px at 100% -10%, rgba(255,209,102,.05), transparent 60%),
    radial-gradient(700px 400px at 0% 0%, rgba(255,255,255,.03), transparent 60%);
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed; /* opcional: fija al viewport */
}

a{ color:inherit }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0px 24px 24px }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ===== Tipografías y microcomponentes ===== */
.eyebrow{ color:var(--accent); font-size:12px; letter-spacing:.08em; text-transform:uppercase }
.lead{ color:var(--muted) }
.muted{ color:var(--muted) }

/* ===== Header global + navegación ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--panel); border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.site-header__bar{
  max-width:var(--maxw); margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* Brand */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink) }
.brand-logo{ border-radius:8px; box-shadow: 0 0 12px color-mix(in sRGB, var(--accent) 40%, transparent);}
.brand-text{ display:flex; flex-direction:column; line-height:1.15 }
.brand-title{ font-size:18px; font-weight:700; letter-spacing:-.01em }
.brand-slogan{ font-size:12px; color:var(--muted) }

/* Nav desktop */
.nav-links{ display:none; align-items:center; gap:14px }
.nav-links a{
  color:var(--ink); font-size:14px; text-decoration:none;
  padding:6px 10px; border-radius:6px; transition:background .2s;
}
.nav-links a:hover{ background:color-mix(in sRGB,var(--accent) 20%, transparent) }
.nav-links a[aria-current="page"]{
  outline:1px solid color-mix(in sRGB, var(--accent) 40%, var(--line)); border-radius:6px
}

/* Menú móvil (hamburguesa) */
.menu-toggle{
  appearance:none; border:0; background:transparent; padding:8px;
  display:inline-flex; flex-direction:column; gap:4px; cursor:pointer;
}
.menu-toggle__bar{ width:22px; height:2px; background:var(--ink); border-radius:2px }
.site-menu{ display:none; border-top:1px solid var(--line); background:var(--panel) }
.site-menu a{
  display:block; padding:12px 20px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.site-menu a:last-child{ border-bottom:0 }
.site-menu a:hover{ background:color-mix(in sRGB,var(--accent) 14%, transparent) }

@media (min-width:820px){
  .menu-toggle{ display:none }
  .nav-links{ display:flex }
  .site-menu{ display:none !important }
}

/* ===== Hero / Portada (index) ===== */
.hero { padding: 4rem 1rem 2rem; max-width: 720px; margin: 0 auto; }
.hero-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.hero-logo { flex-shrink: 0; border-radius: 12px; box-shadow: 0 0 12px color-mix(in sRGB, var(--accent) 40%, transparent); }
.hero-brand { display: flex; flex-direction: column; justify-content: center; }
.hero-title { font-size: 2.5rem; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.slogan { font-size: 1.1rem; color: var(--ink-soft); margin-top: 0.25rem; }
.lead { font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); }

/* Cards de portada e hubs */
.grid{ display:grid; gap:14px; margin:28px 0 8px; grid-template-columns:1fr }
@media (min-width:720px){ .grid{ grid-template-columns:1fr 1fr } }
@media (min-width:900px){ .grid{ grid-template-columns:repeat(3,1fr) } }

.card, .hub{
  display:block; padding:18px 18px 20px; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
  isolation:isolate;
}
.card:hover, .hub:hover{
  transform:translateY(-2px);
  border-color:color-mix(in sRGB, var(--accent) 50%, var(--line));
}
.card h2, .hub h2{ margin:8px 0 6px; font-size:20px; letter-spacing:-.01em }
.card p, .hub p{ margin:0; color:var(--muted); font-size:14px }
.card .icon{ font-size:22px; margin-right:.45rem }
.card .arrow{ position:absolute; right:16px; bottom:14px; opacity:.6; transition:transform .18s ease, opacity .18s }
.card:hover .arrow{ transform:translateX(2px); opacity:.9 }

/* ===== Encabezados de página (listados) ===== */
header.page{ padding-top:18px }
h1{ margin:.3rem 0 .2rem; font-size:clamp(24px,5vw,32px) }
.lead.page{ margin:0 0 12px }

/* ===== Controles de listado (buscador + tags) ===== */
.controls{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 18px }
.search{
  flex:1 1 260px; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 10px
}
.search input{ flex:1; background:transparent; border:0; color:var(--ink); outline:none }
.tagbar{ display:flex; gap:8px; flex-wrap:wrap }
.tag{
  border:1px solid var(--line); border-radius:999px; padding:6px 10px;
  font-size:13px; color:var(--muted); cursor:pointer
}
.tag.active{ color:var(--ink); background:color-mix(in sRGB,var(--accent) 18%, transparent) }

/* ===== Grid de tarjetas de artículos (bloc-de-notas) ===== */
.grid.cards{ display:grid; gap:14px; grid-template-columns:1fr }
@media (min-width:720px){ .grid.cards{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .grid.cards{ grid-template-columns:repeat(3,1fr) } }
.card .meta{ color:var(--muted); font-size:13px; margin-bottom:8px }
.labels{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px }
.label{ border:1px solid var(--line); border-radius:999px; padding:3px 8px; font-size:12px; color:var(--muted) }

/* ===== Secciones (bloques con panel) ===== */
section.block{
  margin:26px 0; padding:18px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)
}
section.block h2{ margin:6px 0 8px; font-size:22px; letter-spacing:-.01em }
section.block h3{ margin:18px 0 6px; font-size:16px }
section.block p{ margin:10px 0 }
section.block ul{ margin:8px 0 0 18px; padding:0 }
section.block li{ margin:3px 0 }

/* Hubs de subsecciones (tecnología)*/
.hubs{display:grid;gap:14px;margin:16px 0 22px;grid-template-columns:1fr}
@media(min-width:720px){.hubs{grid-template-columns:repeat(3,1fr)}}
.hub{display:block;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow);transition:transform .18s, border-color .18s}
.hub:hover{transform:translateY(-2px);border-color:color-mix(in sRGB,var(--accent) 40%, var(--line))}
.hub h2{margin:4px 0 6px;font-size:18px}
.hub p{margin:0;color:var(--muted);font-size:14px}

/* ===== Listas por subsección (tecnología) ===== */
section.subsec{ margin:26px 0; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow) }
section.subsec h3{ margin:0 0 10px; font-size:18px }
ul.posts{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
ul.posts li{ border:1px solid var(--line); border-radius:10px; padding:10px; background:var(--bg) }
ul.posts a{ color:inherit; text-decoration:none }
.meta{ color:var(--muted); font-size:13px }


/* Paginación (bloc de notas) */
.pager{display:flex;justify-content:center;gap:10px;margin:18px 0}
.pager a{border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--ink);text-decoration:none}
.pager a.active{outline:1px solid color-mix(in sRGB,var(--accent) 40%, var(--line))}
footer{margin:34px 0 10px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center}

/* ===== Artículo individual ===== */
article.post{
  margin:30px 0; padding:20px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)
}
article.post h1{ margin:0 0 10px; font-size:clamp(24px,5vw,32px); line-height:1.2 }
article.post .meta{ margin-bottom:20px }
article.post img{ max-width:100%; height: auto; border-radius:12px; }

/* ===== Grids reutilizables ===== */
.grid-2{ display:grid; gap:14px }
@media (min-width:860px){ .grid-2{ grid-template-columns:1fr 1fr } }

/* ===== Galería de logos (experiencias) ===== */
.panel{ margin:26px 0; padding:18px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow) }
.panel h2{ margin-top:0 }
.logo-grid{ display:grid; gap:16px; margin-top:12px; grid-template-columns:1fr }
@media(min-width:500px){ .logo-grid{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:720px){ .logo-grid{ grid-template-columns:repeat(4,1fr) } }
figure{ margin:0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--bg); text-align:center }
figure img{ max-width:100%; height:auto; border-radius:8px; display:block; margin:0 auto 8px }
figcaption{ font-size:14px; color:var(--muted) }

/* ===== Tablas (estilo consistente con paneles) ===== */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

th, td {
  padding: 8px 12px;
  border: 1px solid var(--line);
  text-align: left;
}

th {
  background: color-mix(in sRGB, var(--accent) 12%, var(--panel));
  font-weight: 600;
}

tr:nth-child(even) td {
  background: color-mix(in sRGB, white 3%, var(--panel));
}

/* Contenedor que aporta SOLO scroll horizontal */
.table-scroll{
  overflow-x: auto;
  overflow-y: hidden;              /* evita scroll vertical */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ===== Blockquote ===== */

blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--accent);
  background: color-mix(in sRGB, var(--accent) 6%, var(--panel));
  border-radius: var(--r);
  font-style: italic;
  color: var(--text);
  box-shadow: var(--shadow);
}

/* Texto de la cita */
blockquote p {
  margin: 0; /* quita margen extra en párrafos internos */
}

/* Autor o fuente (opcional) */
blockquote footer {
  margin-top: 0.5rem;
  font-size: 0.9em;
  color: var(--muted);
  text-align: right;
}


/* ===== Footer ===== */
footer{ margin:34px 0 10px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; text-align:center }