/*
Theme Name: Con Razón
Theme URI: https://somosconrazon.com
Author: Con Razón
Description: Theme editorial para Con Razón — historias, negocios y decisiones detrás de lo que ya conoces.
Version: 2.0.0
Requires PHP: 7.4
Text Domain: con-razon
*/

:root{
  --paper:#EFEAE0;
  --paper-deep:#E6DFCE;
  --surface:#FAF7F0;
  --surface-2:#F2ECDF;
  --ink:#17130D;
  --ink-soft:#5C543F;
  --ink-faint:#8F866E;
  --rule:#DCD3BC;
  --brand:#3D3480;
  --brand-bg:#E2DEF5;
  --flash:#B8631A;
  --flash-bg:#F3E0C4;
  --shadow-sm:0 1px 3px rgba(23,19,13,.06);
  --shadow:0 8px 28px rgba(23,19,13,.10);
  --shadow-lg:0 18px 48px rgba(23,19,13,.14);
  --font-display:'Fraunces',Georgia,"Iowan Old Style",serif;
  --font-serif:'Source Serif 4',Georgia,"Iowan Old Style",serif;
  --font-sans:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141019; --paper-deep:#100D16; --surface:#1D1826; --surface-2:#241E30;
    --ink:#EEE9DE; --ink-soft:#B7AD9B; --ink-faint:#79705F;
    --rule:#332C41;
    --brand:#A398F0; --brand-bg:#2A2340;
    --flash:#E8A23D; --flash-bg:#3A2A12;
    --shadow-sm:0 1px 3px rgba(0,0,0,.3);
    --shadow:0 10px 30px rgba(0,0,0,.4);
    --shadow-lg:0 22px 54px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-sans); line-height:1.6; font-size:17px;
}
a{color:var(--brand); text-decoration:none;}
a:hover{color:var(--flash);}
img{max-width:100%; height:auto; display:block;}
.screen-reader-text{position:absolute; left:-9999px;}
::selection{background:var(--flash); color:#1A1200;}

/* ---- layout shell ---- */
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
.wrap-narrow{max-width:780px; margin:0 auto; padding:0 28px;}
.section-label{
  font-family:var(--font-sans); font-size:12.5px; text-transform:uppercase; letter-spacing:.1em;
  font-weight:800; color:var(--ink-faint); margin:0 0 22px; padding-top:8px;
}

/* ---- header ---- */
.site-header{
  border-bottom:1px solid transparent;
  padding:24px 0;
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  transition:box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); border-bottom-color:var(--rule); }
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.site-logo{
  font-family:var(--font-display); font-weight:600; font-size:22px; letter-spacing:-.005em;
  color:var(--ink); text-decoration:none; display:flex; align-items:baseline; gap:2px;
}
.site-logo em{ font-style:italic; font-weight:500; color:var(--flash); }
.primary-nav ul{list-style:none; display:flex; gap:8px; margin:0; padding:0; flex-wrap:wrap;}
.primary-nav a{
  font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft);
  text-transform:uppercase; padding:8px 12px; border-radius:20px; transition:color .15s, background .15s;
}
.primary-nav a:hover{color:var(--ink); background:var(--surface-2);}

/* ---- hero ---- */
.hero{padding:76px 0 8px;}
.hero .kicker{
  font-family:var(--font-sans); font-size:12.5px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--flash); font-weight:800; margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.hero .kicker::before{content:""; width:26px; height:1.5px; background:var(--flash);}
.hero h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(34px,5.4vw,60px); line-height:1.06;
  letter-spacing:-.015em; margin:0 0 22px; max-width:16ch; text-wrap:balance;
}
.hero .hero-sub{color:var(--ink-soft); font-size:19px; line-height:1.55; max-width:52ch; margin:0 0 8px; font-family:var(--font-serif);}

/* ---- featured card ---- */
.featured-card{
  display:block; margin:44px 0 0; padding:40px 44px; border-radius:18px;
  background:linear-gradient(155deg, var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--rule); box-shadow:var(--shadow);
  border-left:5px solid var(--catc, var(--brand));
  transition:transform .25s ease, box-shadow .25s ease;
  color:var(--ink);
}
.featured-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); color:var(--ink); }
.featured-card-thumb{
  margin:-40px -44px 20px; border-radius:18px 18px 0 0; overflow:hidden;
  border-bottom:1px solid var(--rule); height:120px;
}
.featured-card-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:640px){ .featured-card-thumb{ height:100px; } }
@media (max-width:640px){ .featured-card-thumb{ margin:-28px -24px 22px; } }

