/* Diario Atelier — estilos compartidos de los artículos y del índice.
   Cada artículo usa un formato distinto (mitos, lista, lookbook, ensayo,
   diccionario, comparativa, línea del tiempo, infografía); aquí viven todos
   para que el índice y las páginas no repitan CSS. Colores por tokens --th-*. */

/* Paleta: sale de los tokens del tema editorial (--ed-*, oscuro) con respaldo
   en los claros (--th-*) por si una página no lleva .page-editorial. */
body{ --post-fg:var(--ed-fg,var(--th-fg)); --post-dim:var(--ed-dim,var(--post-dim)); --post-faint:var(--ed-faint,var(--post-faint));
  --post-line:var(--ed-line,var(--post-line)); --post-card:rgba(var(--th-home-fg-rgb,17,17,17),.035); --post-card-2:rgba(var(--th-home-fg-rgb,17,17,17),.06);
  --post-accent:#c9a27a; --post-soft:rgba(201,162,122,.09); --post-soft-line:rgba(201,162,122,.28); --post-on-accent:var(--ed-bg,#fff); }
body:not(.page-editorial){ --post-accent:#8b5f3d; }
.post{ --post-max:720px; --post-wide:1040px; --post-pad:clamp(16px,4vw,32px); color:var(--post-fg); }
.post-wrap{ max-width:var(--post-max); margin:0 auto; padding:clamp(28px,5vw,64px) var(--post-pad) clamp(48px,8vw,104px); }
.post-wide{ max-width:var(--post-wide); margin-left:auto; margin-right:auto; }

/* Cabecera */
.post-meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--post-dim); font-size:13px; margin-bottom:14px; }
.post-tag{ background:var(--post-soft); color:var(--post-accent); padding:4px 10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.page-editorial .post h1, .post h1{ font-family:var(--th-font-accent); font-weight:300; font-size:clamp(30px,5vw,50px) !important; line-height:1.08; margin:.1em 0 .4em; letter-spacing:.01em; }
.post-lead{ font-family:'Cormorant Garamond',serif; font-size:clamp(20px,2.6vw,25px); line-height:1.45; color:var(--post-dim); margin:0 0 26px; font-weight:400; }

/* "En corto": lo esencial en 20 segundos */
.post-short{ border-left:3px solid var(--post-accent); background:var(--post-soft); padding:16px 20px; margin:0 0 30px; }
.post-short strong{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--post-accent); margin-bottom:8px; }
.post-short ul{ margin:0; padding-left:1.1em; }
.post-short li{ margin:0 0 4px; font-size:15.5px; line-height:1.55; }

/* Imagen principal */
.post-hero{ margin:0 0 34px; }
.post-hero img{ width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover; background:var(--post-card-2); }
.post-hero figcaption, .post-fig figcaption{ font-size:12.5px; color:var(--post-faint); margin-top:8px; letter-spacing:.02em; }

/* Texto */
.post-body{ font-size:17px; line-height:1.75; color:var(--post-fg); }
.post-body h2{ font-family:var(--th-font-accent); font-weight:400; font-size:clamp(21px,3vw,28px) !important; line-height:1.2; margin:40px 0 12px; }
.post-body h3{ font-family:var(--th-font-accent); font-weight:400; font-size:19px !important; margin:26px 0 8px; }
.post-body p{ margin:0 0 16px; }
.post-body a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--post-accent); }
.post-body ul{ padding-left:1.2em; margin:0 0 16px; }
.post-body li{ margin-bottom:6px; }
.post-fig{ margin:26px 0; }
.post-fig img{ width:100%; height:auto; display:block; background:var(--post-card-2); }
.post-note{ font-size:14.5px; color:var(--post-dim); background:var(--post-card-2); border:1px solid var(--post-line); padding:14px 18px; margin:22px 0; }

