/*
Theme Name: Órbita Blog
Theme URI: https://example.com/orbita-blog
Author: Tu Estudio
Author URI: https://example.com
Description: Theme de WordPress minimalista y ultrarrápido para blogs SEO y monetización con Adsense, inspirado en la filosofía de velocidad y arquitectura orbital de Orbital Theme (BIGSEO). Cero fuentes externas, menú flotante "Órbita", zonas de anuncio integradas, breadcrumbs con Schema.org, tabla de contenidos automática y related posts.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: orbita-blog
Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. TOKENS — sistema de diseño
   ========================================================================== */
:root{
  /* Color: fondo frío casi blanco (no crema), tinta casi negra,
     acento "espacio" en índigo profundo y "estrella" en ámbar para CTAs */
  --color-bg:        #FAFAF9;
  --color-surface:   #FFFFFF;
  --color-ink:       #14171C;
  --color-muted:     #63697A;
  --color-border:    #E6E6E1;
  --color-orbit:     #26314A; /* acento primario */
  --color-orbit-2:   #3D4E73; /* variante más clara del acento */
  --color-star:      #E0982E; /* acento cálido, uso escaso: CTA / hover */
  --color-star-ink:  #5C3D0E;
  --color-ad-label:  #9A9FAE;

  /* Tipografía: pila 100% de sistema, cero peticiones de red.
     Serif de sistema para titulares (carácter editorial),
     sans de sistema para cuerpo (máxima legibilidad y velocidad). */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.7rem + 3vw, 3.4rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --radius: 10px;
  --radius-lg: 18px;
  --content-w: 700px;
  --wide-w: 1180px;
  --shadow-sm: 0 1px 2px rgba(20,23,28,0.06), 0 1px 1px rgba(20,23,28,0.04);
  --shadow-md: 0 8px 24px rgba(20,23,28,0.10);
  --transition: 180ms ease;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--color-orbit); text-decoration: none; }
a:hover{ color: var(--color-star); }
h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: var(--step-4); }
h2{ font-size: var(--step-3); }
h3{ font-size: var(--step-2); }
h4{ font-size: var(--step-1); }
p{ margin:0 0 1.2em; }
ul,ol{ padding-left: 1.3em; }
:focus-visible{ outline: 3px solid var(--color-star); outline-offset: 2px; }
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--color-orbit); color:#fff;
  padding: .75em 1.2em; z-index: 10000; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap{ max-width: var(--wide-w); margin:0 auto; padding: 0 var(--space-3); }
.content-wrap{ max-width: var(--content-w); margin:0 auto; padding: 0 var(--space-3); }
.layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: var(--wide-w);
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-5);
}
@media (min-width: 960px){
  .layout--with-sidebar{ grid-template-columns: minmax(0,1fr) 320px; align-items:start; }
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.site-header{
  border-bottom:1px solid var(--color-border);
  background: var(--color-surface);
  position: sticky; top:0; z-index: 500;
}
.site-header__bar{
  max-width: var(--wide-w); margin:0 auto; padding: var(--space-2) var(--space-3);
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-3);
  flex-wrap: wrap;
}
.site-branding{ display:flex; align-items:center; gap:.6em; min-width:0; }
.site-title{ font-family: var(--font-display); font-size: 1.5rem; margin:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-title a{ color: var(--color-ink); }
.site-description{ display:none; }
.custom-logo{ max-height: 44px; width:auto; }

.primary-nav ul{ list-style:none; display:flex; gap: var(--space-3); margin:0; padding:0; flex-wrap:wrap; }
.primary-nav a{ color: var(--color-ink); font-size:.95rem; font-weight:600; display:inline-block; padding:.4em 0; }
.primary-nav a:hover{ color: var(--color-orbit); }

/* --- Botón hamburguesa: solo visible en móvil --- */
.header-toggle{
  display:none;
  width: 44px; height: 44px; margin-left:auto;
  align-items:center; justify-content:center;
  background: transparent; border:1px solid var(--color-border); border-radius: 8px;
  color: var(--color-ink); cursor:pointer; flex-shrink:0;
}
.header-toggle svg{ width:22px; height:22px; }
.header-toggle line{ transition: transform var(--transition), opacity var(--transition); transform-origin: center; }
.header-panel.is-open ~ .header-toggle .header-toggle__l1,
.header-toggle[aria-expanded="true"] .header-toggle__l1{ transform: translateY(6px) rotate(45deg); }
.header-toggle[aria-expanded="true"] .header-toggle__l2{ opacity:0; }
.header-toggle[aria-expanded="true"] .header-toggle__l3{ transform: translateY(-6px) rotate(-45deg); }

.search-form{ display:flex; gap:.5em; align-items:center; }
.search-form__submit{
  display:none; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--color-border); background:#fff; color:var(--color-orbit); cursor:pointer; flex-shrink:0;
}
.search-form__submit svg{ width:18px; height:18px; }

