/*
Theme Name: NOVUM
Theme URI: https://novumagencia.com.mx
Author: NOVUM
Description: Tema de NOVUM — agencia de publicidad y soluciones integrales. Sistema de diseño propio, preparado para WooCommerce.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: novum
*/

/* ═══════════════════════════════════════════════════════════════════
   TOKENS — copiados del sistema del sitio original (styles/tokens.css)
   para que el tema quede idéntico. No inventar valores aquí: si algo
   cambia, cambia primero en el sistema y luego se refleja acá.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* Paleta */
  --novum-black:     #101010;
  --novum-graphite:  #3C3D40;
  --novum-gray:      #8A8C90;
  --novum-gray-ink:  #6E6F72;
  --novum-line:      #E4E4E2;
  --novum-line-soft: #F2F2EF;
  --novum-bone:      #FBFBF9;
  --novum-gold:      #BAA16E;
  --novum-gold-ink:  #85724B;
  --novum-gold-deep: #796640;

  /* Roles */
  --color-bg:              var(--novum-bone);
  --color-bg-alt:          var(--novum-line-soft);
  --color-surface:         #FFFFFF;
  --color-surface-inverse: var(--novum-black);
  --color-text:            var(--novum-black);
  --color-text-secondary:  var(--novum-graphite);
  --color-text-muted:      var(--novum-gray-ink);
  --color-text-faint:      var(--novum-gray);
  --color-text-inverse:    var(--novum-bone);
  --color-line:            var(--novum-line);
  --color-line-strong:     var(--novum-black);
  --color-accent:          var(--novum-gold);
  --color-accent-ink:      var(--novum-gold-ink);
  --color-accent-strong:   var(--novum-gold-deep);

  /* Tipografía — Fraunces titula, Manrope lee */
  --fuente-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --size-h1:      clamp(2.25rem, 1.35rem + 4vw, 4rem);
  --size-h2:      clamp(1.75rem, 1.25rem + 2.22vw, 2.75rem);
  --size-h3:      clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --size-lead:    clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);
  --size-body:    1.0625rem;
  --size-body-sm: .9375rem;
  --size-meta:    .8125rem;
  --size-eyebrow: .6875rem;

  --leading-tight: 1.10;
  --leading-snug:  1.25;
  --leading-body:  1.75;

  --tracking-tight:   -.01em;
  --tracking-meta:     .20em;
  --tracking-eyebrow:  .26em;
  --tracking-wordmark: .38em;

  --measure:        62ch;
  --measure-narrow: 46ch;
  --measure-head:   22ch;

  --container-max: 90rem;
  --page-margin:   clamp(1.25rem, 9.17vw, 8.25rem);
  --section-y:     clamp(4.5rem, 9vw, 10rem);

  --radius: 0;          /* El sistema es de esquinas rectas. No redondear. */
  --rule: 1px solid var(--color-line);
}

/* ═══ Base ═══════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--fuente-cuerpo);
  font-size:var(--size-body);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{
  font-family:var(--fuente-titulo);
  font-weight:300;
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
  margin:0;
}
h1{ font-size:var(--size-h1) }
h2{ font-size:var(--size-h2) }
h3{ font-size:var(--size-h3) }
p{ margin:0 0 1em }
:focus-visible{ outline:2px solid var(--color-accent-ink); outline-offset:2px }

.nv-contenedor{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--page-margin);
}
.nv-seccion{ padding-block:var(--section-y) }
.nv-eyebrow{
  font-family:var(--fuente-titulo);
  font-size:var(--size-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--color-accent-strong);
  margin:0;
}
.nv-lead{ font-size:var(--size-lead); color:var(--color-text-secondary); max-width:var(--measure) }
.nv-salto{ position:absolute; left:-9999px }
.nv-salto:focus{ left:1rem; top:1rem; z-index:100; background:var(--color-surface); padding:.75rem 1rem }

/* ═══ Cabecera ═══════════════════════════════════════════════════ */
.nv-cabecera{
  position:sticky; top:0; z-index:50;
  background:var(--color-bg);
  border-bottom:var(--rule);
}
.nv-cabecera-in{
  display:flex; align-items:center; gap:1.5rem;
  min-height:4.75rem;
}
.nv-marca{ display:flex; align-items:center; gap:.7rem; color:var(--color-text) }
.nv-wordmark{
  font-family:var(--fuente-titulo);
  font-size:1.0625rem; font-weight:300;
  letter-spacing:var(--tracking-wordmark);
  line-height:1;
}
.nv-nav{ margin-left:auto; display:flex; align-items:center; gap:2rem }
.nv-nav-lista{ list-style:none; display:flex; gap:2rem; margin:0; padding:0 }
.nv-nav-lista li{ margin:0 }
/* Dos selectores a propósito: «nv-nav-link» lo pone el respaldo del
   tema y «nv-nav-lista a» cubre los menús que WordPress genera, que
   traen sus propias clases. Así se ve igual con menú o sin él. */
