/* ============================================================
   roihombre.com — estilos del blog
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,800;0,9..144,900;1,9..144,600&family=Public+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --paper: #FFFFFF;
  --ink: #14120F;
  --ink-soft: #5C574E;
  --hot: #FF3D1A;
  --hot-deep: #C4290C;
  --sun: #FFD400;
  --rule: #EBE7DE;
  --max: 720px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--sun); color:var(--ink); }

a{ color:inherit; text-decoration:none; }
h1,h2{ font-family:'Fraunces', Georgia, serif; font-weight:800; line-height:1.08; letter-spacing:-.02em; margin:0; }

img{ max-width:100%; display:block; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; }
.prose{ max-width:var(--max); margin:0 auto; padding:0 20px; }

/* ---------- masthead ---------- */

.masthead{ padding:32px 0 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; }
.mark{ width:40px; height:40px; border-radius:50%; background:var(--hot); display:flex; align-items:center; justify-content:center; flex:none; }
.mark span{ font-family:'Fraunces', serif; font-weight:800; color:#fff; font-size:19px; }
.brand-name{ font-family:'Fraunces', serif; font-weight:900; font-size:24px; color:var(--ink); }
.nav-tag{ font-size:13px; font-weight:700; color:var(--ink-soft); }

.masthead.compact .brand-name{ font-size:20px; }
.masthead.compact .nav-tag{ display:none; }

/* ---------- portada: destacado ---------- */

.hero{ padding:16px 0 40px; border-bottom:1px solid var(--rule); }
.hero .wrap{ max-width:var(--max); display:flex; align-items:center; gap:24px; }
.hero-text{ flex:1 1 auto; min-width:0; }

.chat-graphic{ flex:0 0 160px; display:flex; flex-direction:column; gap:8px; }
.bubble{ font-family:'Fraunces', serif; font-weight:600; font-size:14px; padding:10px 16px; border-radius:18px; max-width:88%; line-height:1.3; }
.bubble.q{ align-self:flex-start; background:var(--ink); color:#fff; border-bottom-left-radius:4px; }
.bubble.a{ align-self:flex-end; background:var(--sun); color:var(--ink); border-bottom-right-radius:4px; }
.bubble.a2{ align-self:flex-end; background:var(--hot); border-radius:18px; border-bottom-right-radius:4px; width:56px; height:14px; padding:12px 16px; }

.eyebrow{ display:inline-block; font-size:13px; font-weight:800; color:var(--hot-deep); margin-bottom:14px; position:relative; padding-left:16px; }
.eyebrow::before{ content:''; position:absolute; left:0; top:4px; width:8px; height:8px; border-radius:50%; background:var(--hot); }

.hero h1{ font-size:clamp(28px, 5vw, 40px); margin-bottom:16px; }
h1 mark, .article-head h1 mark{ background:var(--sun); color:var(--ink); padding:0 6px; border-radius:4px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }

.dek{ font-size:18px; color:var(--ink-soft); max-width:56ch; margin-bottom:20px; }
.meta{ font-size:14px; font-weight:600; color:var(--ink-soft); margin-bottom:0; }

.cta{ display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; font-weight:700; font-size:15.5px; padding:13px 24px; border-radius:100px; margin-top:24px; }
.cta:hover, .cta:active{ background:var(--hot); }
.cta.ghost{ background:transparent; color:var(--ink); border:2px solid var(--ink); }
.cta.ghost:hover{ background:var(--ink); color:#fff; }

/* ---------- lista de artículos ---------- */

.archive{ padding:32px 0 56px; }
.archive .wrap{ max-width:var(--max); }
.archive-head{ font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }

.row{ display:flex; align-items:flex-start; gap:16px; padding:20px 0; border-bottom:1px solid var(--rule); }
.row-icon{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; margin-top:2px; }
.row-main{ flex:1; min-width:0; }
.row-tag{ font-size:12px; font-weight:800; color:var(--hot-deep); display:block; margin-bottom:4px; }
.row-title{ font-family:'Fraunces', serif; font-weight:700; font-size:20px; line-height:1.25; display:block; }
.row-excerpt{ font-size:14.5px; color:var(--ink-soft); margin-top:5px; display:block; }
.row-foot{ display:flex; gap:10px; margin-top:8px; font-size:13px; font-weight:600; color:var(--ink-soft); }

.empty-note{ padding:20px 22px; background:#FAF8F4; border:1.5px dashed var(--rule); border-radius:14px; font-size:15px; color:var(--ink-soft); }
.empty-note strong{ color:var(--ink); }

/* ---------- artículo completo ---------- */

.article-head{ padding:32px 0 8px; }
.article-head .prose{ padding:0 20px; }
.article-head h1{ font-size:clamp(28px, 4.6vw, 40px); margin:14px 0 16px; }
.article-head .dek{ font-size:18px; font-style:italic; color:var(--ink-soft); margin-bottom:16px; }

article.body{ padding:8px 0 72px; }
article.body .prose > * + *{ margin-top:1.15em; }

article.body h2{ font-family:'Fraunces', serif; font-weight:800; font-size:25px; color:var(--hot-deep); margin-top:1.8em; margin-bottom:.5em; }
article.body p{ color:var(--ink); }
article.body ul, article.body ol{ padding-left:1.3em; }
article.body li + li{ margin-top:.5em; }
article.body strong{ color:var(--ink); background:linear-gradient(to bottom, transparent 60%, var(--sun) 60%); }

article.body blockquote{
  margin:1.6em 0; padding:18px 22px;
  background:var(--ink); color:#fff;
  border-radius:14px;
  font-family:'Fraunces', serif; font-weight:600; font-style:italic;
  font-size:20px;
}

.ranked{ list-style:none; padding:0; margin:1.6em 0; counter-reset:rank; }
.ranked li{ counter-increment:rank; position:relative; padding:4px 0 4px 46px; margin-top:1.1em !important; }
.ranked li::before{
  content:counter(rank);
  position:absolute; left:0; top:2px;
  width:32px; height:32px; border-radius:50%;
  background:var(--hot); color:#fff;
  font-family:'Fraunces', serif; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}

.article-foot{ padding:28px 0 64px; border-top:1px solid var(--rule); margin-top:40px; }
.article-foot .prose{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.back-link{ font-weight:800; }
.back-link:hover{ color:var(--hot-deep); }

.share{ display:flex; gap:10px; }
.share a{ width:38px; height:38px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; color:#fff; }
.share a:hover{ background:var(--hot); }

/* ---------- footer ---------- */

.site-footer{ border-top:1px solid var(--rule); padding:20px 0; font-size:13px; color:var(--ink-soft); }
.site-footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- página "conversación real" ---------- */

.chatpage-head{ padding:28px 0 20px; text-align:center; }
.chatpage-head p{ color:var(--ink-soft); font-size:15px; max-width:52ch; margin:8px auto 0; }

.chat-thread{ max-width:640px; margin:0 auto; padding:0 20px 72px; display:flex; flex-direction:column; gap:14px; }
.msg{ max-width:78%; padding:14px 18px; border-radius:20px; font-size:15.5px; line-height:1.5; white-space:pre-line; }
.msg.user{ align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:6px; }
.msg.ai{ align-self:flex-start; background:#F2EFE6; color:var(--ink); border-bottom-left-radius:6px; }
.msg.ai strong{ color:var(--hot-deep); }
.chat-note{ text-align:center; font-size:13px; color:var(--ink-soft); background:#FAF8F4; border:1.5px dashed var(--rule); border-radius:14px; padding:14px 18px; margin:0 20px 32px; }

/* ---------- accesibilidad ---------- */

a:focus-visible, button:focus-visible{ outline:3px solid var(--hot-deep); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- móvil ---------- */

@media (max-width:700px){
  .hero .wrap{ flex-direction:column; align-items:stretch; }
  .chat-graphic{ flex-direction:row; flex-wrap:wrap; order:-1; margin-bottom:8px; }
  .bubble{ font-size:12px; padding:8px 12px; max-width:60%; }
}

@media (max-width:480px){
  body{ font-size:16px; }
  .wrap, .prose{ padding:0 16px; }

  .masthead{ padding:20px 0 18px; }
  .brand-name{ font-size:20px; }
  .nav-tag{ display:none; }

  .hero{ padding:8px 0 28px; }
  .dek{ font-size:16px; }
  .cta{ width:100%; justify-content:center; padding:14px 20px; }

  .row-title{ font-size:18px; }
  .row-icon{ width:32px; height:32px; font-size:14px; }

  article.body blockquote{ font-size:18px; padding:16px 18px; }
  .article-foot .prose{ flex-direction:column; align-items:flex-start; }
  .site-footer .wrap{ flex-direction:column; gap:4px; }

  .msg{ max-width:88%; }
}

/* ---------- espacios publicitarios ---------- */

.ad-sidebar{
  position:fixed; top:120px; right:24px; z-index:5;
  display:none;
}
.ad-sidebar img{ border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.12); }

.ad-footer-strip{ padding:36px 0; border-top:1px solid var(--rule); background:#FAF8F4; }
.ad-footer-strip .wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.ad-label{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.ad-row{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.ad-row img{ border-radius:10px; }

@media (min-width:1300px){
  .ad-sidebar{ display:block; }
}
@media (max-width:480px){
  .ad-row{ flex-direction:column; align-items:center; }
  .ad-row img{ max-width:100%; height:auto; }
}

/* ---------- imagen de portada (horizontal) ---------- */
.hero-image{ flex:0 0 260px; }
.hero-image img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px; }

.row-icon img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }

.article-cover{ max-width:var(--max); margin:20px auto 0; padding:0 20px; }
.article-cover img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px; display:block; }

@media (max-width:700px){
  .hero-image{ flex:none; width:100%; order:-1; margin-bottom:8px; }
}