/*
Theme Name: Yo Soy Otra
Theme URI: https://yosoyotra.com
Author: M the Agency
Author URI: https://mtheagency.es
Description: Tema a medida para «Yo soy otra», el blog de escritura de Mía García. Oscuro, editorial y pensado para textos largos.
Version: 2.12.1
Requires at least: 6.0
Tested up to: 6.8
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: yo-soy-otra
Tags: blog, dark, editorial, one-column, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root{
  --ink:#0C0A08;            /* warm black ground */
  --ink-2:#0A0806;          /* alternate band */
  --ink-3:#080605;          /* footer */
  --field:#120E0A;          /* form fields */
  --cream:#EFE7DA;          /* primary text */
  --cream-soft:#C6B9AC;     /* lead paragraphs */
  --muted:#B3A79C;          /* secondary text — 8.4:1 on the ground */
  --faint:#A89A8F;          /* labels, captions — 7.2:1 */
  --faintest:#938880;       /* legal line — 5.7:1 */
  --gold:#C2904A;           /* single accent */
  --gold-light:#D6A96A;
  --gold-pale:#E7CFA6;
  --line:rgba(201,154,91,.14);
  --line-soft:rgba(201,154,91,.2);

  /* reading view: warm paper, never pure white */
  --paper:#F6F1E8;
  --paper-2:#EFE8DB;
  --read-ink:#231F1B;
  --read-soft:#3A332C;
  --read-muted:#6B6159;
  --read-gold:#8A6436;
  --read-line:rgba(35,31,27,.14);

  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'Spectral',Georgia,'Times New Roman',serif;

  --measure:680px;          /* reading column */
  --wide:1120px;            /* page container */
  --gutter:32px;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-weight:400;
  font-size:18px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

a{ color:var(--gold-light); text-decoration:none; transition:color .25s ease; }
a:hover,a:focus{ color:var(--gold-pale); }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:300;
  line-height:1.18;
  letter-spacing:-.01em;
  color:#F3EADC;
  margin:0;
}

p{ margin:0 0 1.5em; }
p:last-child{ margin-bottom:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold); color:#130E08; padding:12px 20px; font-size:14px;
}
.skip-link:focus{ left:0; }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.wrap{ max-width:var(--wide); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.measure{ max-width:var(--measure); margin-left:auto; margin-right:auto; }
/* cuando .measure va en el mismo elemento que .wrap, el padding del wrap se
   comería 64px y el bloque dejaría de alinear con la columna de texto */
.wrap.measure{ max-width:calc(var(--measure) + var(--gutter) * 2); }
.band{ padding:104px 0; }
.band--tight{ padding:80px 0; }
.band--alt{ background:var(--ink-2); border-top:1px solid var(--line); }
.band--line{ border-top:1px solid var(--line); }

.kicker{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--faint); margin:0;
}

.btn{
  display:inline-block; padding:16px 38px;
  border:1px solid rgba(201,154,91,.5);
  color:var(--gold-pale);
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  background:transparent; cursor:pointer; font-family:var(--body);
  transition:background .3s ease,color .3s ease;
}
.btn:hover,.btn:focus{ background:rgba(194,144,74,.12); color:#F3EADC; }

.btn--solid{ background:var(--gold-light); border-color:var(--gold-light); color:#130E08; }
.btn--solid:hover,.btn--solid:focus{ background:var(--gold-light); border-color:var(--gold-light); color:#130E08; }

/* ==========================================================================
   4. Brand mark
   ========================================================================== */
.moth{ display:block; height:auto; }
/* on paper the gold of the logo washes out, so it is deepened a touch */
.light-surface .moth{ filter:brightness(.74) saturate(1.15); }
.brand .moth{ flex:0 0 auto; }
.hero .moth{ opacity:.92; }
@media (max-width:760px){ .hero .moth{ width:64px; } }

/* ==========================================================================
   5. Site header
   ========================================================================== */
.site-header{ border-bottom:1px solid var(--line); }
.site-header__inner{
  display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between;
  padding-top:22px; padding-bottom:22px;
}
.brand{ display:flex; align-items:center; gap:12px; color:var(--cream); }
.brand:hover{ color:var(--cream); }
.brand__name{ font-size:13px; letter-spacing:.34em; text-transform:uppercase; white-space:nowrap; }
.brand img{ max-height:40px; width:auto; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line-soft);
  color:var(--cream); padding:10px 16px; font-family:var(--body);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
}

.main-nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:34px; margin:0; padding:0; }
.main-nav a{
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); padding-bottom:4px; border-bottom:1px solid transparent;
}
.main-nav a:hover{ color:var(--cream); }
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-parent > a{ color:var(--cream); border-bottom-color:var(--gold); }

/* ==========================================================================
   6. Home — hero
   ========================================================================== */
.hero{
  position:relative;
  background:radial-gradient(90% 70% at 72% 8%,rgba(214,169,106,.16) 0%,rgba(120,86,48,.06) 40%,rgba(12,10,8,0) 72%);
  text-align:center;
}

/* Foto de fondo de la portada.
   El corte no se ve porque la imagen se desvanece con una máscara radial,
   y encima lleva un velo oscuro que mantiene legible el texto. */