@media (max-width: 760px){
  .site-header__bar{ flex-wrap:nowrap; }
  .header-toggle{ display:flex; }
  .search-form__submit{ display:flex; }

  .header-panel{
    order:10; width:100%;
    display:grid; gap: var(--space-2);
    max-height:0; overflow:hidden; opacity:0;
    transition: max-height var(--transition), opacity var(--transition), margin var(--transition);
    margin-top:0;
  }
  .header-panel.is-open{ max-height: 480px; opacity:1; margin-top: var(--space-2); }
  .primary-nav ul{ flex-direction:column; gap:0; border-top:1px solid var(--color-border); }
  .primary-nav li{ border-bottom:1px solid var(--color-border); }
  .primary-nav a{ padding:.85em .2em; width:100%; }
}
@media (min-width: 761px){
  .header-panel{ display:flex; align-items:center; gap: var(--space-3); margin-left:auto; }
}

/* ==========================================================================
   5. ZONAS DE ANUNCIO — etiquetadas para transparencia y cumplimiento Adsense
   ========================================================================== */
.ad-slot{
  margin: var(--space-3) 0;
  text-align:center;
  overflow:hidden;
  min-height: 100px; /* reserva espacio y evita Cumulative Layout Shift */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ad-slot > *{ max-width:100%; }
.ad-slot__label{
  display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--color-ad-label); margin-bottom:.4em;
}
.ad-slot--header{ background:var(--color-surface); border-bottom:1px solid var(--color-border); padding: var(--space-2) 0; }
.ad-slot--incontent{ padding: var(--space-3) 0; border-top:1px dashed var(--color-border); border-bottom:1px dashed var(--color-border); }
.ad-slot--sidebar{ position:sticky; top: 84px; }

/* ==========================================================================
   6. TARJETAS DE ENTRADA (loop)
   ========================================================================== */
.post-grid{ display:grid; gap: var(--space-4); }
.post-card{
  display:grid; grid-template-columns: 220px 1fr; gap: var(--space-3);
  padding-bottom: var(--space-4); border-bottom:1px solid var(--color-border);
}
.post-card:last-child{ border-bottom:none; }
.post-card__thumb{ border-radius: var(--radius); overflow:hidden; background:var(--color-border); aspect-ratio: 4/3; }
.post-card__thumb img{ width:100%; height:100%; object-fit:cover; transition: transform var(--transition); }
.post-card:hover .post-card__thumb img{ transform: scale(1.03); }
.post-card__eyebrow{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--color-orbit); font-weight:700; }
.post-card__title{ font-size: var(--step-2); margin:.25em 0 .35em; }
.post-card__title a{ color: var(--color-ink); }
.post-card__title a:hover{ color: var(--color-orbit); }
.post-card__excerpt{ color: var(--color-muted); margin-bottom:.5em; }
.post-meta{ font-size:.82rem; color: var(--color-muted); display:flex; gap:.8em; flex-wrap:wrap; align-items:center; }
.post-meta__read-time::before{ content:"·"; margin-right:.8em; color:var(--color-border); }

@media (max-width: 620px){
  .post-card{ grid-template-columns: 1fr; }
  .post-card__thumb{ aspect-ratio: 16/9; }
}

/* ==========================================================================
   7. ENTRADA INDIVIDUAL
   ========================================================================== */
.single-post__header{ max-width: var(--content-w); margin: var(--space-4) auto var(--space-3); padding:0 var(--space-3); }
.single-post__title{ margin-bottom:.4em; }
.single-post__thumb{ max-width: var(--wide-w); margin: 0 auto var(--space-4); padding: 0 var(--space-3); }
.single-post__thumb img{ border-radius: var(--radius-lg); width:100%; aspect-ratio:21/9; object-fit:cover; }

