/* ══════════════════════════════════════════════════════════════════════════
   EL RESULTADO · calcado del de historia.thenomba.es

   Juan pidió el mismo layout, no uno parecido: las cotas, los nombres de
   clase y el orden de las secciones salen de su HTML. Lo único que cambia es
   el contenido y dos secciones nuevas que historia no tiene —el momento de
   fortaleza y el de debilidad—, que siguen exactamente la misma pauta que
   «sus hitos» para que no se note la costura.

   Lo que se va: la CAJA. El resultado ya no vive dentro de una `.qcard` con
   borde y `backdrop-filter`; son secciones abiertas separadas por un filete de
   un píxel, que es lo que hace que la página respire y parezca un artículo en
   vez de un widget.
   ══════════════════════════════════════════════════════════════════════════ */

.res{ --lima:var(--seed-lime,#D0FD00); --cream:#F7F8E5;
      --dim:rgba(247,248,229,.66); --muted:rgba(247,248,229,.46);
      --serif:'Beaufort Pro',Georgia,serif; --sans:Inter,system-ui,sans-serif;
      color:var(--dim); font-family:var(--sans); line-height:1.62 }
.res h1,.res h2,.res h3{ font-family:var(--serif); font-weight:500; line-height:1.08; color:var(--cream) }
.res p{ color:var(--dim); font-size:16.5px }
.res .lima{ color:var(--lima) }
.res b{ color:var(--cream) }

.res .wrap{ max-width:880px; margin:0 auto; padding:0 22px }
.res section.wrap{ padding:54px 22px; position:relative; z-index:1 }
.res section.wrap + section.wrap{ border-top:1px solid rgba(247,248,229,.06) }

.res .eyebrow{
  display:inline-flex; align-items:center; vertical-align:middle;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lima); font-weight:600;
}
.res .sec-title{ font-size:clamp(24px,4vw,38px); margin:12px 0 22px }

/* El cuadrado de cristal del icono de sección. Es lo que marca el comienzo de
   cada bloque y lo que hace que la página se lea como una secuencia. */
.res .sec-ico{
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle; width:46px; height:46px; border-radius:13px;
  background:rgba(247,248,229,.06);
  -webkit-backdrop-filter:blur(9px) saturate(130%); backdrop-filter:blur(9px) saturate(130%);
  border:1px solid rgba(247,248,229,.14);
  box-shadow:inset 0 1px 0 rgba(247,248,229,.08);
  margin:0 10px 0 0; font-size:26px; color:var(--lima);
}
.res .axis h3 i, .res .fs h3 i{
  width:34px; height:34px; display:inline-grid; place-items:center;
  border-radius:10px; font-size:19px;
  background:rgba(247,248,229,.06);
  -webkit-backdrop-filter:blur(8px) saturate(130%); backdrop-filter:blur(8px) saturate(130%);
  border:1px solid rgba(247,248,229,.14);
  box-shadow:inset 0 1px 0 rgba(247,248,229,.08);
}

/* ── LA FICHA DEL PERSONAJE ────────────────────────────────────────────── */
.res .hero-card{
  display:grid; grid-template-columns:minmax(280px,380px) 1fr;
  align-items:start; gap:0;
  background:linear-gradient(135deg,rgba(20,32,20,.55),rgba(8,13,8,.7));
  border:1px solid rgba(208,253,0,.18); border-radius:20px; overflow:hidden;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.7); margin-top:64px;
}
.res .hero-portrait{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center top; display:block }
.res .hero-body{ padding:40px 38px 34px }
.res .badge{
  display:inline-block; font-family:var(--serif); font-weight:700; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:#11210a;
  background:var(--lima); padding:6px 14px; border-radius:999px;
}
.res .hero-name{ font-size:clamp(26px,4vw,40px); margin:18px 0 4px }
.res .hero-sub{ color:var(--lima); font-family:var(--serif); font-style:italic; font-size:18px }
.res .hero-quote{
  margin-top:20px; font-family:var(--serif); font-style:italic; font-size:18px;
  color:var(--cream); border-left:2px solid var(--lima); padding-left:14px;
}
.res .hero-stats{
  display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(247,248,229,.12);
}
.res .hero-stats .st{ display:flex; flex-direction:column; gap:3px }
.res .hero-stats .st .k{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700 }
.res .hero-stats .st .v{ font-size:14.5px; color:var(--cream); font-family:var(--serif) }
.res .hero-stats .st .v.lima{ color:var(--lima) }
.res .hero-stats .st.fact{ flex-basis:100% }
.res .hero-stats .st.fact .v{ font-family:var(--sans); font-size:13.5px; color:var(--dim); line-height:1.5 }

/* ── PERFIL, EJES Y RASGOS ─────────────────────────────────────────────── */
.res .lead-p{ font-family:var(--serif); font-size:clamp(19px,2.5vw,24px); line-height:1.55; color:var(--cream); max-width:780px }
.res .lead-p .em{ color:var(--lima); font-style:italic }
.res .axes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:10px }
.res .axis{ background:rgba(247,248,229,.05); border:1px solid rgba(247,248,229,.12); border-radius:14px; padding:22px }
.res .axis h3{ font-size:16px; color:var(--lima); margin-bottom:8px; display:flex; align-items:center; gap:9px }
.res .axis p{ font-size:14px }
.res .traits{ display:flex; flex-wrap:wrap; gap:11px; margin-top:18px }
.res .traits span{
  font-size:14px; padding:8px 14px; border-radius:999px;
  background:rgba(208,253,0,.1); border:1px solid rgba(208,253,0,.3); color:var(--lima);
}