.hero--foto{ overflow:hidden; }
.hero__fondo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(118% 104% at 50% 34%,#000 38%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.28) 84%,transparent 100%);
          mask-image:radial-gradient(118% 104% at 50% 34%,#000 38%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.28) 84%,transparent 100%);
}
.hero__fondo img{
  width:100%; height:100%; object-fit:cover; object-position:center 62%;
  filter:saturate(.92) contrast(1.02);
}
.hero__fondo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,rgba(12,10,8,.3) 0%,rgba(12,10,8,.34) 42%,rgba(12,10,8,.72) 80%,#0C0A08 100%),
    radial-gradient(98% 78% at 50% 44%,rgba(12,10,8,0) 0%,rgba(12,10,8,.5) 100%);
}
.hero--foto .hero__inner{ position:relative; z-index:1; min-height:70vh; justify-content:center; }
@media (max-width:760px){
  .hero--foto .hero__inner{ min-height:0; }
  .hero__fondo img{ object-position:62% 54%; }
  .hero__fondo::after{
    background:
      linear-gradient(to bottom,rgba(12,10,8,.38) 0%,rgba(12,10,8,.46) 42%,rgba(12,10,8,.8) 82%,#0C0A08 100%),
      radial-gradient(112% 82% at 50% 42%,rgba(12,10,8,.04) 0%,rgba(12,10,8,.6) 100%);
  }
}
.hero__inner{
  padding:128px 0 118px;
  display:flex; flex-direction:column; align-items:center; gap:30px;
}
.hero__title{
  text-transform:uppercase;
  font-size:clamp(36px,6.4vw,82px); line-height:1.06;
  letter-spacing:.05em;
}
.hero__lead{
  margin:0; max-width:none; font-size:21px; line-height:1.75; color:var(--cream-soft);
  text-wrap:balance;
}
@media (min-width:900px){ .hero__lead{ white-space:nowrap; } }

/* ==========================================================================
   7. Pull quote band
   ========================================================================== */
.quote-band{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hero--foto + .quote-band{ border-top:0; }
.quote-band__inner{ max-width:760px; margin:0 auto; padding:104px var(--gutter); text-align:center; }
.quote-band blockquote{
  margin:0; font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(26px,3.4vw,38px); line-height:1.6; color:#E2D5C4;
}
.quote-band cite{
  display:block; margin-top:34px; font-style:normal;
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--faint);
}

/* ==========================================================================
   8. Section head
   ========================================================================== */
.section-head{
  display:flex; flex-wrap:wrap; gap:20px;
  align-items:baseline; justify-content:space-between; margin-bottom:52px;
}
.section-head h2{ font-size:clamp(32px,4vw,46px); }
.section-head a{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light); }

/* ==========================================================================
   9. Post cards
   ========================================================================== */
.card-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; }
.card-grid--two{ grid-template-columns:repeat(2,minmax(0,1fr)); }

