/* =============================================================
   OMAR BOONE — styles.css
   Font: Neue Helvetica (system stack)
   Navy #1B2A4A | Red #B31B1B | Cream #F5EDD8 | White #FFFFFF
   ============================================================= */

:root {
  --navy:  #1B2A4A;
  --red:   #B31B1B;
  --cream: #F5EDD8;
  --white: #FFFFFF;
  --font:  'Helvetica Neue', Helvetica, Arial, sans-serif;
  --nav-h: 64px;
  --max-w: 1100px;
  --read-w: 720px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.75;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* ─── NAV ─────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:var(--nav-h);
  background:var(--white);
  border-bottom:1px solid rgba(27,42,74,.10);
  padding:0 56px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-size:13px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--navy);
}
.nav-links { list-style:none; display:flex; gap:36px; }
.nav-links a {
  font-size:12px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--navy); position:relative; padding-bottom:3px;
  transition:color .2s;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--red);
  transition:width .25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }
.nav-links a:hover, .nav-links a.active { color:var(--red); }

.nav-toggle {
  display:none; background:none; border:none; cursor:pointer;
  padding:4px; flex-direction:column; gap:5px;
}
.nav-toggle span { display:block; width:22px; height:2px; background:var(--navy); }

/* ─── NAV RIGHT (lang toggle + hamburger) ─────────────────── */
.nav-right {
  display:flex; align-items:center; gap:10px;
}

/* ─── LANGUAGE TOGGLE ──────────────────────────────────────── */
/* Default: EN content hidden (ES is default language) */
[data-lang="en"] { display:none; }

.lang-toggle {
  background:none; border:1px solid rgba(27,42,74,.20);
  border-radius:4px; cursor:pointer;
  font-family:var(--font); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); padding:4px 8px;
  display:flex; align-items:center; gap:3px;
  transition:border-color .2s, opacity .2s;
}
.lang-toggle:hover { border-color:rgba(27,42,74,.45); }
.lang-toggle .lt-sep { opacity:.30; }
.lang-toggle .lt-es,
.lang-toggle .lt-en  { opacity:.35; transition:opacity .2s; }

.nav-dark .lang-toggle {
  color:var(--cream);
  border-color:rgba(245,237,216,.25);
}
.nav-dark .lang-toggle:hover { border-color:rgba(245,237,216,.55); }

/* nav on dark backgrounds */
.nav-dark {
  background:rgba(27,42,74,.97);
  border-bottom-color:rgba(245,237,216,.08);
  backdrop-filter:blur(8px);
}
.nav-dark .nav-logo,
.nav-dark .nav-links a { color:var(--cream); }
.nav-dark .nav-links a:hover,
.nav-dark .nav-links a.active { color:var(--red); }
.nav-dark .nav-toggle span { background:var(--cream); }

@media(max-width:768px){
  .nav { padding:0 24px; }
  .nav-toggle { display:flex; }
  .nav-links {
    display:none; position:fixed; top:var(--nav-h); left:0; right:0;
    background:var(--white); flex-direction:column; gap:0;
    border-bottom:1px solid rgba(27,42,74,.1); padding:8px 0;
  }
  .nav-links.open { display:flex; }
  .nav-links.dark-dropdown { background:var(--navy); border-bottom-color:rgba(245,237,216,.1); }
  .nav-links.dark-dropdown a { color:var(--cream); }
  .nav-links li { width:100%; }
  .nav-links a { display:block; padding:14px 24px; }
  .nav-links a::after { display:none; }
}

/* ─── HOME HERO ────────────────────────────────────────────── */
.hero {
  position:relative; height:100vh; min-height:620px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:80px 56px;
  /* Dramatic gradient fallback — replaced once atlas.jpg exists */
  background:
    radial-gradient(ellipse 80% 60% at 65% 20%, rgba(80,100,150,.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 15% 100%, rgba(179,27,27,.18) 0%, transparent 60%),
    var(--navy);
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  /* ─ Para ver tu foto: guarda el archivo como  images/atlas.jpg  (mín. 1600px ancho) ─ */
  background-image:url('images/atlas.jpg');
  background-size:cover; background-position:center 20%;
  filter:grayscale(100%) contrast(1.05);
  opacity:.65;
}
/* Geometric texture — visible only when atlas.jpg is missing */
.hero-bg-fallback {
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent 0px,
      transparent 38px,
      rgba(255,255,255,.025) 38px,
      rgba(255,255,255,.025) 39px
    ),
    repeating-linear-gradient(
      35deg,
      transparent 0px,
      transparent 58px,
      rgba(255,255,255,.018) 58px,
      rgba(255,255,255,.018) 59px
    );
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(27,42,74,.90) 0%,
    rgba(27,42,74,.30) 55%,
    rgba(27,42,74,.10) 100%
  );
}
.hero-content { position:relative; z-index:2; max-width:var(--max-w); }
.hero-name {
  font-size:clamp(52px,7vw,96px);
  font-weight:700; letter-spacing:-.02em;
  color:var(--white); line-height:1.0;
  margin-bottom:28px;
}
.hero-tagline {
  font-size:clamp(16px,1.5vw,19px);
  font-weight:400; color:rgba(255,255,255,.80);
  max-width:560px; line-height:1.70;
}

