/* ==========================================================================
   css/mutador/05-home-vistas.css — parte 5/15 de lo que era styles.css
   --------------------------------------------------------------------------
   §10 intro + §11 cabecera de sección y conmutador + §12 manifiesto + §13–§16 vistas Índice/Masonry/Filmstrip + §17 miniatura del cursor (#preview).
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* ---------- §10 · Intro block ---------- */
.hero{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding: 90px var(--gutter) 80px;
  position: relative;
}
.kicker{
  grid-column: 1 / span 2;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mute);
  padding-top: 12px;
}
.statement{
  grid-column: 3 / span 8;
  font-family: var(--display);
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.015em;
  font-weight: 400;
}
.statement em{
  font-family: var(--body);
  font-style: italic;
  font-size: .88em;
  color: var(--accent);
  letter-spacing: 0;
}
.statement .soft{ color: var(--mute); }
.aside{
  grid-column: 11 / span 2;
  font-size: 13px;
  font-style: italic;
  color: var(--mute);
  padding-top: 16px;
  text-indent: 0;
}
.aside p{ margin: 0 0 .6em 0; }
.aside .ink{ color: var(--ink); }
body[data-theme="dark"] .aside .ink{ color: var(--paper); }

/* ---------- §11 · Section heading + view switcher ---------- */
.section-head{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding: 14px 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  align-items: center;
}
.section-head .a{ grid-column: 1 / span 1; }
.section-head .b{ grid-column: 2 / span 4; }
.section-head .c{ grid-column: 6 / span 3; }
.section-head .d{ grid-column: 10 / span 2; }
.section-head .e{ grid-column: 12 / span 1; text-align:right; }

/* Hide column labels when not in index view */
body[data-view="masonry"]  .section-head .a,
body[data-view="masonry"]  .section-head .c,
body[data-view="masonry"]  .section-head .d,
body[data-view="masonry"]  .section-head .e,
body[data-view="filmstrip"] .section-head .a,
body[data-view="filmstrip"] .section-head .c,
body[data-view="filmstrip"] .section-head .d,
body[data-view="filmstrip"] .section-head .e{ visibility: hidden; }

.view-switch-row{
  grid-column: 1 / -1;
  display:flex;
  justify-content: flex-end;
  padding: 2px 0 8px;
}
.view-switch{
  display: inline-flex;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.view-switch button{
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
}
.view-switch button + button{ border-left: 1px solid var(--ink); }
.view-switch button.on{ background: var(--ink); color: var(--paper); }
body[data-theme="dark"] .view-switch{ border-color: var(--paper); color: var(--paper); }
body[data-theme="dark"] .view-switch button + button{ border-left-color: var(--paper); }
body[data-theme="dark"] .view-switch button.on{ background: var(--paper); color: var(--ink); }

/* ---------- §12 · Manifesto (dark band between header and projects) ---------- */
.manifesto{
  grid-column: 1 / -1;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(48px, 9vw, 120px) clamp(22px, 5vw, 80px);
  margin: 18px 0 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.manifesto::before{
  /* subtle hairline motif, like a printed rule on a dark page */
  content: "";
  position: absolute;
  left: clamp(22px, 5vw, 80px);
  right: clamp(22px, 5vw, 80px);
  top: 18px;
  height: 1px;
  background: rgba(239, 236, 228, .22);
}
.manifesto-line{
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 108px);
  line-height: .98;
  letter-spacing: -.015em;
  margin: 0;
  font-weight: 400;
  color: var(--paper);
  max-width: 18ch;
}
.manifesto-line em{
  font-family: var(--body);
  font-style: italic;
  color: var(--accent);
  font-size: .92em;
}
.manifesto-line .ink-soft{
  color: #b8b0a0;
  font-style: italic;
  font-family: var(--body);
}
.manifesto-meta{
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a8a090;
  padding-top: 6px;
  border-top: 1px solid rgba(239, 236, 228, .15);
}

/* ---------- §13 · View visibility toggles ---------- */
body[data-view="index"]     #view-masonry,
body[data-view="index"]     #view-filmstrip,
body[data-view="masonry"]   #view-index,
body[data-view="masonry"]   #view-filmstrip,
body[data-view="filmstrip"] #view-index,
body[data-view="filmstrip"] #view-masonry{ display:none; }

/* ---------- §14 · View: Index (list) ---------- */
.index{ grid-column: 1 / -1; }
.entry{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding: 0;
  border-top: 1px solid var(--rule);
  height: var(--row);
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -.005em;
  transition: color .25s ease, background .25s ease;
  position: relative;
  cursor: crosshair;
}
.entry:last-child{ border-bottom: 1px solid var(--rule); }
.entry .n{
  grid-column: 1 / span 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .04em;
  padding-top: 9px;
}
.entry .t{ grid-column: 2 / span 4; padding-top: 2px; }
.entry .t em{ font-family: var(--body); font-style: italic; font-size: 15px; color: var(--mute); margin-left:.4em; letter-spacing: 0; }
.entry .c{
  grid-column: 6 / span 3;
  font-family: var(--body); font-style: italic; font-size: 14px; color: var(--mute);
  padding-top: 5px;
}
.entry .d{
  grid-column: 10 / span 2;
  font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: .04em;
  padding-top: 9px;
  text-transform: uppercase;
}
.entry .y{
  grid-column: 12 / span 1;
  font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: .04em;
  text-align: right;
  padding-top: 9px;
}

.entry:hover{ color: var(--accent); }
.entry:hover .n, .entry:hover .c, .entry:hover .d, .entry:hover .y, .entry:hover .t em{ color: var(--accent); }

.entry::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s ease;
}
.entry:hover::after{ transform: scaleX(1); }