.entry-content{ font-size: 1.08rem; }
.entry-content h2{ margin-top: 1.6em; scroll-margin-top: 90px; }
.entry-content h3{ margin-top: 1.3em; scroll-margin-top: 90px; }
.entry-content img{ border-radius: var(--radius); margin: .4em 0; }
.entry-content blockquote{
  margin: 1.5em 0; padding: .2em 1.2em; border-left: 3px solid var(--color-star);
  color: var(--color-muted); font-style: italic;
}
.entry-content pre{ background: var(--color-ink); color:#F3F3EE; padding: 1em; border-radius: var(--radius); overflow:auto; font-family:var(--font-mono); font-size:.85rem; }
.entry-content code{ font-family: var(--font-mono); background: var(--color-border); padding: .1em .35em; border-radius:4px; font-size:.9em; }
.entry-content table{ width:100%; border-collapse:collapse; margin:1.5em 0; }
.entry-content th, .entry-content td{ border:1px solid var(--color-border); padding:.6em .8em; text-align:left; }

/* --- Tabla de contenidos automática --- */
.orbit-toc{
  background: var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-3); margin: var(--space-3) 0;
}
.orbit-toc__title{
  font-family: var(--font-body); font-weight:700; font-size:.95rem; text-transform:uppercase; letter-spacing:.08em;
  margin:0; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  padding:.3em 0; -webkit-tap-highlight-color: transparent;
}
.orbit-toc__title::-webkit-details-marker{ display:none; }
.orbit-toc__title::after{
  content:"▾"; font-size:.8em; color: var(--color-muted); transition: transform var(--transition); margin-left:.6em;
}
.orbit-toc[open] .orbit-toc__title::after{ transform: rotate(180deg); }
.orbit-toc ol{ margin:.7em 0 0; padding-left: 1.1em; font-size:.95rem; }
.orbit-toc li{ margin-bottom:.5em; }
.orbit-toc a{ color: var(--color-ink); display:inline-block; padding:.15em 0; }
.orbit-toc a:hover{ color: var(--color-orbit); }
.orbit-toc ol ol{ margin-top:.35em; }
@media (max-width: 600px){
  .orbit-toc{ padding: var(--space-2); }
}

/* --- Autor --- */
.author-box{
  display:flex; gap: var(--space-2); align-items:flex-start;
  background: var(--color-surface); border:1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-3); margin: var(--space-4) 0;
}
.author-box img{ border-radius:50%; width:64px; height:64px; }
.author-box__name{ font-weight:700; margin-bottom:.2em; }
.author-box__bio{ color: var(--color-muted); font-size:.92rem; margin:0; }

/* --- Relacionados --- */
.related-posts{ margin: var(--space-5) 0; }
.related-posts__title{ font-size: var(--step-1); margin-bottom: var(--space-2); }
.related-posts__grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: var(--space-3); }
.related-posts__card a{ color:var(--color-ink); font-weight:600; }
.related-posts__card img{ border-radius: var(--radius); aspect-ratio:4/3; object-fit:cover; margin-bottom:.5em; }

/* ==========================================================================
   8. BREADCRUMBS (con microdatos Schema.org)
   ========================================================================== */
.breadcrumbs{ font-size:.82rem; color: var(--color-muted); margin: var(--space-2) 0; }
.breadcrumbs a{ color: var(--color-muted); }
.breadcrumbs a:hover{ color: var(--color-orbit); }
.breadcrumbs__sep{ margin:0 .4em; color: var(--color-border); }

/* ==========================================================================
   9. SIDEBAR / WIDGETS
   ========================================================================== */