.nv-nav-link,
.nv-nav-lista a{
  font-size:var(--size-meta);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  color:var(--color-text-secondary);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .3s, border-color .3s;
}
.nv-nav-link:hover,
.nv-nav-lista a:hover{ color:var(--color-accent-ink) }
.nv-nav-link[aria-current="page"],
.nv-nav-lista .current-menu-item a{ border-bottom-color:var(--color-accent) }
.nv-btn{
  display:inline-block;
  font-size:var(--size-meta);
  letter-spacing:var(--tracking-meta);
  text-transform:uppercase;
  padding:.85rem 1.6rem;
  border:1px solid var(--color-line-strong);
  color:var(--color-text);
  background:transparent;
  transition:background .3s, color .3s;
}
.nv-btn:hover{ background:var(--color-line-strong); color:var(--color-text-inverse) }
.nv-btn--solido{ background:var(--color-line-strong); color:var(--color-text-inverse) }
.nv-btn--solido:hover{ background:var(--novum-graphite); border-color:var(--novum-graphite) }
.nv-menu-movil{ display:none; margin-left:auto; background:none; border:0; padding:.5rem; cursor:pointer }

@media (max-width:860px){
  .nv-nav{ display:none }
  .nv-menu-movil{ display:block }
  .nv-nav.abierto{
    display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem;
    position:absolute; inset:4.75rem 0 auto; margin:0;
    background:var(--color-bg); border-bottom:var(--rule);
    padding:1.5rem var(--page-margin) 2rem;
  }
  .nv-nav.abierto .nv-nav-lista{ flex-direction:column; gap:1.1rem }
}

/* ═══ Pie ════════════════════════════════════════════════════════ */
.nv-pie{ background:var(--color-surface-inverse); color:var(--color-text-inverse); padding-block:5rem 2.5rem }
.nv-pie-rejilla{ display:grid; grid-template-columns:repeat(12,1fr); gap:3rem 2rem }
.nv-pie-marca{ grid-column:span 12 }
.nv-pie-col{ grid-column:span 6 }
@media (min-width:900px){
  .nv-pie-marca{ grid-column:span 5 }
  .nv-pie-col{ grid-column:span 3 }
  .nv-pie-col:first-of-type{ grid-column:7 / span 3 }
}
.nv-pie h2{ font-size:var(--size-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--color-accent); margin:0 0 1.25rem; font-weight:500 }
.nv-pie-enlace{ display:block; font-size:var(--size-body-sm); color:#B9B6AD; padding:.35rem 0; transition:color .3s }
.nv-pie-enlace:hover{ color:var(--color-text-inverse) }
.nv-pie-eslogan{ font-family:var(--fuente-titulo); font-weight:200; font-size:var(--size-lead);
  line-height:var(--leading-snug); color:#B9B6AD; max-width:var(--measure-narrow); margin:1.5rem 0 0 }
.nv-pie-social{ display:inline-flex; align-items:center; gap:.65rem }
.nv-pie-legal{ margin-top:4rem; border-top:1px solid rgba(255,255,255,.12); padding-top:2rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:baseline }
.nv-meta{ font-size:var(--size-meta); letter-spacing:var(--tracking-meta); text-transform:uppercase; color:var(--novum-gray); margin:0 }

/* ═══ Contenido genérico ═════════════════════════════════════════ */
.nv-entrada{ max-width:var(--measure); }
.nv-entrada h2{ margin-top:2.5rem }
.nv-entrada ul,.nv-entrada ol{ padding-left:1.25rem }