/* 1 · Mitos y realidades */
.post-myths{ display:grid; gap:14px; margin:26px 0; counter-reset:mito; }
.post-myth{ border:1px solid var(--post-line); background:var(--post-card); display:grid; grid-template-columns:1fr; }
.post-myth > div{ padding:16px 20px; }
.post-myth .m{ background:var(--post-card-2); border-bottom:1px solid var(--post-line); }
.post-myth .m::before{ counter-increment:mito; content:"Mito " counter(mito); }
.post-myth .r::before{ content:"Realidad"; color:var(--post-accent); }
.post-myth .m::before, .post-myth .r::before{ display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; margin-bottom:6px; }
.post-myth .m p{ font-family:'Cormorant Garamond',serif; font-size:21px; line-height:1.3; margin:0; font-style:italic; }
.post-myth .r p{ margin:0; font-size:16px; line-height:1.65; }
html[lang="en"] .post-myth .m::before{ content:"Myth " counter(mito); }
html[lang="en"] .post-myth .r::before{ content:"Fact"; }
@media (min-width:720px){ .post-myth{ grid-template-columns:5fr 7fr; } .post-myth .m{ border-bottom:0; border-right:1px solid var(--post-line); } }

/* 2 · Lista visual numerada */
.post-list{ display:grid; gap:28px; margin:28px 0; }
.post-item{ display:grid; grid-template-columns:1fr; gap:16px; align-items:center; }
.post-item img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--post-card-2); }
.post-item .n{ font-family:var(--th-font-accent); font-size:44px; line-height:1; color:var(--post-accent); display:block; margin-bottom:6px; }
.post-item h3{ margin:0 0 6px; font-size:24px !important; }
.post-item p{ margin:0; font-size:16px; }
@media (min-width:640px){ .post-item{ grid-template-columns:200px 1fr; gap:24px; } .post-item:nth-child(even){ grid-template-columns:1fr 200px; } .post-item:nth-child(even) img{ order:2; } }

/* Calculadora de costo por uso (estática) */
.post-cpw{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--post-line); border:1px solid var(--post-line); margin:20px 0; }
.post-cpw div{ background:var(--post-card); padding:16px 18px; }
.post-cpw b{ display:block; font-family:var(--th-font-accent); font-weight:400; font-size:30px; line-height:1.1; }
.post-cpw span{ font-size:13px; color:var(--post-dim); }
.post-cpw .hl b{ color:var(--post-accent); }

/* 3 · Lookbook */
.post-look{ display:grid; gap:18px; margin:34px 0; grid-template-columns:1fr; }
.post-look figure{ margin:0; }
.post-look img{ width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover; background:var(--post-card-2); }
.post-look figcaption{ padding:12px 0 0; }
.post-look figcaption b{ display:block; font-family:var(--th-font-accent); font-weight:400; font-size:18px; margin-bottom:4px; }
.post-look figcaption span{ font-size:15px; color:var(--post-dim); line-height:1.6; display:block; }
@media (min-width:640px){ .post-look{ grid-template-columns:1fr 1fr; gap:26px; } .post-look .big{ grid-column:1 / -1; } .post-look .big img{ aspect-ratio:16/10; } }

/* 4 · Ensayo con citas grandes */
.post-pull{ font-family:'Cormorant Garamond',serif; font-size:clamp(26px,4vw,38px); line-height:1.2; text-align:center; margin:38px auto; max-width:30ch; color:var(--post-fg); }
.post-pull::before, .post-pull::after{ content:""; display:block; width:40px; height:1px; background:var(--post-accent); margin:0 auto 18px; }
.post-pull::after{ margin:18px auto 0; }
.post-year{ font-family:var(--th-font-accent); font-size:13px; letter-spacing:.2em; color:var(--post-accent); display:block; margin:34px 0 -4px; }
.post-dropcap::first-letter{ font-family:var(--th-font-accent); float:left; font-size:3.4em; line-height:.85; padding:6px 10px 0 0; color:var(--post-accent); }

