/* ==========================================================================
   FerPilot · blog.css
   Capa que se monta encima de site.css. Solo contiene lo que el blog añade:
   listado, página de post y bloque de suscripción. Los colores, la tipografía
   y el ritmo vienen de los tokens de site.css, así que la web y el blog no
   pueden desalinearse.
   ========================================================================== */

/* La barra ya es sticky en site.css, así que ocupa su sitio en el flujo y el
   contenido no necesita margen extra. Aquí solo se marca la sección activa. */
.nav .links a.active{ color:var(--ink); font-weight:600 }

/* --------------------------------------------------------------------------
   Etiqueta de formato. Es el elemento que da al Lab su aire de sistema:
   mayúscula pequeña, monoespaciada y un icono propio por tipo.
   -------------------------------------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:.6rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px 4px; border-radius:var(--r-xs);
  border:1px solid currentColor; line-height:1;
}
.badge svg{ width:11px; height:11px; flex:none }
.badge--verde{ color:var(--green-deep) }
.badge--azul { color:var(--blue-deep) }
.badge--tinta{ color:var(--gray) }
.badge--aviso{ color:var(--gray-soft); border-style:dashed }

/* --------------------------------------------------------------------------
   Cabecera del Lab
   -------------------------------------------------------------------------- */
.lhero{ padding:84px 0 56px }
.lhero__in{ max-width:860px }
.lhero__t{
  font-family:var(--serif); font-variation-settings:'opsz' 120,'SOFT' 0,'WONK' 1;
  font-size:clamp(2.5rem,5.4vw,4.1rem); line-height:1.06;
  letter-spacing:-.018em; font-weight:700; color:var(--ink);
  margin:0 0 26px; text-wrap:balance;
}
.lhero__t u{
  text-decoration:none; font-family:'Fraunces',Georgia,serif;
  font-style:italic; font-weight:500; color:var(--green-deep);
}
.lhero__lead{
  font-size:1.14rem; line-height:1.72; color:var(--gray);
  max-width:66ch; margin:0 0 30px;
}
.lhero__lead b{ color:var(--ink-2); font-weight:700 }

/* Atajos por tipo. Solo aparecen cuando hay más de un formato publicado,
   así que con una sola pieza la cabecera no se llena de ruido. */
.chips{ display:flex; flex-wrap:wrap; gap:10px }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:9px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--white);
  color:var(--ink-2); text-decoration:none;
  transition:border-color .2s, color .2s, transform .2s;
}
.chip svg{ width:12px; height:12px; flex:none; color:var(--gray-soft) }
.chip b{
  font-weight:700; color:var(--gray-soft);
  padding-left:7px; border-left:1px solid var(--line);
}
.chip:hover{ border-color:var(--blue-soft); color:var(--blue-deep); transform:translateY(-1px) }
.chip:hover svg{ color:var(--blue) }

/* --------------------------------------------------------------------------
   Lo último: la pieza más reciente, siempre arriba y a todo el ancho.
   -------------------------------------------------------------------------- */
.ultimo{ padding:0 0 var(--sec) }
.eyebrow--sola{ margin-bottom:22px }

.ucard{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:0; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--white);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.ucard:hover{ border-color:var(--blue-soft); transform:translateY(-2px); box-shadow:0 14px 30px rgba(24,33,42,.07) }
.ucard--solo{ grid-template-columns:1fr }

.ucard__img{ position:relative; min-height:260px; background:var(--blue-wash) }
.ucard__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

.ucard__txt{ padding:clamp(26px,3.4vw,44px); align-self:center }
.ucard__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 18px;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gray-soft);
}
.ucard__t{
  font-family:var(--serif); font-variation-settings:'opsz' 72,'SOFT' 0,'WONK' 0;
  font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.12;
  letter-spacing:-.012em; font-weight:700; color:var(--ink);
  margin:0 0 14px; text-wrap:balance;
}
.ucard:hover .ucard__t{
  font-family:var(--serif); font-variation-settings:'opsz' 72,'SOFT' 0,'WONK' 0; color:var(--blue-deep) }
.ucard__x{ font-size:1.02rem; line-height:1.68; color:var(--gray); margin:0 0 20px; max-width:52ch }