.card{ display:flex; flex-direction:column; gap:18px; }
.card__media{
  display:block; overflow:hidden;
  border:1px solid rgba(201,154,91,.16);
  background:linear-gradient(162deg,#1B1511 0%,#0D0B09 74%);
  aspect-ratio:4/5;
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
@media (hover:hover) and (pointer:fine){
  .card:hover .card__media img{ transform:scale(1.035); filter:brightness(1.06); }
}
.card__meta{ margin:0; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); }
.card__title{ font-size:27px; font-weight:400; line-height:1.25; }
.card__title a{ color:var(--cream); }
.card__title a:hover{ color:var(--gold-pale); }
.card__excerpt{ margin:0; font-size:15px; line-height:1.85; color:var(--muted); }

/* placeholder when a post has no featured image */
.card__media--empty{
  background:
    radial-gradient(115% 85% at 76% 16%,rgba(214,169,106,.26) 0%,rgba(120,86,48,.08) 44%,rgba(12,10,8,0) 72%),
    linear-gradient(162deg,#1B1511 0%,#0D0B09 74%);
}

/* ==========================================================================
   10. Entrada destacada — pieza editorial, no una tarjeta con marco
   ========================================================================== */
.destacada{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:72px; align-items:center;
  padding:12px 0 64px; border-bottom:1px solid var(--read-line);
  margin-bottom:72px;
}
.destacada__media{
  display:block; overflow:hidden; aspect-ratio:4/5;
  background:linear-gradient(162deg,#E9E0D1 0%,#DCD1BE 74%);
}
.destacada__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.3,1), filter .6s ease;
}
@media (hover:hover) and (pointer:fine){
  .destacada:hover .destacada__media img{ transform:scale(1.04); filter:brightness(1.04); }
}
.destacada__cuerpo{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.destacada__rotulo{
  margin:0; display:flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--read-gold);
}
.destacada__filete{ display:block; width:38px; height:1px; background:var(--read-gold); opacity:.6; }
.destacada__titulo{
  margin:0; font-weight:300; font-size:clamp(34px,4.4vw,54px); line-height:1.1; letter-spacing:-.015em;
}
.destacada__titulo a{ color:var(--read-ink); }
.destacada__titulo a:hover{ color:var(--read-gold); }
.destacada__extracto{
  margin:0; max-width:46ch; font-size:18px; line-height:1.8; color:var(--read-muted);
}
.destacada__enlace{
  display:inline-flex; align-items:center; gap:12px; margin-top:6px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--read-gold);
  padding-bottom:7px; border-bottom:1px solid rgba(138,100,54,.35);
  transition:gap .3s ease, border-color .3s ease;
}
.destacada__enlace:hover{ gap:20px; border-bottom-color:var(--read-gold); color:#5E441F; }
@media (max-width:900px){
  .destacada{ grid-template-columns:1fr; gap:36px; padding-bottom:48px; margin-bottom:52px; }
  .destacada__media{ aspect-ratio:3/2; }
}

/* ==========================================================================
   10 bis. Featured post (antiguo)
   ========================================================================== */
.featured{
  display:flex; flex-wrap:wrap; gap:56px; align-items:center;
  border:1px solid rgba(201,154,91,.16); background:var(--ink-2); padding:36px;
}
.featured__media{ flex:1 1 380px; min-width:0; }
.featured__media .card__media{ aspect-ratio:4/3; }
.featured__body{ flex:999 1 380px; min-width:0; display:flex; flex-direction:column; gap:20px; }
.featured__title{ font-size:clamp(30px,3.6vw,44px); font-weight:400; line-height:1.2; }
.featured__title a{ color:#F3EADC; }
.featured__excerpt{ margin:0; font-size:17px; line-height:1.9; color:var(--muted); }
.featured .kicker{ color:var(--gold-light); letter-spacing:.24em; font-size:11px; }

/* ==========================================================================
   11. Single post
   ========================================================================== */
.post-header{ text-align:center; padding:92px 0 56px; }
.post-header__title{ font-size:clamp(38px,5.4vw,66px); line-height:1.12; margin:22px 0; }
.post-header__meta{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint); }
/* Objetivos táctiles: los enlaces pequeños del pie y de las migas medían
   16-17 px de alto. Con este relleno pasan de 24, que es el mínimo
   recomendado para poder acertar con el dedo. */
.site-footer nav a,
.site-footer__legales a,
.migas a,
.migas span{ display:inline-block; padding-top:4px; padding-bottom:4px; }
.migas ol{ margin-top:-4px; margin-bottom:-4px; }

/* Aviso de cookies. Barra al pie, no tapa la lectura, y rechazar está al
   mismo nivel que aceptar, como exige la normativa. */
.cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#0C0A08; border-top:1px solid var(--line);
  box-shadow:0 -12px 32px rgba(0,0,0,.35);
}
.cookies[hidden]{ display:none; }
.cookies__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap;
}
.cookies__texto{
  margin:0; flex:1 1 440px; max-width:66ch;
  font-size:13.5px; line-height:1.7; color:var(--muted);
}
.cookies__texto a{ color:var(--gold-light); text-decoration:underline; text-underline-offset:3px; }
.cookies__botones{ display:flex; gap:10px; flex-shrink:0; }
.cookies__btn{
  padding:11px 26px; border:1px solid rgba(201,154,91,.5);
  background:transparent; color:var(--gold-pale); cursor:pointer;
  font-family:var(--body); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .25s ease,color .25s ease;
}
.cookies__btn:hover,.cookies__btn:focus{ background:rgba(194,144,74,.12); color:#F3EADC; }
.cookies__btn--si{ background:rgba(194,144,74,.18); color:#F3EADC; }
.cookies__btn--si:hover,.cookies__btn--si:focus{ background:rgba(194,144,74,.3); }
@media (max-width:620px){
  .cookies__inner{ gap:16px; }
  .cookies__botones{ width:100%; }
  .cookies__btn{ flex:1; padding:13px 10px; }
}

/* «Preferencias de cookies»: mismo aspecto que los enlaces legales. */
.cookies-prefs{
  display:block; margin:4px auto 0; padding:4px 0; border:0; background:none; cursor:pointer;
  font-family:var(--body); font-size:10.5px; letter-spacing:.07em;
  color:rgba(246,241,232,.26); transition:color .2s ease;
}
.cookies-prefs:hover,.cookies-prefs:focus{ color:var(--gold-light); }

/* Migas de pan: la ruta hasta donde estás, en el tono de los rótulos. */
.migas ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.5em;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint);
}
.migas li + li::before{ content:"·"; margin-right:.5em; letter-spacing:0; opacity:.55; }
.migas a{ color:inherit; }
.migas a:hover{ color:var(--gold-light); }
/* Sobre papel, el gris de los rótulos oscuros no se lee: 2,4:1. */
.light-surface .migas ol{ color:var(--read-muted); }
.light-surface .migas a:hover{ color:var(--read-gold); }

/* El enlace a la política dentro del consentimiento tiene que leerse. */
/* Un punto más oscuro que --read-gold: sobre el tinte del bloque, el dorado
   de lectura se queda en 4,4:1 y hace falta 4,5. */