/* 5 · Diccionario */
.post-dict{ margin:24px 0; border-top:1px solid var(--post-line); }
.post-dict dt{ font-family:var(--th-font-accent); font-size:21px; padding:20px 0 2px; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.post-dict dt small{ font-family:Inter,sans-serif; font-size:12px; color:var(--post-faint); letter-spacing:.08em; font-style:italic; }
.post-dict dd{ margin:0; padding:0 0 20px; border-bottom:1px solid var(--post-line); font-size:16px; line-height:1.7; }

/* 6 · Comparativa de telas */
.post-table-wrap{ overflow-x:auto; margin:24px 0; border:1px solid var(--post-line); -webkit-overflow-scrolling:touch; }
.post-table{ border-collapse:collapse; width:100%; min-width:600px; font-size:14.5px; line-height:1.5; }
.post-table th, .post-table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--post-line); vertical-align:top; }
.post-table thead th{ background:var(--post-soft); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--post-accent); font-weight:600; }
.post-table tbody th{ font-family:var(--th-font-accent); font-weight:400; font-size:16px; white-space:nowrap; }
.post-fabrics{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin:22px 0; }
.post-fabric{ border:1px solid var(--post-line); padding:18px; background:var(--post-card); }
.post-fabric b{ font-family:var(--th-font-accent); font-weight:400; font-size:18px; display:block; margin-bottom:6px; }
.post-fabric span{ font-size:14.5px; color:var(--post-dim); line-height:1.6; display:block; }
.post-fabric .num{ font-family:var(--th-font-accent); font-size:28px; color:var(--post-accent); display:block; margin:4px 0; }

/* 7 · Línea del tiempo */
.post-timeline{ list-style:none; margin:30px 0; padding:0 0 0 26px; border-left:1px solid var(--post-soft-line); }
.post-timeline li{ position:relative; margin:0 0 28px; }
.post-timeline li::before{ content:""; position:absolute; left:-32px; top:6px; width:11px; height:11px; border-radius:50%; background:var(--post-card); border:2px solid var(--post-accent); }
.post-timeline .y{ font-family:var(--th-font-accent); font-size:22px; color:var(--post-accent); display:block; line-height:1.1; }
.post-timeline b{ display:block; font-size:16px; margin:4px 0 4px; }
.post-timeline p{ margin:0; font-size:15.5px; color:var(--post-dim); line-height:1.65; }
.post-timeline img{ width:100%; max-width:420px; height:auto; display:block; margin-top:12px; aspect-ratio:4/5; object-fit:cover; background:var(--post-card-2); }

/* 8 · Infografía de símbolos */
.post-symbols{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin:20px 0 28px; }
.post-symbol{ border:1px solid var(--post-line); background:var(--post-card); padding:16px 12px 14px; text-align:center; }
.post-symbol svg{ width:64px; height:64px; display:block; margin:0 auto 10px; color:var(--post-fg); }
.post-symbol b{ display:block; font-size:14px; margin-bottom:2px; }
.post-symbol span{ display:block; font-size:12.5px; color:var(--post-dim); line-height:1.45; }
.post-family{ display:flex; gap:14px; align-items:center; margin:34px 0 4px; }
.post-family svg{ width:44px; height:44px; flex:0 0 44px; color:var(--post-accent); }
.post-family h2{ margin:0; }
.post-checklist{ counter-reset:paso; list-style:none; padding:0; margin:18px 0; }
.post-checklist li{ counter-increment:paso; position:relative; padding:0 0 12px 40px; }
.post-checklist li::before{ content:counter(paso); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--post-accent); color:var(--post-on-accent); font-size:13px; display:grid; place-items:center; }

