:root{
  --bg:#0b0b0e;
  --ink:#f2f2f6;
  --muted:rgba(242,242,246,.65);
  --line:rgba(255,255,255,.35);

  --max: 1440px;
  --side: 260px;
  --gap: 36px;

  --mono: ui-monospace, Menlo, Consolas, monospace;
  --display: "Jacquard 24", serif;

  /* ÚLTIMOS DE AHORA thumb */
  --nowThumb: 120px;

  /* aire home */
  --blockGap: 168px;
}

@media (min-width: 900px){
  :root{ --nowThumb: 140px; }
}

@media (max-width: 719px){
  :root{ --blockGap: 64px; }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:#000000;
  color:var(--ink);
  font-family:var(--mono);
  cursor: url('https://cdn.cursors-4u.net/previews/s-pink-premium-precision-select-a5043102-32.webp') 47 45, auto !important;
}

a, a:visited, a:active{
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(255,255,255,.45);
  text-underline-offset: 3px;
}
a:hover{
  text-decoration-style: solid;
  text-decoration-color: rgba(255,255,255,.9);
}

.heroCard,
.photo,
.nowRow,
.archCard{
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--line);
  text-decoration: none; /* por las dudas, ya que ahora a es underline */
}
.heroCard:hover,
.photo:hover,
.nowRow:hover,
.archCard:hover{
  border-bottom-color: var(--ink);
}


button{
  font-family:inherit;
  color:inherit;
  background:none;
  border:none;
}

.small{ font-size:12px; color: var(--muted); }

.bg{
  position:fixed;
  inset:-80px;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 14px);
  z-index:0;
  will-change: transform;
}

/* TOPBAR MOBILE */
.topbar{
  position: fixed;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);

  /*  fallback seguro */
  background: rgba(11,11,14,.9);
}

/*  solo si lo soporta: evita warnings/errores en parsers viejos */
@supports (background: color-mix(in oklab, black, transparent 10%)){
  .topbar{
    background: color-mix(in oklab, var(--bg), transparent 10%);
  }
}
@supports (backdrop-filter: blur(6px)){
  .topbar{ backdrop-filter: blur(6px); }
}

/*  TU HTML usa estas */
.topbarTitle{
  display:grid;
  gap:2px;
  text-align:right;
  line-height:1;
}
.topbarH1{
  font-family: var(--display);
  font-size: 24px;
  line-height: .9;
}
.topbarSub{
  font-size:12px;
  color: var(--muted);
}

/* (compat: por si en otras páginas quedó esto) */
.topTitle{
  font-family: var(--display);
  font-size: 26px;
  line-height: .9;
}
.topLink{
  font-size: 12px;
  color: var(--muted);
}

.hamb{
  border: 1px solid var(--line);
  padding: 8px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

/* mobile default layout */
.wrap{
  position:relative;
  z-index:1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px 80px;
}

.main{
  padding-bottom: 240px;
}

/* SIDEBAR AS DRAWER (mobile) */
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(88vw, 340px);
  z-index: 40;
  background: var(--bg);
  border-right: 1px solid var(--line);
  transform: translateX(-101%);
  transition: transform 180ms ease;
  overflow: auto;
  padding: 100px 16px 40px;
}

body.menuOpen .sidebar{
  transform: translateX(0);
  padding-top: 100px;
}

.sb-pad{ padding: 0; }

/* header home */
.header{
  padding: 100px 0 100px;
  border-bottom: 1px solid var(--line);
}
.header h1{
  font-family: var(--display);
  font-weight: 400;
  margin:0;
  width:100%;
  max-inline-size:100%;

  font-size: clamp(180px, 10vw, 320px);

  line-height: 0.82;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-wrap: balance;
  padding-bottom: 25px;
}
@media (max-width: 420px){
  .header h1{
    font-size: clamp(56px, 14vw, 88px);
    line-height: 0.88;
  }
}
.subtitle{ margin:8px 0 0; color:var(--muted); text-align: right;}