.light-surface .consent a{ color:#805B30; }

.post-hero{ margin:0 0 72px; }
.post-hero img{ width:100%; }

.entry-content{ font-size:19px; line-height:2; color:var(--cream-soft); }
.entry-content > *{ max-width:var(--measure); margin-left:auto; margin-right:auto; }
.entry-content p{ margin:0 auto 1.6em; }
.entry-content h2{
  font-size:clamp(30px,3.6vw,40px); margin:2em auto .7em; color:#F3EADC;
}
.entry-content h3{ font-size:26px; margin:1.8em auto .6em; color:#F3EADC; }
.entry-content strong{ color:var(--cream); font-weight:500; }
.entry-content em{ color:#E2D5C4; }
.entry-content a{ border-bottom:1px solid rgba(214,169,106,.45); }
.entry-content ul,.entry-content ol{ margin:0 auto 1.6em; padding-left:1.3em; }
.entry-content li{ margin-bottom:.6em; }
.entry-content blockquote{
  margin:2em auto; padding-left:28px; border-left:1px solid rgba(201,154,91,.4);
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(24px,3vw,34px); line-height:1.55; color:#E2D5C4;
}
.entry-content blockquote p{ margin-bottom:.5em; }
.entry-content hr{
  max-width:var(--measure); margin:3em auto; border:0; border-top:1px solid var(--line);
}
.entry-content figure{ margin:2.4em auto; }
.entry-content figcaption{
  margin-top:14px; font-size:13px; letter-spacing:.04em; color:var(--faint); text-align:center;
}
/* wide and full images break the reading measure */
.entry-content .alignwide{ max-width:var(--wide); }
.entry-content .alignfull{ max-width:none; width:100%; }

.post-footer{ padding:72px 0; border-top:1px solid var(--line); margin-top:88px; }
.post-tags a{
  display:inline-block; margin:0 8px 8px 0; padding:8px 18px;
  border:1px solid var(--line-soft); color:var(--muted);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.post-nav{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; margin-top:48px; }
.post-nav__item{ flex:1 1 280px; min-width:0; }
.post-nav__item--next{ text-align:right; }
.post-nav__label{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint); margin:0 0 10px; }
.post-nav__title{ font-family:var(--display); font-size:24px; line-height:1.3; }

/* ==========================================================================
   12. Page (Sobre mí and generic pages)
   ========================================================================== */
.page-header{ text-align:center; padding:92px 0 48px; }
.page-header__title{ font-style:italic; font-size:clamp(42px,6vw,72px); line-height:1.08; max-width:var(--measure); margin-left:auto; margin-right:auto; }
.page-header__lead{ margin:24px auto 0; max-width:var(--measure); font-size:19px; line-height:1.85; color:var(--muted); }

/* ==========================================================================
   13. Taxonomy filter
   ========================================================================== */
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:10px; padding:0; list-style:none; }
.filters a{
  display:inline-block; padding:10px 22px; border:1px solid rgba(201,154,91,.2);
  color:var(--muted); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.filters a:hover{ color:var(--gold-pale); border-color:rgba(201,154,91,.45); }
.filters .is-active a{ border-color:rgba(201,154,91,.45); background:rgba(194,144,74,.1); color:var(--gold-pale); }

/* ==========================================================================
   14. Forms
   ========================================================================== */
.field{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.field label{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); }
.field input,.field textarea{
  padding:15px 18px; background:var(--field);
  border:1px solid rgba(201,154,91,.24); color:var(--cream);
  font-family:var(--body); font-size:16px; line-height:1.7;
}
.field textarea{ resize:vertical; min-height:180px; }
.field input:focus,.field textarea:focus{ border-color:var(--gold); outline:none; }

.consent{ display:flex; gap:12px; align-items:flex-start; margin-bottom:26px; }
.consent input{ margin-top:5px; width:18px; height:18px; accent-color:var(--gold); flex:0 0 auto; }
.consent label{ font-size:14px; line-height:1.7; color:var(--muted); }

.form-note{ margin:22px 0 0; padding:16px 20px; border:1px solid var(--line-soft); font-size:15px; }
.form-note--ok{ color:var(--gold-pale); }
.form-note--error{ color:#E8A5A5; border-color:rgba(232,165,165,.4); }

.honeypot{ position:absolute; left:-9999px; }

/* subscribe strip */
.subscribe{ max-width:640px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:26px; }
.subscribe form{ display:flex; flex-wrap:wrap; gap:12px; width:100%; max-width:480px; justify-content:center; }
.subscribe input[type="email"]{
  flex:999 1 240px; min-width:0; padding:16px 18px; background:var(--field);
  border:1px solid rgba(201,154,91,.26); color:var(--cream);
  font-family:var(--body); font-size:15px;
}
.subscribe button{ flex:1 1 150px; padding:16px 26px; }

/* ==========================================================================
   15. Contact layout
   ========================================================================== */
.contact{ display:flex; flex-wrap:wrap; gap:72px; align-items:flex-start; }
.contact__form{ flex:999 1 460px; min-width:0; }
.contact__aside{
  flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:36px;
  border-left:1px solid var(--line); padding-left:44px;
}
.contact__aside blockquote{
  margin:0; font-family:var(--display); font-style:italic; font-weight:300;
  font-size:27px; line-height:1.55; color:var(--gold-light);
}

/* ==========================================================================
   16. Split section (image + text)
   ========================================================================== */
.split{ display:flex; flex-wrap:wrap; gap:72px; align-items:center; }
.split__media{ flex:1 1 360px; min-width:0; }
.split__body{ flex:999 1 420px; min-width:0; display:flex; flex-direction:column; gap:24px; }
.split__title{ font-style:italic; font-size:clamp(34px,4.2vw,48px); line-height:1.2; }
.split__body p{ margin:0; font-size:18px; line-height:1.9; color:#B7A99C; }
.split__media .ph,
.split__media img{ aspect-ratio:3/4; width:100%; object-fit:cover; }

/* image placeholder used where no image is set yet */
.ph{
  border:1px solid rgba(201,154,91,.16);
  background:
    radial-gradient(110% 80% at 78% 16%,rgba(214,169,106,.3) 0%,rgba(120,86,48,.1) 40%,rgba(12,10,8,0) 70%),
    linear-gradient(158deg,#1C1511 0%,#0B0907 76%);
  display:flex; align-items:flex-end; padding:18px;
}
.ph span{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }

/* ==========================================================================
   17. Pagination
   ========================================================================== */
.pagination{ margin-top:64px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.pagination .page-numbers{
  padding:12px 20px; border:1px solid rgba(201,154,91,.2);
  color:var(--muted); font-size:13px; letter-spacing:.1em;
}
.pagination .current{ border-color:rgba(201,154,91,.5); color:var(--gold-pale); background:rgba(194,144,74,.1); }

/* ==========================================================================
   18. Footer
   ========================================================================== */
.site-footer{ border-top:1px solid var(--line); background:var(--ink-3); }
.site-footer__inner{
  display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;
  padding-top:56px; padding-bottom:56px;
}
.site-footer nav ul{ list-style:none; display:flex; flex-wrap:wrap; gap:28px; margin:0; padding:0; }
.site-footer nav a{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.site-footer__legal{ margin:0; font-size:12px; color:var(--faintest); }
.site-footer__marca{ display:flex; align-items:center; gap:14px; }
.icono-rs{
  flex:0 0 auto; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; color:var(--muted);
  transition:color .2s ease, border-color .2s ease;
}
.icono-rs:hover{ color:var(--gold-light); border-color:rgba(201,154,91,.5); }
/* Línea de textos legales: lo último del pie, discreta y en voz baja. */
.site-footer__legales{
  border-top:1px solid rgba(255,255,255,.055);
  padding-top:16px; padding-bottom:26px;
}
.site-footer__legales ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px;
}
.site-footer__legales a{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(246,241,232,.26); transition:color .2s ease;
}
.site-footer__legales a:hover{ color:rgba(246,241,232,.55); }
.site-footer__credito{
  margin:11px 0 0; text-align:center;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(246,241,232,.18);
}
.site-footer__credito a{ color:rgba(246,241,232,.3); transition:color .2s ease; }
.site-footer__credito a:hover{ color:var(--gold-light); }
@media (max-width:760px){
  .site-footer__legales{ padding-top:14px; padding-bottom:22px; }
  .site-footer__credito{ margin-top:9px; font-size:9.5px; }
  .site-footer__legales ul{ gap:3px 16px; }
  .site-footer__legales a{ font-size:10px; letter-spacing:.07em; }
}
@media (max-width:760px){
  .site-footer__inner{ flex-direction:column; text-align:center; gap:22px; padding-top:44px; padding-bottom:44px; }
  .site-footer nav ul{ justify-content:center; gap:18px; }
  .site-footer nav a{ font-size:11px; letter-spacing:.12em; }
}

/* ==========================================================================
   19. Reading view — the post itself on warm paper
   The site stays dark; the article is the lit page inside it. Header and
   footer keep their black so the text feels framed, like an open book.
   ========================================================================== */
.reading{
  background:var(--paper);
  color:var(--read-soft);
}
.reading .post-header{ padding:64px 0 36px; }
.reading .post-header__title{ color:var(--read-ink); font-size:clamp(34px,4.8vw,58px); line-height:1.14; margin:18px 0; }
.reading .post-header__meta{ color:var(--read-muted); }
.reading .post-header__meta a{ color:var(--read-muted); }
.reading .post-header__meta a:hover{ color:var(--read-gold); }

.reading .post-hero{ margin:0 0 48px; }
.reading .post-hero .wrap{ max-width:calc(var(--measure) + var(--gutter) * 2); }
.reading .post-hero img{ max-height:720px; object-fit:cover; object-position:center 18%; }

.reading .entry-content{
  font-size:18px;
  line-height:1.7;
  color:var(--read-soft);
}
.reading .entry-content p{ margin:0 auto .95em; }
.reading .entry-content h2{
  color:var(--read-ink); font-size:clamp(27px,3.2vw,34px); margin:1.6em auto .5em;
}
.reading .entry-content h3{ color:var(--read-ink); font-size:23px; margin:1.5em auto .45em; }
.reading .entry-content strong{ color:var(--read-ink); font-weight:500; }
.reading .entry-content em{ color:var(--read-ink); }
.reading .entry-content a{ color:var(--read-gold); border-bottom-color:rgba(138,100,54,.4); }
.reading .entry-content a:hover{ color:#5E441F; }
.reading .entry-content blockquote{
  border-left-color:rgba(138,100,54,.45); color:#44382B;
  font-size:clamp(23px,2.7vw,30px); line-height:1.5; margin:1.6em auto;
}
.reading .entry-content hr{ border-top-color:var(--read-line); margin:2.2em auto; }
.reading .entry-content figcaption{ color:var(--read-muted); }
.reading .entry-content ul,
.reading .entry-content ol{ margin:0 auto 1.1em; }
.reading .entry-content li{ margin-bottom:.35em; }

.reading .post-footer{
  border-top:1px solid var(--read-line);
  margin-top:64px; padding:48px 0 72px;
}
.reading .post-tags a{ border-color:var(--read-line); color:var(--read-muted); }
.reading .post-tags a:hover{ color:var(--read-gold); border-color:rgba(138,100,54,.45); }
.reading .post-nav{ margin-top:36px; }
.reading .post-nav__label{ color:var(--read-muted); }
.reading .post-nav__title{ color:var(--read-ink); }
.reading .post-nav__title:hover{ color:var(--read-gold); }

.reading ::selection{ background:rgba(138,100,54,.22); color:var(--read-ink); }

/* ==========================================================================
   20. Light surfaces — everything but the front page
   The header and footer keep their black and frame the paper in between.
   ========================================================================== */
.light-surface #contenido{ background:var(--paper); color:var(--read-soft); }

/* cualquier encabezado sobre papel va en tinta, no en el crema del tema oscuro */
.light-surface h1,
.light-surface h2,
.light-surface h3,
.light-surface h4,
.light-surface .page-header__title,
.light-surface .section-head h2,
.light-surface .split__title{ color:var(--read-ink); }
.light-surface p{ color:inherit; }
.light-surface .page-header__lead,
.light-surface .kicker,
.light-surface .card__meta,
.light-surface .post-nav__label{ color:var(--read-muted); }

/* bands lose their dark fills */
.light-surface .band--alt,
.light-surface .quote-band{ background:var(--paper-2); border-color:var(--read-line); }
.light-surface .band--line,
.light-surface .band--alt{ border-top-color:var(--read-line); }

/* cards */
.light-surface .card__title a{ color:var(--read-ink); }
.light-surface .card__title a:hover{ color:var(--read-gold); }
.light-surface .card__excerpt,
.light-surface .featured__excerpt{ color:var(--read-muted); }
.light-surface .card__media{
  border-color:rgba(35,31,27,.12);
  background:linear-gradient(162deg,#E9E0D1 0%,#DCD1BE 74%);
}
.light-surface .card__media--empty{
  background:
    radial-gradient(115% 85% at 76% 16%,rgba(255,252,246,.9) 0%,rgba(232,223,207,.6) 44%,rgba(214,202,181,0) 74%),
    linear-gradient(162deg,#EDE5D7 0%,#DDD2BF 76%);
}

/* featured block */
.light-surface .featured{ background:var(--paper-2); border-color:var(--read-line); }
.light-surface .featured__title a{ color:var(--read-ink); }
.light-surface .featured__title a:hover{ color:var(--read-gold); }
.light-surface .featured .kicker,
.light-surface .section-head a,
.light-surface .featured__body > a{ color:var(--read-gold); }

/* filters and pagination */
.light-surface .filters a,
.light-surface .pagination .page-numbers,
.light-surface .post-tags a{ border-color:rgba(35,31,27,.16); color:var(--read-muted); }
.light-surface .filters a:hover,
.light-surface .pagination a:hover,
.light-surface .post-tags a:hover{ color:var(--read-gold); border-color:rgba(138,100,54,.45); }
.light-surface .filters .is-active a,
.light-surface .pagination .current{
  border-color:rgba(138,100,54,.45); background:rgba(138,100,54,.09); color:#5E441F;
}

/* long-form page content (Sobre mí) */
.light-surface .entry-content{ color:var(--read-soft); font-size:18px; line-height:1.7; }
.light-surface .entry-content p{ margin:0 auto .95em; }
.light-surface .entry-content h2{ color:var(--read-ink); margin:1.6em auto .5em; }
.light-surface .entry-content h3{ color:var(--read-ink); margin:1.5em auto .45em; }
.light-surface .entry-content strong{ color:var(--read-ink); font-weight:600; }
.light-surface .entry-content em{ color:var(--read-ink); }
.light-surface .entry-content a{ color:var(--read-gold); border-bottom-color:rgba(138,100,54,.4); }
.light-surface .entry-content blockquote{
  border-left-color:rgba(138,100,54,.45); color:#44382B; margin:1.6em auto;
}
.light-surface .entry-content hr{ border-top-color:var(--read-line); margin:2.2em auto; }
.light-surface .split__body p{ color:var(--read-soft); }

/* placeholders */
.light-surface .ph{
  border-color:rgba(35,31,27,.12);
  background:
    radial-gradient(110% 80% at 78% 16%,rgba(255,252,246,.9) 0%,rgba(232,223,207,.6) 40%,rgba(214,202,181,0) 70%),
    linear-gradient(158deg,#EDE5D7 0%,#DDD2BF 76%);
}
.light-surface .ph span{ color:var(--read-muted); }

/* forms */
.light-surface .field label,
.light-surface .consent label{ color:var(--read-muted); }
.light-surface .field input,
.light-surface .field textarea,
.light-surface .subscribe input[type="email"]{
  background:#FFFCF7; border-color:rgba(35,31,27,.2); color:var(--read-ink);
}
.light-surface .field input:focus,
.light-surface .field textarea:focus{ border-color:var(--read-gold); }
.light-surface .consent input{ accent-color:var(--read-gold); }
.light-surface .form-note{ border-color:rgba(35,31,27,.18); }
.light-surface .form-note--ok{ color:#5E441F; background:rgba(138,100,54,.07); }
.light-surface .form-note--error{ color:#8C2F2F; border-color:rgba(140,47,47,.4); }

/* buttons on paper */
.light-surface .btn{ border-color:rgba(138,100,54,.5); color:#5E441F; }
.light-surface .btn:hover,
.light-surface .btn:focus{ background:rgba(138,100,54,.1); color:#3F2D13; }
.light-surface .btn--solid{ background:var(--read-gold); border-color:var(--read-gold); color:var(--paper); }
.light-surface .btn--solid:hover,
.light-surface .btn--solid:focus{ background:#6F5029; border-color:#6F5029; color:var(--paper); }

/* retrato de cabecera: centrado sobre el mismo eje que el texto */
.retrato{
  max-width:calc(var(--measure) + var(--gutter) * 2);
  margin:0 auto 64px; padding:0 var(--gutter);
}
.retrato img{ max-height:880px; object-fit:cover; object-position:center 30%; }
.retrato img{ width:100%; height:auto; display:block; }
@media (max-width:760px){ .retrato{ margin-bottom:48px; } .retrato img{ max-height:520px; } }

/* ==========================================================================
   Contacto: una sola composición. La foto es el fondo de la sección y el
   formulario va encima; así no hay banda que termine ni corte que tapar.
   ========================================================================== */
.contacto{ position:relative; overflow:hidden; background:var(--ink); }
.contacto__fondo{
  position:absolute; left:0; right:0; top:0; z-index:0; pointer-events:none;
  height:clamp(520px,74vh,780px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.22) 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.62) 68%,rgba(0,0,0,.22) 86%,transparent 100%);
}
.contacto__fondo img{
  width:100%; height:100%; object-fit:cover; object-position:center 12%;
  filter:saturate(.8) contrast(1.02);
}
/* El velo: suave arriba para que la foto se aprecie, cerrado abajo para que el
   formulario se lea sin esfuerzo. Nunca llega a un borde duro. */
.contacto__fondo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,rgba(12,10,8,.3) 0%,rgba(12,10,8,.46) 34%,rgba(12,10,8,.74) 66%,rgba(12,10,8,.93) 100%),
    radial-gradient(92% 72% at 50% 22%,rgba(12,10,8,0) 0%,rgba(12,10,8,.5) 100%);
}
.contacto__contenido{ position:relative; z-index:1; }
.contacto__cabecera{ padding:76px 0 36px; }
.contacto .contact{ padding-bottom:96px; }
.contacto .field input,
.contacto .field textarea{ background:rgba(10,8,6,.72); backdrop-filter:blur(3px); }
@media (max-width:760px){
  .contacto__fondo{ height:clamp(400px,52vh,520px); }
  .contacto__fondo img{ object-position:center 8%; }
  .contacto__cabecera{ padding:56px 0 28px; }
  .contacto .contact{ padding-bottom:64px; }
}

/* foto ancha de cabecera (se mantiene por si se usa en otra página) */
.banda-foto{ margin:0 0 8px; position:relative; }
.banda-foto img{ width:100%; aspect-ratio:2/1; object-fit:cover; object-position:center 38%; display:block; }
.banda-foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(12,10,8,.46) 0%,rgba(12,10,8,.16) 34%,rgba(12,10,8,.34) 72%,rgba(12,10,8,.9) 93%,var(--ink) 100%),
    linear-gradient(to right,rgba(12,10,8,.4) 0%,rgba(12,10,8,0) 26%,rgba(12,10,8,0) 74%,rgba(12,10,8,.4) 100%);
}
@media (max-width:760px){
  .banda-foto img{ aspect-ratio:4/3; }
  /* en vertical se ve más columna clara abajo: el fundido tiene que empezar antes */
  .banda-foto::after{
    background:
      linear-gradient(to bottom,rgba(12,10,8,.46) 0%,rgba(12,10,8,.12) 28%,rgba(12,10,8,.52) 64%,rgba(12,10,8,.93) 87%,var(--ink) 100%),
      linear-gradient(to right,rgba(12,10,8,.34) 0%,rgba(12,10,8,0) 26%,rgba(12,10,8,0) 74%,rgba(12,10,8,.34) 100%);
  }
}
/* si algún día la banda va sobre papel, se funde en crema */
.light-surface .banda-foto::after{
  background:
    linear-gradient(to bottom,rgba(12,10,8,.5) 0%,rgba(12,10,8,.2) 36%,rgba(12,10,8,.08) 72%,rgba(246,241,232,.5) 92%,var(--paper) 100%),
    linear-gradient(to right,rgba(12,10,8,.26) 0%,rgba(12,10,8,0) 24%,rgba(12,10,8,0) 76%,rgba(12,10,8,.26) 100%);
}

/* contact aside */
.light-surface .contact__aside{ border-left-color:var(--read-line); }
.light-surface .contact__aside p{ color:var(--read-soft); }

/* quote band on paper */
.light-surface .quote-band blockquote{ color:#44382B; }
.light-surface .quote-band cite{ color:var(--read-muted); }

.light-surface ::selection{ background:rgba(138,100,54,.22); color:var(--read-ink); }

/* enlace al texto completo, bajo la cita de la portada */
.quote-band__link{
  display:inline-block; margin-top:26px;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-light); border-bottom:1px solid rgba(214,169,106,.4); padding-bottom:4px;
}
.quote-band__link:hover{ color:var(--gold-pale); border-bottom-color:var(--gold-pale); }
.quote-band cite{ margin-top:26px; }

/* ==========================================================================
   21. Reading aids — a lead paragraph and the lines that carry the weight
   ========================================================================== */
.light-surface .entry-content > p:first-of-type,
.reading .entry-content > p:first-of-type{
  font-size:21px;
  line-height:1.6;
  color:var(--read-ink);
  margin-bottom:1.2em;
}

/* a standalone line lifted out of the flow: her refrains and pivots */
.entry-content p.destacado{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(25px,3vw,32px);
  line-height:1.42;
  color:var(--read-ink);
  margin:1.1em auto .95em;
  text-align:center;
  max-width:var(--measure);
}
.entry-content p.destacado::after{
  content:""; display:block; width:38px; height:1px;
  background:rgba(138,100,54,.45); margin:.7em auto 0;
}

@media (max-width:760px){
  .light-surface .entry-content > p:first-of-type,
  .reading .entry-content > p:first-of-type{ font-size:19.5px; }
  .entry-content p.destacado{ font-size:23px; }
}

/* ==========================================================================
   22. Responsive
   ========================================================================== */
@media (max-width:980px){
  .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; }
  .contact__aside{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:36px; }
  .split,.contact,.featured{ gap:44px; }
}

@media (max-width:760px){
  :root{ --gutter:20px; }
  body{ font-size:17px; }
  .band{ padding:72px 0; }
  .hero__inner{ padding:88px 0 76px; }
  .hero__lead{ font-size:19px; }
  .card-grid{ grid-template-columns:1fr; gap:48px; }
  .quote-band__inner{ padding:72px var(--gutter); }
  .entry-content{ font-size:18px; line-height:1.95; }
  .reading .entry-content{ font-size:17.5px; line-height:1.68; }
  .reading .post-header{ padding:48px 0 28px; }
  .post-header{ padding:64px 0 40px; }
  .featured{ padding:22px; }
  .post-nav__item--next{ text-align:left; }

  .nav-toggle{ display:block; }
  .main-nav{ flex-basis:100%; display:none; }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:0; }
  .main-nav li{ border-top:1px solid var(--line); }
  .main-nav a{ display:block; padding:16px 0; border-bottom:0; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .card__media img{ transform:none !important; }
}


/* ==========================================================================
   20. Compartir y comentarios — al final del escrito, sobre el papel
   ========================================================================== */
.compartir{
  max-width:var(--measure); margin:8px auto 0; padding:34px 0 0;
  border-top:1px solid var(--read-line); text-align:center;
}
.compartir__rotulo{
  margin:0 0 18px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--read-muted);
}
.compartir__botones{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; }
.compartir__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--read-line); background:transparent; color:var(--read-soft);
  cursor:pointer; padding:0; font:inherit; text-decoration:none; line-height:0;
  transition:color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.compartir__btn .icono{ display:block; }
.compartir__btn:focus-visible{ outline:2px solid var(--read-gold); outline-offset:3px; }
.compartir__btn:hover{ color:var(--read-gold); border-color:rgba(138,100,54,.45); background:rgba(138,100,54,.07); transform:translateY(-1px); }
.compartir__btn--texto{
  width:auto; height:44px; border-radius:999px; padding:0 22px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; line-height:1;
  margin-left:6px;
}
@media (max-width:520px){
  .compartir__botones{ gap:8px; }
  .compartir__btn{ width:40px; height:40px; }
  .compartir__btn--texto{ width:100%; height:44px; margin:6px 0 0; }
}
.compartir__btn.esta-hecho{ color:var(--read-gold); border-color:rgba(138,100,54,.5); background:rgba(138,100,54,.1); }

/* Suscripción a los escritos nuevos: va tras compartir, antes del pie del
   texto. Recogida, con el papel un punto más cálido para que se despegue. */
.suscribirme{
  max-width:var(--measure); margin:48px auto 0; padding:38px 36px 34px;
  background:rgba(138,100,54,.05); border:1px solid var(--read-line); border-radius:3px;
  text-align:center;
}
.suscribirme__rotulo{
  margin:0 0 10px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--read-gold);
}
.suscribirme__titulo{ margin:0 0 12px; font-size:clamp(26px,3.2vw,34px); color:var(--read-ink); }
.suscribirme__texto{
  margin:0 auto 26px; max-width:46ch; font-size:16px; line-height:1.65; color:var(--read-muted);
}
.suscribirme__form{ max-width:470px; margin:0 auto; text-align:left; }
.suscribirme__fila{ display:flex; gap:10px; }
.suscribirme__fila input{
  flex:1 1 auto; min-width:0; height:48px; padding:0 16px;
  font-family:inherit; font-size:15px;
}
.suscribirme__fila .btn{ flex:0 0 auto; height:48px; padding:0 26px; }
.suscribirme .consent{ margin-top:16px; }
.suscribirme .consent label{ font-size:13px; }
.suscribirme .form-note{ margin:0 auto 20px; max-width:470px; text-align:left; }
/* En la portada el fondo es negro: el bloque se viste de oscuro para no
   abrir un boquete de papel en medio. */
body:not(.light-surface) .suscribirme{
  background:rgba(194,144,74,.06);
  border-color:rgba(255,255,255,.09);
}
body:not(.light-surface) .suscribirme__rotulo{ color:var(--gold-light); }
body:not(.light-surface) .suscribirme__titulo{ color:var(--cream); }
body:not(.light-surface) .suscribirme__texto{ color:var(--muted); }
body:not(.light-surface) .suscribirme .consent label{ color:var(--muted); }
body:not(.light-surface) .suscribirme__fila input{
  background:rgba(10,8,6,.5); border-color:rgba(255,255,255,.14); color:var(--cream);
}
body:not(.light-surface) .suscribirme__fila input::placeholder{ color:var(--faint); }

@media (max-width:560px){
  .suscribirme{ padding:30px 22px 28px; }
  .suscribirme__fila{ flex-direction:column; }
  .suscribirme__fila .btn{ width:100%; }
}

.comentarios{ padding:56px 0 96px; }
.comentarios__titulo{
  font-size:clamp(24px,3vw,32px); margin:0 0 30px; color:var(--read-ink);
  padding-top:34px; border-top:1px solid var(--read-line);
}
.comentarios__aviso{ font-size:14px; color:var(--read-muted); margin:0 0 22px; }
.comentarios__lista{ list-style:none; margin:0 0 44px; padding:0; }
.comentarios__lista .children{ list-style:none; margin:18px 0 0 0; padding:0 0 0 26px; border-left:1px solid var(--read-line); }
.comentario{ margin:0 0 20px; }
.comentario__cuerpo{
  background:rgba(35,31,27,.035); border:1px solid var(--read-line);
  border-radius:3px; padding:20px 22px;
}
.comentario__cabecera{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:10px; }
.comentario__autor{ font-size:15px; letter-spacing:.02em; color:var(--read-ink); font-weight:600; }
.comentario__fecha{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--read-muted); }
.comentario__texto{ font-size:16px; line-height:1.68; color:var(--read-soft); }
.comentario__texto p{ margin:0 0 .7em; }
.comentario__texto p:last-child{ margin-bottom:0; }
.comentario .comment-reply-link{
  display:inline-block; margin-top:12px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--read-gold);
}
.comentarios__form{ max-width:var(--measure); }
.comentarios__form .comment-reply-title{ font-size:clamp(22px,2.8vw,28px); margin:0 0 14px; color:var(--read-ink); }
.comentarios__form .comment-reply-title small{ font-size:12px; margin-left:12px; text-transform:none; letter-spacing:0; }
.comentarios__form .form-submit{ margin:26px 0 0; }
.comentarios__form .btn--solid{ width:auto; min-width:220px; }
.comentarios .logged-in-as{ font-size:13px; color:var(--read-muted); margin:0 0 18px; }
@media (max-width:760px){
  .comentarios{ padding:44px 0 72px; }
  .comentarios__lista .children{ padding-left:16px; }
  .comentarios__form .btn--solid{ width:100%; }
}


/* Pausa entre bloques de un texto largo: los «· · ·» del manuscrito. */
.entry-content p.pausa{
  text-align:center; color:var(--read-gold); letter-spacing:.9em;
  margin:2.6em 0; font-size:15px; opacity:.6; text-indent:.9em;
}