/* ═══════════════════════════════════════════════════════════════════════════
   El diario.

   Todo sale del lenguaje del sitio (blog/diseno.md): Archivo sola, hilos de 1 px,
   lino a sangre, mayúsculas espaciadas SÓLO para navegar (como el menú y los títulos
   del pie), vino para lo que se compra y para lo que está activo. Sin cajas, sin
   sombras, sin radios: los bloques se separan con aire y con hilo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── navegación: el registro del menú principal ───────── */
.mp-diario__temas,
.mp-lateral__tit{
  font-size:var(--mp-t-nav); letter-spacing:var(--mp-track-etq);
  text-transform:uppercase; font-weight:500;
}

/* ═══════════ LISTA: portada, tema, búsqueda ═══════════ */

.mp-diario{ padding-block:var(--mp-e5) var(--mp-e7) }

.mp-diario__cab{ max-width:40rem; margin:var(--mp-e4) 0 var(--mp-e5) }
.mp-diario__cab h1{
  margin:0; font-size:var(--mp-t-titulo); font-weight:500;
  line-height:1.02; letter-spacing:-.01em;
}
.mp-diario__bajada{
  margin:var(--mp-e2) 0 0; max-width:34rem;
  font-size:var(--mp-t-medio); line-height:1.45; color:var(--mp-tinta-2);
}

/* los temas: una fila de texto, como el menú. En el teléfono se desliza. */
.mp-diario__temas{
  display:flex; gap:var(--mp-e4); margin:0 0 var(--mp-e5);
  padding-bottom:var(--mp-e2); border-bottom:1px solid var(--mp-hilo);
  overflow-x:auto; scrollbar-width:none; white-space:nowrap; position:relative;
}
.mp-diario__temas::-webkit-scrollbar{ display:none }
.mp-diario__temas a{
  color:var(--mp-tinta-2); text-decoration:none; padding-bottom:.35rem;
  border-bottom:1px solid transparent;
  transition:color var(--mp-rapido) var(--mp-easing), border-color var(--mp-rapido) var(--mp-easing);
}
.mp-diario__temas a:hover{ color:var(--mp-tinta) }
.mp-diario__temas a[aria-current="page"]{ color:var(--mp-tinta); border-bottom-color:var(--mp-vino) }

/* lista + columna */
.mp-diario__grid{ display:grid; gap:var(--mp-e6); grid-template-columns:minmax(0,1fr) }
@media (min-width:1024px){
  .mp-diario__grid{ grid-template-columns:minmax(0,1fr) 18.75rem; gap:var(--mp-e7) }
}

/*
 * La lista va en FILAS (foto a la izquierda, texto a la derecha), no en rejilla.
 * Con una rejilla, dos notas dejaban una tarjeta de 280 px sola y 700 px de papel al
 * lado: parecía un sitio abandonado. Una fila se ve completa con una nota o con
 * cincuenta, y es como se lee el archivo de una revista.
 */
.mp-diario__lista{ display:flex; flex-direction:column; gap:var(--mp-e4); min-width:0 }
.mp-diario__nada{ max-width:36rem; color:var(--mp-tinta-2); line-height:1.6 }
.mp-diario__nada p{ margin:0 0 .8rem }
.mp-diario__nada a{ margin-right:var(--mp-e3); color:var(--mp-vino); text-decoration:underline; text-underline-offset:4px }

/* ───────── la tarjeta de una nota ───────── */
.mp-nota-t{
  display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:var(--mp-e2) var(--mp-e3);
  align-items:start; padding-bottom:var(--mp-e4); border-bottom:1px solid var(--mp-hilo);
}
.mp-nota-t:last-child{ border-bottom:0; padding-bottom:0 }
@media (min-width:768px){ .mp-nota-t{ grid-template-columns:14rem minmax(0,1fr); gap:var(--mp-e4) } }
/* en un listado las fotos tienen que alinear: 4:5 desde arriba, como el mosaico de
   categorías de la portada. Dentro de la nota, la foto va entera. */
.mp-nota-t__foto{ display:block; aspect-ratio:4/5; overflow:hidden; background:var(--mp-lino) }
.mp-nota-t__foto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block;
  transition:transform var(--mp-medio) var(--mp-easing);
}
.mp-nota-t:hover .mp-nota-t__foto img{ transform:scale(1.02) }