.sb-section{ margin-bottom: 52px; }
.list{ margin:0; padding-left:18px; }
.entries{ margin:0; padding-left:18px; }
.meta{ display:block; font-size:11px; color:var(--muted); }
.excerpt{ display:block; margin-top:6px; font-size:12px; color:var(--muted); line-height:1.35; }
.archive{ display:inline-block; margin-top: 8px; font-size:12px; }

.hd{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin: 0 0 10px;
}

.sb-foot{ padding-top: 14px; }

.header + .block{
  margin-top: calc(var(--blockGap) / 2);
}

/* === BLOQUES === */
/*  el aire vive en .block, NO en el título */
.block{ margin-top: var(--blockGap); }

.subhead{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height:1;
  margin: 0 0 22px; /* ✅ antes tenías 84px arriba y duplicaba el aire */
}

.block + .block{
  padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.22);
}

@media (max-width: 719px){
  .block + .block{ padding-top: 26px; }
}

/* =========================
   HERO (Pensando)
   ========================= */

.heroCard{ display:block; border: 1px solid var(--line); }

.heroCard img{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
}

.heroCap{
  padding:10px 12px;
  border-top:1px solid var(--line);
  display:grid;
  gap:6px;
  color: var(--ink);
}

.heroCat{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--muted);
}

.heroTitle{
  font-size:14px;
  color: var(--ink);
}

.heroDate{
  font-size:12px;
  color: var(--muted);
}

.heroExcerpt{
  font-size:12px;
  color: var(--muted);
  line-height:1.35;
}

/* =========================
   PENSANDO (cards chicas)
   ========================= */

.penseCap{
  padding:10px 12px;
  border-top:1px solid var(--line);
  display:grid;
  gap:6px;
}

.penseCap .penseCat{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--muted);
}

.penseCap .penseTitle{
  font-size:14px;
  color: var(--ink);
}

.penseCap .penseDate{
  font-size:12px;
  color: var(--muted);
}

.penseCap .penseExcerpt{
  font-size:12px;
  color: var(--muted);
  line-height:1.35;

  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.imgLoading{
  position: relative;
  background: #111;
}

/* evita el “flash” del alt/placeholder cuando aún no hay src */
img:not([src]){
  visibility: hidden;
}

.imgLoading::after{
  content: "cargando";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

/* =========================
   HACIENDO
   ========================= */
/* =========================
   HOME • HACIENDO (2 cards)
========================= */

.haciendo .cardsGrid.two{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px){
  .haciendo .cardsGrid.two{
    grid-template-columns: 1fr;
  }
}

/* Card compacta (NO hero) */
.haciendo .postCard{
  display:block;
  text-decoration:none;
  color:inherit;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  overflow:hidden;
}

/* Imagen con altura fija */
.haciendo .postCardTop{
  position:relative;
  height: 210px;            /* <- clave: evita “hero enorme” */
  overflow:hidden;
}

/* Imagen siempre crop, nunca estira */
.haciendo .postCardImg{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Cuerpo */
.haciendo .postCardBody{
  padding: 12px 12px 14px;
}

/* =========================
   CRT effect (scanlines + glow)
   (aplicás la clase .crt al contenedor de imagen)
========================= */

.crt{
  position:relative;
}

.crt::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    );
}

.crt::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  opacity:.55;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,.08) 0%,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.35) 100%
  );
}



/* =========================
   ÚLTIMOS DE AHORA (GRID)
   ========================= */

.nowList{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px){
  .nowList{
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
  }
}

.nowRow{
  display: grid;
  grid-template-columns: var(--nowThumb) 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  padding: 10px;
  background: transparent;
}

.nowPortrait{
  width: var(--nowThumb);
  height: var(--nowThumb);
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
}

.nowInfo{
  min-width: 0;
  display: grid;
  gap: 6px;
}

