/*
Theme Name: Dr. Jan Lío
Theme URI: https://drliolongevity.com/blog/
Author: Configuración SEO
Description: Tema editorial para el blog del Dr. Jan Lío. Papel para leer, tinta para actuar. Paleta y tipografías heredadas de drliolongevity.com.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drlio
Tags: blog, editorial, one-column, custom-colors
*/

:root{
  --paper:#FCFBF8;
  --paper-2:#F2F0E9;
  --paper-3:#E8E5DA;
  --ink:#0F1B23;
  --ink-deep:#0A141C;
  --ink-2:#3E4E57;
  --ink-3:#717E86;
  --teal:#12806A;
  --teal-br:#1E9E82;
  --gold:#8A6D34;
  --gold-br:#C6A15B;
  --rule:rgba(15,27,35,.10);
  --rule-2:rgba(15,27,35,.20);
  --rule-ink:rgba(244,240,231,.14);
  --serif:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --measure:39rem;
  --wide:68rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:10px; left:10px; z-index:99; background:var(--ink);
  color:var(--paper); padding:12px 18px; width:auto; height:auto; clip:auto;
}

.wrap{max-width:var(--wide); margin:0 auto; padding:0 28px}
.narrow{max-width:var(--measure); margin-left:auto; margin-right:auto}

/* ---------- Cabecera ---------- */
.nav{border-bottom:1px solid var(--rule); background:var(--paper)}
.nav-in{
  max-width:var(--wide); margin:0 auto; padding:20px 28px;
  display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.brand{font-family:var(--serif); font-size:23px; letter-spacing:.01em; text-decoration:none}
.brand b{font-weight:600}
.brand span{color:var(--ink-3); font-weight:500}
.nav-links{display:flex; gap:26px; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--teal)}
.nav-cta{
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  background:var(--ink); color:var(--paper-2); padding:10px 18px; text-decoration:none;
}
.nav-cta:hover{background:var(--teal)}

.eyebrow{font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; font-weight:600; color:var(--gold)}
.eyebrow.teal{color:var(--teal)}
h1,h2,h3{text-wrap:balance; margin:0}