.mp-nota-t__tema{
  display:inline-block; margin-bottom:.45rem;
  font-size:var(--mp-t-nav); letter-spacing:var(--mp-track-etq); text-transform:uppercase;
  color:var(--mp-vino); text-decoration:none;
}
.mp-nota-t__tit{ margin:0; font-size:var(--mp-t-medio); font-weight:500; line-height:1.22 }
.mp-nota-t__tit a{ color:var(--mp-tinta); text-decoration:none }
.mp-nota-t__tit a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }
.mp-nota-t__bajada{ margin:.55rem 0 0; font-size:var(--mp-t-base); line-height:1.6; color:var(--mp-tinta-2) }
/* fecha y lectura separadas por aire, no unidas con un punto */
.mp-nota-t__datos{
  display:flex; flex-wrap:wrap; gap:.2rem var(--mp-e3); margin:.8rem 0 0;
  font-size:var(--mp-t-menor); color:var(--mp-tinta-3);
}

/* la destacada ocupa todo el ancho de la lista: foto a un lado, texto al otro */
.mp-nota-t--destacada{ grid-template-columns:minmax(0,1fr); padding-bottom:var(--mp-e5) }
.mp-nota-t--destacada:last-child{ border-bottom:1px solid var(--mp-hilo); padding-bottom:var(--mp-e5) }
@media (min-width:768px){
  .mp-nota-t--destacada{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--mp-e5); align-items:center;
  }
  .mp-nota-t--destacada .mp-nota-t__tit{ font-size:var(--mp-t-mayor); line-height:1.12; letter-spacing:-.005em }
  .mp-nota-t--destacada .mp-nota-t__bajada{ font-size:1.0625rem; max-width:30rem }
}

/* paginación */
.mp-diario .nav-links{ display:flex; gap:var(--mp-e3); justify-content:center; padding-top:var(--mp-e3); border-top:1px solid var(--mp-hilo) }
.mp-diario .nav-links a, .mp-diario .nav-links span{ font-size:var(--mp-t-menor); color:var(--mp-tinta-2); text-decoration:none }
.mp-diario .nav-links .current{ color:var(--mp-tinta); border-bottom:1px solid var(--mp-vino) }

/* ═══════════ LA COLUMNA LATERAL ═══════════ */

.mp-lateral{ display:flex; flex-direction:column; gap:var(--mp-e3); align-self:start }
@media (min-width:1024px){
  /* SÓLO la columna de la nota es pegajosa: acompaña una lectura larga. En la portada
     del diario la lista es corta y una columna pegajosa con scroll propio cortaba su
     último bloque a la mitad. Nunca más alta que la pantalla: si no cabe, el sticky
     deja de pegar (lo aprendimos con la galería de producto). */
  .mp-lateral--nota{
    position:sticky; top:calc(var(--mp-cab-alto, 105px) + var(--mp-e4));
    max-height:calc(100vh - var(--mp-cab-alto, 105px) - var(--mp-e5));
    overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain;
  }
}
.mp-lateral__bloque{ padding-top:.85rem; border-top:1px solid var(--mp-hilo) }
/* como los títulos del pie («SERVICIO AL CLIENTE»): tinta y peso medio, no gris */
.mp-lateral__tit{ margin:0 0 .6rem; color:var(--mp-tinta) }
.mp-lateral__tit label{ cursor:pointer }

.mp-lateral__buscar{ display:flex; border-bottom:1px solid var(--mp-tinta) }
.mp-lateral__buscar input{
  flex:1 1 auto; min-width:0; padding:.55rem 0; border:0; background:none;
  font:inherit; font-size:16px; color:var(--mp-tinta);
}
.mp-lateral__buscar input::placeholder{ color:var(--mp-tinta-3) }
.mp-lateral__buscar input:focus{ outline:none }
.mp-lateral__buscar:focus-within{ border-bottom-color:var(--mp-vino) }
.mp-lateral__buscar button{
  flex:0 0 auto; border:0; background:none; padding:.55rem 0 .55rem .8rem; cursor:pointer;
  font:inherit; font-size:var(--mp-t-nav); letter-spacing:var(--mp-track-etq); text-transform:uppercase;
  color:var(--mp-tinta);
}

