/* ===== Biblioteca — estilos compartidos ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --cream: #FFF5E6;
  --cream-2: #F8F1E9;
  --text: #6b6952;
  --heading: #7B795F;
  --accent: #C9977D;
  --accent-dark: #B87D5E;
  --card-bg: #FBF4EA;
  --card-border: #E4D8C6;
  --max-w: 1200px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--cream);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-weight:300;
  line-height:1.6;
}

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

.full-image{
  width:100%;
  height:auto;
  display:block;
}

h1,h2,h3,.serif{
  font-family:'Cormorant Garamond', serif;
  color: var(--heading);
  margin:0;
}

.section{
  max-width: var(--max-w);
  margin:0 auto;
  padding: 48px 24px;
}

/* ---- Sección Artículos (HTML real para que LEER funcione) ---- */
.articulos-section{
  background: var(--cream-2);
  padding: 56px 24px 64px;
}

.articulos-inner{
  max-width: var(--max-w);
  margin:0 auto;
}

.articulos-title{
  font-size: 44px;
  letter-spacing: 2px;
  color: var(--accent-dark);
  text-transform: uppercase;
  font-weight:600;
}

.articulos-subtitle{
  font-family:'Cormorant Garamond', serif;
  font-style:normal;
  font-size: 20px;
  color: var(--text);
  margin-top: 14px;
  white-space: nowrap;
}

.articulos-grid{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 42px;
}

.articulo-card-img{
  flex: 0 0 calc(25% - 16.5px);
}

@media (max-width: 980px){
  .articulo-card-img{ flex: 0 0 calc(50% - 11px); }
  .articulos-title{ font-size: 34px; }
}

@media (max-width: 560px){
  .articulo-card-img{ flex: 0 0 100%; }
  .articulos-title{ font-size: 30px; }
  .articulos-subtitle{ font-size: 17px; white-space: normal; }
}

.articulo-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 24px 20px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow: 0 2px 10px rgba(120,100,70,0.06);
}

.articulo-card h3{
  font-size: 21px;
  font-weight:500;
  min-height: 52px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.articulo-thumb{
  width:100px;
  height:100px;
  border-radius:50%;
  margin: 14px 0;
  object-fit: cover;
}

.articulo-desc{
  font-size: 14.5px;
  color: var(--text);
  min-height: 78px;
}

.articulo-actions{
  display:flex;
  justify-content: space-between;
  align-items:center;
  width:100%;
  margin-top: 14px;
  font-family:'Jost', sans-serif;
  font-size: 13px;
  font-weight:600;
  letter-spacing: 0.5px;
}

.btn-leer{
  color: #8a8770;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:6px;
}
.btn-leer:hover{ color: var(--heading); }

.btn-escuchar{
  color: var(--accent-dark);
  display:flex;
  align-items:center;
  gap:6px;
  opacity: 0.55;
  cursor: default;
}

.btn-escuchar .tag{
  font-size:10px;
  background: var(--accent);
  color:#fff;
  border-radius: 8px;
  padding: 2px 6px;
  margin-left: 4px;
  letter-spacing: 0.3px;
}

/* ---- Audios breves por emoción (tarjetas = imagen original de Canva, con reproductor real encima) ---- */
.audios-section{
  background: #DADCBF;
  padding: 56px 24px 0;
}
.audios-inner{
  max-width: var(--max-w);
  margin:0 auto;
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 22px;
}
.audio-card{
  position: relative;
  flex: 0 0 calc(25% - 16.5px);
  max-width: 280px;
}
@media (max-width: 900px){
  .audio-card{ flex: 0 0 calc(50% - 11px); }
}
@media (max-width: 480px){
  .audio-card{ flex: 0 0 100%; max-width: 320px; }
}
.audio-card img{
  width:100%;
  height:auto;
  display:block;
}
.audio-hit{
  position:absolute;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
}
/* círculo de play: centrado horizontal, ~52%-72% de la altura de la tarjeta */
.audio-hit.play{
  left: 32%;
  width: 36%;
  top: 51%;
  height: 15%;
}
.audio-hit.escucha{
  left: 8%;
  width: 46%;
  top: 68%;
  height: 8%;
}
.audio-hit.descarga{
  left: 8%;
  width: 46%;
  top: 76.5%;
  height: 8%;
}

.audios-caption{
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  color: #4a4a3a;
  padding: 50px 24px 46px;
  margin: 0;
  background:#DADCBF;
}

/* ---- Enlace invisible sobre botones dentro de imágenes fijas ---- */
.img-link-wrap{
  position: relative;
  line-height: 0;
}
.img-hit{
  position:absolute;
  display:block;
}
.podcast-play{
  position:absolute;
  display:block;
  text-decoration:none;
  cursor:pointer;
}
.podcast-play .play-icon{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:15%;
  min-width:34px;
  aspect-ratio:1/1;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  padding-left:3px;
  box-sizing:border-box;
  transition:background .2s ease, transform .2s ease;
}
.podcast-play:hover .play-icon{
  background:rgba(0,0,0,.75);
  transform:translate(-50%,-50%) scale(1.08);
}

/* ---- Tarjetas de Artículos como imagen (idénticas a Canva) ---- */
.articulo-card-img{
  display:block;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(120,100,70,0.06);
  transition: transform 0.15s ease;
}
.articulo-card-img:hover{
  transform: translateY(-3px);
}
.articulo-card-img img{
  width:100%;
  height:auto;
  display:block;
}
.articulo-card-img .img-hit{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
}

/* ---- Página de lectura (artículo individual) ---- */
.leer-header{
  background: var(--cream-2);
  padding: 20px 24px;
}

.leer-volver{
  max-width: 760px;
  margin: 0 auto;
  font-family:'Jost', sans-serif;
  font-size: 14px;
}

.leer-volver a{
  color: var(--accent-dark);
  text-decoration:none;
  font-weight:500;
}
.leer-volver a:hover{ text-decoration: underline; }

.leer-article{
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 90px;
}

.leer-article h1{
  font-size: 40px;
  font-weight:600;
  line-height:1.15;
  margin-bottom: 10px;
}

.leer-article .kicker{
  font-family:'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--accent-dark);
  font-size: 19px;
  margin-bottom: 28px;
  display:block;
}

.leer-article p{
  font-size: 18px;
  color: var(--text);
  margin: 0 0 20px;
}

.leer-article strong{
  color: var(--heading);
  font-weight:600;
}

.leer-article .escuchar-note{
  margin-top: 40px;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 1px dashed var(--card-border);
  border-radius: 14px;
  font-size: 14.5px;
  color: var(--accent-dark);
}

@media (max-width:560px){
  .leer-article h1{ font-size: 30px; }
  .leer-article p{ font-size: 16.5px; }
}