/* --------------------------------------------------------------------------
   Grupos por tipo. Cada formato tiene su sección y su rejilla.
   -------------------------------------------------------------------------- */
.grupo,.dest{ padding:var(--sec) 0 }
.grupo__hd{ max-width:620px; margin-bottom:34px }
.grupo__hd .eyebrow i{
  font-style:normal; font-family:var(--mono); font-size:.9em;
  color:var(--gray-soft); margin-left:10px;
}
.grupo__lead{ font-size:1.02rem; line-height:1.66; color:var(--gray); margin:14px 0 0 }

.rej{ list-style:none; margin:0; padding:0; display:grid; gap:20px }
.rej--media{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) }
.rej--compacta{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }
/* Los destacados son pocos (2-3): que llenen el ancho en vez de dejar huecos. */
.rej--dest{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); max-width:980px }
.rej--dest .kcard__t{ font-size:1.22rem }

/* Vídeos: la miniatura manda. */
.mcard{ min-width:0 }
.mcard__link{ display:block; text-decoration:none; color:inherit }
.mcard__thumb{
  display:block; position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r); border:1px solid var(--line); background:var(--blue-wash);
  margin-bottom:16px;
}
.mcard__thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.mcard__link:hover .mcard__thumb img{ transform:scale(1.04) }
.mcard__sin{
  position:absolute; inset:0; display:grid; place-items:center; color:var(--gray-soft);
}
.mcard__sin svg{ width:30px; height:30px }
.mcard__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--ink);
  box-shadow:0 14px 30px rgba(24,33,42,.07); transition:transform .25s;
}
.mcard__link:hover .mcard__play{ transform:translate(-50%,-50%) scale(1.08) }
.mcard__play svg{ width:20px; height:20px; margin-left:2px }
.mcard__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 10px;
  font-family:var(--mono); font-size:.63rem; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gray-soft);
}
.mcard__t{ font-size:1.12rem; line-height:1.32; letter-spacing:-.015em; font-weight:700; color:var(--ink); margin:0 0 8px }
.mcard__link:hover .mcard__t{ color:var(--blue-deep) }
.mcard__x{ font-size:.93rem; line-height:1.6; color:var(--gray); margin:0 }

/* Apps y artefactos: piezas pequeñas, el icono hace de portada. */
.kcard{ min-width:0 }
.kcard__link{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  padding:24px 22px 22px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--white);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.kcard__link:hover{ border-color:var(--green-soft); transform:translateY(-2px); box-shadow:0 14px 30px rgba(24,33,42,.07) }
.kcard__ico{
  display:grid; place-items:center; width:40px; height:40px; margin-bottom:18px;
  border-radius:var(--r-xs); background:var(--green-soft); color:var(--green-deep);
}
.kcard__ico svg{ width:19px; height:19px }
.kcard__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 10px;
  font-family:var(--mono); font-size:.63rem; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gray-soft);
}
.kcard__t{ font-size:1.06rem; line-height:1.34; letter-spacing:-.015em; font-weight:700; color:var(--ink); margin:0 0 8px }
.kcard__link:hover .kcard__t{ color:var(--green-deep) }
.kcard__x{ font-size:.92rem; line-height:1.6; color:var(--gray); margin:0 0 16px }
.kcard__link .pcard__go{ margin-top:auto }

/* Cuando todavía no hay nada que enseñar. */
.vacio{ max-width:560px; padding:10px 0 }
.vacio h2{ font-size:1.7rem; letter-spacing:-.02em; font-weight:800; color:var(--ink); margin:16px 0 12px }
.vacio p{ font-size:1rem; line-height:1.7; color:var(--gray); margin:0 }

/* En las secciones de fondo blanco las tarjetas se invierten, igual que hace
   la home, para que el borde no sea lo único que las separa del fondo. */
section.alt .ucard,
section.alt .kcard__link,
section.alt .mcard__thumb{ background:var(--paper) }

/* --------------------------------------------------------------------------
   Lista de artículos
   Cada pieza es una fila ancha, no una tarjeta en rejilla: se lee como un
   índice, que es lo que es.
   -------------------------------------------------------------------------- */
