/* ============================================
   GLOBAL — Tipografía, layout y elementos base
   Enfoque: mobile-first (base = móvil,
   min-width para pantallas mayores)
   calculadorainversion.com

   Nota: las fuentes se cargan en head.php con
   preconnect + link (mejor rendimiento que @import)
   ============================================ */

/* --- Base del body --- */
body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  font-weight: var(--weight-normal);
  color:       var(--color-text);
  background:  var(--color-bg);
}

/* --- Contenedor principal --- */
.container {
  width:     100%;
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 var(--s-4);
}

.container--wide {
  max-width: var(--max-width-wide);
}

/* --- Links base --- */
a {
  color:           var(--color-accent);
  text-decoration: none;
  transition:      color var(--transition);
}

a:hover {
  color:           var(--color-accent-hover);
  text-decoration: underline;
}

/* --- Tipografía del contenido editorial (artículos y SEO) --- */
.prose h2,
.prose h3 {
  color:         var(--color-text);
  font-weight:   var(--weight-bold);
  margin-top:    var(--s-10);
  margin-bottom: var(--s-4);
}

.prose h2 { font-size: var(--text-2xl); }
.prose h3 { font-size: var(--text-xl); }

.prose p {
  color:         var(--color-text-soft);
  margin-bottom: var(--s-4);
  max-width:     65ch;
}

.prose ul,
.prose ol {
  list-style:    revert;
  padding-left:  var(--s-6);
  margin-bottom: var(--s-4);
  color:         var(--color-text-soft);
}

.prose li {
  margin-bottom: var(--s-2);
}

/* ============================================
   HEADER + NAVEGACIÓN (mobile-first)
   Base: móvil → menú desplegable con hamburguesa
   ≥768px: nav horizontal, hamburguesa oculta
   ============================================ */

.site-header {
  border-bottom: 1px solid var(--color-border-soft);
  background:    var(--color-bg);
  position:      sticky;
  top:           0;
  z-index:       100;
}

.site-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          60px;
  position:        relative;
}

.site-logo {
  font-size:       var(--text-lg);
  font-weight:     var(--weight-bold);
  color:           var(--color-text);
  text-decoration: none;
}

.site-logo span {
  color: var(--color-accent);
}

/* Variante del logo en el footer (más pequeño) */
.site-logo--footer {
  font-size: var(--text-base);
}

/* --- Botón hamburguesa (visible en móvil) --- */
.nav-toggle {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           44px;   /* área táctil mínima recomendada */
  height:          44px;
  padding:         10px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
}

.nav-toggle__bar {
  display:       block;
  width:         100%;
  height:        2px;
  background:    var(--color-text);
  border-radius: 1px;
  transition:    transform var(--transition), opacity var(--transition);
}

/* Animación a "X" cuando el menú está abierto */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Nav móvil: panel desplegable bajo el header --- */
.site-nav {
  display:        none;
  position:       absolute;
  top:            60px;
  left:           calc(-1 * var(--s-4));
  right:          calc(-1 * var(--s-4));
  flex-direction: column;
  background:     var(--color-bg);
  border-bottom:  1px solid var(--color-border-soft);
  padding:        var(--s-4) var(--s-6) var(--s-6);
  gap:            var(--s-5);
  box-shadow:     var(--shadow);
}

/* Estado abierto (lo controla el JS añadiendo la clase .open) */
.site-nav.open {
  display: flex;
}

.site-nav a {
  font-size:   var(--text-base);
  font-weight: var(--weight-medium);
  color:       var(--color-text-muted);
  transition:  color var(--transition);
  padding:     var(--s-2) 0;   /* área táctil cómoda en móvil */
}

.site-nav a:hover,
.site-nav a.active {
  color:           var(--color-accent);
  text-decoration: none;
}

/* --- Footer del sitio --- */
.site-footer {
  border-top: 1px solid var(--color-border-soft);
  padding:    var(--s-12) 0 var(--s-8);
  margin-top: var(--s-16);
  color:      var(--color-text-muted);
  font-size:  var(--text-sm);
}

.site-footer__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--s-6);
}

.site-footer__tagline {
  margin-top: var(--s-2);
  font-size:  var(--text-xs);
}

.site-footer__links {
  display:   flex;
  gap:       var(--s-4) var(--s-6);
  flex-wrap: wrap;
}

.site-footer a {
  color: var(--color-text-muted);
}

.site-footer a:hover {
  color: var(--color-text);
}

.site-footer__disclaimer {
  font-size:   var(--text-xs);
  max-width:   60ch;
  margin-top:  var(--s-6);
  line-height: 1.6;
  color:       var(--color-text-muted);
  border-top:  1px solid var(--color-border-soft);
  padding-top: var(--s-4);
}

.site-footer__copyright {
  font-size:  var(--text-xs);
  margin-top: var(--s-4);
  color:      var(--color-text-muted);
}

/* --- Hero de herramienta --- */
.tool-hero {
  padding:    var(--s-8) 0 var(--s-6);
  text-align: center;
}

.tool-hero h1 {
  font-size:      var(--text-3xl);
  font-weight:    var(--weight-bold);
  margin-bottom:  var(--s-3);
  letter-spacing: -0.02em;
}

.tool-hero .subtitle {
  font-size: var(--text-base);
  color:     var(--color-text-muted);
  max-width: 52ch;
  margin:    0 auto;
}

/* --- Sección de la herramienta interactiva --- */
.tool-wrapper {
  background:    var(--color-bg-soft);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--s-5);
  margin:        var(--s-6) 0;
}

/* --- Bloque de contenido SEO bajo la herramienta --- */
.seo-content {
  padding:    var(--s-10) 0;
  border-top: 1px solid var(--color-border-soft);
  margin-top: var(--s-6);
}

/* --- Breadcrumb --- */
.breadcrumb {
  display:     flex;
  gap:         var(--s-2);
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  padding:     var(--s-4) 0;
  align-items: center;
  flex-wrap:   wrap;
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb__sep {
  color: var(--color-border);
}

/* ============================================
   PANTALLAS MEDIANAS Y GRANDES (≥768px)
   ============================================ */
@media (min-width: 768px) {

  .container {
    padding: 0 var(--s-6);
  }

  /* Hamburguesa oculta en desktop */
  .nav-toggle {
    display: none;
  }

  /* Nav horizontal normal */
  .site-nav {
    display:        flex;
    position:       static;
    flex-direction: row;
    background:     transparent;
    border-bottom:  none;
    padding:        0;
    gap:            var(--s-6);
    box-shadow:     none;
  }

  .site-nav a {
    font-size: var(--text-sm);
    padding:   0;
  }

  /* Footer en fila */
  .site-footer__inner {
    flex-direction:  row;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             var(--s-8);
    flex-wrap:       wrap;
  }

  .site-footer {
    margin-top: var(--s-20);
  }

  /* Hero más grande */
  .tool-hero {
    padding: var(--s-12) 0 var(--s-8);
  }

  .tool-hero h1 {
    font-size: var(--text-4xl);
  }

  .tool-hero .subtitle {
    font-size: var(--text-lg);
  }

  /* Herramienta con más aire */
  .tool-wrapper {
    padding:       var(--s-8);
    border-radius: var(--radius-xl);
    margin:        var(--s-8) 0;
  }

  .seo-content {
    padding:    var(--s-12) 0;
    margin-top: var(--s-8);
  }

}