.nowRow .excerpt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

.nowCat{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.nowTitle{ font-size: 14px; color: var(--ink); }

/* =========================
  Comportamiento hero y ultimos
   ========================= */

/* 1) HERO */
.heroCard{
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--line);
}
.heroCard:hover{
  border-bottom-color: var(--ink);
}
.heroCard:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* 2) PENSANDO (cards chicas) -> .photo */
.photo{
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--line);
}
.photo:hover{
  border-bottom-color: var(--ink);
}
.photo:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* 3) ÚLTIMOS DE AHORA */
.nowRow{
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--line);
}
.nowRow:hover{
  border-bottom-color: var(--ink);
}
.nowRow:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}



/* tags */
.tags{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  border:1px solid var(--line);
  padding:4px 8px;
  cursor:pointer;
  font-size:12px;
}
.tag.isActive{ background: var(--ink); color: var(--bg); }
.tag:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* archive controls */
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin: 10px 0 14px;
}
.search{
  flex: 1 1 220px;
  border:1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding:8px 10px;
  font-family: var(--mono);
  font-size: 13px;
}
.search::placeholder{ color: var(--muted); }
.search:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }


/* Archivo: cards */
.muted{ color: var(--muted); }

.archCard{
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 16px;
  align-items: stretch;
  background: rgba(0,0,0,.18);
  padding: 16px;
  padding-bottom: 32px;
  margin-top: 40px;
  text-decoration: none;
  border-bottom: 3px solid var(--line);
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--line);
  border-bottom: 3px solid var(--line);
}
/* Hover line consistente para TODAS las archCard */
.archCard:hover{
  border-bottom-color: var(--ink);
}

/* 
.archCard{ border-bottom: none; }
.archCard:visited{ border-bottom: none; } */

.archLeft{
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-width:0;
}

.archMeta{
  font-size: 12px;
  color: var(--muted);
}

.archTitle{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: .95;
}

.archTagsLine{
  font-size: 12px;
  color: var(--muted);
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.35);
}

.archRight{
  min-width:0;
  height: 320px;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}

.archImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===============================
   Cards SOLO texto (about.html)
   =============================== */

.archCard.archCardText{
  grid-template-columns: 1fr;
}

.archCard.archCardText .archRight{
  display: none;
}


@media (max-width: 719px){
  .archCard{ grid-template-columns: 1fr; }
  .archRight{ height: 220px; }
}

.archCard a{
  border-bottom: none;
}
.archCard a:hover{
  border-bottom: none;
}


/* photos */
.photos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
  margin-top:16px;
}
.photo img{ width:100%; height:200px; object-fit:cover; display:block; }
.caption{
  padding:8px 10px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
}

/* Webmaster: imagen cuadrada alineada a la derecha */
.archCard.isWebmaster .archRight{
  width: 350px;
  height: 350px;
  justify-self: end;  
  
}

/* Webmaster: darle más espacio al texto */
.archCard.isWebmaster{
  grid-template-columns: 1fr auto;
}


.archCard.isWebmaster .archImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 719px){
  .archCard.isWebmaster{
    grid-template-columns: 1fr;   
  }

  .archCard.isWebmaster .archRight{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;         
    justify-self: stretch;       
  }

  .archCard.isWebmaster .archImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* =========================
   GUESTBOOK
   ========================= */

.gbTabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}

.gbTab{
  border:1px solid var(--line);
  padding:4px 10px;
  cursor:pointer;
  font-size:12px;
}

.gbTab.isActive{
  background: var(--ink);
  color: var(--bg);
}

.gbPane{ display:none; }
.gbPane.isShown{ display:block; }

/* contenedor general */
.embed{
  width:100%;
  height:420px;
  border:1px solid var(--line);
  background:#000;
  overflow:hidden;
  position:relative;
}

/* =========================
   SOLO PESTAÑA "LEER"
   ========================= */

