/** Shopify CDN: Minification failed

Line 397:0 Unexpected "}"

**/
/* Pagina de marca "Una forma de ver" (1 oct 2026).
   Jerarquia, fuentes y colores del sitio. Las fotos mandan; el texto es poco. */
.mk { --mk-hueso: #FAF7F3; --mk-verde: #2E3A36; --mk-noche: #0B0D0B;
  --mk-tenue: rgba(46, 58, 54, .62); }

/* Foto y hueco comparten caja, asi que el ritmo no cambia cuando llegue la real */
.mk__pic { display: block; position: relative; }
.mk__pic img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ratio); }
.mk__hueco { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  aspect-ratio: var(--ratio); padding: 20px; box-sizing: border-box;
  background: #E7E2DA; border: 1px dashed rgba(46, 58, 54, .34); color: var(--mk-verde); }
.mk__hueco-eti { font-family: var(--font-detalle); font-weight: 500; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(46, 58, 54, .72); }
.mk__hueco-desc { font-family: var(--font-cuerpo); font-weight: 300; font-size: 13.5px;
  line-height: 1.45; max-width: 44ch; }
.superficie-oscura .mk__hueco, .mk--oscura .mk__hueco { background: #1A1D1A;
  border-color: rgba(250, 247, 243, .26); color: #FAF7F3; }
.mk--oscura .mk__hueco-eti { color: rgba(250, 247, 243, .7); }

/* ---- portada ---- */
.mk-portada { position: relative; height: calc(100vh - var(--alto-header, 61px)); min-height: 520px;
  overflow: hidden; background: var(--mk-noche); color: #FAF7F3; }
.mk-portada .mk__pic, .mk-portada .mk__hueco { position: absolute; inset: 0; aspect-ratio: auto; }
/* En la portada el texto del hueco va ARRIBA: abajo esta el titulo y se pisaban. */
.mk-portada .mk__hueco { justify-content: flex-start; padding-top: clamp(26px, 5vh, 56px); }
.mk-respiro .mk__hueco { justify-content: flex-start; }
.mk-portada .mk__pic img { height: 100%; aspect-ratio: auto; }
.mk-portada__velo { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,11,.34) 0%, rgba(11,13,11,.1) 40%, rgba(11,13,11,.72) 100%); }
.mk-portada__texto { position: absolute; left: var(--pad-x); right: var(--pad-x);
  bottom: clamp(36px, 7vh, 80px); }
.mk-portada__h1 { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 7vw, 112px); line-height: .98; letter-spacing: -.02em; margin: 0 0 16px; }
.mk-portada__linea { font-family: var(--font-cuerpo); font-weight: 300; font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45; margin: 0; max-width: 46ch; }

/* ---- manifiesto ---- */
.mk-manifiesto { background: var(--mk-hueso); color: var(--mk-verde);
  padding: clamp(60px, 10vh, 120px) var(--pad-x); }
.mk-manifiesto__frase { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 68px); line-height: 1.04; letter-spacing: -.02em;
  margin: 0 auto clamp(40px, 7vh, 80px); max-width: 20ch; text-align: center; }
.mk-manifiesto__mosaico { display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.4vw, 20px); max-width: 1360px; margin: 0 auto; }
/* Mosaico asimetrico: seis piezas con pesos distintos. */
.mk-manifiesto__mosaico > *:nth-child(1) { grid-column: span 3; }
.mk-manifiesto__mosaico > *:nth-child(2) { grid-column: span 3; margin-top: clamp(20px, 4vh, 54px); }
.mk-manifiesto__mosaico > *:nth-child(3) { grid-column: span 2; }
.mk-manifiesto__mosaico > *:nth-child(4) { grid-column: span 4; }
.mk-manifiesto__mosaico > *:nth-child(5) { grid-column: span 4; margin-top: clamp(16px, 3vh, 40px); }
.mk-manifiesto__mosaico > *:nth-child(6) { grid-column: span 2; }

/* ---- principios ---- */
/* Alternado, y la foto pesa mas que el texto: 60/40. */
.mk-principio { display: grid; grid-template-columns: 60fr 40fr; align-items: stretch;
  min-height: 64vh; background: var(--mk-hueso); color: var(--mk-verde); }
