/* portada-v2.css — propuesta de portada (staging). No usar en producción hasta que Enric decida.
   Estilo inspirado en las referencias que eligió Enric (Skills You Need, Lynda 2020,
   Udemy 2020, Lifehacker 2020, The Positivity Blog, Self Creation, Success Soul, Paid To Exist),
   con la paleta y el tono de paz de duelo.es. */
*{box-sizing:border-box}
body{
  margin:0;
  background:#f9f6ef;
  color:#292d29;
  font:19px/1.65 Georgia,serif;
}
a{color:inherit;text-underline-offset:5px}
a:focus-visible{outline:3px solid #cc955c;outline-offset:4px}
header,footer,.wrap{
  max-width:1120px;
  margin:auto;
  padding-inline:6vw;
}
header,nav,footer{display:flex;align-items:center;justify-content:space-between;gap:22px}
header{min-height:84px}
.brand{font:italic 29px Georgia;text-decoration:none;letter-spacing:-1.4px}
nav,footer,.cta,.more{font:15px/1.5 system-ui,sans-serif}
nav a{text-decoration:none}

/* Hero: un solo gesto visual, un poco más bajo */
.cover{position:relative;isolation:isolate;background:#242f30;color:white}
.cover>img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  z-index:-2;
}
.cover:before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(17,27,28,.95),rgba(20,30,31,.75) 36%,rgba(20,30,31,.05) 82%);
  z-index:-1;
}
.intro{
  min-height:clamp(400px,50vh,560px);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding-block:64px;
}
h1,h2,h3{font-weight:400;line-height:1.12;margin:0;letter-spacing:-.035em}
h1{font-size:clamp(44px,5.4vw,80px);max-width:9em;text-wrap:balance}
h1 em{color:#f0dfbd}
.intro p{max-width:37ch;margin:28px 0 32px;color:#f2ede4}
.cta{
  display:inline-block;
  background:#f7efdf;color:#26332f;
  border-radius:28px;padding:12px 22px;
  text-decoration:none;
}

/* Más aire entre bloques, titulares más contenidos (Positivity Blog, Skills You Need) */
.reading,.books,.author,.ella-bloque{padding-block:clamp(72px,9vw,120px)}
h2{font-size:clamp(30px,3.2vw,46px)}

/* Lecturas: tarjetas claras a 3 columnas, fotos medianas, mucho blanco
   (Skills You Need, Lifehacker 2020, Lynda 2020) */
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px 28px;
  margin-top:48px;
}
.cards a{
  text-decoration:none;
  display:block;
  background:#fbfaf6;
  border:1px solid #e6dfd2;
  padding-bottom:22px;
}
.cards img{
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
  object-position:center;
}
.cards h3{
  font-size:clamp(20px,1.8vw,24px);
  margin:18px 20px 0;
  line-height:1.25;
}
.cards p{margin:10px 20px 0;color:#51544d;font-size:17px;line-height:1.55}
.cards a.sin-foto{
  padding:28px 20px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:180px;
}
.cards a.sin-foto h3{margin:0}
.cards a.sin-foto p{margin:12px 0 0}
@media(min-width:701px){
  .cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cards a{grid-column:span 2}
  .cards a.sin-foto:nth-of-type(4){grid-column:2 / 4}
  .cards a.sin-foto:nth-of-type(5){grid-column:4 / 6}
}

/* Sesiones: medida de lectura estrecha y clara (Positivity Blog) */
#sesiones p{max-width:62ch}
#sesiones .cta{margin:8px 0 4px}

/* ELLA: texto + una cubierta modestamente al lado (Paid To Exist, Self Creation) */
.ella-bloque{
  display:grid;
  grid-template-columns:minmax(130px,180px) minmax(0,1fr);
  gap:8% 64px;
  align-items:center;
  max-width:1120px;
  margin:auto;
  padding-inline:6vw;
}
.ella-bloque img{
  display:block;
  width:100%;
  height:auto;
  max-height:300px;
  object-fit:contain;
  box-shadow:0 8px 24px rgba(41,45,41,.16);
}
.ella-bloque h2{margin-bottom:22px}
.ella-bloque p{max-width:48ch}

/* Trilogía: tres cubiertas reales, tamaño de catálogo (Udemy/Lynda 2020) */
.books{background:#253d39;color:#faf4e8}
.books h2{text-align:center}
.books h2 em{display:block;color:#d8c4a1;margin-top:.15em}
.books .libros-intro{
  text-align:center;
  max-width:42ch;
  margin:22px auto 0;
}
.cubiertas{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px 28px;
  list-style:none;
  margin:56px 0 40px;
  padding:0;
}
.cubiertas a{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  text-align:center;
  gap:16px;
}
.cubiertas img{
  display:block;
  height:230px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  box-shadow:0 12px 32px rgba(0,0,0,.38);
}
.cubiertas span{
  font:16px/1.45 Georgia,serif;
  color:#faf4e8;
  max-width:18em;
}
.books .acciones{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.books .more{color:#faf4e8}
.pair{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10% 64px;
}
.pair p{max-width:42ch}

/* Autor: retrato pequeño, como el lateral de The Positivity Blog */
.author img{
  display:block;
  width:200px;
  height:240px;
  object-fit:cover;
  object-position:center top;
  justify-self:end;
}
.more{display:inline-block;margin-top:8px}
footer{border-top:1px solid #cfc8ba;flex-wrap:wrap;padding-block:28px}
footer a:first-child{font-weight:650}

@media(max-width:700px){
  header{min-height:68px;gap:12px}
  .brand{font-size:23px}
  nav{gap:14px;font-size:14px}
  .cover>img{object-position:62% center}
  .cover:before{
    background:linear-gradient(0deg,#172725 2%,rgba(23,39,37,.85) 42%,rgba(23,39,37,.04) 95%);
  }
  .intro{min-height:clamp(380px,68svh,520px);justify-content:flex-end;padding-block:48px 56px}
  .intro p{max-width:31ch}
  .cards{
    grid-template-columns:1fr;
    gap:24px;
  }
  .cards img{height:170px}
  .cards h3{font-size:clamp(22px,6vw,26px)}
  .cards a.sin-foto{min-height:0}
  .ella-bloque{
    grid-template-columns:1fr;
    gap:28px;
    justify-items:center;
    text-align:left;
  }
  .ella-bloque img{max-height:240px;width:auto;max-width:160px}
  .cubiertas{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px 10px;
    margin:40px 0 32px;
  }
  .cubiertas img{height:156px}
  .cubiertas span{font-size:13px}
  .pair{grid-template-columns:1fr;gap:36px}
  .author img{width:180px;height:220px;justify-self:center}
}