.mp-lateral__temas{ list-style:none; margin:0; padding:0 }
.mp-lateral__temas a{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.5rem 0;
  font-size:var(--mp-t-base); color:var(--mp-tinta); text-decoration:none;
}
.mp-lateral__temas a:hover span:first-child{ text-decoration:underline; text-underline-offset:3px }
.mp-lateral__temas a[aria-current="page"]{ color:var(--mp-vino) }
.mp-lateral__n{ color:var(--mp-tinta-3); font-variant-numeric:tabular-nums; font-size:var(--mp-t-menor) }

.mp-lateral__temas-linea{ margin:0; display:flex; flex-wrap:wrap; gap:.35rem 1.1rem }
.mp-lateral__temas-linea a{ font-size:var(--mp-t-menor); color:var(--mp-tinta-2); text-decoration:none }
.mp-lateral__temas-linea a:hover{ color:var(--mp-tinta); text-decoration:underline; text-underline-offset:3px }
.mp-lateral__temas-linea a.is-actual{ color:var(--mp-vino) }

/* ───────── una prenda en la columna ───────── */
.mp-lateral__prendas{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.mp-fila-p{ border-bottom:1px solid var(--mp-hilo) }
.mp-fila-p:last-child{ border-bottom:0 }
.mp-fila-p a{
  display:flex; gap:var(--mp-e2); align-items:center; padding:.55rem .5rem .55rem 0;
  color:var(--mp-tinta); text-decoration:none; position:relative;
  transition:background-color var(--mp-medio) var(--mp-easing), padding var(--mp-medio) var(--mp-easing);
}
/* la foto a su proporción, con ancho fijo: una cuadrada sale cuadrada, una vertical, vertical */
/* ancho fijo y tope de alto: una vertical se angosta en vez de estirar la fila —la
   columna tiene que caber en la pantalla para seguir pegada— y ninguna se recorta */
.mp-fila-p__foto{ flex:0 0 3.5rem; display:flex; justify-content:center; align-items:center; height:4.25rem }
.mp-fila-p__foto img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto }
.mp-fila-p__txt{ display:flex; flex-direction:column; gap:.25rem; min-width:0 }
.mp-fila-p__nombre{ font-size:var(--mp-t-menor); line-height:1.35 }
.mp-fila-p a:hover .mp-fila-p__nombre{ text-decoration:underline; text-underline-offset:3px }
.mp-fila-p__precio{ font-size:var(--mp-t-menor); font-variant-numeric:tabular-nums }
.mp-fila-p__precio del{ color:var(--mp-tinta-3); margin-right:.35rem }
.mp-fila-p__precio ins{ text-decoration:none; color:var(--mp-vino) }

/* la firma: la prenda de la que se está leyendo se enciende */
.mp-fila-p.is-leyendo a{ background:var(--mp-lino); padding-left:.75rem }
.mp-fila-p.is-leyendo a::before{
  content:""; position:absolute; left:0; top:.55rem; bottom:.55rem; width:2px; background:var(--mp-vino);
}

.mp-lateral__mas{
  display:inline-block; margin-top:var(--mp-e2); font-size:var(--mp-t-menor);
  color:var(--mp-vino); text-decoration:underline; text-underline-offset:4px;
}

/* ───────── índice de la nota ───────── */
.mp-lateral__indice{ list-style:none; margin:0; padding:0 }
.mp-lateral__indice a{
  display:block; padding:.25rem 0 .25rem .9rem; border-left:1px solid var(--mp-hilo);
  font-size:var(--mp-t-menor); line-height:1.4; color:var(--mp-tinta-2); text-decoration:none;
  transition:color var(--mp-rapido) var(--mp-easing), border-color var(--mp-rapido) var(--mp-easing);
}
.mp-lateral__indice a:hover{ color:var(--mp-tinta) }
.mp-lateral__indice a.is-aqui{ color:var(--mp-tinta); border-left-color:var(--mp-vino) }

.mp-lateral__ayuda p{ margin:0 0 .6rem; font-size:var(--mp-t-base); line-height:1.55; color:var(--mp-tinta-2) }
.mp-lateral__ayuda a{ font-size:var(--mp-t-menor); color:var(--mp-vino); text-decoration:underline; text-underline-offset:4px }

/* ═══════════ LA NOTA ═══════════ */