.blist{ padding:var(--sec) 0 }
.posts{ list-style:none; margin:0; padding:0; max-width:980px }
.pcard{ border-top:1px solid var(--line) }
.pcard:last-child{ border-bottom:1px solid var(--line) }

.pcard__link{
  display:block; text-decoration:none; color:inherit;
  padding:38px 0 36px; position:relative;
  transition:background .3s var(--ease), padding .3s var(--ease);
}
.pcard__link::before{
  content:''; position:absolute; left:-24px; right:-24px; top:0; bottom:0;
  background:var(--white); opacity:0; border-radius:var(--r);
  box-shadow:0 1px 2px rgba(24,33,42,.04), 0 10px 30px -14px rgba(24,33,42,.16);
  transition:opacity .3s var(--ease); z-index:0;
}
.pcard__link:hover::before{ opacity:1 }
.pcard__link > *{ position:relative; z-index:1 }

.pcard__meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.67rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gray-soft);
  margin:0 0 16px;
}
.pcard__dot{ color:var(--line) }

.pcard__t{
  font-family:var(--serif); font-variation-settings:'opsz' 48,'SOFT' 0,'WONK' 0;
  font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.2;
  letter-spacing:-.01em; font-weight:700; color:var(--ink);
  margin:0 0 12px; max-width:24ch; text-wrap:balance;
  transition:color .25s var(--ease);
}
.pcard__link:hover .pcard__t{
  font-family:var(--serif); font-variation-settings:'opsz' 48,'SOFT' 0,'WONK' 0; color:var(--blue-deep) }

.pcard__x{
  font-size:1rem; line-height:1.68; color:var(--gray);
  max-width:62ch; margin:0 0 18px;
}
.pcard__go{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue-deep);
}
.pcard__go svg{
  width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.pcard__link:hover .pcard__go svg{ transform:translateX(5px) }
.ucard:hover .pcard__go svg,
.mcard__link:hover .pcard__go svg,
.kcard__link:hover .pcard__go svg{ transform:translateX(5px) }
.kcard__link .pcard__go{ color:var(--green-deep) }

/* Portadas en las tarjetas. La imagen acompaña, el título sigue mandando. */
.kcard__link--img{ padding-top:0; overflow:hidden }
.kcard__img{
  display:block; margin:0 -22px 20px; aspect-ratio:16/9; overflow:hidden;
  background:var(--blue-wash); border-bottom:1px solid var(--line);
}
.kcard__img img,
.pcard__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.kcard__link:hover .kcard__img img,
.pcard__link:hover .pcard__img img{ transform:scale(1.03) }

.pcard__txt{ display:block; min-width:0 }
.pcard__link--img{ grid-template-columns:minmax(0,1fr) 260px;
  display:grid; grid-template-columns:minmax(0,1fr) 260px;
  gap:40px; align-items:center;
}
.pcard__img{
  display:block; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-xs); border:1px solid var(--line); background:var(--blue-wash);
}

/* --------------------------------------------------------------------------
   Página de post
   Columna estrecha y medida de línea corta: el texto es el producto.
   -------------------------------------------------------------------------- */
.post{ padding:64px 0 var(--sec) }
.post__wrap{ max-width:760px }

.post__back{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gray-soft);
  text-decoration:none; margin-bottom:34px;
  transition:color .25s var(--ease);
}
.post__back svg{
  width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transform:rotate(180deg);
  transition:transform .3s var(--ease);
}
.post__back:hover{ color:var(--ink) }
.post__back:hover svg{ transform:rotate(180deg) translateX(4px) }

.post__meta{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.67rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gray-soft);
  margin:0 0 20px;
}
.post__t{
  font-family:var(--serif); font-variation-settings:'opsz' 120,'SOFT' 0,'WONK' 1;
  font-size:clamp(2.1rem,4.6vw,3.3rem); line-height:1.08;
  letter-spacing:-.018em; font-weight:700; color:var(--ink);
  margin:0 0 22px; text-wrap:balance;
}
.post__x{
  font-size:1.2rem; line-height:1.68; color:var(--gray);
  padding-bottom:34px; border-bottom:1px solid var(--line); margin:0;
}
.post__fig{ margin:40px 0 0 }
.post__fig img{
  width:100%; height:auto; display:block;
  border-radius:var(--r); border:1px solid var(--line);
}

