/*
  ══════════════════════════════════════════════════════════════════════════
  PLC · Editorial Single — estilos
  Todo el look se controla desde las variables de :root.
  ══════════════════════════════════════════════════════════════════════════
*/

:root{
  --plc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --plc-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --plc-black:   #000000;
  --plc-white:   #ffffff;
  --plc-ink:     #111111;   /* texto del cuerpo         */
  --plc-gray:    #55555a;   /* bajada / subtítulo       */
  --plc-gray-lt: #8e8e93;   /* meta, crédito de foto    */

  --plc-maxw:  1360px;      /* ancho del mosaico        */
  --plc-readw: 600px;       /* ancho columna de lectura */
  --plc-gap:   12px;        /* gap del mosaico bento    */
  --plc-pad:   24px;        /* padding lateral          */
}

/* ═══════════════════════════════════════════════════════════════════
   CONTENEDOR · anula anchos y padding que imponga el tema
   ═══════════════════════════════════════════════════════════════════ */
.plc-single{
  width:100%; max-width:none;
  margin:0; padding:0;
  font-family:var(--plc-sans);
  color:var(--plc-ink);
  line-height:1.6;
}
.plc-single *,
.plc-single *::before,
.plc-single *::after{ box-sizing:border-box; }
.plc-single img{ display:block; max-width:100%; height:auto; }
.plc-single h1,
.plc-single h2,
.plc-single h3,
.plc-single p,
.plc-single figure{ margin:0; }
.plc-single button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ═══════════════════════════════════════════════════════════════════
   HERO · imagen destacada
   ═══════════════════════════════════════════════════════════════════ */
.plc-hero{ position:relative; }
.plc-hero img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:0;
}
.plc-hero__credit{
  position:absolute; left:20px; bottom:14px;
  color:rgba(255,255,255,.82);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}

/* ═══════════════════════════════════════════════════════════════════
   CABECERA DEL ARTÍCULO
   ═══════════════════════════════════════════════════════════════════ */
.plc-head{
  max-width:860px; margin:clamp(44px,6vw,76px) auto 0;
  padding-inline:var(--plc-pad);
  text-align:center;
}

/* Categoría */
.plc-kicker,
.plc-kicker a{
  font-size:11px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--plc-black); text-decoration:none;
}
.plc-kicker a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Título · la cursiva sale del <em> escrito en el título de la entrada */
.plc-title{
  margin-top:20px;
  font-family:var(--plc-serif); font-weight:500;
  font-size:clamp(34px,5.4vw,62px);
  line-height:1.1; letter-spacing:-.01em;
  text-wrap:balance;
}
.plc-title em,
.plc-title i{ font-style:italic; }

/* Bajada */
.plc-dek{
  margin:22px auto 0; max-width:640px;
  font-size:clamp(15px,1.4vw,17px);
  line-height:1.65; color:var(--plc-gray);
  text-wrap:pretty;
}

/* Autor y fecha */
.plc-meta{
  margin-top:26px;
  font-size:10.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--plc-gray-lt);
}
.plc-meta__author,
.plc-meta__author a{
  font-weight:600; color:var(--plc-ink); text-decoration:none;
}
.plc-meta__author a:hover{ text-decoration:underline; text-underline-offset:3px; }
.plc-meta__sep{ margin-inline:.35em; }

/* Acciones */
.plc-actions{
  margin-top:26px;
  display:flex; justify-content:center; align-items:center; gap:12px;
}
.plc-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px;
  border:1px solid var(--plc-black); border-radius:999px;
  font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
  transition:background .25s ease, color .25s ease;
}
.plc-pill:hover,
.plc-pill.is-saved{ background:var(--plc-black); color:var(--plc-white); }
.plc-pill.is-saved svg{ fill:currentColor; }

.plc-icon-btn{
  position:relative;
  display:grid; place-items:center;
  width:38px; height:38px;
  border:1px solid var(--plc-black); border-radius:999px;
  transition:background .25s ease, color .25s ease;
}
.plc-icon-btn:hover{ background:var(--plc-black); color:var(--plc-white); }
.plc-icon-btn svg{ width:15px; height:15px; }