.mp-lectura{ padding-block:var(--mp-e4) var(--mp-e7) }
/* columna de lectura + columna lateral, centradas: 692 px de texto, 300 de columna */
.mp-lectura__grid{ display:grid; gap:var(--mp-e6); grid-template-columns:minmax(0,1fr) }
@media (min-width:1024px){
  .mp-lectura__grid{
    max-width:68rem; margin-inline:auto;
    grid-template-columns:minmax(0,1fr) 18.75rem; gap:var(--mp-e7);
  }
}

.mp-lectura__cab{ margin:var(--mp-e4) 0 var(--mp-e5) }
.mp-lectura__tema{
  display:inline-block; margin-bottom:var(--mp-e2);
  font-size:var(--mp-t-nav); letter-spacing:var(--mp-track-etq); text-transform:uppercase;
  color:var(--mp-vino); text-decoration:none;
}
.mp-lectura__cab h1{
  margin:0; font-size:clamp(2.25rem, 5vw, var(--mp-t-titulo)); font-weight:500;
  line-height:1.02; letter-spacing:-.012em; max-width:15ch;
}
.mp-lectura__bajada{
  margin:var(--mp-e3) 0 0; max-width:36rem;
  font-size:var(--mp-t-medio); line-height:1.45; color:var(--mp-tinta-2);
}
.mp-lectura__datos{
  display:flex; flex-wrap:wrap; gap:.2rem var(--mp-e3); margin:var(--mp-e3) 0 0;
  padding-top:var(--mp-e2); border-top:1px solid var(--mp-hilo);
  font-size:var(--mp-t-menor); color:var(--mp-tinta-3);
}

/* la foto de la nota va entera; si es muy alta se achica, no se recorta */
.mp-lectura__foto{ margin:0 0 var(--mp-e5) }
.mp-lectura__foto{ text-align:center }
.mp-lectura__foto img{ display:inline-block; vertical-align:top; max-width:100%; width:auto; height:auto; max-height:80vh }

.mp-lectura__cuerpo{ max-width:66ch; font-size:1.0625rem; line-height:1.72; color:var(--mp-tinta) }
.mp-lectura__cuerpo > p{ margin:0 0 1.25em }
.mp-lectura__cuerpo h2{
  margin:2.4em 0 .6em; font-size:var(--mp-t-mayor); font-weight:500;
  line-height:1.12; letter-spacing:-.005em;
  /* que el título no quede escondido bajo la cabecera fija al saltar desde el índice */
  scroll-margin-top:calc(var(--mp-cab-alto, 105px) + var(--mp-e3));
}
.mp-lectura__cuerpo h3{ margin:2em 0 .5em; font-size:var(--mp-t-medio); font-weight:500; line-height:1.25 }
.mp-lectura__cuerpo a{ color:var(--mp-vino); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }
.mp-lectura__cuerpo ul, .mp-lectura__cuerpo ol{ margin:0 0 1.25em; padding-left:1.2em }
.mp-lectura__cuerpo li{ margin-bottom:.45em }
.mp-lectura__cuerpo li::marker{ color:var(--mp-tinta-3) }
.mp-lectura__cuerpo blockquote{
  margin:1.8em 0; padding-left:var(--mp-e3); border-left:1px solid var(--mp-vino);
  font-size:var(--mp-t-medio); line-height:1.5;
}
.mp-lectura__cuerpo img{ max-width:100%; height:auto }