#read #gbList{
  height:100%;
  overflow:auto;
  overflow-x:hidden;
  padding-right:10px;
  box-sizing:border-box;
}

/* evitar desbordes */
#read #gbList,
#read #gbList *{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}

#read #gbList pre{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* =========================
   ELEMENTOS OCULTOS (RESTORED)
   ========================= */

/* honeypot anti-spam */
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* iframe oculto del form */
.gbHiddenFrame{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

/* =========================
   GUESTBOOK – inputs dark FIX
   ========================= */

#gbForm input,
#gbForm textarea{
  background: #000;
  color: var(--ink);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;

  /* mata estilos nativos */
  outline: none;
  box-shadow: none;
  appearance: none;
}

/* placeholder */
#gbForm input::placeholder,
#gbForm textarea::placeholder{
  color: var(--muted);
}

/* hover */
#gbForm input:hover,
#gbForm textarea:hover{
  border-color: rgba(255,255,255,.55);
}

/* focus (adiós azul) */
#gbForm input:focus,
#gbForm textarea:focus{
  border-color: var(--ink);
  outline: none;
  box-shadow: none;
}

/* focus accesible pero estético */
#gbForm input:focus-visible,
#gbForm textarea:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* autofill de Chrome (el peor enemigo) */
#gbForm input:-webkit-autofill,
#gbForm textarea:-webkit-autofill{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #000 inset;
  box-shadow: 0 0 0 1000px #000 inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* textarea resize más editorial */
#gbForm textarea{
  resize: vertical;
}


/* ===== Modal estilo ventana (oscuro) ===== */
.gbModal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.gbModal.isOpen{ display:flex; }

.gbWin{
  width: 340px;
  background: #000;
  color: #fff;
  border: 1px solid #fff;
  box-shadow: 6px 6px 0 #000;
}

.gbWinBar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid #fff;
}
.gbWinTitle{
  font-size: 12px;
  letter-spacing: .5px;
  opacity: .95;
}
.gbWinX{
  width: 22px;
  height: 22px;
  display:grid;
  place-items:center;
  background:#000;
  color:#fff;
  border: 1px solid #fff;
  cursor:pointer;
  line-height: 1;
  font-size: 16px;
}
.gbWinX:hover{ background:#111; }
.gbWinX:active{ box-shadow: inset 1px 1px 0 #fff; }

.gbWinBody{
  display:flex;
  gap: 10px;
  padding: 14px 12px 10px 12px;
  align-items:flex-start;
}
.gbWinIcon{
  width: 22px;
  height: 22px;
  border: 1px solid #fff;
  display:grid;
  place-items:center;
  font-weight:bold;
  font-size: 13px;
  opacity: .9;
}
.gbWinText{
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.gbWinActions{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
  padding: 10px 12px 12px 12px;
  border-top: 1px solid #fff;
}
.gbWinActions .tag{ padding: 4px 14px; }

/* footer */
.footer{ margin-top:70px; }
.footerLine{ border-top:1px solid var(--line); margin-bottom:12px; }
.footerGrid{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  justify-content:space-between;
  align-items:center;
}

/* ===== DESKTOP: vuelve el layout original ===== */
@media (min-width: 920px){
  .topbar{ display:none; }
  .overlay{ display:none; }

  body{ overflow:hidden; padding-top: 0; }

  .wrap{
    position:fixed;
    inset:0;
    max-width: var(--max);
    margin:auto;
    display:grid;
    grid-template-columns: var(--side) 1fr;
    gap: var(--gap);
    padding: 32px 28px;
  }

  .sidebar{
    position: relative;
    transform: none;
    width: auto;
    z-index: 1;
    background: transparent;
    border-right: 1px solid var(--line);
    padding: 0;
  }

  .sb-pad{
    padding-top: 200px;
    padding-right: 22px;
    padding-bottom: 40px;
  }

  .main{
    overflow:auto;
    padding-bottom: 240px;

    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .main::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
  }
}

@media (max-width: 719px){
  .heroCard img{ height: 200px; }
  .photos{ grid-template-columns: 1fr; }
  .heroCard{ border: 1px solid var(--line); }
}

/* cards + prose (posts/about) */
.card{
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  padding:16px;
  margin-top:16px;
}
.prose{ line-height:1.6; }
.prose h2,.prose h3{ font-family: var(--display); letter-spacing:.02em; }
.prose p{ margin: 0 0 12px; }
.prose blockquote{ margin: 12px 0; padding: 10px 12px; border-left: 3px solid var(--line); color: var(--muted); }

.postTitle{ margin:0; font-family: var(--display); font-size: 42px; line-height:1; }
.postMeta{ color: var(--muted); font-size: 13px; }

#postView.card{
  background:#000;
  border:2px solid #fff;
}

.postHeaderSplit{
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255,255,255,.55);
}

.postHeadText{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.postDesc{
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  line-height: 1.4;
}

.postHeadImg{
  min-width:0;
  height: 320px;
  border: 1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}

#postCover{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.postContent img {
  max-width: 100%;
  height: auto;
  display: block;
}


@media (max-width: 719px){
  .postHeaderSplit{ grid-template-columns: 1fr; }
  .postHeadImg{ height: 220px; }
}

.backRow{ margin-top: 18px; }

.postTitle{
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: .95;
}

.postMeta{ letter-spacing: .02em; }

#postBody{
  font-size: 14px;
  line-height: 1.75;
}