/* Fuentes, cierre y relacionados */
.post-sources{ margin:44px 0 0; padding:20px 0 0; border-top:1px solid var(--post-line); }
.post-sources h2{ font-family:var(--th-font-body) !important; font-size:11px !important; letter-spacing:.18em; text-transform:uppercase; color:var(--post-faint); margin:0 0 10px; font-weight:600; }
.post-sources ol{ margin:0; padding-left:1.2em; font-size:13.5px; line-height:1.6; color:var(--post-dim); }
.post-sources li{ margin-bottom:6px; }
.post-sources a{ color:inherit; word-break:break-word; }
.post-cta{ background:var(--post-soft); border:1px solid var(--post-soft-line); padding:26px; margin-top:40px; text-align:center; }
.post-cta h2{ font-family:var(--th-font-accent); font-weight:400; margin:0 0 8px; font-size:22px !important; }
.post-cta p{ margin:0 0 14px; color:var(--post-dim); }
.post-related{ border-top:1px solid var(--post-line); margin-top:52px; padding-top:28px; }
.post-related h2{ font-family:var(--th-font-accent); font-weight:400; font-size:20px !important; margin:0 0 16px; }
.post-related-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.post-related-grid a{ display:block; text-decoration:none; color:inherit; border:1px solid var(--post-line); background:var(--post-card); transition:background .2s ease; }
.post-related-grid a:hover{ background:var(--post-card-2); }
.post-related-grid img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--post-card-2); }
.post-related-grid strong{ font-family:var(--th-font-accent); font-weight:400; display:block; font-size:16px; line-height:1.3; padding:12px 14px 2px; }
.post-related-grid span{ display:block; color:var(--post-dim); font-size:12.5px; padding:0 14px 14px; }

/* ── Índice del diario ───────────────────────────────────────────────── */
.dj-hero{ padding-block:clamp(40px,7vw,80px) clamp(24px,4vw,40px); text-align:center; }
.dj-hero .kicker{ letter-spacing:.22em; text-transform:uppercase; color:var(--post-faint); font-size:12px; margin:0 auto; }
.page-editorial .dj-hero h1, .dj-hero h1{ font-family:var(--th-font-accent); font-weight:400; font-size:clamp(36px,5vw,62px) !important; line-height:1.05; margin:.2em 0 .35em; }
.dj-hero h1, .dj-hero p{ margin-inline:auto; }
.dj-hero p{ color:var(--post-dim); font-size:clamp(15px,2vw,18px); max-width:60ch; margin:0 auto; }
.dj-featured{ display:grid; grid-template-columns:1fr; text-decoration:none; color:inherit; border:1px solid var(--post-line); background:var(--post-card); margin-bottom:clamp(20px,3vw,36px); }
.dj-featured img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:50% 20%; display:block; background:var(--post-card-2); }
.dj-featured .b{ padding:clamp(20px,3vw,40px); display:flex; flex-direction:column; justify-content:center; gap:12px; }
.dj-featured h2{ font-family:var(--th-font-accent); font-weight:400; font-size:clamp(26px,3.4vw,40px) !important; line-height:1.12; margin:0; }
.dj-featured p{ color:var(--post-dim); margin:0; font-size:16px; line-height:1.6; }
@media (min-width:860px){ .dj-featured{ grid-template-columns:7fr 5fr; } .dj-featured--rev{ grid-template-columns:5fr 7fr; margin:0 0 clamp(48px,8vw,96px); } .dj-featured--rev img{ order:2; } .dj-featured img{ aspect-ratio:auto; height:100%; min-height:420px; max-height:560px; } }
.dj-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(18px,2.6vw,32px); padding-bottom:clamp(20px,3vw,36px); }
.dj-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; border:1px solid var(--post-line); background:var(--post-card); transition:transform .2s ease, box-shadow .2s ease; }
.dj-card:hover, .dj-featured:hover{ box-shadow:0 22px 44px rgba(0,0,0,.35); }
.dj-card:hover{ transform:translateY(-3px); }
.dj-card img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--post-card-2); }
.dj-card .b{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.dj-card h2{ font-family:var(--th-font-accent); font-weight:400; font-size:20px !important; line-height:1.25; margin:0; }
.dj-card p{ color:var(--post-dim); font-size:14.5px; line-height:1.55; margin:0; flex:1; }
.dj-tag{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--post-accent); font-weight:600; }
.dj-meta{ color:var(--post-faint); font-size:12px; }
.dj-format{ font-size:11px; color:var(--post-faint); letter-spacing:.06em; }
.page-editorial .dj-hero h1{ margin-left:auto !important; margin-right:auto !important; }