.featured-eyebrow{
  font-family:var(--font-sans); font-size:11.5px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-faint); font-weight:800; margin-bottom:14px;
}
.featured-card h2{
  font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3.4vw,38px); line-height:1.16;
  margin:14px 0 14px; max-width:22ch; text-wrap:balance; color:var(--ink);
}
.featured-card p{color:var(--ink-soft); font-size:17px; font-family:var(--font-serif); max-width:60ch; margin:0 0 18px;}
.featured-cta{
  font-family:var(--font-sans); font-weight:800; font-size:14px; color:var(--catc,var(--brand));
  display:inline-flex; align-items:center; gap:6px;
}
@media (prefers-color-scheme: dark){ .featured-cta{ color:var(--catc-dark,var(--brand)); } }

/* ---- category pill ---- */
.cat-pill{
  display:inline-block; font-family:var(--font-sans); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; font-weight:800; padding:5px 12px; border-radius:20px;
  color:var(--catc,var(--brand)); background:color-mix(in srgb, var(--catc,var(--brand)) 15%, var(--surface));
}
@media (prefers-color-scheme: dark){
  .cat-pill{ color:var(--catc-dark,var(--brand)); background:color-mix(in srgb, var(--catc-dark,var(--brand)) 22%, var(--surface)); }
}

/* ---- post grid / cards ---- */
.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px;
  padding:36px 0 60px;
}
.post-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:26px 26px 28px; display:flex; flex-direction:column; gap:13px;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  opacity:0; transform:translateY(14px); animation:conrazon-rise .5s ease forwards;
}
@keyframes conrazon-rise{ to{ opacity:1; transform:translateY(0); } }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--catc,var(--brand)) 40%, var(--rule)); }
.post-card:nth-child(1){animation-delay:.02s}
.post-card:nth-child(2){animation-delay:.07s}
.post-card:nth-child(3){animation-delay:.12s}
.post-card:nth-child(4){animation-delay:.17s}
.post-card:nth-child(5){animation-delay:.22s}
.post-card:nth-child(6){animation-delay:.27s}
.post-card-thumb{
  display:block; margin:-26px -26px 4px; border-radius:14px 14px 0 0; overflow:hidden;
  border-bottom:1px solid var(--rule); height:120px;
}
.post-card-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;}
.post-card:hover .post-card-thumb img{transform:scale(1.04);}
.post-card .cat-pill{align-self:flex-start;}
.post-card h2{font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.24; margin:0;}
.post-card h2 a{color:var(--ink);}
.post-card h2 a:hover{color:var(--catc,var(--flash));}
.post-card .excerpt{color:var(--ink-soft); font-size:15px; line-height:1.6; margin:0; font-family:var(--font-serif);}
.post-card .meta{font-size:12.5px; color:var(--ink-faint); margin-top:auto; padding-top:8px; display:flex; gap:10px; align-items:center;}
.empty-state{padding:70px 24px; text-align:center; color:var(--ink-soft); font-family:var(--font-serif); font-size:18px;}

/* ---- single article ---- */
.article-head{padding:64px 0 34px; border-bottom:1px solid var(--rule);}
.article-head h1{
  font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4.6vw,48px); line-height:1.12;
  margin:20px 0 18px; max-width:20ch; letter-spacing:-.01em; text-wrap:balance;
}
.article-head .excerpt{color:var(--ink-soft); font-size:19px; font-family:var(--font-serif); max-width:62ch; margin:0 0 22px;}
.article-head .meta{
  font-size:13px; color:var(--ink-faint); display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  font-family:var(--font-sans); font-weight:600;
}
.article-head .meta .dot{opacity:.5;}

.article-cover{
  margin:36px auto 0; border-radius:16px; overflow:hidden; border:1px solid var(--rule);
  box-shadow:var(--shadow); border-top:4px solid var(--catc,var(--brand));
  aspect-ratio:16/9; max-height:420px;
}
.article-cover img{width:100%; height:100%; object-fit:cover; display:block;}