/* ---------- §15 · View: Masonry ---------- */
.masonry{
  grid-column: 1 / -1;
  column-count: 3;
  column-gap: var(--gutter);
  padding: 4px 0 8px;
}
.m-card{
  display: block;
  break-inside: avoid;
  margin: 0 0 var(--gutter) 0;
  color: inherit;
  cursor: crosshair;
  position: relative;
}
.m-card .m-plate{
  width: 100%;
  background-color: var(--ph, #d6cfbd);
  background-image: var(--pimg, none);
  background-size: cover;
  background-position: center;
  outline: 1px solid rgba(0,0,0,.08);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), outline-color .3s ease;
}
.m-card:hover .m-plate{ transform: scale(1.01); outline-color: var(--accent); }
/* aspect ratio cycle for irregular heights */
.m-card[data-ar="1/1"]  .m-plate{ aspect-ratio: 1 / 1; }
.m-card[data-ar="3/4"]  .m-plate{ aspect-ratio: 3 / 4; }
.m-card[data-ar="4/5"]  .m-plate{ aspect-ratio: 4 / 5; }
.m-card[data-ar="2/3"]  .m-plate{ aspect-ratio: 2 / 3; }
.m-card[data-ar="5/6"]  .m-plate{ aspect-ratio: 5 / 6; }
.m-card[data-ar="4/3"]  .m-plate{ aspect-ratio: 4 / 3; }

.m-card .m-cap{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 2px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--mute);
  text-transform: uppercase;
}
.m-card .m-title{
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--ink);
  padding: 6px 2px 0;
  text-transform: none;
  font-weight: 400;
}
body[data-theme="dark"] .m-card .m-title{ color: var(--paper); }
.m-card .m-title em{
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--mute);
  margin-left: .4em;
}
.m-card:hover .m-title{ color: var(--accent); }

/* ---------- §16 · View: Filmstrip (compact — 5.5 cards visible) ---------- */
.filmstrip{
  grid-column: 1 / -1;
  padding: 0;
}
.filmstrip-track{
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  /* Free momentum scroll (no snap) — trackpad / wheel / touch flow naturally. */
  scroll-behavior: auto;
  padding: 4px 0 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  overscroll-behavior-x: contain;
}
.filmstrip-track::-webkit-scrollbar{
  height: 3px;
  background: transparent;
}
.filmstrip-track::-webkit-scrollbar-track{
  background: transparent;
}
.filmstrip-track::-webkit-scrollbar-thumb{
  background: var(--rule);
  border-radius: 1.5px;
}
.filmstrip-track::-webkit-scrollbar-thumb:hover{
  background: var(--mute);
}
.f-slide{
  flex: 0 0 auto;
  /* 5.5 cards visible → 5 full cards + half of the 6th peeks, hinting scroll. */
  width: calc((100% - var(--gutter) * 4.5) / 5.5);
  display: flex; flex-direction: column;
  cursor: crosshair;
  color: inherit;
}
.f-slide .f-plate{
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--ph, #d6cfbd);
  background-image: var(--pimg, none);
  background-size: cover;
  background-position: center;
  outline: 1px solid rgba(0,0,0,.08);
  transition: outline-color .3s ease, transform .3s ease;
}
.f-slide:hover .f-plate{ outline-color: var(--accent); }
.f-slide .f-cap{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
  padding: 10px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--mute);
  text-transform: uppercase;
}
.f-slide .f-cap > span:first-child{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.f-slide .f-title{
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: -.005em;
  color: var(--ink);
  padding: 4px 0 0;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-theme="dark"] .f-slide .f-title{ color: var(--paper); }
.f-slide .f-title em{
  /* hide the italic suffix at this small scale — the cap carries context */
  display: none;
}
.f-slide:hover .f-title{ color: var(--accent); }

.filmstrip-hint{
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  padding-top: 6px;
}

/* ---------- §17 · Cursor thumbnail (solo en view=index) ---------- */
.preview{
  position: fixed;
  pointer-events: none;
  z-index: 40;
  width: 220px;
  height: 290px;
  transform: translate(-50%, -50%) scale(.985);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  will-change: transform, opacity, left, top;
}
.preview.on{ opacity:1; transform: translate(-50%, -50%) scale(1); }
.preview .plate{
  width:100%; height:100%;
  background-color: var(--ph, #d6cfbd);
  background-image: var(--pimg, none);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow:hidden;
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.5);
  outline: 1px solid rgba(0,0,0,.12);
}
.preview .dot{
  position:absolute;
  width:10px; height:10px; border-radius:50%;
  background: var(--paper);
  border: 1px solid var(--ink);
  transform: translate(-50%, -50%);
  left: var(--dot-x, 50%); top: var(--dot-y, 50%);
  pointer-events:none;
}
.preview .tag{
  position:absolute; left:8px; bottom:8px;
  font-family: var(--mono); font-size: 10px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ink);
  background: var(--paper); padding: 3px 6px;
}

/* ---------- §18 · Cursor custom (anillo + disco) — RETIRADO 6-oct-2026 ----------
   El código completo está en recamara/cursor-custom/ (CSS + JS + marcado + README
   con los pasos para reactivarlo). Se usa el cursor nativo del sistema. */