#postBody a{
  border-bottom: 1px solid rgba(255,255,255,.55);
}
#postBody a:hover{
  border-bottom-color: rgba(255,255,255,.9);
}

/* =========================
   FIX: Archivo tags no clickeables
   (sin tocar estética, solo interacción)
   ========================= */

/* asegura que la card y controles queden por encima de cualquier overlay accidental */
#archiveList,
#archiveTags,
.controls,
.card{
  position: relative;
  z-index: 5;
}

/* si algún pseudo-elemento decorativo está “tapando”, que no capture clicks */
.main::before,
.main::after,
.card::before,
.card::after{
  pointer-events: none !important;
}

/* asegura clicks en los tags y el input */
#archiveTags .tag,
#archiveSearch{
  pointer-events: auto;
  position: relative;
  z-index: 6;
}

/* tu .list estaba pensada para <ul>, pero #archiveList es <div> */
#archiveList.list{
  padding-left: 0;
}

/* =========================================================
   UNIFICAR TODO AL LOOK DE ARCHIVO
   Referencia: .archRight (Archivo/Webmaster)
   Objetivo: que .imgShell (Inicio) y .postHeadImg (Post)
             se vean igual.
========================================================= */

:root{
  --crt-pink: hsl(332 0% 14.8%);
  --crt-pink-a: .55;     /* transparencia tipo Archivo */
  --crt-scan-a: .60;     /* scanlines visibles tipo Archivo */
  --crt-back: rgba(255,255,255,.06);
  --crt-border: rgba(255,255,255,.75); /* borde tipo Archivo */
}

/* 1) Imagen BN base */
img.crt{
  filter: grayscale(100%) contrast(1.08) brightness(1.03) !important;
  transition: filter 220ms ease !important;
  display:block;
}

/* 2) ZONAS IMAGEN: hacemos que imgShell y postHeadImg
      tengan el MISMO “marco” que archRight */
.archRight,
.imgShell,
.postHeadImg{
  position: relative !important;
  overflow: hidden !important;

  /* esto es lo que hace que Archivo se vea “bien” */
  background: var(--crt-back) !important;
  border: 1px solid var(--crt-border) !important;

  /* para que el blend sea consistente */
  isolation: isolate !important;
}

/* 3) stacking: overlays arriba de la imagen */
.archRight > img,
.imgShell > img,
.postHeadImg > img{
  position: relative !important;
  z-index: 1 !important;
}