.mk-principio--invertido { grid-template-columns: 40fr 60fr; }
.mk-principio--invertido .mk-principio__foto { order: 2; }
.mk-principio__foto { position: relative; overflow: hidden; }
.mk-principio__foto .mk__pic, .mk-principio__foto .mk__hueco { height: 100%; aspect-ratio: auto; }
.mk-principio__foto .mk__pic img { height: 100%; aspect-ratio: auto; }
.mk-principio__texto { display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 7vh, 90px) clamp(26px, 5vw, 86px); }
.mk-principio__n { font-family: var(--font-detalle); font-weight: 500; font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--mk-tenue); margin-bottom: 20px; }
.mk-principio__h2 { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 3.8vw, 60px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 18px; }
.mk-principio__p { font-family: var(--font-cuerpo); font-weight: 300; font-size: 18px;
  line-height: 1.55; margin: 0; max-width: 42ch; }

/* ---- gente ---- */
.mk-gente { background: var(--mk-hueso); color: var(--mk-verde);
  padding: clamp(60px, 10vh, 120px) var(--pad-x); }
.mk-gente__cab { max-width: 1360px; margin: 0 auto clamp(30px, 5vh, 56px); }
.mk-gente__h2 { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -.02em; margin: 0; }
.mk-gente__lista { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 40px); max-width: 1360px; margin: 0 auto; list-style: none; padding: 0; }
.mk-perfil__datos { margin-top: 18px; }
.mk-perfil__nombre { font-family: var(--font-resalte); font-weight: var(--peso-resalte);
  font-size: 20px; letter-spacing: -.01em; margin: 0 0 4px; }
.mk-perfil__meta { font-family: var(--font-detalle); font-weight: 500; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mk-tenue); margin: 0 0 14px; }
.mk-perfil__preg { font-family: var(--font-detalle); font-weight: 500; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mk-tenue); display: block; margin-bottom: 7px; }
.mk-perfil__resp { font-family: var(--font-cuerpo); font-weight: 300; font-size: 16px; line-height: 1.5; margin: 0; }

/* ---- tienda ---- */
.mk-tienda { position: relative; background: var(--mk-noche); color: #FAF7F3; overflow: hidden; }
.mk-tienda .mk__pic img { aspect-ratio: 21 / 9; }
.mk-tienda__linea { position: absolute; left: var(--pad-x); right: var(--pad-x);
  bottom: clamp(26px, 5vh, 56px); font-family: var(--font-display); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 32px); line-height: 1.25; margin: 0; max-width: 34ch;
  text-shadow: 0 1px 18px rgba(11, 13, 11, .8); }

/* ---- cierre ---- */
.mk-cierre { background: var(--mk-hueso); color: var(--mk-verde);
  padding: clamp(60px, 10vh, 120px) var(--pad-x) clamp(50px, 8vh, 96px); text-align: center; }
.mk-cierre__h2 { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.2vw, 64px); line-height: 1.04; letter-spacing: -.02em;
  margin: 0 auto clamp(26px, 4vh, 42px); max-width: 18ch; }
.mk-cierre__cta { display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  color: var(--mk-verde); border-bottom: 1px solid currentColor; padding-bottom: 6px;
  font-family: var(--font-detalle); font-weight: 500; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; }
.mk-cierre__cta span { transition: transform .18s; }
.mk-cierre__cta:hover span { transform: translateX(4px); }
.mk-cierre__armazones { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 36px); max-width: 1100px; margin: clamp(40px, 7vh, 78px) auto 0; }

@media (max-width: 899px) {
  /* Movil: todo apilado y las fotos a ancho completo. */
  .mk-portada { height: 76vh; }
  .mk-portada__h1 { font-size: clamp(38px, 11vw, 54px); }
  .mk-manifiesto, .mk-gente, .mk-cierre { padding: 48px var(--pad-x); }
  .mk-manifiesto__frase { font-size: clamp(26px, 8vw, 38px); text-align: left; margin-bottom: 30px; }
  .mk-manifiesto__mosaico { grid-template-columns: 1fr; gap: 14px; }
  .mk-manifiesto__mosaico > * { grid-column: span 1 !important; margin-top: 0 !important; }
  .mk-principio { grid-template-columns: 1fr; min-height: 0; }
  .mk-principio--invertido .mk-principio__foto { order: 0; }
  .mk-principio__foto .mk__pic img, .mk-principio__foto .mk__hueco { aspect-ratio: 4 / 5; height: auto; }
  .mk-principio__texto { padding: 30px 20px 44px; }
  .mk-principio__h2 { font-size: 32px; }
  .mk-principio__p { font-size: 16px; }
  .mk-gente__lista { grid-template-columns: 1fr; gap: 34px; }
  .mk-tienda .mk__pic img, .mk-tienda .mk__hueco { aspect-ratio: 4 / 5; }
  .mk-tienda__linea { font-size: 20px; }
  .mk-cierre__armazones { grid-template-columns: 1fr; }
}