/* Enlace al original, para las piezas que también viven fuera (un vídeo,
   una app desplegada). Va arriba, no escondido al final. */
.post__x:has(+ .post__ext){ padding-bottom:20px; border-bottom:0 }
.post__ext{
  margin:0; padding-bottom:34px;
  border-bottom:1px solid var(--line);
}
.post__ext a{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue-deep); text-decoration:none;
}
.post__ext a svg{
  width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.post__ext a:hover svg{ transform:translateX(5px) }

/* Cuerpo del artículo: todo el texto largo vive aquí dentro. */
.post__body{ padding-top:40px; font-size:1.08rem; line-height:1.78; color:var(--ink-2) }
.post__body > * + *{ margin-top:1.45em }
.post__body h2{
  font-size:1.62rem; line-height:1.26; letter-spacing:-.02em;
  font-weight:700; color:var(--ink); margin-top:2.3em;
}
.post__body h3{
  font-size:1.22rem; line-height:1.34; letter-spacing:-.012em;
  font-weight:700; color:var(--ink); margin-top:2em;
}
.post__body h4{
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gray-soft);
  margin-top:2em;
}
.post__body a{
  color:var(--blue-deep); text-decoration:none;
  border-bottom:1px solid var(--blue-soft);
  transition:border-color .2s var(--ease);
}
.post__body a:hover{ border-bottom-color:var(--blue) }
.post__body strong{ color:var(--ink); font-weight:700 }
.post__body em{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:1.06em }
.post__body ul,.post__body ol{ padding-left:1.3em }
.post__body li + li{ margin-top:.55em }
.post__body li::marker{ color:var(--green) }
.post__body img{ width:100%; height:auto; border-radius:var(--r); border:1px solid var(--line) }
.post__body hr{ border:0; border-top:1px solid var(--line); margin:2.6em 0 }

.post__body figure{ margin-left:0; margin-right:0 }
.post__body figcaption{
  margin-top:10px; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.05em; color:var(--gray-soft); text-align:center;
}
.post__body .tabla{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
}
.post__body table{ width:100%; min-width:560px; border-collapse:collapse; font-size:.92rem; line-height:1.55 }
.post__body th{
  text-align:left; background:var(--ink); color:var(--paper);
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 16px;
}
.post__body td{ padding:14px 16px; border-top:1px solid var(--line); vertical-align:top; color:var(--gray) }
.post__body td:first-child{ color:var(--ink); font-weight:700; white-space:nowrap }
.post__body .tabla + p > em:only-child{ font-size:.85rem }

.post__body blockquote{
  border-left:2px solid var(--green); padding:2px 0 2px 26px; margin-left:0;
}
.post__body blockquote p{
  font-family:'Fraunces',Georgia,serif; font-style:italic;
  font-size:1.26rem; line-height:1.56; color:var(--ink); font-weight:400;
}
.post__body code{
  font-family:var(--mono); font-size:.86em; font-weight:500;
  background:var(--blue-wash); border:1px solid var(--line-soft);
  padding:2px 6px; border-radius:var(--r-xs); color:var(--blue-ink);
}
.post__body pre{
  background:var(--ink); color:#E8EDF2; padding:22px 24px;
  border-radius:var(--r); overflow-x:auto; font-size:.86rem; line-height:1.65;
}
.post__body pre code{ background:none; border:0; padding:0; color:inherit; font-size:1em }

.ptags{
  list-style:none; display:flex; flex-wrap:wrap; gap:9px;
  margin:46px 0 0; padding:0;
}
.ptags li{
  font-family:var(--mono); font-size:.65rem; font-weight:500;
  letter-spacing:.07em; color:var(--gray-soft);
  border:1px solid var(--line); border-radius:var(--r-xs); padding:5px 10px 4px;
}