/* 4) overlays (rosa + scanlines) */
.archRight::before,
.imgShell::before,
.postHeadImg::before,
.archRight::after,
.imgShell::after,
.postHeadImg::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index: 2 !important;
  transition: opacity 220ms ease !important;
}

/* rosa transparente */
.archRight::after,
.imgShell::after,
.postHeadImg::after{
  background: var(--crt-pink) !important;
  mix-blend-mode: screen !important;
  opacity: var(--crt-pink-a) !important;
}

/* scanlines */
.archRight::before,
.imgShell::before,
.postHeadImg::before{
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.26) 0px,
    rgba(255,255,255,.26) 1px,
    transparent 2px,
    transparent 5px
  ) !important;
  mix-blend-mode: overlay !important;
  opacity: var(--crt-scan-a) !important;
}

/* 5) hover/tap: normal */
.archRight:hover::before, .archRight:hover::after,
.imgShell:hover::before, .imgShell:hover::after,
.postHeadImg:hover::before, .postHeadImg:hover::after{
  opacity: 0 !important;
}

.archRight:hover img.crt,
.imgShell:hover img.crt,
.postHeadImg:hover img.crt{
  filter: none !important;
}

/* tap/teclado */
.archRight:focus-within::before, .archRight:focus-within::after,
.imgShell:focus-within::before, .imgShell:focus-within::after,
.postHeadImg:focus-within::before, .postHeadImg:focus-within::after{
  opacity: 0 !important;
}

.archRight:focus-within img.crt,
.imgShell:focus-within img.crt,
.postHeadImg:focus-within img.crt{
  filter: none !important;
}

/* === YouTube / video embeds === */
.video-embed {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 2rem 0;

  /* opcional, para que se integre con tu estética */
  background: #111;
  border: 1px solid rgba(255,255,255,.15);
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}


/* =========================
   SELECCIÓN DE TEXTO ROSA
   ========================= */

/* Chrome, Edge, Safari */
::selection{
  background: hsl(332, 61%, 68%);
  color: #000;
}

/* Firefox */
::-moz-selection{
  background:hsl(332, 61%, 68%);
  color: #000;
}



/* =========================
   GLOBAL CARD HOVER UNIFIED
   ========================= */

.heroCard,
.photo,
.nowRow,
.archCard{
  border-bottom-color: transparent;
}

.heroCard:hover,
.photo:hover,
.nowRow:hover,
.archCard:hover{
  border-bottom-color: var(--ink);
}

/* (L)Program 88x31 — preview en tu sitio */
.lprogram-8831{
  width:88px;height:31px;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;box-sizing:border-box;
  text-decoration:none;user-select:none;
  background:#0b0b0e;color:#f2f2f6;
  border:1px solid rgba(180,255,120,.65);
  box-shadow:0 0 0 1px rgba(0,0,0,.65) inset, 0 0 10px rgba(180,255,120,.10);
  font-family:"Jacquard 24", serif;
  font-size:16px;line-height:1;letter-spacing:.2px;
  position:relative;
  will-change: filter, transform, text-shadow;
  animation: lpGlitchPulse 2s infinite;
}

@keyframes lpGlitchPulse{
  /* normal casi todo el tiempo */
  0%, 84%, 100%{
    filter:none;
    transform:translate(0,0);
    text-shadow:none;
  }

  /* ventana de glitch: varios “golpes” muy cortos */
  85%{
    filter: blur(.25px) contrast(1.12);
    transform: translate(0.3px,-0.2px);
    text-shadow: 0.6px 0 rgba(255,105,180,.55), -0.6px 0 rgba(180,255,120,.35);
  }
  86%{
    filter: blur(.55px) contrast(1.22) saturate(1.06);
    transform: translate(-0.5px,0.3px);
    text-shadow: 1px 0 rgba(255,105,180,.60), -1px 0 rgba(180,255,120,.40);
  }
  86.6%{
    filter: blur(.18px) contrast(1.10);
    transform: translate(0.4px,0);
    text-shadow: 0.7px 0 rgba(255,105,180,.50), -0.7px 0 rgba(180,255,120,.32);
  }
  87.2%{
    filter: blur(.45px) contrast(1.18);
    transform: translate(-0.3px,-0.2px);
    text-shadow: 0.9px 0 rgba(255,105,180,.55), -0.9px 0 rgba(180,255,120,.36);
  }
  88%{
    filter:none;
    transform:translate(0,0);
    text-shadow:none;
  }
}