/* ---- nuestra historia: angosto y centrado ---- */
.mk-historia { background: var(--mk-hueso); color: var(--mk-verde);
  padding: clamp(60px, 11vh, 130px) var(--pad-x); }
.mk-historia__cuerpo { max-width: 58ch; margin: 0 auto; text-align: center; }
.mk-historia__eyebrow { display: block; font-family: var(--font-detalle); font-weight: 500;
  font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--mk-tenue);
  margin-bottom: clamp(20px, 3vh, 34px); }
.mk-historia__p { font-family: var(--font-cuerpo); font-weight: 300; font-size: 18px;
  line-height: 1.68; margin: 0 0 1.25em; }
.mk-historia__p:last-child { margin-bottom: 0; }

/* ---- frase destacada ---- */
.mk-cita { background: var(--mk-hueso); color: var(--mk-verde);
  padding: clamp(64px, 12vh, 150px) var(--pad-x); }
.mk-cita--oscura { background: var(--mk-noche); color: #FAF7F3; }
.mk-cita__cuerpo { max-width: 26ch; margin: 0 auto; text-align: center; }
.mk-cita__texto { font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4vw, 60px); line-height: 1.08; letter-spacing: -.02em; margin: 0; }
.mk-cita__autor { display: block; margin-top: clamp(20px, 3vh, 34px); font-style: normal;
  font-family: var(--font-detalle); font-weight: 500; font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; opacity: .7; }