.article-body{
  font-family:var(--font-serif); font-size:20px; line-height:1.75; color:var(--ink);
  max-width:68ch; margin:0 auto; padding:48px 28px 0;
}
.article-body > p:first-of-type::first-letter{
  font-family:var(--font-display); font-weight:700; font-size:64px; line-height:.78; float:left;
  padding:6px 10px 0 0; color:var(--catc,var(--flash));
}
.article-body p{margin:0 0 22px;}
.article-body h2{
  font-family:var(--font-sans); font-size:13px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--catc,var(--brand)); margin:42px 0 14px; font-weight:800;
}
.article-body h3{font-family:var(--font-display); font-size:25px; font-weight:600; margin:34px 0 14px;}
.article-body blockquote{
  border-left:3px solid var(--catc,var(--flash)); padding:4px 0 4px 22px; margin:32px 0;
  font-style:italic; color:var(--ink-soft); font-size:21px; font-family:var(--font-display); font-weight:500;
}
.article-body ul, .article-body ol{padding-left:24px; margin:0 0 22px;}
.article-body li{margin-bottom:8px;}
.article-body a{text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px;}
.article-body figure{margin:34px 0;}
.article-body figcaption{font-family:var(--font-sans); font-size:13px; color:var(--ink-faint); margin-top:8px; text-align:center;}

.confidence-badge{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-size:12.5px; font-weight:800;
  color:#2E7D5B; background:#DCEDE3; padding:5px 13px; border-radius:20px;
}
@media (prefers-color-scheme: dark){ .confidence-badge{ background:#173023; color:#7FD9AE; } }

.article-footer{max-width:68ch; margin:0 auto; padding:44px 28px 80px;}
.share-row{display:flex; gap:12px; flex-wrap:wrap; padding:26px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin:40px 0;}
.share-row a{
  font-family:var(--font-sans); font-size:13px; font-weight:700; color:var(--ink-soft); background:var(--surface);
  border:1px solid var(--rule); padding:9px 18px; border-radius:20px; transition:.15s;
}
.share-row a:hover{color:var(--brand); border-color:var(--brand); background:var(--brand-bg);}
.back-home{font-family:var(--font-sans); font-size:14px; font-weight:700;}

/* ---- page ---- */
.page-content{
  font-family:var(--font-serif); font-size:20px; line-height:1.75; max-width:66ch; margin:0 auto; padding:64px 28px 90px;
}
.page-content h1{font-family:var(--font-display); font-size:40px; font-weight:600; margin:0 0 28px;}
.page-content p{margin:0 0 22px;}

/* ---- archive header ---- */
.archive-head{padding:60px 0 14px; border-bottom:1px solid var(--rule); margin-bottom:8px;}
.archive-head .eyebrow{font-family:var(--font-sans); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--catc,var(--flash)); font-weight:800;}
.archive-head h1{font-family:var(--font-display); font-weight:600; font-size:36px; margin:12px 0 10px;}
.archive-head p{color:var(--ink-soft); max-width:60ch; font-family:var(--font-serif); font-size:17px;}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--rule); padding:54px 0 40px; margin-top:30px; background:var(--paper-deep);}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap;}
.footer-brand-block .footer-brand{font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--ink);}
.footer-trust{font-family:var(--font-serif); font-size:14.5px; color:var(--ink-soft); margin-top:8px; max-width:34ch;}
.footer-social{display:flex; gap:10px; list-style:none; margin:0; padding:0; flex-wrap:wrap;}
.footer-social a{
  font-family:var(--font-sans); font-size:13px; font-weight:700; color:var(--ink-soft); text-transform:uppercase;
  letter-spacing:.03em; border:1px solid var(--rule); padding:8px 16px; border-radius:20px; display:inline-block;
}
.footer-social a:hover{color:var(--brand); border-color:var(--brand);}
.footer-copy{font-family:var(--font-sans); font-size:12.5px; color:var(--ink-faint); width:100%; margin-top:32px; padding-top:24px; border-top:1px solid var(--rule);}

/* ---- 404 ---- */
.not-found{padding:100px 24px; text-align:center;}
.not-found h1{font-family:var(--font-display); font-size:46px; font-weight:600; margin:0 0 16px;}
.not-found p{color:var(--ink-soft); margin:0 0 26px; font-family:var(--font-serif); font-size:18px;}

@media (max-width:640px){
  .featured-card{padding:28px 24px;}
  .article-body, .page-content{font-size:18px;}
  .article-body > p:first-of-type::first-letter{font-size:50px;}
}