/* Ricardo Pacheco CV — port fiel del diseño "Ricardo Pacheco CV.dc.html"
   Paleta por defecto: "Crema y verde" · Oscura: "Nocturno" (toggle ☀/☾)
   Tipografía: "Grotesca suiza" (Archivo + IBM Plex Mono) */

:root {
  --bg: #F6F3EC; --panel: #FCFAF6; --ink: #15181B; --body: #454B49; --muted: #8A8579;
  --rule: #DDD8CD; --rule-soft: #E6E1D6; --accent: #0B4F3F; --tint-bg: #EDF2EE; --tint-line: #C6D6CE;
  --font-display: 'Archivo', Helvetica, sans-serif; --font-body: 'Archivo', Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace; --display-weight: 600;
  --band: #E9E4D9; --dark-bg: #15181B; --dark-ink: #F6F3EC; --dark-body: #B4B8B2;
  --dark-muted: #8A9A93; --dark-rule: #35393B; --dark-accent: #8FC7B1;
}

/* Paleta "Nocturno" — activada por el toggle de tema */
html[data-palette="3"] {
  --bg: #14171A; --panel: #1B1F23; --ink: #F2F0EA; --body: #B9BDB8; --muted: #7C837F;
  --rule: #2C3236; --rule-soft: #262B2F; --accent: #6FBF9B; --tint-bg: #1B2622; --tint-line: #2E4A3D;
  --band: #1F2429; --dark-bg: #0E1113; --dark-ink: #F2F0EA; --dark-body: #A9AEA9;
  --dark-muted: #75807A; --dark-rule: #242A2E; --dark-accent: #6FBF9B;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
p { text-wrap: pretty; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

/* Idioma: solo se muestra el contenido del idioma activo */
html[data-lang="es"] .en { display: none !important; }
html[data-lang="en"] .es { display: none !important; }

/* Selector de idioma del header */
.lang-btn { background: none; border: none; padding: 0; font-size: 11.5px; letter-spacing: 0.08em; font-family: var(--font-mono); color: var(--muted); }
html[data-lang="es"] #pick-es, html[data-lang="en"] #pick-en { color: var(--ink); font-weight: 500; }

/* Toggle de tema ☀/☾ */
#theme-toggle:hover { border-color: var(--muted); }
.theme-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 99px; background: var(--accent); transform: translateX(0); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); }
html[data-palette="3"] .theme-knob { transform: translateX(22px); }
.theme-sun, .theme-moon { position: absolute; top: 0; bottom: 0; width: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; color: var(--muted); transition: opacity 200ms ease; }
.theme-sun { left: 2px; opacity: 0; }
.theme-moon { right: 2px; opacity: 0.7; }
html[data-palette="3"] .theme-sun { opacity: 0.7; }
html[data-palette="3"] .theme-moon { opacity: 0; }

/* Hovers portados de style-hover */
.btn-primary:hover { background: var(--accent) !important; color: #FFFFFF !important; }
.btn-outline:hover { border-color: var(--ink) !important; }
.btn-dark:hover { background: var(--dark-accent) !important; }
.contact-link:hover { color: var(--dark-accent) !important; }
.credit-link:hover { color: var(--dark-accent) !important; }

/* Logos de empresa en experiencia (patrón javierpacheco.dev, radio del sitio) */
.company-line { display: flex; align-items: center; gap: 13px; margin-top: 14px; }
.company-logo { width: 46px; height: 46px; flex: none; border-radius: 2px; overflow: hidden; display: block; }
.company-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.company-logo { transition: transform 0.18s ease, box-shadow 0.18s ease; }
a.company-logo:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.company-name { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* Header compacto: fila logo + ES/EN + tema, nav debajo a ancho completo */
@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap !important; gap: 14px 16px !important; }
  .header-right { display: contents !important; }
  .site-logo { white-space: nowrap; }
  .lang-switch { margin-left: auto; border-left: none !important; padding-left: 0 !important; }
  .header-nav { flex-basis: 100%; order: 10; border-top: 1px solid var(--rule-soft); padding-top: 14px; gap: 8px 16px !important; }
}
@media (max-width: 460px) {
  .site-logo { font-size: 20px !important; }
  .header-inner { column-gap: 12px !important; }
}

/* Responsive (idéntico al diseño) */
@media (max-width: 1020px) {
  [data-r="hero"], [data-r="two"], [data-r="hitos"], [data-r="cards"], [data-r="contact"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r="hero"] { min-height: 0 !important; }
  [data-r="two"], [data-r="contact"] { gap: 28px !important; }
  [data-r="heroimg"] { min-height: 62vh !important; }
  [data-r="heropad"] { padding: 44px 28px 56px !important; }
  [data-r="hitosimg"] { min-height: 320px !important; border-left: none !important; border-top: 1px solid var(--rule) !important; }
  [data-r="cards"] { gap: 20px !important; }
}
@media (max-width: 760px) {
  [data-r="pad"] { padding-left: 22px !important; padding-right: 22px !important; }
  [data-r="pad"] section { padding-top: 60px !important; padding-bottom: 24px !important; }
  [data-r="metrics"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-r="metrics"] > div { padding: 26px 20px !important; }
  [data-r="contactsec"] { padding: 64px 24px 64px !important; }
  [data-r="edu"] { grid-template-columns: 1fr !important; gap: 6px !important; }
}
@media (max-width: 460px) {
  [data-r="metrics"] { grid-template-columns: minmax(0, 1fr) !important; }
}