/* ---- respiro a sangre ---- */
.mk-respiro { position: relative; overflow: hidden; }
.mk-respiro .mk__pic img, .mk-respiro .mk__hueco { aspect-ratio: 16 / 9; min-height: 56vh; }
.mk-respiro__velo { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,11,.12) 0%, rgba(11,13,11,.5) 100%); }
.mk-respiro__frase { position: absolute; left: var(--pad-x); right: var(--pad-x);
  bottom: clamp(28px, 5vh, 56px); margin: 0; color: #FAF7F3;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.16; max-width: 24ch; }

/* ---- boletin y tiendas del cierre ---- */
.mk-cierre__boletin { max-width: 440px; margin: clamp(36px, 6vh, 64px) auto 0; }
.mk-cierre__boletin-linea { font-family: var(--font-cuerpo); font-weight: 300; font-size: 16px;
  margin: 0 0 14px; }
.mk-cierre__form { display: flex; gap: 10px; }
.mk-cierre__form input { flex: 1; height: 46px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid rgba(46, 58, 54, .3); background: transparent; color: var(--mk-verde);
  font-family: var(--font-cuerpo); font-weight: 300; font-size: 15px; }
.mk-cierre__form input:focus-visible { outline: none; border-color: var(--mk-verde); }
.mk-cierre__form button { height: 46px; padding: 0 20px; border: 0; cursor: pointer;
  background: var(--mk-verde); color: var(--mk-hueso);
  font-family: var(--font-detalle); font-weight: 500; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; }
.mk-cierre__tiendas { list-style: none; margin: clamp(30px, 5vh, 52px) 0 0; padding: 0;
  display: flex; justify-content: center; gap: clamp(22px, 4vw, 56px); flex-wrap: wrap; }
.mk-cierre__tiendas a { text-decoration: none; color: inherit; }
.mk-cierre__tienda-n { display: block; font-family: var(--font-detalle); font-weight: 500;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.mk-cierre__tienda-l { display: block; font-family: var(--font-cuerpo); font-weight: 300;
  font-size: 14px; color: var(--mk-tenue); margin-top: 5px; }
.mk-cierre__tiendas a:hover .mk-cierre__tienda-n { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 899px) {
  .mk-principio, .mk-principio--invertido { grid-template-columns: 1fr; }
  .mk-historia, .mk-cita { padding: 48px var(--pad-x); }
  .mk-historia__p { font-size: 16px; }
  .mk-cita__texto { font-size: clamp(24px, 7.5vw, 34px); }
  .mk-respiro .mk__pic img, .mk-respiro .mk__hueco { aspect-ratio: 4 / 5; min-height: 0; }
  .mk-cierre__form { flex-direction: column; }
  .mk-cierre__tiendas { flex-direction: column; gap: 20px; }
}

/* ---- La frase destacada, con su linea vertical a la izquierda ---- */
.mk-cita--regla .mk-cita__cuerpo { max-width: 34ch; margin: 0 auto; text-align: left;
  border-left: 2px solid var(--mk-verde); padding-left: clamp(20px, 3vw, 40px); }
.mk-cita--regla .mk-cita__texto { font-family: var(--font-cuerpo); font-weight: 900;
  font-size: clamp(24px, 3vw, 42px); line-height: 1.2; letter-spacing: -.015em; }
.mk-cita--oscura.mk-cita--regla .mk-cita__cuerpo { border-left-color: #FAF7F3; }

/* ---- La palabra sola, enorme, sobre una foto ---- */
.mk-palabra { position: relative; }
.mk-palabra__pic { position: absolute; inset: 0; }
.mk-palabra__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-palabra::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(10,12,9,.62) 0%, rgba(10,12,9,.28) 45%, rgba(10,12,9,.12) 100%); }
.mk-palabra__caja { position: relative; z-index: 2; min-height: clamp(380px, 56vh, 620px);
  display: flex; align-items: flex-start; padding: clamp(28px, 5vh, 60px) var(--pad-x); }
.mk-palabra__txt { font-family: var(--font-cuerpo); font-weight: 900;
  font-size: clamp(44px, 9vw, 150px); line-height: .96; letter-spacing: -.03em;
  margin: 0; color: #FFF; }

@media (max-width: 899px) {
  .mk-historia__entrada { font-size: clamp(19px, 5.4vw, 24px); }
  .mk-historia__linea { font-size: clamp(22px, 6.4vw, 30px); }
  .mk-palabra__caja { min-height: 60vh; }
}

/* ---- Nuestra historia, formato de dos columnas ---- */
.mk-historia__rejilla { display: grid; grid-template-columns: 45fr 50fr;
  gap: clamp(28px, 5vw, 86px); align-items: start; max-width: 1240px; margin: 0 auto; }
.mk-historia__izq { position: relative; }
/* La frase cuelga de una regla vertical fina, como en el bloque de Aether. */
.mk-historia__frase { font-family: var(--font-cuerpo); font-weight: 900;
  font-size: clamp(26px, 2.9vw, 42px); line-height: 1.16; letter-spacing: -.018em;
  margin: 0; padding-left: clamp(18px, 2vw, 30px);
  border-left: 1px solid var(--mk-verde); color: var(--mk-verde); text-align: left; }
.mk-historia__izq .mk-historia__eyebrow { display: block; margin-bottom: clamp(14px, 2vh, 22px);
  padding-left: clamp(18px, 2vw, 30px); }
/* Cuerpo: Avenir Light, a la izquierda, con aire entre renglones y algo de tracking. */
.mk-historia__der .mk-historia__p { font-family: var(--font-cuerpo); font-weight: 300;
  font-size: clamp(14px, 1.08vw, 16px); line-height: 1.95; letter-spacing: .012em;
  text-align: left; margin: 0 0 clamp(13px, 1.7vh, 19px); color: var(--mk-verde); max-width: 62ch; }
.mk-historia__der .mk-historia__p:last-child { margin-bottom: 0; }
.mk-historia__p--firma { font-size: 13px !important; letter-spacing: .14em !important;
  text-transform: uppercase; opacity: .72; }

/* ---- Sello circular ---- */
.mk-sello { position: relative; width: clamp(120px, 11vw, 168px); aspect-ratio: 1;
  margin-top: clamp(34px, 5vh, 64px); }
.mk-sello__svg { position: absolute; inset: 0; width: 100%; height: 100%;
  animation: mk-sello-gira 36s linear infinite; }
.mk-sello__txt { font-family: var(--font-detalle); font-weight: 400; font-size: 13.5px;
  letter-spacing: .13em; fill: var(--mk-verde); }
.mk-sello__ojo { position: absolute; left: 50%; top: 50%; width: 34%; height: auto;
  transform: translate(-50%, -50%); fill: var(--mk-verde); }
@keyframes mk-sello-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mk-sello__svg { animation: none; } }

/* ---- Frase con foto vertical ---- */
.mk-frasefoto { background: var(--mk-hueso); }
.mk-frasefoto__rejilla { display: grid; grid-template-columns: 46fr 50fr;
  gap: clamp(28px, 5vw, 80px); align-items: center; max-width: 1240px; margin: 0 auto; }
.mk-frasefoto__foto .mk__pic img, .mk-frasefoto__foto .mk__hueco { aspect-ratio: 4 / 5; }

@media (max-width: 899px) {
  /* Una columna, nada centrado. */
  .mk-historia__rejilla, .mk-frasefoto__rejilla { grid-template-columns: 1fr; gap: 26px; }
  .mk-historia__frase { font-size: clamp(24px, 6.6vw, 32px); padding-left: 16px; }
  .mk-historia__izq .mk-historia__eyebrow { padding-left: 16px; }
  .mk-historia__der .mk-historia__p { font-size: 15px; line-height: 1.85; max-width: none; }
  .mk-sello { width: 104px; margin-top: 28px; }
  .mk-sello__txt { font-size: 14px; }
}

/* ---- Enlace discreto dentro de un principio ---- */
.mk-principio__link { display: inline-block; margin-top: clamp(16px, 2.2vh, 24px);
  font-family: var(--font-cuerpo); font-weight: 300; font-size: 14px;
  color: var(--mk-verde); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mk-principio__link:hover { opacity: .68; }

/* ---- Texto bajo la foto de "Inconformes." ---- */
.mk-palabra__pie { background: var(--mk-hueso); color: var(--mk-verde); text-align: left; }
.mk-palabra__pie p { font-family: var(--font-cuerpo); font-weight: 300;
  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.85; letter-spacing: .012em;
  margin: 0 0 10px; max-width: 58ch; }
.mk-palabra__pie p:last-child { margin-bottom: 0; font-weight: 900; }
/* Hueco de la foto a sangre, cuando todavia no llega. */
.mk-palabra__hueco { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 8px; padding: 20px;
  background: #E7E2DA; border: 1px dashed rgba(46, 58, 54, .34); color: var(--mk-verde); }
.mk-palabra:has(.mk-palabra__hueco)::after { background: none; }
.mk-palabra:has(.mk-palabra__hueco) .mk-palabra__txt { color: var(--mk-verde); }

/* ==========================================================================
   Piezas de la pagina de marca. Medidas tomadas de la referencia con
   scripts/mide-aether.js: a 1440 el contenido vive en 1152 (80 %) con 64 de
   canaleta, las fotos verticales van en 2:3 y las anchas en 3:2, y la escala de
   texto es 48 / 36 / 16 / 11 px. A 390: canaleta 26, contenido 338, y la escala
   36 / 32 / 22 / 16 / 13 px.
   ========================================================================== */
.mk-pz { --pz-canaleta: clamp(26px, 4.4vw, 64px); --pz-max: 1152px; padding: 0; }

/* ---- foto a sangre con titular ---- */
.mk-pz--portada { position: relative; padding: 0; }
.mk-pz__fondo { position: absolute; inset: 0; }
.mk-pz__fondo .mk__pic, .mk-pz__fondo .mk__hueco { height: 100%; aspect-ratio: auto; }
.mk-pz__fondo .mk__pic img { width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pz-foco, 50% 50%); }
.mk-pz__velo { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,9,.52) 0%, rgba(10,12,9,.46) 24%, rgba(10,12,9,.22) 42%, rgba(10,12,9,0) 60%),
    linear-gradient(160deg, rgba(10,12,9,.58) 0%, rgba(10,12,9,.22) 48%, rgba(10,12,9,.06) 100%); }
