/* ================================================================
   CASA LUJURIA — LOS EDITORIALES
   Texto a la izquierda, foto a la derecha. La franja es un respiro;
   esto es una parada: el bloque donde se cuenta el truco de la
   categoría, con una foto al lado para que el ojo se detenga.

   Este archivo va DESPUÉS de dia.css por la misma razón que
   franja.css: dia.css borra a la brava con !important todo lo que
   huela a .ls-*, y adentro de una página con .narrow hay reglas de
   poster-content.css y lqx.css con más peso que un `.cl-ed-p` pelado.
   Nombres propios (.cl-ed-*), archivo tardío, y adentro !important
   donde de verdad hace falta.

   Reglas de la casa:
   1) Se sale del .narrow a mano, igual que la franja, pero NO llega
      hasta el borde: se para en 1180px. Full-bleed ya lo hace la
      franja; si esto también fuera a sangre no habría contraste.
   2) La foto es <img> de verdad, no fondo. Lleva alt, lleva medidas
      y va lazy: es contenido, no decoración.
   3) En móvil no se voltea nada. Foto arriba, texto abajo, siempre.
   ================================================================ */

.cl-edit{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:clamp(2.4rem,6vw,4.6rem);
  margin-bottom:clamp(2.4rem,6vw,4.6rem);
  padding:clamp(1.6rem,4vw,3rem) clamp(1.1rem,5vw,2.4rem);
}

/* el papel: una hoja crema sobre el fondo dorado de la casa, con la
   cinta tricolor de canto arriba. Da el aire de página de revista
   sin tener que meter marcos ni sombras por todos lados. */