/* ── HITOS Y MOMENTOS ──────────────────────────────────────────────────── */
.res .hito{
  border:1px solid rgba(247,248,229,.12); border-radius:16px; overflow:hidden;
  margin-bottom:18px; background:rgba(247,248,229,.03);
}
.res .hito img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block }
.res .hito-b{ padding:22px 24px }
.res .hito-b .y{ font-family:var(--serif); color:var(--lima); font-size:14px; letter-spacing:.06em }
.res .hito-b h3{ font-size:20px; margin:3px 0 7px }
.res .hito-b p{ font-size:15px }

/* La tribulación y el momento de debilidad comparten el mismo tratamiento en
   ámbar: es la señal de que ahí se cuenta lo que salió mal, sin tener que
   escribirlo. La fortaleza se queda en el verde de la marca. */
.res .trib{ border:1px solid rgba(208,140,80,.25); border-radius:16px; overflow:hidden; background:rgba(20,16,12,.5) }
.res .trib img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; filter:saturate(.85) }
.res .trib-b{ padding:24px 26px }
.res .trib-b .y{ font-family:var(--serif); color:#e0a36a; font-size:14px; letter-spacing:.06em }
.res .trib-b h3{ font-size:20px; margin:3px 0 7px }

.res .fs{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.res .fs .card{ background:rgba(247,248,229,.04); border:1px solid rgba(247,248,229,.12); border-radius:14px; padding:24px }
.res .fs h3{ font-size:17px; margin-bottom:8px; display:flex; align-items:center; gap:9px }
.res .fs .f h3{ color:var(--lima) }
.res .fs .s h3{ color:#e0a36a }
.res .fs .s h3 i{ color:#e0795a; border-color:rgba(224,121,90,.3); background:rgba(224,121,90,.08) }

.res .quote-big{
  font-family:var(--serif); font-style:italic; font-size:clamp(20px,3vw,28px);
  color:var(--cream); text-align:center; line-height:1.4;
}
.res .quote-big span{
  display:block; font-style:normal; font-size:14px; color:var(--muted);
  margin-top:12px; font-family:var(--sans); letter-spacing:.04em;
}

/* ── COMPARTIR Y CIERRE ────────────────────────────────────────────────── */
.res .slist{ display:flex; flex-direction:column; gap:13px }
.res .sbtn{
  display:flex; align-items:center; gap:14px; width:100%; padding:15px 18px;
  border-radius:12px; background:rgba(247,248,229,.05);
  border:1px solid rgba(247,248,229,.14); color:var(--cream);
  font-size:15.5px; font-weight:600; text-decoration:none; cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s; font-family:var(--sans);
}
.res .sbtn:hover{ border-color:var(--lima); transform:translateY(-1px) }
.res .sbtn .lb{ flex:1; text-align:left }
.res .sbtn .ar{ color:var(--muted) }
.res .sbtn .ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; color:#fff; font-size:19px }
.res .ic.wa{ background:#25D366 } .res .ic.x{ background:#000; border:1px solid rgba(247,248,229,.18) }
.res .ic.li{ background:#0A66C2 } .res .ic.tg{ background:#229ED9 }
.res .ic.ig{ background:linear-gradient(135deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5) }
.res .ic.cp{ background:rgba(247,248,229,.12) }
.res .share-grid{ display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:26px; align-items:start }
.res .share-prev{ border:1px solid rgba(247,248,229,.12); border-radius:16px; overflow:hidden; background:rgba(247,248,229,.03) }
.res .share-prev img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block }
.res .share-prev .pv{ padding:14px 16px; font-family:var(--serif); font-style:italic; color:var(--cream); font-size:15px }
.res .share-prev .pv small{ display:block; font-style:normal; font-family:var(--sans); color:var(--muted); font-size:12.5px; margin-top:4px }

.res .btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--lima); color:#11210a;
  font-family:var(--serif); font-weight:700; font-size:17px; padding:16px 34px;
  border-radius:999px; text-decoration:none; border:none; cursor:pointer;
}
.res .btn.ghost{ background:rgba(247,248,229,.06); color:var(--cream); border:1px solid rgba(247,248,229,.2) }
.res .discover{ text-align:center }
.res .discover .btn{ margin:6px 6px 0 }
.res footer{ text-align:center; padding:40px 0; color:var(--muted); font-size:13px }
.res footer a{ color:var(--lima); text-decoration:none }

@media (max-width:760px){
  .res .hero-card{ grid-template-columns:1fr }
  .res .axes{ grid-template-columns:1fr }
  .res .fs{ grid-template-columns:1fr }
  .res .share-grid{ grid-template-columns:1fr }
  .res .hero-body{ padding:28px 24px 26px }
}