.mk-pz__sobre { position: relative; z-index: 2; min-height: clamp(420px, 72vh, 760px);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: clamp(30px, 6vh, 72px) var(--pz-canaleta); }
/* Filete blanco fino arriba, de borde a borde del contenido. */
.mk-pz__filete { display: block; height: 1px; background: rgba(255,255,255,.72);
  margin-bottom: clamp(18px, 3vh, 34px); }
.mk-pz__titular { font-family: var(--font-cuerpo); font-weight: 900;
  font-size: clamp(36px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -.025em;
  margin: 0; color: #FFF; max-width: 18ch; text-align: left; }

/* Portada a pantalla completa: alto = lo que se ve debajo del header, de orilla
   a orilla. Solo la lleva la portada que lo pide; las demas conservan su alto.
   El .mk-pz__fondo ya es inset:0, asi que no hay franja encima de la foto. */
.mk-pz--pantalla .mk-pz__sobre { min-height: calc(100svh - var(--alto-header, 61px)); }
.mk-pz--pantalla .mk-pz__fondo .mk__pic img { object-position: var(--pz-foco, 50% 50%); }

/* ---- foto ancha centrada ---- */
/* Portada sobre foto clara: el titular blanco no se lee (en la panga del
   capitulo 3 el contraste medido era 1.00:1). Se pasa a tinta, sin velo ni
   sombra, que es lo unico que no toca la foto. */
.mk-pz--titulo-tinta .mk-pz__titular { color: var(--mk-noche); }
.mk-pz--titulo-tinta .mk-pz__filete { background: rgba(11, 13, 11, .55); }

.mk-pz--ancha { padding: clamp(40px, 7vh, 96px) var(--pz-canaleta); background: var(--mk-hueso); }
.mk-pz__centro { max-width: var(--pz-max); margin: 0 auto; }
.mk-pz__centro .mk__pic img, .mk-pz__centro .mk__hueco { aspect-ratio: 3 / 2; }

/* ---- frase con foto grande y foto chica desfasada ---- */
.mk-pz--frase { padding: clamp(40px, 8vh, 110px) var(--pz-canaleta); background: var(--mk-hueso); }
.mk-pz__rejilla { display: grid; grid-template-columns: 46fr 46fr;
  gap: clamp(24px, 4vw, 72px); max-width: var(--pz-max); margin: 0 auto; align-items: start; }
.mk-pz--volteada .mk-pz__grande { order: 2; }
.mk-pz__grande .mk__pic img, .mk-pz__grande .mk__hueco { aspect-ratio: 2 / 3; }
.mk-pz__col { padding-top: clamp(20px, 6vh, 90px); }
/* La frase cuelga de la regla vertical, igual que en la carta. */
.mk-pz__frase { font-family: var(--font-cuerpo); font-weight: 900;
  font-size: clamp(22px, 2.5vw, 36px); line-height: 1.18; letter-spacing: -.016em;
  margin: 0; padding-left: clamp(16px, 1.8vw, 28px);
  border-left: 1px solid var(--mk-verde); color: var(--mk-verde); text-align: left; }
.mk-pz__link { display: inline-block; margin: clamp(16px, 2.4vh, 26px) 0 0 clamp(16px, 1.8vw, 28px);
  font-family: var(--font-cuerpo); font-weight: 300; font-size: 14px; color: var(--mk-verde);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mk-pz__link:hover { opacity: .68; }
/* Desfasada: ni pegada al margen ni alineada con la frase. */
.mk-pz__chica { width: 72%; margin: clamp(28px, 5vh, 64px) 0 0 auto; }
.mk-pz--volteada .mk-pz__chica { margin: clamp(28px, 5vh, 64px) auto 0 0; }
.mk-pz__chica .mk__pic img, .mk-pz__chica .mk__hueco { aspect-ratio: 3 / 2; }

/* ---- dos fotos pegadas ----
   Medido en la referencia: las dos van en 0.77, con el mismo alto, sin hueco
   entre ellas, y el par ocupa el ancho del contenido (1152 de 1440), no a sangre. */
.mk-pz--par { padding: clamp(28px, 5vh, 64px) var(--pz-canaleta); background: var(--mk-hueso); }
.mk-pz__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  max-width: var(--pz-max); margin: 0 auto; }
.mk-pz__dos .mk__pic img, .mk-pz__dos .mk__hueco { aspect-ratio: 0.77; }

/* ---- cita con autor ----
   Medido en la referencia: el texto ocupa el ancho de sus fotos anchas centradas
   (960 de 1440, empezando en x 240) y va alineado a la IZQUIERDA, a 36 px con
   interlineado 1.1; a 390, 32 px empezando en x 28. Aqui se usa el ancho de
   NUESTRAS fotos anchas (--pz-max) para que los bordes izquierdos coincidan en
   esta pagina. Sin regla vertical: esa es solo de las frases. */
.mk-pz--cita { padding: clamp(64px, 13vh, 150px) var(--pz-canaleta); background: var(--mk-hueso); }
.mk-pz__bloque { max-width: var(--pz-max); margin: 0 auto; padding-left: 0; }
.mk-pz__cita { font-family: var(--font-cuerpo); font-weight: 900;
  font-size: clamp(32px, 2.5vw, 36px); line-height: 1.1; letter-spacing: -.018em;
  margin: 0; color: var(--mk-verde); text-align: left; text-wrap: pretty; }
.mk-pz__autor { display: block; margin-top: clamp(22px, 3.4vh, 34px);
  font-family: var(--font-detalle); font-weight: 400; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; font-style: normal;
  text-align: left; color: var(--mk-verde); opacity: .78; }

@media (max-width: 899px) {
  /* 390: una columna, canaleta 26, la foto chica deja de desfasarse. */
  .mk-pz__rejilla, .mk-pz__dos { grid-template-columns: 1fr; }
  .mk-pz--volteada .mk-pz__grande { order: 0; }
  .mk-pz__col { padding-top: 24px; }
  .mk-pz__chica, .mk-pz--volteada .mk-pz__chica { width: 100%; margin: 24px 0 0; }
  .mk-pz__titular { font-size: clamp(32px, 9vw, 40px); max-width: none; }
  .mk-pz__frase { font-size: clamp(22px, 6.2vw, 28px); padding-left: 16px; }
  .mk-pz__cita { font-size: 32px; line-height: 1.1; }
  .mk-pz__bloque { max-width: none; }
  .mk-pz__sobre { min-height: 62vh; }
}

}

/* ---- Portada con proporcion declarada (formato de la referencia) ----
   Medido a 1440: la foto es 1440x720, o sea 2:1, y no llena la pantalla; a 390
   queda en 0.554. El titular va dentro, a la izquierda, debajo de un filete fino.
   Sin velo ni filtro: la foto se ve tal cual. */
.mk-pz--proporcion { --pz-canaleta: var(--canaleta, 40px); }
/* El alto NUNCA pasa de lo que deja libre la pantalla: se toma el menor entre el
   que pide la proporcion y el hueco que queda bajo el header, descontando el aire
   de arriba y una franja de blanco abajo. Asi la foto se ve completa en la primera
   pantalla aunque la ventana sea baja. */
.mk-pz--proporcion { --pz-arriba: clamp(14px, 2.6vh, 34px); --pz-abajo: clamp(22px, 5vh, 56px);
  padding: var(--pz-arriba) 0 var(--pz-abajo); background: var(--mk-hueso); }
.mk-pz--proporcion .mk-pz__sobre { min-height: 0;
  height: min(calc(100vw / var(--pz-razon, 2.2)),
              calc(100svh - var(--alto-header, 61px) - var(--pz-arriba) - var(--pz-abajo)));
  justify-content: flex-start; padding: clamp(18px, 3vh, 36px) var(--pz-canaleta); }
/* El fondo va con inset:0 sobre la seccion, asi que se comia el margen de arriba
   y la franja de blanco de abajo: aqui se le dan los mismos limites que a la caja. */
.mk-pz--proporcion .mk-pz__fondo { top: var(--pz-arriba); bottom: var(--pz-abajo); }
.mk-pz--proporcion .mk-pz__fondo .mk__pic img { object-position: var(--pz-foco, 50% 50%); }
.mk-pz--proporcion .mk-pz__filete { background: rgba(255, 255, 255, .5);
  margin-bottom: clamp(26px, 5vh, 58px); }
.mk-pz--proporcion .mk-pz__titular { font-size: clamp(34px, 4.4vw, 64px); margin: 0; }
/* Variante sin franjas: el alto sale de la razon declarada y la foto va a
   sangre, sin el aire hueso de la variante hero ni el tope por alto de pantalla.
   Asi la portada muestra el archivo entero sin recortar nada. */
.mk-pz--proporcion.mk-pz--sin-franja { padding: 0; }
.mk-pz--proporcion.mk-pz--sin-franja .mk-pz__fondo { top: 0; bottom: 0; }
.mk-pz--proporcion.mk-pz--sin-franja .mk-pz__sobre {
  height: calc(100vw / var(--pz-razon, 1.778)); }

@media (max-width: 899px) {
  .mk-pz--proporcion { --pz-canaleta: 20px; }
  .mk-pz--proporcion .mk-pz__sobre {
    height: min(calc(100vw / var(--pz-razon-movil, var(--pz-razon, 2.2))),
                calc(100svh - var(--alto-header, 61px) - var(--pz-arriba) - var(--pz-abajo))); }
  .mk-pz--proporcion.mk-pz--sin-franja .mk-pz__sobre {
    height: calc(100vw / var(--pz-razon-movil, var(--pz-razon, 1.778))); }
  .mk-pz--proporcion .mk-pz__titular { font-size: clamp(30px, 8.6vw, 38px); }
}

/* ==========================================================================
   EFECTO DE ENFOQUE DE LA PORTADA (7 oct 2026)

   La misma foto dos veces: la de abajo desenfocada, la de arriba nítida y
   recortada a una ventana. Las cuatro esquinas del logo marcan esa ventana.
   No se toca el archivo: todo pasa en el navegador.

   La ventana vive en cuatro variables y el clip-path y los corchetes leen las
   mismas, así que no se pueden separar.
   ========================================================================== */

/* La ventana se arma aqui, no en el style inline, para que el media query de
   movil pueda cambiarla: una variable puesta inline le gana a cualquier regla. */
/* Con el efecto de enfoque la foto arranca pegada al header: el respiro de
   arriba que deja .mk-pz--proporcion dejaba ver una franja del fondo hueso. */
.mk-pz--enfoque.mk-pz--proporcion { --pz-arriba: 0px; padding-top: 0; }
.mk-pz--enfoque { overflow: hidden;
  --ventana-arriba: var(--v-arriba-d); --ventana-der: var(--v-der-d);
  --ventana-abajo: var(--v-abajo-d); --ventana-izq: var(--v-izq-d); }

/* La capa de abajo se sale 24 px por cada lado para que el desenfoque no deje
   un borde transparente en las orillas. Nada de scale: desalinearía las capas. */
.mk-pz--enfoque .mk-pz__fondo { inset: -8px; }
.mk-pz--proporcion.mk-pz--enfoque .mk-pz__fondo {
  top: calc(var(--pz-arriba) - 8px); bottom: calc(var(--pz-abajo) - 8px);
  left: -8px; right: -8px;
}
.mk-pz--enfoque .mk-pz__fondo .mk__pic img {
  /* Fuera de la ventana la foto pierde un punto de vida: sigue siendo la misma
     foto, solo que un poco menos viva. La capa de la ventana no lleva ningun
     filtro. */
  filter: blur(1.5px) saturate(.85) brightness(.93) contrast(.95);
  transition: filter 600ms cubic-bezier(.22,.61,.36,1);
}

/* La capa nítida ocupa exactamente la caja de la foto, sin desbordes, y se
   recorta a la ventana. Mismo object-position que la de abajo. */
.mk-pz__nitido { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mk-pz--proporcion .mk-pz__nitido { top: var(--pz-arriba); bottom: var(--pz-abajo); }
.mk-pz__nitido .mk__pic { height: 100%; aspect-ratio: auto; }
.mk-pz__nitido .mk__pic img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pz-foco, 50% 50%);
}
.mk-pz__nitido {
  clip-path: inset(var(--ventana-arriba) var(--ventana-der) var(--ventana-abajo) var(--ventana-izq));
}