/* ───────── la prenda dentro del texto ───────── */
/* hilos arriba y abajo, no una caja: el sitio separa con hilo y aire */
.mp-prenda{
  display:grid; grid-template-columns:minmax(0, 11rem) minmax(0,1fr); gap:var(--mp-e4);
  align-items:center; margin:2.2em 0; padding:var(--mp-e3) 0;
  border-top:1px solid var(--mp-hilo); border-bottom:1px solid var(--mp-hilo);
}
.mp-prenda__foto{ display:block; background:var(--mp-lino) }
.mp-prenda__foto img{ display:block; width:100%; height:auto }
.mp-prenda__txt > p{ margin:0 }
.mp-prenda__nombre{ font-size:var(--mp-t-medio); font-weight:500; line-height:1.25 }
.mp-prenda__nombre a{ color:var(--mp-tinta) !important; text-decoration:none !important }
.mp-prenda__nombre a:hover{ text-decoration:underline !important; text-underline-offset:4px }
.mp-prenda__frase{ margin-top:.45rem !important; font-size:var(--mp-t-base); line-height:1.55; color:var(--mp-tinta-2) }
.mp-prenda__tallas{
  display:flex; flex-wrap:wrap; gap:.2rem 1rem; margin-top:var(--mp-e2) !important;
  font-size:var(--mp-t-menor); letter-spacing:.06em;
}
.mp-prenda__tallas-eti{ color:var(--mp-tinta-3); letter-spacing:0; margin-right:.2rem }
.mp-prenda__precio{ margin-top:.55rem !important; font-size:var(--mp-t-base); font-variant-numeric:tabular-nums }
.mp-prenda__precio del{ color:var(--mp-tinta-3); margin-right:.4rem }
.mp-prenda__precio ins{ text-decoration:none; color:var(--mp-vino) }
/* la acción con el registro de los botones del sitio: hilo de 1 px y mayúsculas espaciadas */
.mp-prenda__ir{
  display:inline-block; margin-top:var(--mp-e2); padding:.75rem 1.4rem;
  border:1px solid var(--mp-tinta); color:var(--mp-tinta) !important; text-decoration:none !important;
  font-size:var(--mp-t-nav); letter-spacing:var(--mp-track-etq); text-transform:uppercase;
  transition:background-color var(--mp-rapido) var(--mp-easing), color var(--mp-rapido) var(--mp-easing);
}
.mp-prenda__ir:hover{ background:var(--mp-tinta); color:var(--mp-papel) !important }
@media (max-width:520px){
  .mp-prenda{ grid-template-columns:minmax(0, 7.5rem) minmax(0,1fr); gap:var(--mp-e2); align-items:start }
  .mp-prenda__nombre{ font-size:var(--mp-t-base) }
}

/* ───────── más notas: banda de lino a sangre, como «La marca» en la portada ───────── */
.mp-lectura__mas{ background:var(--mp-lino); padding-block:var(--mp-e6) var(--mp-e7) }
/* sólo el título de la banda: `.mp-lectura__mas h2` agrandaba también el de la nota de adentro */
.mp-lectura__mas > .mp-ancho > h2{ margin:0 0 var(--mp-e4); font-size:var(--mp-t-mayor); font-weight:500; line-height:1.12 }
/* filas compactas de hasta tres por línea: una nota sola ya no ocupa la banda entera */
.mp-lectura__mas-grid{
  display:grid; gap:var(--mp-e4);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
}
.mp-lectura__mas-grid .mp-nota-t{ grid-template-columns:7.5rem minmax(0,1fr); gap:var(--mp-e3); border-bottom:0; padding-bottom:0 }
.mp-lectura__mas-grid .mp-nota-t__bajada{ display:none }
.mp-lectura__mas-todo{
  display:inline-block; margin-top:var(--mp-e5); font-size:var(--mp-t-menor);
  color:var(--mp-vino); text-decoration:underline; text-underline-offset:4px;
}

/* ═══════════ accesibilidad ═══════════ */
.mp-diario a:focus-visible, .mp-lectura a:focus-visible, .mp-lateral a:focus-visible,
.mp-lateral button:focus-visible, .mp-lateral input:focus-visible{
  outline:2px solid var(--mp-vino); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .mp-nota-t__foto img, .mp-fila-p a, .mp-lateral__indice a, .mp-prenda__ir,
  .mp-diario__temas a{ transition:none }
  .mp-nota-t:hover .mp-nota-t__foto img{ transform:none }
}

/* en el teléfono y la tablet la columna cae DESPUÉS del texto: el índice ahí ya no sirve
   —la nota se leyó entera—, así que sólo se muestra cuando va al lado */
@media (max-width:1023px){ .mp-lateral__bloque--indice{ display:none } }

/* dentro de la columna con scroll propio el contorno por fuera se recortaba a los lados:
   se dibuja hacia adentro */
.mp-lateral a:focus-visible{ outline-offset:-2px }

/* en pantallas bajas (portátiles de 13") la columna de la nota no cabe con los temas:
   se quedan fuera —el tema de la nota está arriba, en la etiqueta y las migas— y las
   prendas y el índice siguen a la vista sin scroll interno */
@media (min-width:1024px) and (max-height:860px){ .mp-lateral--nota .mp-lateral__bloque--temas{ display:none } }