.cl-ed-in{
  position:relative;
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:clamp(1.5rem,4vw,3.4rem);
  align-items:center;
  background:#fdf6e0;
  border:1px solid rgba(11,11,15,.14);
  border-radius:3px;
  padding:clamp(1.5rem,3.6vw,3.1rem);
  box-shadow:0 22px 60px rgba(8,6,20,.16);
}
.cl-ed-in::before{
  content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:5px;
  background:linear-gradient(90deg,
    #16161c 0 33.34%, #dd0000 33.34% 66.67%, #ffd93d 66.67% 100%);
  border-radius:3px 3px 0 0;
  pointer-events:none;
}

/* --- la columna de texto ------------------------------------------- */
.cl-ed-txt{min-width:0}

.cl-edit p.cl-ed-ojo{
  margin:0 0 .5rem !important;
  max-width:none !important;
  font-family:inherit;
  font-size:.7rem !important; letter-spacing:.2em; text-transform:uppercase;
  font-weight:800 !important; color:#dd0000 !important;
}
.cl-edit h2.cl-ed-h{
  margin:0 0 1rem !important;
  font-size:clamp(1.55rem,2.7vw,2.4rem) !important;
  line-height:1.04 !important;
  color:#0b0b0f !important;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.cl-edit h2.cl-ed-h em{
  font-style:normal;
  font-family:"Cormorant Garamond",Georgia,serif;
  text-transform:none; font-weight:600;
  color:#dd0000 !important;
}
.cl-edit p.cl-ed-p{
  margin:0 0 .85rem !important;
  max-width:52ch !important;
  font-size:clamp(15.5px,1.15vw,17px) !important;
  line-height:1.62 !important;
  color:#22222c !important;
}
.cl-edit p.cl-ed-p:last-of-type{margin-bottom:0 !important}
.cl-edit.cl-edit p.cl-ed-p strong{color:#0b0b0f !important; font-weight:800}
.cl-edit p.cl-ed-p em{
  font-style:italic; font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.1em;
}
.cl-edit p.cl-ed-p a{color:#16161c !important; text-decoration:underline; text-underline-offset:3px}
.cl-edit p.cl-ed-p a:hover{color:#dd0000 !important}

.cl-edit a.cl-ed-link{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1.15rem;
  font-weight:800; font-size:.78rem; letter-spacing:.11em; text-transform:uppercase;
  color:#fff !important;
  background:#dd0000;
  padding:11px 17px;
  border-radius:2px;
  text-decoration:none !important;
  box-shadow:0 8px 20px rgba(221,0,0,.28);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.cl-edit a.cl-ed-link:hover{
  background:#0b0b0f;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(8,6,20,.3);
}
.cl-ed-flecha{font-size:1em; line-height:1}

/* --- la foto -------------------------------------------------------- */
.cl-ed-fig{margin:0; min-width:0}
.cl-ed-img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:2px;
  /* el marco de imprenta: filo dorado pegado y una sombra dura roja
     corrida, como una separación de color mal registrada. Es el
     mismo gesto del cartel de la portada. */
  box-shadow:0 0 0 3px #ffd93d, 14px 14px 0 0 #dd0000, 0 26px 50px rgba(8,6,20,.28);
}
.cl-edit figcaption.cl-ed-pie{
  margin:1.35rem 0 0 !important;
  font-size:.74rem !important;
  line-height:1.45;
  letter-spacing:.02em;
  color:#4a4a55 !important;
  border-left:3px solid #ffd93d;
  padding-left:.7rem;
}
.cl-edit.cl-edit figcaption.cl-ed-pie b{color:#dd0000 !important; font-weight:800}

/* --- voltear: foto a la izquierda ----------------------------------- */
.cl-edit--volteo .cl-ed-txt{order:2}
.cl-edit--volteo .cl-ed-fig{order:1}
.cl-edit--volteo .cl-ed-img{box-shadow:0 0 0 3px #ffd93d, -14px 14px 0 0 #dd0000, 0 26px 50px rgba(8,6,20,.28)}

/* --- tableta -------------------------------------------------------- */
@media (max-width:900px){
  .cl-ed-in{grid-template-columns:1fr; gap:1.6rem}
  /* En una sola columna manda la foto primero: entra el ojo por la
     imagen y baja al texto. El volteo aquí no significa nada. */
  .cl-ed-txt, .cl-edit--volteo .cl-ed-txt{order:2}
  .cl-ed-fig, .cl-edit--volteo .cl-ed-fig{order:1}
  .cl-ed-img{aspect-ratio:4/5; max-height:64vh}
  .cl-edit--volteo .cl-ed-img,
  .cl-ed-img{box-shadow:0 0 0 3px #ffd93d, 10px 10px 0 0 #dd0000, 0 18px 36px rgba(8,6,20,.26)}
  .cl-edit p.cl-ed-p{max-width:66ch !important}
}

/* --- móvil ---------------------------------------------------------- */
@media (max-width:640px){
  .cl-edit{padding:0 clamp(.9rem,4vw,1.3rem)}
  .cl-ed-in{padding:1.25rem 1.1rem 1.5rem; border-radius:2px}
  .cl-ed-img{aspect-ratio:4/5; max-height:none}
  .cl-edit--volteo .cl-ed-img,
  .cl-ed-img{box-shadow:0 0 0 2px #ffd93d, 7px 7px 0 0 #dd0000, 0 14px 28px rgba(8,6,20,.24)}
  .cl-edit a.cl-ed-link{width:100%; justify-content:center}
}

/* Nadie se marea: si el sistema pide menos movimiento, el botón deja
   de brincar. */
@media (prefers-reduced-motion:reduce){
  .cl-edit a.cl-ed-link{transition:none}
  .cl-edit a.cl-ed-link:hover{transform:none}
}


/* ================================================================
   TRES PIEZAS MÁS — para que las páginas largas no sean un muro

   La franja para y el editorial explica. Faltaban tres cosas más
   baratas de meter en medio de un texto sin cortarlo:

     .cl-fig   una foto sola con pie, adentro de la columna
     .cl-duo   dos o tres retratos en fila
     .cl-cita  una frase parada encima de una foto

   Mismas reglas de la casa: filo dorado, sombra roja corrida, el
   pie con la barrita dorada al canto. Nombres propios y archivo
   tardío para que dia.css no las borre.
   ================================================================ */

/* --- .cl-fig: una foto sola, con pie ------------------------------- */
figure.cl-fig{
  margin:clamp(2rem,5vw,3.4rem) auto !important;
  max-width:min(980px, 100%);
  width:100%;
}
figure.cl-fig img.cl-fig-img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  object-position:var(--foco,center);
  border-radius:2px;
  box-shadow:0 0 0 3px #ffd93d, 12px 12px 0 0 #dd0000, 0 22px 44px rgba(8,6,20,.26);
}
figure.cl-fig--alta img.cl-fig-img{aspect-ratio:4/5; max-width:620px; margin-inline:auto}
figure.cl-fig--ancha img.cl-fig-img{aspect-ratio:16/9}
figure.cl-fig figcaption.cl-fig-pie{
  margin:1.15rem 0 0 !important;
  text-align:left !important;
  font-size:.76rem !important;
  line-height:1.5;
  letter-spacing:.02em;
  color:#4a4a55 !important;
  border-left:3px solid #ffd93d;
  padding-left:.7rem;
  max-width:56ch;
}
figure.cl-fig.cl-fig figcaption.cl-fig-pie b{color:#dd0000 !important; font-weight:800}

/* --- .cl-duo: dos o tres retratos en fila -------------------------- */
.cl-duo{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0 clamp(1.1rem,5vw,2.4rem);
  margin-top:clamp(2.2rem,5vw,3.8rem);
  margin-bottom:clamp(2.2rem,5vw,3.8rem);
}
.cl-duo-in{
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(var(--n,2),1fr);
  gap:clamp(.9rem,2.4vw,1.7rem);
}
.cl-duo figure{margin:0; min-width:0}
.cl-duo img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:var(--foco,center);
  border-radius:2px;
  box-shadow:0 0 0 2px #ffd93d, 8px 8px 0 0 #dd0000, 0 16px 34px rgba(8,6,20,.24);
}
.cl-duo figcaption{
  margin:.95rem 0 0 !important;
  text-align:left !important;
  font-size:.72rem !important;
  line-height:1.45;
  color:#4a4a55 !important;
  border-left:3px solid #ffd93d;
  padding-left:.6rem;
}
.cl-duo.cl-duo.cl-duo figcaption b{color:#dd0000 !important; font-weight:800}

/* --- .cl-cita: una frase encima de una foto ------------------------ */
.cl-cita{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0 clamp(1.1rem,5vw,2.4rem);
  margin-top:clamp(2.4rem,6vw,4.2rem);
  margin-bottom:clamp(2.4rem,6vw,4.2rem);
}
.cl-cita-in{
  position:relative;
  max-width:1180px; margin:0 auto;
  border-radius:2px;
  overflow:hidden;
  box-shadow:0 0 0 3px #ffd93d, 0 26px 50px rgba(8,6,20,.3);
  isolation:isolate;
}
.cl-cita img.cl-cita-img{
  display:block; width:100%; height:auto;
  aspect-ratio:21/9;
  object-fit:cover;
  object-position:var(--foco,center);
}
.cl-cita-in::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,8,26,.86) 0 42%, rgba(10,8,26,.34) 78%, rgba(10,8,26,.2) 100%);
  pointer-events:none;
}
.cl-cita-txt{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1.4rem,4vw,3.2rem);
  max-width:64%;
}
.cl-cita blockquote.cl-cita-frase{
  margin:0 !important; padding:0 !important; border:0 !important;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.5rem,3.4vw,2.9rem) !important;
  line-height:1.1 !important;
  color:#fdf6e0 !important;
  text-wrap:balance;
}
.cl-cita blockquote.cl-cita-frase em{color:#ffd93d !important; font-style:italic}
.cl-cita.cl-cita blockquote.cl-cita-frase strong{color:#ff4747 !important; font-weight:600; font-style:normal}
.cl-cita p.cl-cita-quien{
  margin:1.1rem 0 0 !important;
  font-family:inherit;
  font-size:.7rem !important; letter-spacing:.2em; text-transform:uppercase;
  font-weight:800 !important; color:#ffd93d !important;
}

@media (max-width:900px){
  .cl-cita img.cl-cita-img{aspect-ratio:4/3}
  .cl-cita-txt{max-width:100%}
  .cl-cita-in::after{
    background:linear-gradient(180deg, rgba(10,8,26,.32) 0 30%, rgba(10,8,26,.84) 100%);
  }
  .cl-cita-txt{justify-content:flex-end}
}
@media (max-width:640px){
  .cl-duo-in{grid-template-columns:repeat(2,1fr)}
  .cl-duo[style*="--n:3"] .cl-duo-in{grid-template-columns:repeat(3,1fr)}
  .cl-duo figcaption{font-size:.66rem !important}
  figure.cl-fig img.cl-fig-img{aspect-ratio:4/5}
  figure.cl-fig--ancha img.cl-fig-img{aspect-ratio:4/3}
  .cl-cita img.cl-cita-img{aspect-ratio:3/4}
}