/* Los corchetes: las cuatro esquinas del logo, blancas, ancladas a la ventana. */
.mk-pz__corchetes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mk-pz--proporcion .mk-pz__corchetes { top: var(--pz-arriba); bottom: var(--pz-abajo); }
/* El brazo mide un 9% del ancho de la ventana: al escalar la ventana, el
   corchete escala con ella y el grosor relativo no cambia. */
.mk-pz__esq { position: absolute; display: block;
  width: calc((100% - var(--ventana-izq) - var(--ventana-der)) * 0.055);
  min-width: 18px; color: #fff; }
.mk-pz__esq svg { display: block; width: 100%; height: auto; }
.mk-pz__esq--ai { top: var(--ventana-arriba); left: var(--ventana-izq); }
.mk-pz__esq--ad { top: var(--ventana-arriba); right: var(--ventana-der); }
.mk-pz__esq--bi { bottom: var(--ventana-abajo); left: var(--ventana-izq); }
.mk-pz__esq--bd { bottom: var(--ventana-abajo); right: var(--ventana-der); }

/* Entrada, una sola vez: arranca todo desenfocado y sin corchetes. */
.mk-pz--enfoque .mk-pz__nitido,
.mk-pz--enfoque .mk-pz__corchetes { opacity: 0; transition: opacity 600ms cubic-bezier(.22,.61,.36,1); }
.mk-pz--enfoque.esta-enfocada .mk-pz__nitido,
.mk-pz--enfoque.esta-enfocada .mk-pz__corchetes { opacity: 1; }

@media (max-width: 899px) {
  .mk-pz--enfoque .mk-pz__fondo .mk__pic img { filter: blur(1px) saturate(.85) brightness(.93) contrast(.95); }
  /* En movil la caja del hero es mucho mas alta, asi que los margenes de arriba
     y abajo suben para que la ventana siga siendo horizontal (2:1) y no se
     vuelva una tira vertical. Ancho: 80% del hero. */
  .mk-pz--enfoque {
    --ventana-arriba: var(--v-arriba-m); --ventana-der: var(--v-der-m);
    --ventana-abajo: var(--v-abajo-m); --ventana-izq: var(--v-izq-m);
  }
  .mk-pz__esq { min-width: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mk-pz--enfoque .mk-pz__fondo .mk__pic img,
  .mk-pz--enfoque .mk-pz__nitido,
  .mk-pz--enfoque .mk-pz__corchetes { transition: none; }
}