/* ---------- Portadas tipográficas (sin imagen destacada) ---------- */
.cover{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink); display:grid; align-items:end}
.cover::before{content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 78% 8%, var(--c1,rgba(30,158,130,.30)), transparent 62%)}
.cover::after{content:''; position:absolute; left:0; right:0; top:38%; border-top:1px solid rgba(244,240,231,.13)}
.cover-word{
  position:absolute; right:-.06em; top:-.16em; font-family:var(--serif); font-style:italic;
  font-weight:500; font-size:clamp(90px,17vw,168px); line-height:1;
  color:rgba(244,240,231,.09); user-select:none; pointer-events:none;
}
.cover-tag{position:relative; padding:16px 18px; font-size:10px; letter-spacing:.26em; text-transform:uppercase; font-weight:600; color:var(--c2,#8D9AA0)}
.c-salud-metabolica{--c1:rgba(30,158,130,.34); --c2:#5FD3B6}
.c-perdida-de-peso{--c1:rgba(198,161,91,.30); --c2:#DCC08A}
.c-longevidad{--c1:rgba(96,132,163,.32); --c2:#A9C2D8}
.c-hormonas{--c1:rgba(176,110,140,.28); --c2:#D9A6BE}
.c-salud-digestiva{--c1:rgba(30,158,130,.20); --c2:#8D9AA0}

/* ---------- Fotografía: viraje suave que unifica cualquier origen ---------- */
.ph{position:relative; overflow:hidden; background:var(--ink)}
.ph > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.40) saturate(.92) contrast(1.04) brightness(1.03); opacity:.90}
.ph .tint{position:absolute; inset:0;
  background:linear-gradient(158deg, rgba(30,158,130,.20) 0%, rgba(15,27,35,.02) 46%, rgba(10,20,28,.82) 100%)}
.ph.plain .tint{background:linear-gradient(158deg, rgba(30,158,130,.13) 0%, rgba(15,27,35,.01) 52%, rgba(10,20,28,.34) 100%)}
.ph-16{aspect-ratio:16/9}
.ph-1610{aspect-ratio:16/10}
.ph-text{position:absolute; left:0; right:0; bottom:0; padding:30px 30px 28px}
.ph-text .eyebrow{color:var(--gold-br); margin-bottom:12px; display:block}
.ph-text h2{font-family:var(--serif); font-weight:500; color:#F4F0E7;
  font-size:clamp(26px,3.2vw,40px); line-height:1.08; letter-spacing:-.014em; margin:0; max-width:22ch}

/* ---------- Portada del blog ---------- */
.hero{padding:74px 0 46px; border-bottom:1px solid var(--rule)}
.hero h1{font-family:var(--serif); font-weight:500; font-size:clamp(42px,6vw,68px);
  line-height:1.02; letter-spacing:-.015em; margin:14px 0 18px; max-width:16ch}
.hero p{font-size:17.5px; line-height:1.62; color:var(--ink-2); font-weight:300; max-width:46ch; margin:0}

.lead{padding:52px 0; border-bottom:1px solid var(--rule)}
.lead-cover{display:block; text-decoration:none}
.lead-under{display:grid; grid-template-columns:1fr auto; gap:34px; align-items:end; padding-top:20px}
.lead-under p{font-size:16.5px; line-height:1.66; color:var(--ink-2); font-weight:300; margin:0; max-width:56ch}

.meta{font-size:12px; color:var(--ink-3); letter-spacing:.02em; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.meta .dot{width:3px; height:3px; border-radius:50%; background:var(--rule-2)}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:38px 34px; padding:52px 0}
.card{display:flex; flex-direction:column; gap:14px}
.card > a{text-decoration:none; display:flex; flex-direction:column; gap:14px}
.card h3{font-family:var(--serif); font-weight:600; font-size:22.5px; line-height:1.16; letter-spacing:-.006em}
.card p{font-size:14.5px; line-height:1.6; color:var(--ink-2); font-weight:300; margin:0}
.card a:hover h3{color:var(--teal)}

/* ---------- Categoría ---------- */
.cat-head{padding:66px 0 40px; border-bottom:1px solid var(--rule)}
.cat-head h1{font-family:var(--serif); font-weight:500; font-size:clamp(38px,5.4vw,58px); line-height:1.04; letter-spacing:-.015em; margin:14px 0 16px}
.cat-head p{font-size:17px; line-height:1.62; color:var(--ink-2); font-weight:300; max-width:52ch; margin:0}
.cat-layout{display:grid; grid-template-columns:210px 1fr; gap:56px; padding:44px 0 64px}
.rail h4{font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 16px}
.rail ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.rail a{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:9px 0;
  font-size:14.5px; text-decoration:none; color:var(--ink-2); border-bottom:1px solid var(--rule)}
.rail a:hover{color:var(--teal)}
.rail li.current a{color:var(--ink); font-weight:600}
.rail .n{font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}

.rows{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:180px 1fr; gap:26px; align-items:start; padding:26px 0; border-bottom:1px solid var(--rule)}
.row:first-child{padding-top:0}
.row h3{font-family:var(--serif); font-weight:600; font-size:25px; line-height:1.14; letter-spacing:-.008em; margin:0 0 9px}
.row p{font-size:14.5px; line-height:1.62; color:var(--ink-2); font-weight:300; margin:0 0 12px}
.row > a{display:contents; text-decoration:none}
.row a:hover h3{color:var(--teal)}
.pill{display:inline-flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; color:var(--teal); border:1px solid rgba(18,128,106,.3); padding:4px 9px}

/* ---------- Artículo ---------- */
.crumbs{padding:22px 0; font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; border-bottom:1px solid var(--rule)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--teal)}
.crumbs .sep{margin:0 8px; color:var(--rule-2)}

.art-head{padding:46px 0 30px}
.art-head h1{font-family:var(--serif); font-weight:500; font-size:clamp(36px,5.2vw,55px);
  line-height:1.05; letter-spacing:-.016em; margin:14px 0 22px}
.byline{display:flex; align-items:center; gap:14px; padding:20px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.avatar{width:48px; height:48px; border-radius:50%; flex:none; overflow:hidden; background:var(--ink); border:1px solid var(--rule-2)}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.byline .who{font-size:14px; font-weight:500; line-height:1.4}
.byline .who small{display:block; font-size:12px; color:var(--ink-3); font-weight:300; margin-top:2px}
.art-photo{margin:34px 0 0}
.art-photo + .cap{font-size:12.5px; color:var(--ink-3); font-weight:300; margin:10px 0 40px; line-height:1.5}
.art-photo:last-child{margin-bottom:40px}

/* Cuerpo */
.body{font-size:19px; line-height:1.76; color:#1B2A33; font-weight:300; letter-spacing:-.003em}
.body > p{margin:0 0 1.35em}
.body h2{font-family:var(--serif); font-weight:600; font-size:31px; line-height:1.18; letter-spacing:-.01em; margin:2.1em 0 .6em; color:var(--ink)}
.body h3{font-size:16px; font-weight:600; letter-spacing:.02em; margin:1.9em 0 .5em; color:var(--ink)}
.body strong,.body b{font-weight:600; color:var(--ink)}
.body a{color:var(--teal); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.body ul,.body ol{margin:0 0 1.35em; padding-left:1.15em}
.body li{margin-bottom:.5em}
.body ul li::marker{color:var(--gold)}
.body ol li::marker{color:var(--teal); font-weight:600}
.body figure{margin:2em 0}
.body figcaption{font-size:13px; color:var(--ink-3); font-weight:300; margin-top:10px; line-height:1.5}
.body blockquote{
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:28px; line-height:1.3; color:var(--ink);
  border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
  padding:30px 0; margin:2.2em 0;
}
.body blockquote p{margin:0}
.body table{width:100%; border-collapse:collapse; font-size:16px; margin:0 0 1.6em}
.body th,.body td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--rule)}
.body th{font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.body .wp-block-embed{margin:2.2em 0}
.body .wp-block-embed__wrapper{position:relative}
.body .wp-block-embed iframe{width:100%; aspect-ratio:16/9; height:auto; display:block; border:0}
.tablescroll,.body .wp-block-table{overflow-x:auto}

/* Patrones editoriales */
.glance{background:var(--paper-2); border-left:3px solid var(--gold); padding:26px 28px; margin:0 0 2.2em}
.glance > h2,.glance > p:first-child strong{font-family:var(--sans); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 14px; display:block}
.glance ul{margin:0; padding-left:1.1em; font-size:16.5px; line-height:1.62; color:var(--ink-2)}
.glance li{margin-bottom:.55em}
.glance li:last-child{margin-bottom:0}

.ink-block{background:var(--ink); color:#F4F0E7; margin:2.6em 0}
.ink-block .in{padding:34px 32px}
.ink-block h3{font-family:var(--serif); font-weight:600; font-size:25px; line-height:1.2; margin:0 0 6px; color:#F4F0E7}
.ink-block .sub{font-size:13px; color:#8D9AA0; font-weight:300; margin:0 0 20px}
.ink-block p{color:#CFC9BC}
.ink-block a{color:#F4F0E7}
.stamps{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14.5px; font-weight:300; color:#CFC9BC}
.stamps li{display:flex; gap:14px; align-items:baseline; margin:0}
.stamps li::marker{content:''}
.stamps b{color:var(--teal-br); font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; flex:none; min-width:44px}

.tool{display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center}
.tool .k{font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-br); font-weight:600; margin:0 0 10px}
.tool h3{margin:0 0 8px}
.tool p{font-size:14.5px; line-height:1.6; font-weight:300; margin:0; max-width:44ch}
.btn{display:inline-block; white-space:nowrap; text-decoration:none; background:var(--teal-br); color:#04241d!important;
  font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:15px 26px}
.btn:hover{background:#27b89a}
.btn.ghost{background:transparent; color:#F4F0E7!important; border:1px solid rgba(244,240,231,.34)}
.btn.ghost:hover{border-color:var(--teal-br); color:var(--teal-br)!important}

.take{border-top:2px solid var(--ink); padding-top:26px; margin:2.6em 0 0}
.take > h2,.take > p:first-child strong{font-family:var(--sans); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink); font-weight:600; margin:0 0 16px; display:block}
.take ol{margin:0; padding-left:1.2em; font-size:16.5px; line-height:1.64; color:var(--ink-2); font-weight:300}
.take li{margin-bottom:.6em}

.faq{margin:2.6em 0 0}
.faq > h2{font-family:var(--serif); font-weight:600; font-size:29px; margin:0 0 14px}
.faq details{border-bottom:1px solid var(--rule); padding:16px 0}
.faq summary{cursor:pointer; font-size:16.5px; font-weight:500; color:var(--ink); list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--teal); font-size:19px; font-weight:400; flex:none}
.faq details[open] summary::after{content:'\2013'}
.faq details p{font-size:16px; line-height:1.68; color:var(--ink-2); font-weight:300; margin:12px 0 2px; max-width:60ch}

.sources{margin:2.6em 0 0; padding-top:22px; border-top:1px solid var(--rule)}
.sources > h2{font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 14px}
.sources ul{list-style:none; margin:0; padding:0; font-size:13.5px; line-height:1.6}
.sources li{margin-bottom:9px; word-break:break-word}

.disc{margin:2.4em 0 0; padding:20px 22px; background:var(--paper-2);
  font-size:13px; line-height:1.62; color:var(--ink-2); font-weight:300}
.disc b{display:block; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; font-weight:600}

/* Caja de autor */
.author{display:grid; grid-template-columns:96px 1fr; gap:26px; align-items:start;
  background:var(--paper-2); padding:30px 32px; margin:2.6em 0 0}
.author .pic{width:96px; height:96px; border-radius:50%; overflow:hidden; background:var(--ink); border:1px solid var(--rule-2)}
.author .pic img{width:100%; height:100%; object-fit:cover; display:block}
.author h3{font-family:var(--serif); font-weight:600; font-size:24px; margin:0 0 4px; line-height:1.2}
.author .role{font-size:13px; color:var(--ink-3); letter-spacing:.03em; margin:0 0 14px}
.author p.bio{font-size:15px; line-height:1.62; color:var(--ink-2); font-weight:300; margin:0 0 18px; max-width:52ch}
.creds{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.creds li{display:flex; gap:12px; align-items:baseline; font-size:13.5px; line-height:1.5;
  color:var(--ink-2); font-weight:300; padding-top:9px; border-top:1px solid var(--rule)}
.creds li:first-child{border-top:0; padding-top:0}
.creds .st{flex:none; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; padding:3px 8px; margin-top:1px}
.creds .st.done{color:var(--teal); border:1px solid rgba(18,128,106,.32)}
.creds .st.doing{color:var(--gold); border:1px solid rgba(138,109,52,.34)}
.creds b{font-weight:600; color:var(--ink)}
.creds span.inst{display:block; color:var(--ink-3); font-size:12.5px; margin-top:1px}

/* Relacionados */
.rel{border-top:1px solid var(--rule); margin-top:66px; padding:52px 0 0}
.rel h2{font-family:var(--serif); font-weight:600; font-size:27px; margin:0 0 26px}
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.rel-item{display:flex; flex-direction:column; gap:11px; text-decoration:none}
.rel-item h3{font-family:var(--serif); font-weight:600; font-size:19.5px; line-height:1.2}
.rel-item:hover h3{color:var(--teal)}
.kind{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600}
.kind.art{color:var(--ink-3)}
.kind.tool{color:var(--gold)}
.rel-item small{font-size:13px; color:var(--ink-2); font-weight:300; line-height:1.55}

/* Paginación */
.pager{display:flex; gap:10px; justify-content:center; padding:20px 0 70px; flex-wrap:wrap}
.pager .page-numbers{padding:11px 16px; font-size:13px; text-decoration:none; border:1px solid var(--rule-2); color:var(--ink-2)}
.pager .page-numbers.current{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.pager .page-numbers:hover{border-color:var(--teal); color:var(--teal)}

/* Pie */
.foot{background:var(--ink); color:#8D9AA0; margin-top:70px}
.foot-in{max-width:var(--wide); margin:0 auto; padding:44px 28px; display:flex;
  justify-content:space-between; gap:26px; flex-wrap:wrap; font-size:13px; font-weight:300}
.foot a{text-decoration:none}
.foot a:hover{color:var(--teal-br)}
.foot .g{color:var(--gold-br); letter-spacing:.28em; text-transform:uppercase; font-size:10px; font-weight:600; margin-bottom:7px}

/* ---------- Franja de herramientas (portada del blog) ---------- */
.tools-strip{background:var(--paper-2); border-top:1px solid var(--rule); margin-top:10px; padding:56px 0 62px}
.tools-head{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end;
  padding-bottom:30px; border-bottom:1px solid var(--rule-2);
}
.tools-head h2{font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.4vw,38px);
  line-height:1.08; letter-spacing:-.012em; margin:12px 0 0; max-width:18ch}
.tools-head p{font-size:15.5px; line-height:1.62; color:var(--ink-2); font-weight:300; margin:0; max-width:44ch}
.tools-grid{display:grid; grid-template-columns:repeat(3,1fr)}
.tool-item{
  display:block; text-decoration:none; padding:26px 26px 28px;
  border-bottom:1px solid var(--rule); border-right:1px solid var(--rule);
  transition:background .18s;
}
.tools-grid .tool-item:nth-child(3n){border-right:0}
.tools-grid .tool-item:nth-last-child(-n+3){border-bottom:0}
.tool-item:hover{background:var(--paper)}
.tool-item .t{display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--gold); margin-bottom:12px}
.tool-item h3{font-family:var(--serif); font-weight:600; font-size:21px; line-height:1.18; margin:0 0 8px}
.tool-item:hover h3{color:var(--teal)}
.tool-item p{font-size:14px; line-height:1.55; color:var(--ink-2); font-weight:300; margin:0}

@media (max-width:880px){
  .tools-head{grid-template-columns:1fr; gap:16px}
  .tools-grid{grid-template-columns:1fr 1fr}
  .tools-grid .tool-item:nth-child(3n){border-right:1px solid var(--rule)}
  .tools-grid .tool-item:nth-child(2n){border-right:0}
  .tools-grid .tool-item:nth-last-child(-n+3){border-bottom:1px solid var(--rule)}
  .tools-grid .tool-item:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:560px){
  .tools-grid{grid-template-columns:1fr}
  .tools-grid .tool-item{border-right:0!important; border-bottom:1px solid var(--rule)!important}
  .tools-grid .tool-item:last-child{border-bottom:0!important}
}

/* Vacío */
.empty{padding:80px 0 100px; text-align:center}
.empty h2{font-family:var(--serif); font-size:32px; margin-bottom:12px}
.empty p{color:var(--ink-2); font-weight:300}

@media (max-width:880px){
  .lead-under{grid-template-columns:1fr; gap:18px}
  .grid{grid-template-columns:1fr 1fr; gap:34px 26px}
  .cat-layout{grid-template-columns:1fr; gap:34px}
  .rel-grid{grid-template-columns:1fr}
  .row{grid-template-columns:1fr; gap:16px}
  .row > a{display:flex; flex-direction:column; gap:16px}
  .tool{grid-template-columns:1fr; gap:22px}
  .nav-links{display:none}
  .author{grid-template-columns:1fr; gap:18px}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .body{font-size:17.5px}
  .body h2{font-size:26px}
  .body blockquote{font-size:23px}
  .wrap{padding:0 20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}