/* Firma: recuerda quién escribe sin abrir un bloque de venta. */
.post__firma{
  display:flex; gap:16px; align-items:flex-start;
  margin-top:46px; padding-top:30px; border-top:1px solid var(--line);
}
.post__firma img{ width:44px; height:44px; flex:none; object-fit:contain }
.post__firma p{ font-size:.95rem; line-height:1.65; color:var(--gray); margin:0 }
.post__firma b{ color:var(--ink) }
.post__firma a{ color:var(--blue-deep); text-decoration:none; border-bottom:1px solid var(--blue-soft) }

.pnav{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin-top:44px; padding-top:30px; border-top:1px solid var(--line);
}
.pnav__i{
  display:block; text-decoration:none; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--white);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.pnav__i:hover{ border-color:var(--blue); transform:translateY(-2px) }
.pnav__i--d{ text-align:right }
.pnav__i span{
  display:block; font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gray-soft);
  margin-bottom:8px;
}
.pnav__i b{ font-size:.98rem; line-height:1.4; color:var(--ink); font-weight:700 }

/* --------------------------------------------------------------------------
   Suscripción
   La promesa está a la izquierda y el formulario a la derecha: lo que se pide
   y lo que se da, uno al lado del otro.
   -------------------------------------------------------------------------- */
.sub{ padding:var(--sec) 0; background:var(--ink); color:#fff }
.sub--compacto{ padding:76px 0 }
.sub__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:start }
.sub .eyebrow{ color:rgba(255,255,255,.42) }
.sub .eyebrow__ln{ background:rgba(255,255,255,.2) }
.sub h2{
  font-family:var(--serif); font-variation-settings:'opsz' 72,'SOFT' 0,'WONK' 0;
  font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.1;
  letter-spacing:-.014em; font-weight:700; color:#fff; margin:0 0 20px;
}
.sub__lead{ font-size:1.04rem; line-height:1.72; color:rgba(255,255,255,.66); margin:0 0 26px; max-width:52ch }
.sub__pts{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.sub__pts li{
  position:relative; padding-left:22px;
  font-size:.93rem; line-height:1.6; color:rgba(255,255,255,.58);
}
.sub__pts li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--green);
}
.sub__pts b{ color:#fff; font-weight:600 }
.sub__txt{ min-width:0 }

.post__hd{ min-width:0 }

.sub__form{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:32px;
}
.campo{ display:block; margin-bottom:18px }
.campo span{
  display:block; font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.44); margin-bottom:9px;
}
.campo input{
  width:100%; box-sizing:border-box; padding:13px 15px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r); color:#fff; font-family:inherit; font-size:.97rem;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.campo input::placeholder{ color:rgba(255,255,255,.3) }
.campo input:focus{
  outline:none; border-color:var(--green); background:rgba(255,255,255,.09);
}
.sub__btn{
  width:100%; justify-content:center; border:0; cursor:pointer;
  font-family:inherit; margin-top:4px;
}
.sub__fine{
  margin:16px 0 0; font-size:.78rem; line-height:1.55;
  color:rgba(255,255,255,.4); text-align:center;
}

/* --------------------------------------------------------------------------
   Adaptación a pantallas pequeñas
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .sub__in{ grid-template-columns:1fr; gap:38px }
  .pnav{ grid-template-columns:1fr }
  .pnav__i--d{ text-align:left }
  .ucard{ grid-template-columns:1fr }
  .ucard__img{ min-height:0; aspect-ratio:16/9 }
  .pcard__link--img{ grid-template-columns:minmax(0,1fr) 190px; gap:28px }
}
@media (max-width:640px){
  .pcard__link--img{ grid-template-columns:1fr; gap:20px }
  .pcard__img{ order:-1 }
  .lhero{ padding:52px 0 40px }
  .grupo,.dest,.ultimo{ padding-top:64px; padding-bottom:64px }
  .ultimo{ padding-top:0 }
  .rej--media,.rej--compacta{ grid-template-columns:1fr }
  .chips{ gap:8px }
  .chip{ font-size:.62rem; padding:8px 12px }
  .post{ padding:40px 0 var(--sec) }
  .post__body{ font-size:1.03rem }
  .pcard__link{ padding:30px 0 28px }
  .pcard__link::before{ left:-14px; right:-14px }
  .sub__form{ padding:24px }
}