/* Aviso al copiar el enlace */
.plc-share.is-copied::after{
  content:"Link copied";
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  padding:5px 10px;
  background:var(--plc-black); color:var(--plc-white);
  border-radius:999px;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   CUERPO · columna angosta + capitular
   ═══════════════════════════════════════════════════════════════════ */
.plc-body{
  max-width:var(--plc-readw); margin:clamp(40px,5vw,60px) auto 0;
  padding-inline:var(--plc-pad);
  font-family:var(--plc-serif);
  font-size:19px; line-height:1.78;
}
.plc-body p{ margin:0 0 1.35em; }
.plc-body > p:first-of-type::first-letter{
  float:left;
  font-size:4.6em; line-height:.82; font-weight:600;
  margin:.06em .1em 0 0;
}
.plc-body h2,
.plc-body h3{ font-family:var(--plc-serif); font-weight:600; line-height:1.25; }
.plc-body h2{ font-size:1.5em; margin:1.6em 0 .5em; }
.plc-body h3{ font-size:1.2em; margin:1.5em 0 .4em; }
.plc-body ul,
.plc-body ol{ margin:0 0 1.35em; padding-left:1.3em; }
.plc-body li{ margin-bottom:.5em; }
.plc-body blockquote{
  margin:1.8em 0; padding-left:1.2em;
  border-left:2px solid var(--plc-black);
  font-style:italic;
}
.plc-body figure{ margin:1.8em 0; }
.plc-body figcaption{
  margin-top:8px;
  font-family:var(--plc-sans); font-size:11px;
  letter-spacing:.08em; color:var(--plc-gray-lt);
}
.plc-body a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* ═══════════════════════════════════════════════════════════════════
   MOSAICO BENTO · 1 grande + 4 chicas
   ═══════════════════════════════════════════════════════════════════ */
.plc-related{
  max-width:var(--plc-maxw); margin:clamp(56px,7vw,92px) auto 0;
  padding-inline:var(--plc-pad);
}
.plc-section-label{
  padding-bottom:22px;
  font-family:var(--plc-sans);
  font-size:11px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  text-align:center;
}

.plc-bento{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  grid-template-rows:repeat(2, minmax(0,1fr));
  gap:var(--plc-gap);
  height:min(78vh,660px);
}
.plc-bento > .plc-card:first-child{ grid-row:span 2; }

.plc-card{
  position:relative; overflow:hidden;
  display:block; min-width:0; min-height:0;
  background:#eee center/cover no-repeat;
  color:var(--plc-white); text-decoration:none;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.plc-card:hover{ transform:scale(1.045); }
.plc-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.34) 32%, rgba(0,0,0,0) 62%);
}
.plc-card__text{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:22px 22px 20px;
}
.plc-card__cat{
  display:block;
  font-family:var(--plc-sans);
  font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  opacity:.85;
}
.plc-card__title{
  display:-webkit-box; margin-top:8px;
  font-family:var(--plc-serif); font-weight:500;
  font-size:20px; line-height:1.25;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.plc-bento > .plc-card:first-child .plc-card__text{ padding:30px 30px 28px; }
.plc-bento > .plc-card:first-child .plc-card__title{ font-size:clamp(24px,2.4vw,32px); }

/* ═══════════════════════════════════════════════════════════════════
   FRANJA EDITORIAL B/N
   ═══════════════════════════════════════════════════════════════════ */
.plc-bw{
  margin-top:clamp(56px,7vw,92px);
  display:grid; grid-template-columns:1fr 1fr;
}
.plc-bw img{
  width:100%; height:clamp(320px,52vw,660px); object-fit:cover;
  filter:grayscale(1) contrast(1.12);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .plc-bento{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    height:auto;
  }
  .plc-bento > .plc-card{ aspect-ratio:4/5; }
  .plc-bento > .plc-card:first-child{ grid-row:auto; grid-column:span 2; aspect-ratio:16/10; }
}
@media (max-width:640px){
  :root{ --plc-pad:18px; }
  .plc-body{ font-size:17.5px; }
  .plc-card__title{ font-size:17px; }
  .plc-bw{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .plc-card,
  .plc-pill,
  .plc-icon-btn{ transition:none !important; }
}