.lprogram-8831__sub{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:9px;line-height:1;opacity:.8;transform:translateY(-1px);
}
.lprogram-8831:hover{
  border-color:rgba(255,105,180,.75);
  box-shadow:0 0 0 1px rgba(0,0,0,.65) inset, 0 0 12px rgba(255,105,180,.16);
  text-decoration:underline;
  text-decoration-color:rgba(255,105,180,.85);
  text-underline-offset:2px;
}

.lpLinkMe{
  border:1px solid rgba(242,242,246,.18);
  background:rgba(0,0,0,.18);
  padding:10px;
  margin:12px 0;
}
.lpLinkMe__title{
  margin:0 0 8px 0;
  font-family:"Jacquard 24", serif;
  font-size:22px;
  line-height:1;
  color:#f2f2f6;
}
.lpLinkMe__preview{ margin:6px 0 10px; }
.lpLinkMe__label{
  font-size:12px;
  opacity:.75;
  margin:0 0 6px;
}
.lpLinkMe__code{
  width:100%;
  height:120px;
  overflow:auto;
  resize:none;
  box-sizing:border-box;
  padding:8px;
  border:1px solid rgba(242,242,246,.22);
  background:#0b0b0e;
  color:#f2f2f6;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:11px;
  line-height:1.25;
}
.lpLinkMe__btn{
  margin-top:8px;
  width:100%;
  padding:8px 10px;
  border:1px solid rgba(242,242,246,.22);
  background:rgba(0,0,0,.35);
  color:#f2f2f6;
  cursor:pointer;
}
.lpLinkMe__btn:hover{
  border-color:rgba(255,105,180,.65);
  text-decoration:underline;
  text-decoration-color:rgba(255,105,180,.85);
  text-underline-offset:2px;
}


/* ===== Scrollbar global del sitio ===== */

/* Firefox */
html{
  scrollbar-width: thin;
  scrollbar-color: rgba(242,242,246,.28) rgba(0,0,0,.25);
}

/* Chrome / Edge / Safari */
html::-webkit-scrollbar{
  width:10px;
}

html::-webkit-scrollbar-track{
  background: rgba(0,0,0,.25);
  border-left: 1px solid rgba(242,242,246,.10);
}

html::-webkit-scrollbar-thumb{
  background: rgba(242,242,246,.22);
  border: 1px solid rgba(180,255,120,.30);
  border-radius: 12px;
}

html::-webkit-scrollbar-thumb:hover{
  background: rgba(255,105,180,.18);
  border-color: rgba(255,105,180,.45);
}

/* =========================================================
   POST INDIVIDUAL — NUEVO HEADER
   imagen full width + caja rosa superpuesta
   ========================================================= */


/* ---------------------------------------------------------
   CONTENEDOR GENERAL DEL POST
   --------------------------------------------------------- */

#postView.card{
  background: #000;


  border: none;


  padding: 0;

  overflow: visible;
}


/* ---------------------------------------------------------
   HEADER DEL POST
   --------------------------------------------------------- */

.postHeaderSplit{
  display: flex;
  flex-direction: column;

  grid-template-columns: none;

  gap: 0;

  margin: 0 0 30px 0;
  padding: 0;

  /* elimina la línea punteada que había abajo */
  border-bottom: none;

  position: relative;
}