/* PILLARS */
.pillars { background:var(--white); padding:88px 56px; }
.pillars-inner { max-width:var(--max-w); margin:0 auto; }
.pillars-label {
  font-size:11px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(27,42,74,.35);
  margin-bottom:48px;
}
.pillars-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:48px;
}
.pillar { border-top:2px solid var(--red); padding-top:24px; }
.pillar-title {
  font-size:clamp(22px,2.4vw,30px); font-weight:700;
  color:var(--red); letter-spacing:-.01em; line-height:1.2;
  margin-bottom:14px;
}
.pillar-desc {
  font-size:15px; color:rgba(27,42,74,.65); line-height:1.70;
}

@media(max-width:768px){
  .hero { padding:60px 24px; }
  .pillars { padding:64px 24px; }
  .pillars-grid { grid-template-columns:1fr; gap:36px; }
}

/* ─── ESSAYS PAGE ──────────────────────────────────────────── */
.essays-hero {
  background:var(--navy);
  padding:calc(var(--nav-h) + 88px) 56px 56px;
}
.essays-hero-inner { max-width:var(--max-w); margin:0 auto; }
.essays-hero h1 {
  font-size:clamp(40px,5.5vw,80px); font-weight:700;
  color:var(--white); letter-spacing:-.02em; line-height:1.0;
}
.essays-body {
  background:var(--navy); padding:0 56px 100px;
}
.essays-inner { max-width:var(--max-w); margin:0 auto; }
.essays-folder { margin-bottom:72px; }
.folder-label {
  font-size:11px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(245,237,216,.38);
  margin-bottom:20px; padding-bottom:16px;
  border-bottom:1px solid rgba(245,237,216,.10);
}
.essay-card {
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 28px;
  background:rgba(245,237,216,.05);
  border:1px solid rgba(245,237,216,.10);
  margin-bottom:10px;
  transition:background .2s, border-color .2s;
  cursor:pointer;
}
.essay-card:hover {
  background:rgba(245,237,216,.11);
  border-color:rgba(245,237,216,.22);
}
.essay-card:hover .essay-card-title { color:var(--white); }
.essay-card-title {
  font-size:clamp(16px,1.7vw,20px); font-weight:500;
  color:var(--cream); line-height:1.3; transition:color .2s;
}
.essay-card-arrow {
  font-size:18px; color:rgba(245,237,216,.25);
  transition:color .2s, transform .2s; flex-shrink:0; margin-left:16px;
}
.essay-card:hover .essay-card-arrow {
  color:rgba(245,237,216,.7); transform:translateX(4px);
}

@media(max-width:768px){
  .essays-hero { padding:calc(var(--nav-h)+60px) 24px 40px; }
  .essays-body { padding:0 24px 80px; }
  .essay-card { padding:18px 20px; }
}

/* ─── INDIVIDUAL ESSAY ─────────────────────────────────────── */
.essay-page {
  background:var(--white); min-height:100vh;
  padding:calc(var(--nav-h) + 64px) 56px 120px;
}
.essay-page-inner { max-width:var(--read-w); margin:0 auto; }
.back-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(27,42,74,.40);
  margin-bottom:64px; transition:color .2s;
}
.back-link:hover { color:var(--red); }
.essay-category {
  font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin-bottom:16px;
}
.essay-page h1 {
  font-size:clamp(30px,3.8vw,48px); font-weight:700;
  color:var(--navy); letter-spacing:-.02em; line-height:1.15;
  margin-bottom:48px; padding-bottom:40px;
  border-bottom:1px solid rgba(27,42,74,.09);
}
.essay-body p { margin-bottom:24px; color:rgba(27,42,74,.82); }
.essay-body p:first-child::first-letter {
  font-size:72px; font-weight:700; float:left;
  line-height:.80; margin-right:8px; margin-top:8px;
  color:var(--navy);
}
.essay-body blockquote {
  border-left:3px solid var(--red);
  margin:44px 0; padding:4px 28px;
  font-size:20px; font-style:italic;
  color:rgba(27,42,74,.65); line-height:1.65;
}

@media(max-width:768px){
  .essay-page { padding:calc(var(--nav-h)+40px) 24px 80px; }
  .back-link { margin-bottom:40px; }
}