.widget{ margin-bottom: var(--space-4); }
.widget-title{ font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; margin-bottom: var(--space-2); color: var(--color-orbit); }
.widget ul{ list-style:none; padding:0; margin:0; }
.widget li{ padding:.5em 0; border-bottom:1px solid var(--color-border); font-size:.92rem; }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer{ background: var(--color-orbit); color: #E7EAF3; margin-top: var(--space-5); }
.site-footer .wrap{ padding: var(--space-4) var(--space-3); display:grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.site-footer a{ color:#fff; }
.site-footer a:hover{ color: var(--color-star); }
.site-footer__bottom{ border-top:1px solid rgba(255,255,255,.15); padding: var(--space-2) var(--space-3); text-align:center; font-size:.8rem; color:#B7C0D9; }

/* ==========================================================================
   11. MENÚ ÓRBITA — elemento de firma: navegación flotante circular
   ========================================================================== */
.orbit-menu{
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 900;
}
.orbit-menu__toggle{
  width: 54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background: var(--color-orbit); color:#fff; box-shadow: var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition: transform var(--transition), background var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.orbit-menu__toggle:active{ transform: scale(.94); }
.orbit-menu__toggle:hover{ background: var(--color-orbit-2); }
.orbit-menu__toggle svg{ width:22px; height:22px; transition: transform var(--transition); }
.orbit-menu.is-open .orbit-menu__toggle svg{ transform: rotate(45deg); }

/* anillo orbital sutil, decorativo, en reposo */
.orbit-menu__ring{
  position:absolute; inset:-10px; border:1px dashed rgba(38,49,74,.35); border-radius:50%;
  animation: orbit-spin 18s linear infinite;
  pointer-events:none;
}
@keyframes orbit-spin{ to{ transform: rotate(360deg); } }

.orbit-menu__items{
  list-style:none; margin:0; padding:0; position:absolute; right:0; bottom:0;
  pointer-events:none;
}
.orbit-menu__items li{
  position:absolute; right:6px; bottom:6px;
  opacity:0; transform: scale(.4);
  transition: opacity var(--transition), transform var(--transition);
}
.orbit-menu.is-open .orbit-menu__items{ pointer-events:auto; }
.orbit-menu.is-open .orbit-menu__items li{ opacity:1; transform: scale(1); }
/* posiciones en arco — se generan también inline vía PHP como fallback */
.orbit-menu__items li:nth-child(1){ transition-delay: 20ms; }
.orbit-menu__items li:nth-child(2){ transition-delay: 60ms; }
.orbit-menu__items li:nth-child(3){ transition-delay: 100ms; }
.orbit-menu__items li:nth-child(4){ transition-delay: 140ms; }
.orbit-menu__items li:nth-child(5){ transition-delay: 180ms; }

.orbit-menu__items a{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background:#fff; color: var(--color-orbit); box-shadow: var(--shadow-sm);
  border:1px solid var(--color-border);
}
.orbit-menu__items a:hover{ background: var(--color-star); color:#fff; }
.orbit-menu__items svg{ width:18px; height:18px; }

@media (min-width: 960px){
  .orbit-menu{ right: 28px; bottom: 28px; }
}

/* ==========================================================================
   12. BOTONES / FORMULARIOS / COMENTARIOS
   ========================================================================== */
.btn{
  display:inline-block; padding:.7em 1.3em; border-radius: 999px; font-weight:700;
  background: var(--color-orbit); color:#fff; border:none; cursor:pointer; font-size:.9rem;
  transition: background var(--transition), transform var(--transition);
}
.btn:hover{ background: var(--color-star); color:#fff; transform: translateY(-1px); }

.search-form{ display:flex; gap:.5em; }
.search-form input[type="search"]{
  flex:1; padding:.7em 1em; border:1px solid var(--color-border); border-radius: 999px; font-size:.95rem;
}

#comments{ margin: var(--space-5) 0; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list article{ border:1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2); margin-bottom: var(--space-2); }
.comment-form input, .comment-form textarea{
  width:100%; padding:.7em; border:1px solid var(--color-border); border-radius: var(--radius); font-family:inherit; margin-bottom: var(--space-2);
}

/* ==========================================================================
   13. UTILIDADES / ACCESIBILIDAD / IMPRESIÓN
   ========================================================================== */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.pagination{ display:flex; gap:.5em; justify-content:center; margin: var(--space-4) 0; flex-wrap:wrap; }
.pagination a, .pagination span{ padding:.5em .9em; border:1px solid var(--color-border); border-radius:8px; font-size:.9rem; }
.pagination .current{ background: var(--color-orbit); color:#fff; border-color: var(--color-orbit); }
@media print{ .orbit-menu, .ad-slot, .site-header, .site-footer{ display:none !important; } }

/* ==========================================================================
   14. REFINAMIENTOS MÓVIL
   ========================================================================== */
/* Tablas anchas: scroll horizontal propio en vez de romper el layout */
.entry-content table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.entry-content{ overflow-wrap: break-word; }

/* Bloquea el scroll del body cuando hay un panel abierto (menú o buscador) */
body.orbit-lock{ overflow:hidden; height:100%; }

@media (max-width: 760px){
  html{ font-size: 95.5%; }
  .wrap, .layout, .content-wrap{ padding-left: var(--space-2); padding-right: var(--space-2); }

  .single-post__thumb{ padding-left: var(--space-2); padding-right: var(--space-2); }
  .single-post__thumb img{ aspect-ratio: 16/10; border-radius: var(--radius); }

  .single-post__title{ font-size: var(--step-3); }

  .post-meta{ font-size:.78rem; row-gap:.3em; }

  /* Más aire táctil en enlaces de listado y paginación */
  .pagination a, .pagination span{ padding:.65em 1em; min-width:44px; text-align:center; }

  .author-box{ flex-direction:column; align-items:flex-start; }

  .related-posts__grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

  .comment-form input, .comment-form textarea{ font-size:16px; } /* evita el zoom automático de iOS al enfocar */
  .search-form input[type="search"]{ font-size:16px; }

  /* Deja hueco al menú Órbita flotante para que no tape el último bloque de contenido */
  .site-footer{ padding-bottom: 76px; }
}

@media (max-width: 380px){
  .related-posts__grid{ grid-template-columns: 1fr; }
  .orbit-menu__toggle{ width:50px; height:50px; }
}