/* ---------------------------------------------------------
   IMAGEN
   --------------------------------------------------------- */

.postHeadImg{
  order: 1;

  width: 100%;
  height: clamp(320px, 48vw, 520px);

  position: relative;

  /* mantenemos el borde alrededor de la imagen */
  border: 1px solid rgba(255,255,255,.75) !important;

  background: #000;

  overflow: hidden;

  isolation: auto !important;
}


#postCover{
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;


  filter: none !important;
}




.postHeadImg img.crt{
  filter: none !important;
}


/* elimina el overlay rosa / scanlines CRT
   SOLO de la imagen del post */

.postHeadImg::before,
.postHeadImg::after{
  display: none !important;
  content: none !important;
}


/* tampoco cambia nada al hacer hover */

.postHeadImg:hover img.crt{
  filter: none !important;
}


/* ---------------------------------------------------------
   CAJA ROSA CON META + TITULO + DESCRIPCIÓN
   --------------------------------------------------------- */

.postHeadText{
  order: 2;

  position: relative;
  z-index: 5;

  /*
    hace que la caja se monte sobre
    el borde inferior de la imagen
  */
  margin: -58px 28px 0;

  padding: 18px 22px 20px;

  background: hsl(332, 61%, 68%);

  display: flex;
  flex-direction: column;
  gap: 8px;

  min-width: 0;

  color: #000;
}


/* fecha + categoría */

.postMeta{
  color: #000;
  font-size: 13px;
  letter-spacing: .02em;
  opacity: .75;
}


/* título */

.postTitle{
  margin: 0;

  font-family: var(--display);

  font-size: clamp(40px, 5vw, 68px);
  line-height: .92;

  color: #000;
}


/* descripción */

.postDesc{
  margin: 4px 0 0;

  font-family: var(--mono);

  font-size: 13px;
  line-height: 1.5;

  color: #000;
}


/* ---------------------------------------------------------
   CUERPO DEL POST
   Como sacamos el padding de #postView,
   se lo devolvemos solamente al contenido.
   --------------------------------------------------------- */

#postBody{
  padding: 0 24px;

  font-size: 14px;
  line-height: 1.75;
}


/* galería de fotos */

#postPhotos{
  margin-left: 24px;
  margin-right: 24px;
}


/* link volver */

.backRow{
  margin-top: 28px;
  padding: 0 24px 24px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 719px){

  .postHeadImg{
    height: 270px;
  }

  .postHeadText{

    margin: -32px 12px 0;

    padding: 14px 15px 16px;
  }

  .postTitle{
    font-size: clamp(34px, 11vw, 48px);
    line-height: .95;
  }

  .postDesc{
    font-size: 12px;
  }

  #postBody{
    padding-left: 14px;
    padding-right: 14px;
  }

  #postPhotos{
    margin-left: 14px;
    margin-right: 14px;
  }

  .backRow{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* =========================================================
   IMÁGENES — COLOR PERMANENTE
   Sin CRT, sin filtro, sin cambio en hover
   ========================================================= */

/* Todas las imágenes que tenían efecto CRT */
img.crt{
  filter: none !important;
  transition: none !important;
}
b

/* Eliminar overlays de color y scanlines */

.archRight::before,
.archRight::after,
.imgShell::before,
.imgShell::after,
.postHeadImg::before,
.postHeadImg::after{
  content: none !important;
  display: none !important;
}


/* No modificar la imagen al hacer hover */

.archRight:hover img.crt,
.imgShell:hover img.crt,
.postHeadImg:hover img.crt{
  filter: none !important;
}


/* Tampoco modificarla mediante focus */

.archRight:focus-within img.crt,
.imgShell:focus-within img.crt,
.postHeadImg:focus-within img.crt{
  filter: none !important;
}

/* =========================================================
   FIX HOME — ocultar links vacíos
   ========================================================= */

.footer a{
  text-decoration: none !important;
}