/* =========================================================
   Blog — índice y artículos (usa los tokens de site.css)
   ========================================================= */

.eyebrow{display:inline-flex; align-items:center; gap:12px; font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--pink-text);}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.7;}

/* ---------- Índice ---------- */
.blog-hero{padding:72px 0 40px; background:linear-gradient(180deg, var(--header) 0%, var(--cream) 100%);}
.blog-hero .container{max-width:820px; display:flex; flex-direction:column; gap:16px;}
.blog-hero h1{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(32px, 2vw + 22px, 52px); line-height:1.12;}
.blog-hero p{font-size:17px; max-width:600px;}
.blog-list{padding:24px 0 96px;}
.post-grid{display:grid; gap:28px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); margin-bottom:72px;}
.post-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease;}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft);}
.post-card-img{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--beige);}
.post-card-img img{width:100%; height:100%; object-fit:cover; object-position:50% 25%; transition:transform .6s ease;}
.post-card:hover .post-card-img img{transform:scale(1.03);}
.post-card-body{padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.post-cat{font-family:var(--font-ui); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-text);}
.post-card h2{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:23px; line-height:1.25;}
.post-card h2 a:hover{color:var(--pink-text);}
.post-card p{font-size:15px;}
.post-more{margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pink-text);}
.post-more svg{width:16px; height:16px; transition:transform .25s ease;}
.post-card:hover .post-more svg{transform:translateX(4px);}

/* ---------- Artículo ---------- */
.post{max-width:760px; margin:0 auto; padding:56px max(22px, env(safe-area-inset-right, 0px)) 96px max(22px, env(safe-area-inset-left, 0px));}
.post-head{display:flex; flex-direction:column; gap:14px; margin-bottom:32px;}
.post-back{display:inline-flex; align-items:center; min-height:44px; font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--meta); align-self:flex-start;}
.post-back:hover{color:var(--pink-text);}
.post-head h1{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(30px, 1.8vw + 22px, 46px); line-height:1.15;}
.post-lede{font-size:19px; line-height:1.6; color:var(--ink-strong);}
.post-by{display:flex; align-items:center; gap:12px; font-size:14px; color:var(--meta);}
.post-by img{width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 22%;}
.post-hero{margin:0 0 40px; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; background:var(--beige);}
.post-hero img{width:100%; height:100%; object-fit:cover; object-position:50% 25%;}

.post-body{font-size:17px; line-height:1.85;}
.post-body > * + *{margin-top:18px;}
.post-body h2{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(24px, .8vw + 20px, 30px); line-height:1.25; margin-top:44px;}
.post-body h3{font-family:var(--font-ui); font-size:16px; font-weight:600; margin-top:28px;}
.post-body ul, .post-body ol{padding-left:22px;}
.post-body ul{list-style:disc;}
.post-body ol{list-style:decimal;}
.post-body li{margin-bottom:8px;}
.post-body li::marker{color:var(--pink);}
.post-body strong{color:var(--ink-strong);}
.post-body blockquote{margin:32px 0; padding:4px 0 4px 26px; border-left:2px solid var(--pink); font-family:var(--font-display); font-style:italic; font-size:clamp(21px, .6vw + 18px, 25px); line-height:1.45; color:var(--ink-strong);}
.matrix{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0;}
.matrix > div{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 18px 16px;}
.matrix > div:nth-child(2){background:var(--blush); border-color:var(--pink-soft);}
.matrix strong{display:block; font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pink-text); margin-bottom:6px;}
.matrix p{font-size:15px; line-height:1.6;}
@media (max-width:560px){ .matrix{grid-template-columns:1fr;} }

.post-cta{margin:56px 0 40px; padding:36px 32px; border-radius:28px; background:#3F3A3C; color:rgba(255,236,244,.86); display:flex; flex-direction:column; align-items:flex-start; gap:14px; position:relative; overflow:hidden;}
.post-cta::before{content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(227,154,184,.26) 0%, rgba(227,154,184,0) 68%); top:-200px; right:-140px;}
.post-cta > *{position:relative;}
.post-cta .eyebrow{color:var(--pink-card);}
.post-cta h2{font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(26px, 1vw + 21px, 34px); color:var(--white);}
.post-cta p{max-width:520px;}
.post-cta .btn{margin-top:6px;}
.post-cta-meta{font-family:var(--font-ui); font-size:12px; letter-spacing:.06em; color:rgba(255,236,244,.7);}

.author{display:flex; gap:18px; align-items:center; padding:24px; border-radius:var(--radius); background:var(--white); border:1px solid var(--line); margin-bottom:48px;}
.author img{width:80px; height:80px; border-radius:50%; object-fit:cover; object-position:50% 22%; flex:none;}
.author strong{font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--ink-strong);}
.author p{font-size:14.5px; margin-top:4px;}

.post-related h2{font-family:var(--font-ui); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--meta); margin-bottom:14px;}
.post-related ul{display:grid; gap:12px;}
.post-related a{display:flex; flex-direction:column; gap:4px; padding:18px 20px; border-radius:var(--radius-sm); background:var(--white); border:1px solid var(--line); font-family:var(--font-display); font-style:italic; font-size:19px; line-height:1.3; color:var(--ink-strong); transition:border-color .2s ease;}
.post-related a:hover{border-color:var(--pink-card);}
.post-related span{font-family:var(--font-ui); font-style:normal; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--pink-text);}

/* Reveal sin JS: visible por defecto (site.css solo oculta con .js) */