/* ─── PRINCIPLES ───────────────────────────────────────────── */
.principles-page {
  background:var(--cream); min-height:100vh;
  padding:calc(var(--nav-h) + 88px) 56px 120px;
}
.principles-inner { max-width:var(--max-w); margin:0 auto; }
.principles-intro { max-width:560px; margin-bottom:80px; }
.principles-intro h1 {
  font-size:clamp(36px,4.5vw,64px); font-weight:700;
  color:var(--red); letter-spacing:-.02em; line-height:1.05;
  margin-bottom:20px;
}
.principles-intro p {
  font-size:18px; color:rgba(27,42,74,.65); line-height:1.70;
}
.principles-list { list-style:none; }
.principles-list li {
  display:flex; align-items:baseline; gap:24px;
  padding:28px 0;
  border-top:1px solid rgba(27,42,74,.10);
  font-size:clamp(18px,2vw,26px); font-weight:600;
  color:var(--navy); letter-spacing:-.01em; line-height:1.3;
}
.principles-list li:last-child { border-bottom:1px solid rgba(27,42,74,.10); }
.p-num {
  font-size:11px; font-weight:700; color:var(--red);
  letter-spacing:.12em; min-width:26px; flex-shrink:0;
}

@media(max-width:768px){
  .principles-page { padding:calc(var(--nav-h)+60px) 24px 80px; }
  .principles-list li { gap:16px; font-size:18px; }
}

/* ─── WORK ─────────────────────────────────────────────────── */
.work-page {
  background:var(--red); min-height:100vh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 60px) 56px 100px;
}
.work-inner { max-width:var(--max-w); margin:0 auto; width:100%; }
.work-inner h1 {
  font-size:clamp(36px,4.5vw,68px); font-weight:700;
  color:var(--cream); letter-spacing:-.02em; line-height:1.05;
  margin-bottom:40px; max-width:700px;
}
.work-inner p {
  font-size:clamp(17px,1.7vw,21px); color:rgba(245,237,216,.82);
  max-width:620px; line-height:1.80; margin-bottom:56px;
}
.work-link {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--cream);
  padding:16px 32px; border:1.5px solid rgba(245,237,216,.45);
  transition:background .2s, border-color .2s;
}
.work-link:hover { background:rgba(245,237,216,.10); border-color:var(--cream); }

@media(max-width:768px){
  .work-page { padding:calc(var(--nav-h)+60px) 24px 80px; }
}

/* ─── READING ──────────────────────────────────────────────── */
.reading-page {
  background:var(--navy); min-height:100vh;
  padding:calc(var(--nav-h) + 88px) 56px 120px;
}
.reading-inner { max-width:var(--max-w); margin:0 auto; }
.reading-inner h1 {
  font-size:clamp(36px,4.5vw,64px); font-weight:700;
  color:var(--cream); letter-spacing:-.02em; line-height:1.05;
  margin-bottom:16px;
}
.reading-intro {
  font-size:18px; color:rgba(245,237,216,.50);
  margin-bottom:72px; max-width:460px; line-height:1.65;
}
.reading-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:2px;
}
.reading-item {
  padding:32px 26px;
  background:rgba(245,237,216,.04);
  border:1px solid rgba(245,237,216,.07);
  transition:background .2s;
}
.reading-item:hover { background:rgba(245,237,216,.09); }
.reading-author {
  font-size:clamp(16px,1.5vw,18px); font-weight:600;
  color:var(--cream); line-height:1.3; margin-bottom:6px;
}
.reading-note {
  font-size:13px; color:rgba(245,237,216,.38); line-height:1.5;
}

@media(max-width:768px){
  .reading-page { padding:calc(var(--nav-h)+60px) 24px 80px; }
  .reading-grid { grid-template-columns:1fr 1fr; }
}

/* ─── CONTACT ──────────────────────────────────────────────── */
.contact-page {
  background:var(--cream); min-height:100vh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 80px) 56px 100px;
}
.contact-inner { max-width:var(--max-w); margin:0 auto; width:100%; }
.contact-inner h1 {
  font-size:clamp(40px,5.5vw,80px); font-weight:700;
  color:var(--navy); letter-spacing:-.02em; line-height:1.0;
  margin-bottom:72px;
}
.contact-links { display:flex; flex-direction:column; gap:40px; }
.contact-item { display:flex; flex-direction:column; gap:8px; }
.contact-label {
  font-size:11px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(27,42,74,.35);
}
.contact-value {
  font-size:clamp(18px,1.9vw,24px); font-weight:500; color:var(--navy);
}
a.contact-value { transition:color .2s; }
a.contact-value:hover { color:var(--red); }

@media(max-width:768px){
  .contact-page { padding:calc(var(--nav-h)+60px) 24px 80px; }
}

/* ─── FOOTER ──────────────────────────────────────────────── */
.site-footer {
  background: var(--navy);
  padding: 56px 56px 40px;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-col-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream); margin-bottom: 16px;
}
.footer-col p,
.footer-col a {
  font-size: 14px; color: rgba(245,237,216,.55);
  line-height: 1.9; display: block;
  transition: color .2s;
}
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
  max-width: var(--max-w); margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(245,237,216,.10);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-copy { font-size: 13px; color: rgba(245,237,216,.30); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a {
  font-size: 13px; color: rgba(245,237,216,.30); transition: color .2s;
}
.footer-legal a:hover { color: rgba(245,237,216,.7); }
@media(max-width:768px){
  .site-footer { padding: 48px 24px 32px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}