/* =========================================================
   STYLES.CSS — Steven Vanderlook
   ========================================================= */

/* =========================
   Variables y temas
   ========================= */
:root{
  --brand:#3b82f6; --brand-600:#2563eb;
  --focus:#8ab4f8;
  --shellw: clamp(320px, 94vw, 1100px);
  --radius:14px;
  --tap: 44px;

  /* Props específicas del modal de obra */
  --work-modal-w: 1120px;   /* ancho modal */
  --work-body-h: 78svh;     /* alto del cuerpo (bajo el header) */
}
:root, html[data-theme="dark"]{
  --bg:#0e141a; --ink:#e9f0f6; --muted:#b7c5d1;
  --line:#ffffff22; --accent:#ffffff0f;
  --card:#121a22; --avail:#1b7b34; --sold:#b82601;
  --btnBg:#ffffff14; --btnBorder:#ffffff2c;
  --shadow: 0 10px 24px rgba(0,0,0,.26);
}
html[data-theme="light"]{
  --bg:#eaf0f6; --ink:#0f1720; --muted:#475569;
  --line:#0f172014; --accent:#ffffffcc; --card:#ffffff;
  --avail:#1b7c34; --sold:#b82601;
  --btnBg:#0f17200f; --btnBorder:#0f17201f;
  --shadow: 0 10px 24px rgba(15,23,32,.10);
}

/* =========================
   Utilidades
   ========================= */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================
   Base
   ========================= */
:root{ --header-offset: 72px; }
html{ font-size: 16px; }
@media (max-width:420px){ html{ font-size: 15px; } }
*{ box-sizing:border-box; }
html,body{ padding-top: var(--header-offset, 72px);
height:100%; }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial;
  line-height:1.6; overflow-x:hidden;
  -webkit-tap-highlight-color: transparent;
}
body.no-scroll{ overflow:hidden; }

*{ scrollbar-width:thin; scrollbar-color:#1a2230 #0b1117; }
html[data-theme="light"] *{ scrollbar-color:#9db0c6 #eaf0f6; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:#0b1117; }
::-webkit-scrollbar-thumb{ background:#1a2230; border-radius:8px; }
html[data-theme="light"] ::-webkit-scrollbar-track{ background:#eaf0f6; }
html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#9db0c6; }

a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px;
}

/* =========================
   Cabecera
   ========================= */
header.site{right:0; left:0; 
  position: fixed; top:0; z-index:9999;
  width:var(--shellw); margin:0 auto;
  padding:10px 1rem 8px;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  background: linear-gradient(180deg, rgba(10,16,23,.72), rgba(10,16,23,.48));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
html[data-theme="light"] header.site{
  background: linear-gradient(180deg, rgba(234,240,246,.86), rgba(234,240,246,.72));
  box-shadow: 0 8px 24px rgba(15,23,32,.08);
}
.brand-left{ font-weight:700; letter-spacing:.02em; opacity:.95; font-size:clamp(.95rem, 2.4vw, 1.05rem); white-space:nowrap; }
.nav-right{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.btn-icon, .btn-ghost{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; color:var(--ink);
  border:1px solid var(--btnBorder); border-radius:999px; padding:.5rem .8rem; font-size:.95rem; min-height: var(--tap);
  transition: background .25s ease, border-color .25s ease, transform .06s ease;
  -webkit-touch-callout:none; user-select:none;
}
.btn-icon{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-ghost{ background:var(--btnBg); }
.btn-icon:hover{ background:var(--brand-600); border-color:var(--brand-600); }
.btn-ghost:hover{ background:color-mix(in oklab, var(--btnBg) 70%, #0000); border-color:var(--brand); }
.btn-icon:active, .btn-ghost:active{ transform: translateY(1px); }
.btn-icon svg, .btn-ghost svg{ width:18px; height:18px; display:block; }
.btn-sm{ font-size:.78rem; padding:.38rem .6rem; min-height:30px; }

#toggleTheme{ padding:.45rem .7rem; width:var(--tap); height:var(--tap); display:inline-grid; place-items:center; }


/* === Logo en el hero (dark/light, responsive) === */
.hero-logo{
  display:block;
  width: clamp(180px, 48vw, 520px);
  max-width: 92vw;
  height:auto;
  margin: 0 auto .4rem;
}
.hero-logo.logo-light{ display:none; }
html[data-theme="light"] .hero-logo.logo-dark{ display:none; }
html[data-theme="light"] .hero-logo.logo-light{ display:block; }

@media (max-width: 480px){
  .hero-logo{ width: clamp(160px, 70vw, 360px); }
}

/* frase bajo el logo */
.hero-copy .sub{
  margin-top: .2rem;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
}

/* === HERO / PARALLAX FIX === */
.hero-full{
  /* Extiende el fondo bajo el header fijo para evitar la línea de separación */
  margin-top: calc(-1 * var(--header-offset, 72px));
  padding-top: var(--header-offset, 72px);
  height: clamp(460px, 90svh, 840px);
}
.slide{ inset:-8% !important; } /* más bleed para evitar artefactos en bordes */
/* =========================
   Hero
   ========================= */
.hero-full{
  position:relative; height: 92svh; min-height: 480px; isolation:isolate;
  width:100vw; margin-left:calc(50% - 50vw);
  display:grid; place-items:center; text-align:center; overflow:hidden;
}
@media (max-width:600px){ .hero-full{ min-height: 420px; } }
.slides{ position:absolute; inset:0; }
.slide{
  position:absolute; inset:-4%; background-size:cover; background-position:center;
  opacity:0; transform: scale(1.04); transition: opacity 1400ms ease, transform 10s ease;
  filter: brightness(.68);
}
.slide.active{ opacity:1; transform: scale(1.12); }
.hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(60% 40% at 50% 15%, transparent 0 65%, rgba(0,0,0,.55) 100%),
              linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.7));
  pointer-events:none;
}
html[data-theme="light"] .hero-overlay{
  background: radial-gradient(60% 40% at 50% 15%, transparent 0 65%, rgba(255,255,255,.25) 100%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.35));
}
.hero-copy{ position:relative; z-index:2; padding: 0 1rem; max-width: min(94vw, 1000px); }
.hero-copy h1{
  margin:0 0 .3rem 0; font-size: clamp(1.8rem, 6vw, 3.2rem); letter-spacing:.02em; text-transform:uppercase;
  text-shadow: 0 14px 36px rgba(0,0,0,.6);
}
html[data-theme="light"] .hero-copy h1{ text-shadow:none; }
.hero-copy .sub{ margin:.15rem 0 .6rem; color:#dce6ef; font-size: clamp(1rem, 2.6vw, 1.15rem); opacity:.95; }
html[data-theme="light"] .hero-copy .sub{ color:#334155; }
.hero-cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.3rem;
  background:var(--btnBg); border:1px solid var(--btnBorder); color:var(--ink); text-decoration:none;
  border-radius:999px; padding:.6rem 1rem; font-size:.95rem;
}
.hero-cta:hover{ background:color-mix(in oklab, var(--btnBg) 60%, #0000); border-color:var(--brand); }

/* =========================
   Cuerpo
   ========================= */
main{ width:var(--shellw); margin:0 auto; padding: 1.2rem 0 1rem; }
section.block{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--accent); padding: clamp(14px, 2.2vw, 22px);
  box-shadow: var(--shadow);
}
section.block + section.block{ margin-top:16px; }
section.block h2{
  margin:.1rem 0 .6rem; font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  text-transform:uppercase; letter-spacing:.02em;
}
.muted{ color:var(--muted); }

.gap-sm{ height:16px; }

/* Parallax */
.para-bleed{
  position:relative; height: clamp(160px, 26svh, 260px);
  margin: 24px 0; overflow:hidden; outline:1px solid var(--line);
  width:100vw; margin-left:calc(50% - 50vw);
}
.para-bleed .img{
  position:absolute; inset:-10%; background-size:cover; background-position:center;
  transform: translateY(var(--off,0px)) scale(1.12); filter:brightness(.7);
}
html[data-theme="light"] .para-bleed .img{ filter:brightness(.9) contrast(1.05); }
.para-bleed .over{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35)); text-align:center; padding:1rem; }
html[data-theme="light"] .para-bleed .over{ background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.35)); }

/* Layouts */
.twocol{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:900px){ .twocol{ grid-template-columns:1fr; } }

/* Timeline */
.timeline{ position:relative; padding-left:1.1rem; }
.timeline::before{ content:""; position:absolute; left:.35rem; top:.2rem; bottom:.2rem; width:2px; background:#ffffff26; }
html[data-theme="light"] .timeline::before{ background:#0e141a26; }
.hit{ position:relative; margin:.5rem 0 .7rem; }
.hit::before{ content:""; position:absolute; left:-.8rem; top:.15rem; width:10px; height:10px; border-radius:50%; background:#ffffffaa; box-shadow:0 0 0 4px rgba(255,255,255,.08); }
html[data-theme="light"] .hit::before{ background:#0e141aaa; box-shadow:0 0 0 4px rgba(0,0,0,.06); }
.hit small{ opacity:.85; }
.hit strong{ display:block; margin:.1rem 0 .1rem; }

/* Obras destacadas */
.grid{ display:grid; grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); gap:14px; }
.tile{ border-radius:12px; overflow:hidden; outline:1px solid var(--line); background:var(--card); }
.tile figure{ margin:0; }
.tile img{ display:block; width:100%; height:220px; object-fit:cover; aspect-ratio: 1 / 1; }
@media (max-width:460px){ .tile img{ height: 200px; } }
.tile .meta{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem .7rem; font-size:.95rem; background:var(--card); border-top:1px solid var(--line); }
.tile .meta a{ color:var(--ink); opacity:.9; text-decoration:none; border-bottom:1px solid #ffffff33; }
html[data-theme="light"] .tile .meta a{ border-bottom-color:#0e141a22; }
.tile .meta a:hover{ opacity:1; border-bottom-color:var(--brand); }

/* Exposiciones */
.expos-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .expos-grid{ grid-template-columns:1fr; } }
.expo-card{ position:relative; height: clamp(180px, 32svh, 340px); overflow:hidden; background:var(--card); outline:1px solid var(--line); border-radius:12px; }
.expo-card .cover{ position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.72); transition: transform .8s ease; }
html[data-theme="light"] .expo-card .cover{ filter:brightness(.9) contrast(1.05); }
.expo-card:hover .cover{ transform: scale(1.06); }
.expo-card .link{ position:absolute; left:0; right:0; bottom:0; padding:1rem 1.2rem; color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.05rem,2.6vw,1.4rem); background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); }
html[data-theme="light"] .expo-card .link{ color:#0e141a; background:linear-gradient(180deg, transparent, rgba(255,255,255,.7)); }

/* Vídeos */
.video-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.video-embed{ border-radius:12px; overflow:hidden; outline:1px solid var(--line); background:var(--card); }
.video-embed iframe{ width:100%; aspect-ratio:16/9; min-height: 220px; display:block; }

/* Footer */
footer.site{ width:var(--shellw); margin: 16px auto; text-align:center; color:var(--ink); }
#counter{ font-family:monospace; letter-spacing:2px; }
.foot-note{ margin-top:.25rem; opacity:.8; font-size:.8rem; }

/* =========================
   Modal base (genérico)
   ========================= */
.modal{ position:fixed; inset:0; background: transparent !important; display:none; place-items:center; padding:clamp(10px, 4vw, 32px); z-index:99999; overscroll-behavior: contain; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-theme="light"] .modal{ position:fixed; inset:0; background: transparent !important; display:none; place-items:center; padding:clamp(10px, 4vw, 32px); z-index:99999; overscroll-behavior: contain; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal.open{ display:grid; }
.modal-card{
  width:min(100%, 1320px);
  max-height: 92svh; overflow:auto;
  background:var(--card); border:1px solid var(--brand); border-radius:16px; padding:clamp(.6rem, 2vw, 1rem); box-shadow:0 20px 60px #000;
}
html[data-theme="light"] .modal-card{ box-shadow:0 20px 60px rgba(10,16,23,.18); }
.modal-head{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:flex-end;
  gap:.5rem; padding:.2rem .2rem .6rem;
  background:linear-gradient(180deg, color-mix(in oklab, var(--card) 100%, #0000), color-mix(in oklab, var(--card) 70%, #0000));
}
.modal-head h3{ display:none; }
.modal-close{
  background:transparent; border:1px solid transparent;
  color:var(--ink); border-radius:999px; padding:.35rem .7rem; cursor:pointer; min-height:36px; font-size:.9rem;
}
.modal-close:hover{ background:var(--btnBg); border-color:var(--btnBorder); }
.modal-close:focus-visible{ outline-color: var(--focus); }

/* Posters en modal de expos */
.poster-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:820px){ .poster-grid{ grid-template-columns:1fr; } }
.poster{ display:flex; flex-direction:column; gap:.65rem; border-radius:12px; padding:.65rem; outline:1px solid var(--line); background:var(--card); }
.poster img{ display:block; width:100%; height: clamp(220px, 32svh, 340px); object-fit:cover; border-radius:10px; box-shadow:0 10px 26px rgba(0,0,0,.45); }
html[data-theme="light"] .poster img{ box-shadow:0 10px 26px rgba(10,16,23,.12); }
.poster .actions{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.poster .title{ font-weight:600; letter-spacing:.02em; }
.poster .go{ display:inline-flex; align-items:center; gap:.45rem; padding:.48rem .85rem; border-radius:999px; color:#fff; text-decoration:none; border:1px solid var(--brand); background:var(--brand); min-height:36px; font-size:.92rem; }
.poster .go:hover{ background:var(--brand-600); border-color:var(--brand-600); }

/* =========================
   Citas / Prensa
   ========================= */
.quotes{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:900px){ .quotes{ grid-template-columns:1fr; } }
blockquote{ margin:0; padding:1rem; background:#ffffff0a; border:1px solid var(--line); border-radius:12px; font-size:1rem; position:relative; }
html[data-theme="light"] blockquote{ background:#0e141a06; }
blockquote::before{ content:"“"; position:absolute; left:.6rem; top:-.6rem; font-size:2.2rem; opacity:.25; }
cite{ display:block; margin-top:.4rem; color:var(--muted); font-style:normal; }

/* =========================
   Actualizaciones / Galería
   ========================= */
.updates{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.gallery{ display:grid; grid-template-columns: repeat( auto-fit, minmax(160px, 1fr) ); gap:10px; }
.gallery img{ width:100%; height:220px; object-fit:cover; border-radius:10px; display:block; aspect-ratio:4 / 5; }
@media (max-width:460px){ .gallery img{ height: 200px; } }

/* Scroll tablón */
#actualizaciones .scroll-box {
  max-height: 220px; overflow-y: auto; padding-right: .5rem;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; background: rgba(255,255,255,0.05);
}
html[data-theme="light"] #actualizaciones .scroll-box { border-color:#0f172015; background:#ffffff; }
#actualizaciones .updates { margin: 0; padding: 0.8rem 1rem; list-style: disc; }
#actualizaciones .updates li { margin-bottom: .4rem; }
#actualizaciones .updates s { color: #9fb0be; }
html[data-theme="light"] #actualizaciones .updates s { color:#667085; }

/* =========================
   Lightbox general
   ========================= */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.86); display:none; place-items:center; padding:2rem; z-index:99999; }
html[data-theme="light"] .lightbox{ background:rgba(10,16,23,.8); }
.lightbox.open{ display:grid; }
.lightbox-img{ max-width:90vw; max-height:70vh; border-radius:12px; box-shadow:0 20px 60px #000; }
html[data-theme="light"] .lightbox-img{ box-shadow:0 20px 60px rgba(10,16,23,.2); }
.lightbox-aside{ margin-top:.75rem; color:#ddd; max-width:92vw; text-align:center; }
html[data-theme="light"] .lightbox-aside{ color:#1f2937; }
.lightbox .close{ position:absolute; top:16px; right:16px; background:var(--btnBg); border:1px solid var(--btnBorder); color:var(--ink); border-radius:999px; padding:.45rem .75rem; font-size:.9rem; min-height:36px; }
#thumbs{ margin-top:.75rem; display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; }
#thumbs img{ width:56px; height:auto; border-radius:6px; outline:1px solid rgba(255,255,255,.25); opacity:.8; cursor:pointer; }
#thumbs img.active{ opacity:1; outline-color:#fff; }
@media(max-width:640px){
  .lightbox-img{ max-width:94vw; max-height:72vh; }
  #thumbs img{ width:40px; }
}

/* =========================
   Obras recientes (cards)
   ========================= */
.recent-works{ width:var(--shellw); margin: 16px auto; }
.recent-works h2{ margin:.1rem 0 .8rem; font-size: clamp(1.1rem, 2.6vw, 1.45rem); text-transform:uppercase; letter-spacing:.02em; }
.recent-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width:1024px){ .recent-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .recent-grid{ grid-template-columns: 1fr; } }

.work-card{ position:relative; overflow:hidden; border-radius:12px; outline:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; }
.work-card figure{ margin:0; position:relative; overflow:hidden; }
.work-card img{
  display:block; width:100%; height:300px; object-fit:cover; transform: scale(1);
  transition: transform .35s ease, filter .35s ease; filter: brightness(.95); cursor: zoom-in;
}
@media (max-width:460px){ .work-card img{ height: 240px; } }
.work-card:hover img{ transform: scale(1.06); filter: brightness(1); }
.work-card .status{
  position:absolute; top:8px; left:8px; z-index:2; border:1px solid #ffffff30; border-radius:999px; padding:.28rem .6rem;
  background:#ffffff12; color:#fff; font-size:.85rem; pointer-events:none;
}
html[data-theme="light"] .work-card .status{ color:#fff; }
.work-card .status.available{ border-color:var(--avail); background:var(--avail); }
.work-card .status.sold{ border-color:var(--sold); background:var(--sold); }
.work-card .meta{ padding:.6rem .75rem .8rem; display:grid; gap:.25rem; background:var(--bg); border-top:1px solid var(--line); }
html[data-theme="light"] .work-card .meta{ background:#fff; }
.work-card .title{ font-weight:600; letter-spacing:.01em; }
.work-card .size{ color:var(--muted); font-size:.95rem; }
.work-card .price{ font-weight:600; }

/* =========================
   Modal de OBRA (recientes)
   ========================= */

/* Tarjeta sin dorado ni scroll; X más pequeña */
.work-modal .modal-card{
  width:min(100%, var(--work-modal-w));
  max-height:92svh;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.work-modal .modal-head{
  background:linear-gradient(180deg, color-mix(in oklab, var(--card) 100%, #0000), color-mix(in oklab, var(--card) 70%, #0000));
  padding:.25rem .35rem .5rem;
}
.work-modal .modal-close{
  background:var(--btnBg) !important;
  border:1px solid var(--btnBorder) !important;
  color:var(--ink) !important;
  font-size:.78rem; padding:.3rem .55rem; min-height:28px;
}

/* Grid columnas */
.work-modal-body{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns: 1.18fr 540px;
  gap:12px;
  justify-content:center;
  align-items:stretch;
  height: var(--work-body-h);
}

/* Aside (columna izquierda) */
.work-modal-aside{
  background:var(--accent);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.7rem;
  display:grid;
  grid-template-rows: auto auto minmax(0,auto) minmax(0,auto) 1fr auto;
  row-gap:.42rem;
  min-height:0; height:100%;
}
.work-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.work-title{ margin:0; font-size:1.02rem; font-weight:700; letter-spacing:.01em; }

/* Etiquetas */
.section-label{
  font-size:.84rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em;
  display:block; margin:.55rem 0 .4rem;
}

/* ====== Detalles (CELDA) ====== */
.work-details,
#workDetailsList{
  margin:0;
  padding:.65rem .75rem;
  list-style:none;
  display:grid;
  gap:.4rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in oklab, var(--card) 85%, #0000);
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  overflow:visible;
}

/* Fila de detalle con 2 columnas: label | valor */
.work-details li{
  display:grid;
  grid-template-columns: minmax(96px, 34%) 1fr;
  gap:.5rem;
  align-items:start;
}
.work-details strong{
  font-weight:600; opacity:.9; color:var(--ink);
  white-space:nowrap;
}
.work-details span{
  min-width:0;
  overflow-wrap:anywhere; /* evita desbordes */
  word-break:break-word;
}

/* En pantallas pequeñas, etiqueta un poco más ancha para que no salte tanto */
@media (max-width:780px){
  .work-details li{
    grid-template-columns: minmax(92px, 42%) 1fr;
  }
}

/* ====== Reflexión (CELDA) ====== */
.reflex-panel{
  margin:0;
  border:1px solid var(--line);
  border-radius:10px;
  padding:.75rem .85rem;
  background:color-mix(in oklab, var(--card) 85%, #0000);
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  overflow:auto;
}
.reflex-panel p{ margin:0; }

/* Controles */
.work-controls{
  margin-top:.1rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  padding-top:.5rem; border-top:1px solid var(--line);
}
.work-controls .center{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center; flex:1; }
.work-controls .btn-ghost, .work-controls .btn-icon{ font-size:.84rem; padding:.42rem .66rem; min-height:32px; }
.work-controls .btn-nav{
  background:var(--btnBg); border:1px solid var(--btnBorder); color:var(--ink);
  border-radius:999px; padding:.42rem .66rem; min-height:32px; font-size:.84rem; cursor:pointer;
}
.work-controls .btn-nav:hover{ border-color:var(--brand); }

/* Badge estado */
.badge{ display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.22rem .52rem; font-size:.78rem; border:1px solid #ffffff30; background:#ffffff12; color:#fff; white-space:nowrap; }
.badge.available{ border-color:var(--avail); background:var(--avail); }
.badge.sold{ border-color:var(--sold); background:var(--sold); }

/* Media (columna derecha) */
.work-modal-media{ align-self:start; background:transparent; display:grid; place-items:start; min-height:0; height:100%; }
.work-modal-media .frame{
  height:100%;
  width:auto;
  aspect-ratio: 427 / 600;
  background:transparent;
  overflow:hidden;
  border:none;
  outline:1px solid var(--line);
  border-radius:10px;
  transform: translateY(-14px);
  box-shadow:none;
}
.work-modal-media img#workImg{
  height:100%; width:100%;
  object-fit:contain;
  background:transparent;
  display:block;
  cursor: zoom-in;
}

/* LUPA (pane) — transparente para evitar “pantallazo negro” */
#zoomPane{
  position: fixed; width: 260px; height: 260px;
  pointer-events: none; border-radius: 12px;
  border: 1px solid var(--btnBorder);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  background-repeat: no-repeat; background-color: transparent; /* <- clave */
  display: none; z-index: 100000;
}
html[data-theme="light"] #zoomPane{ box-shadow: 0 10px 24px rgba(10,16,23,.15); }

/* =========================
   Responsive modal: 1 columna (móvil)
   (ÚNICO BLOQUE – asegura scroll interno y orden texto→imagen)
   ========================= */
@media (max-width:780px){

  .work-modal .modal-card{
    max-height: 96svh;              /* el modal ocupa casi toda la altura */
    overflow: auto;                  /* ← scroll DENTRO del modal */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* Cuerpo en flujo natural para respetar el DOM (texto → imagen) */
  .work-modal-body{
    display: block !important;
    height: auto !important;
  }

  .work-modal-aside{
    width: 100%;
    padding: .8rem;
    grid-template-rows: auto auto minmax(0,auto) minmax(0,auto) auto; /* título/badge | label | detalles | reflexión | botones */
  }

  /* Cabecera: título + badge */
  .work-modal-aside .head-row{
    align-items: center;
    justify-content: space-between;
    gap:.65rem;
  }
  .work-modal-aside .work-title{
    font-size: 1.15rem;
    line-height: 1.2;
  }

  /* Detalles a ancho completo (auto-alto) */
  #workDetailsList{
    width: 100%;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  /* Reflexión: controla altura (ajusta 38dvh a tu gusto) */
  .reflex-panel{
    width: 100%;
    max-height: 38dvh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: .8rem .9rem;
    margin-bottom: .6rem;
  }

  /* Imagen: debajo de todo, a ancho completo y centrada */
  .work-modal-media{
    width: 100%;
    margin-top: .6rem;
  }
  .work-modal-media .frame{
    width: 100% !important;
    height: auto !important;
    margin: .35rem 0 .2rem !important;
    transform: none !important;
  }
  #workImg{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
  }

  /* Botonera compacta */
  .work-controls{
    display: grid !important;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: .5rem;
    padding-top: .5rem;
  }
  .work-controls .btn-nav{
    width: 44px;
    min-height: 36px;
    padding: .3rem 0;
    font-size: 1.05rem;
    text-align: center;
  }
  .work-controls .center{
    justify-content: center;
    gap: .4rem;
  }
  .work-controls .btn-icon,
  .work-controls .btn-ghost{
    font-size: .82rem;
    padding: .42rem .6rem;
    min-height: 32px;
  }
}

/* =========================
   Sitemap
   ========================= */
.sitemap{ width:var(--shellw); margin: 18px auto 10px; }
.sitemap h2{ margin:.1rem 0 .6rem; text-transform:uppercase; letter-spacing:.02em; }
.map-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width:900px){ .map-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .map-grid{ grid-template-columns:1fr; } }
.map-card{
  background:var(--card);
  border:1px solid #ffffff33;
  outline:1px solid #00000055;
  border-radius:12px; padding:.8rem 1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
html[data-theme="light"] .map-card{
  border-color:#0f172018; outline-color:#ffffff; box-shadow:0 6px 18px rgba(15,23,32,.08);
}
.map-card h3{ margin:.2rem 0 .5rem; font-size:1rem; opacity:.95; }
.map-card ul{ margin:0; padding-left:1rem; }
.map-card a{ color:var(--ink); text-decoration:none; border-bottom:1px dashed #ffffff35; }
html[data-theme="light"] .map-card a{ border-bottom-color:#0f172025; }
.map-card a:hover{ border-bottom-color:var(--brand); }

/* =========================
   Reveal (aparecer suave)
   ========================= */
.reveal{ opacity:0; transform:translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform:none; }

/* =========================
   Ajuste tipográfico título/badge lateral
   ========================= */
.work-modal-aside .head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.work-modal-aside .work-title{
  margin:0;
  font-size:1.50rem;
  line-height:1.2;
  letter-spacing:.01em;
}
.work-modal-aside .work-details,
.work-modal-aside .reflex-panel{
  margin-top:0 !important;
}
.work-modal-aside .work-details{ padding:.55rem .6rem; }
.work-modal-aside .reflex-panel{ padding:.65rem .75rem; }
.work-modal-aside .badge{
  padding:.22rem .52rem;
  font-size:.8rem;
  white-space:nowrap;
}

/* =========================
   (Opcional) Banner de cookies
   ========================= */
#cookie-banner[hidden]{ display:none !important; }
#cookie-banner{
  position: fixed; left: 12px; right:12px; bottom:12px; z-index: 1000000;
  display:flex; gap:.75rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:.75rem 1rem; border:1px solid var(--line); border-radius: 10px;
  background: color-mix(in oklab, var(--card) 92%, #0000);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
#cookie-banner p{ margin:0; font-size:.95rem; color:var(--ink); }
#cookie-banner button{
  margin-left:auto; white-space:nowrap;
  background:var(--brand); color:#fff; border:1px solid var(--brand); border-radius:999px;
  padding:.5rem .9rem; cursor:pointer; font-size:.92rem;
}
#cookie-banner button:hover{ background:var(--brand-600); border-color:var(--brand-600); }

/* ===== BIOGRAFÍA (dos columnas en desktop) ===== */
#bio .bio-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items: stretch;  /* <- clave: estira ambas tarjetas a la misma altura de fila */
}
@media (max-width: 900px){
  #bio .bio-grid{
    grid-template-columns: 1fr;
    align-items: start; /* en una columna no hace falta estirar */
  }
}
#bio .card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--accent);
  padding:16px;
  box-shadow: var(--shadow);
  height: 100%; /* <- la tarjeta ocupa toda la altura asignada por la grid */
}
#bio .card h3{
  margin:.2rem 0 .6rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:1.05rem;
}
#bio .muted{ color:var(--muted); }


/* ==== FIX MOBILE WORK MODAL (FINAL OVERRIDES) ==== */
@media (max-width:780px){
  /* Permitir scroll del modal completo en móvil */
  .modal{ position:fixed; inset:0; background: transparent !important; display:none; place-items:center; padding:clamp(10px, 4vw, 32px); z-index:99999; overscroll-behavior: contain; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

  /* El card del modal sin límite de altura ni scroll interno */
  .work-modal .modal-card{
    max-height: none !important;
    overflow: visible !important;
  }

  /* Cuerpo en flujo natural (texto → imagen) y sin alturas forzadas */
  .work-modal-body{
    display: block !important;
    height: auto !important;
  }

  /* Reflexión sin tope para que se lea completa */
  .reflex-panel{
    max-height: none !important;
    overflow: visible !important;
  }

  /* Imagen: debajo de todo, centrada y a ancho completo */
  .work-modal-media{
    width: 100% !important;
    margin-top: .8rem !important;
  }
  .work-modal-media .frame{
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin: .35rem 0 .2rem !important;
  }
  #workImg{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }
}


/* === Paginación por páginas (Obras Recientes) === */
.pager{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.pager .btn-ghost{
  padding: .55rem .9rem;
  font-size: .95rem;
  min-height: 38px;
}
.pager .btn-ghost[disabled]{
  opacity: .5;
  cursor: not-allowed;
}
.work-card.hidden{ display: none !important; }


/* === Paginación por páginas (Galerías de fotos) === */
.gal-pager{ margin-top: 10px; }
.gallery > .hidden{ display: none !important; }


/* === Menú desplegable (hamburger) === */
.menu-wrap{ position: relative; }
.menu-wrap #menuToggle{ min-width: var(--tap); min-height: var(--tap); display:inline-grid; place-items:center; padding:.45rem .6rem; }
.menu-dropdown{
  position:absolute; top: calc(100% + 6px); right: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .6rem;
  min-width: 240px;
  max-width: min(92vw, 320px);
  box-shadow: var(--shadow);
  z-index: 10000;
}
.menu-title{
  display:block; margin:.1rem .2rem .45rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; font-size:.82rem;
}
.menu-list{ list-style:none; margin:0; padding:0; display:grid; gap:.35rem; }
.menu-list a{
  display:block; text-decoration:none; color:var(--ink);
  border:1px solid var(--btnBorder); background:var(--btnBg);
  padding:.5rem .6rem; border-radius:8px; font-size:.95rem;
}
.menu-list a:hover{ border-color: var(--brand); }
@media (max-width: 520px){
  .menu-dropdown{ right: .2rem; }
}

/* Contacto actions */
.contact-actions{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* === Descargas: grid de wallpapers móvil === */
.downloads-grid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(120px, 1fr) );
  gap:10px;
}
.downloads-grid a{
  display:block;
  border-radius:10px;
  overflow:hidden;
  outline:1px solid var(--line);
  background:var(--card);
}
.downloads-grid img{
  display:block;
  width:100%;
  height:200px;
  object-fit:cover;
}
@media (max-width:480px){
  .downloads-grid img{ height: 160px; }
}

.works-filter{justify-content:flex-start;}


/* === Ajuste de tamaño para botones de galería (flechas) === */
.gal-pager .btn-ghost{
  padding: .35rem .55rem;
  font-size: .9rem;
  min-height: 32px;
}

/* === Mejora visual select del filtro === */
.works-filter select{
  background: var(--accent);
  border: 1px solid var(--btnBorder);
  color: var(--ink);
  border-radius: 14px;
  padding: .5rem .9rem;
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .works-filter select{
  background: var(--btnBg);
  box-shadow: none;
}
.works-filter select:hover{
  border-color: var(--muted);
}
.works-filter select:focus{
  outline: 2px solid var(--line);
  outline-offset: 2px;
}


/* === Ajuste final filtro === */
.works-filter{ margin-bottom: 1.2rem; } /* más aire respecto a las obras */
.works-filter select:focus{
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--btnBorder);
}
/* Mantener accesibilidad si se navega con teclado (opcional y sutil) */
.works-filter select:focus-visible{
  outline: none;
  box-shadow: none;
}


/* =========================
   Likes (corazón) — flotante y en modal
   ========================= */
.like-fab{
  position:absolute; top:10px; right:10px; z-index:3;
  display:inline-flex; align-items:center; gap:.35rem;
  background: color-mix(in oklab, var(--card) 78%, #0000);
  border:1px solid var(--btnBorder);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding:.35rem .5rem;
  line-height:1; user-select:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
html[data-theme="light"] .like-fab{ box-shadow: 0 6px 18px rgba(10,16,23,.12); }

.like-btn{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  display:inline-grid; place-items:center; width:28px; height:28px;
  margin:0; border-radius:50%;
  border:1px solid var(--btnBorder);
  background: var(--btnBg);
  transform: translateZ(0);
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.like-btn:hover{ background: color-mix(in oklab, var(--btnBg) 60%, #0000); border-color: var(--brand); }
.like-btn:active{ transform: scale(.96); }
.like-btn:focus{ outline:none; }
.like-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.like-btn .heart{
  width:16px; height:16px; display:block;
  fill:#ff4861; stroke:#ff4861;
  transform-origin:center; transition: transform .18s ease;
  filter: drop-shadow(0 2px 6px rgba(255,72,97,.25));
}
.like-btn.liked .heart{ transform: scale(1.15); }

.like-count{
  font-size:.85rem; min-width:1.6em; text-align:right; padding:0 .2rem;
  opacity:.92;
}

.work-modal .like-row{
  display:flex; align-items:center; gap:.5rem; margin-top:.25rem;
}
.work-modal .like-row .like-btn{ width:30px; height:30px; }

/* Pegado del filtro a las obras: añadimos respiro */
.works-filter{ margin:.2rem 0 .9rem; }



/* === Corazón modal: contorno suave y relleno al dar like === */
#workModal .modal-head .modal-like-btn .heart{
  width:18px; height:18px; display:block;
  fill:none; stroke: currentColor; stroke-width: 1.8;
  color: var(--ink);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.18));
  transition: transform .16s ease, color .2s ease, fill .2s ease, stroke .2s ease;
}
#workModal .modal-head .modal-like-btn.liked .heart{
  fill:#ff4158; stroke:#ff4158; transform: scale(1.06);
  filter: drop-shadow(0 2px 8px rgba(255,65,88,.35));
}
#workModal .modal-head .modal-like-btn{
  border-radius:999px; padding:0; width:32px; height:32px;
}



/* === Layout header del modal de obra: corazón IZQ y X DERECHA === */
#workModal .modal-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:.6rem;
}
#workModal .modal-head h3{ display:none; } /* no usar título en la barra */
#workModal .modal-head .modal-like-wrap{ display:flex; align-items:center; gap:.4rem; }
#workModal .modal-head .modal-like-btn{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  display:inline-grid; place-items:center; width:32px; height:32px;
  border-radius:999px; border:1px solid var(--btnBorder); background: var(--btnBg);
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
#workModal .modal-head .modal-like-btn:active{ transform: scale(.96); }
#workModal .modal-head .modal-like-btn .heart{
  width:18px; height:18px; display:block;
  fill:none; stroke: currentColor; stroke-width: 1.8;
  color: var(--ink);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.18));
  transition: transform .16s ease, color .2s ease, fill .2s ease, stroke .2s ease;
}
#workModal .modal-head .modal-like-btn.liked .heart{
  fill:#ff4158; stroke:#ff4158; transform: scale(1.06);
  filter: drop-shadow(0 2px 8px rgba(255,65,88,.35));
}
#workModal .modal-head .modal-like-count{ font-size:.9rem; min-width:1.6em; text-align:right; opacity:.92; }




/* === Unificar diseño de corazón (modal y tarjetas) === */
.like-fab .heart,
.card-like .heart,
#workModal .modal-like-btn .heart{
  width:18px; height:18px; display:block;
  fill:none; stroke: currentColor; stroke-width: 1.8;
  color: var(--ink);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.18));
  transition: transform .16s ease, color .2s ease, fill .2s ease, stroke .2s ease;
}
.like-fab button.liked .heart,
.card-like button.liked .heart,
#workModal .modal-like-btn.liked .heart{
  fill:#ff4158; stroke:#ff4158; transform: scale(1.06);
  filter: drop-shadow(0 2px 8px rgba(255,65,88,.35));
}

/* Mantener estilos de los botones redondeados */
.like-fab button,
.card-like button,
#workModal .modal-like-btn{
  border-radius:999px; padding:0; width:32px; height:32px;
  border:1px solid var(--btnBorder); background: var(--btnBg);
  display:inline-grid; place-items:center; cursor:pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.like-fab button:active,
.card-like button:active,
#workModal .modal-like-btn:active{ transform: scale(.96); }

/* Quitar el duplicado dentro del modal que se coloca arriba-derecha (overlay) */
#workModal .card-like{ display:none !important; }




/* === Oculta cualquier overlay de like dentro del modal (evita duplicado arriba dcha.) === */
#workModal .card-like,
#workModal .like-fab{ display:none !important; }




/* === FIX modal head layout: corazón izq, X der === */
#workModal .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
#workModal .modal-head h3{ margin:0; }
#workModal .modal-head .modal-like-wrap{ display:flex; align-items:center; gap:.4rem; }
#workModal .modal-head .modal-like-btn{ width:32px; height:32px; border-radius:999px; border:1px solid var(--btnBorder); background: var(--btnBg); display:inline-grid; place-items:center; cursor:pointer; }
#workModal .modal-head .modal-like-btn .heart{ width:18px; height:18px; fill:none; stroke: currentColor; stroke-width:1.8; transition: transform .16s ease, color .2s ease, fill .2s ease, stroke .2s ease; }
#workModal .modal-head .modal-like-btn.liked .heart{ fill:#ff4158; stroke:#ff4158; transform: scale(1.06); }

/* Oculta overlays de like dentro del modal para evitar duplicado visual */
#workModal .card-like, #workModal .like-fab{ display:none !important; }


/* =========================
   Proyecto “Momento Múltiple” — Termómetro de progreso
   ========================= */
#momento-multiple .mm-wrap{
  --p: 0; /* % actual (se actualiza vía JS) */
  --g1: color-mix(in oklab, var(--brand) 92%, #fff 8%);
  --g2: var(--brand);
  --g3: var(--brand-600);
  position: relative;
  margin: .9rem 0 0;
  padding-top: 34px; /* espacio para el indicador superior */
}

#momento-multiple .mm-track{
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 85%, #0000);
  border: 1px solid color-mix(in oklab, var(--line) 80%, #0000);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 8px 22px rgba(0,0,0,.25);
  overflow:hidden;
}

#momento-multiple .mm-fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g2), var(--g1));
  background-size: 240% 100%;
  animation: mmFlow 5.5s linear infinite;
  border-radius: inherit;
  box-shadow: 0 0 14px color-mix(in oklab, var(--brand) 40%, #0000);
  transition: width .9s cubic-bezier(.22,1,.36,1);
}

@keyframes mmFlow{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}

/* Marcas (ticks) */
#momento-multiple .mm-ticks{
  list-style:none; margin:0; padding:0;
}
#momento-multiple .mm-ticks li{
  position:absolute; top:-5px; bottom:-5px; width:2px;
  left: calc(var(--x) * 1%);
  transform: translateX(-50%);
  background: color-mix(in oklab, var(--ink) 26%, #0000);
  border-radius:1px;
}

/* Indicador superior (estado actual) */
#momento-multiple .mm-indicator{
  position:absolute; left: calc(var(--p) * 1%); top: 0;
  transform: translateX(-50%);
  text-align:center; pointer-events:none;
}
#momento-multiple .mm-indicator-label{
  font-size: .95rem; line-height:1.1;
  background: color-mix(in oklab, var(--card) 90%, #0000);
  display: inline-block;
  padding: .22rem .5rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
#momento-multiple .mm-indicator-label .tag{
  color: var(--muted);
  margin-right: .25rem;
}
#momento-multiple .mm-indicator-tri{
  width:0; height:0; margin:4px auto 0;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-top: 8px solid color-mix(in oklab, var(--brand-600) 85%, var(--brand) 15%);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Leyenda en lista (responsiva) */
#momento-multiple .mm-legend{
  margin:.6rem 0 0; padding:0;
  display:grid; gap:.35rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  font-size: .95rem;
}
#momento-multiple .mm-legend li{
  list-style: none;
  display: flex; align-items: baseline; gap:.4rem;
  border-left: 3px solid var(--brand);
  padding-left: .5rem;
}
#momento-multiple .mm-legend li strong{
  color: var(--brand-600);
  min-width: 3.2em;
}

/* Modo claro: subimos un poco el brillo para que destaque */
html[data-theme="light"] #momento-multiple .mm-track{
  background: color-mix(in oklab, var(--card) 80%, #fff 20%);
  border-color: color-mix(in oklab, var(--line) 70%, #0000);
}


/* =========================
   Proyecto “Momento Múltiple” — Termómetro de progreso (v2)
   ========================= */
#momento-multiple .mm-wrap{
  --p: 0; /* % actual (JS) */
  /* Paleta derivada de la marca, un poco más brillante */
  --c1: color-mix(in oklch, var(--brand) 70%, white 30%);
  --c2: color-mix(in oklch, var(--brand-600) 85%, white 15%);
  --c3: var(--brand-600);
  --c4: var(--brand);
  --c5: color-mix(in oklch, var(--brand-600) 70%, black 12%);
  position: relative;
  margin: .9rem 0 0;
  padding-top: 34px; /* espacio para el indicador superior */
}



#momento-multiple .mm-track{
  position: relative;
  height: 18px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      color-mix(in oklch, var(--ink) 12%, transparent) 0%,
      color-mix(in oklch, var(--ink) 18%, transparent) 100%);
  border: 1px solid color-mix(in oklch, var(--line) 80%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 8px 22px rgba(0,0,0,.25);
  overflow:hidden;
}

#momento-multiple .mm-fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  /* Degradado de varios colores con animación */
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c3), var(--c2));
  background-size: 280% 100%;
  animation: mmFlow 6.5s linear infinite;
  border-radius: inherit;
  box-shadow:
    0 0 14px color-mix(in oklch, var(--c2) 40%, transparent),
    0 0 30px color-mix(in oklch, var(--c3) 22%, transparent);
  transition: width .9s cubic-bezier(.22,1,.36,1);
}

@keyframes mmFlow{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}

/* Marcas (ticks) */
#momento-multiple .mm-ticks{
  list-style:none; margin:0; padding:0;
}
#momento-multiple .mm-ticks li{
  position:absolute; top:-5px; bottom:-5px; width:2px;
  left: calc(var(--x) * 1%);
  transform: translateX(-50%);
  border-radius:1px;
  transition: background-color .4s ease;
}
#momento-multiple .mm-ticks li.hit{ background: var(--c3); }
#momento-multiple .mm-ticks li.miss{ background: color-mix(in oklch, var(--ink) 26%, transparent); }

/* Indicador superior (estado actual) */
#momento-multiple .mm-indicator{
  position:absolute; left: calc(var(--p) * 1%); top: 0;
  transform: translateX(-50%);
  text-align:center; pointer-events:none;
}
#momento-multiple .mm-indicator-label{
  font-size: .95rem; line-height:1.1;
  background: color-mix(in oklch, var(--card) 90%, transparent);
  display: inline-block;
  padding: .22rem .5rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
#momento-multiple .mm-indicator-label .tag{
  color: var(--muted);
  margin-right: .25rem;
}
#momento-multiple .mm-indicator-tri{
  width:0; height:0; margin:4px auto 0;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-top: 8px solid var(--c3);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Leyenda en lista (responsiva) */
#momento-multiple .mm-legend{
  margin:.6rem 0 0; padding:0;
  display:grid; gap:.35rem 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  font-size: .95rem;
}
#momento-multiple .mm-legend li{
  list-style: none;
  display: flex; align-items: baseline; gap:.4rem;
  border-left: 3px solid color-mix(in oklch, var(--ink) 22%, transparent);
  padding-left: .5rem;
  transition: color .3s ease, border-color .3s ease;
}
#momento-multiple .mm-legend li strong{ min-width: 3.2em; }

/* Alcanzados (azules) */
#momento-multiple .mm-legend li.done{
  border-left-color: var(--c3);
  color: color-mix(in oklch, var(--ink) 92%, var(--c3) 8%);
}
#momento-multiple .mm-legend li.done strong{ color: var(--c3); font-weight: 700; }

/* No alcanzados (grises) */
#momento-multiple .mm-legend li.todo{
  border-left-color: color-mix(in oklch, var(--ink) 22%, transparent);
  color: color-mix(in oklch, var(--ink) 65%, transparent);
}
#momento-multiple .mm-legend li.todo strong{ color: color-mix(in oklch, var(--ink) 55%, transparent); }

/* Modo claro: subimos brillo */
html[data-theme="light"] #momento-multiple .mm-track{
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--ink) 6%, white 14%) 0%,
    color-mix(in oklch, var(--ink) 12%, white 10%) 100%);
  border-color: color-mix(in oklch, var(--line) 70%, transparent);
}


/* === Override: barra arcoíris sin glow === */
#momento-multiple .mm-fill{
  background: linear-gradient(90deg,
    #ff5f6d 0%,
    #fcb045 14%,
    #ffe66d 28%,
    #7bed9f 42%,
    #70a1ff 56%,
    #a29bfe 70%,
    #f78fb3 84%,
    #ff5f6d 100%
  );
  background-size: 300% 100%;
  animation: mmFlow 7s linear infinite;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
}


/* === Ajuste: líneas internas limpias y animación arcoíris sin salto === */
#momento-múltiple .mm-ticks li, 
#momento-multiple .mm-ticks li{
  width: 2px;
  border-radius: 0;
  box-shadow: none;
}

#momento-multiple .mm-ticks li.hit{ background: var(--brand-600); }
#momento-multiple .mm-ticks li.miss{ background: color-mix(in oklch, var(--ink) 26%, transparent); }

/* Barra arcoíris mejorada y animación alterna (sin salto) */
#momento-multiple .mm-fill{
  background: linear-gradient(90deg,
    #ff6a00 0%,
    #ffcc00 16.6%,
    #33cc33 33.3%,
    #33cccc 50%,
    #3366ff 66.6%,
    #9933ff 83.3%,
    #ff6a00 100%
  );
  background-size: 200% 100%;
  animation: mmShift 8s linear infinite alternate;
  box-shadow: none;
}

/* Evitamos herencias previas de otras animaciones */
@keyframes mmShift{
  0%{ background-position: 0% 0; }
  100%{ background-position: 100% 0; }
}



/* === Limpieza visual del termómetro: sin bolitas, líneas internas nítidas === */
#momento-multiple .mm-track,
#momento-multiple .mm-fill{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

#momento-multiple .mm-fill{
  background-repeat: no-repeat;
}

/* Ticks: sólo líneas, dentro del track, sin sobresalir ni redondear */
#momento-multiple .mm-ticks{ list-style:none; margin:0; padding:0; pointer-events:none; }
#momento-multiple .mm-ticks li{
  position:absolute;
  top: 2px;           /* margen interno para no tocar el borde redondeado */
  bottom: 2px;        /* margen interno para no tocar el borde redondeado */
  width: 1.5px;       /* línea más fina para evitar aliasing grueso */
  transform: translateX(-50%);
  border-radius: 0;   /* sin puntas redondeadas */
  box-shadow: none;   /* sin sombras (adiós "bolitas") */
  background-image: none !important;
}

/* Colores de ticks alcanzados/pedientes */
#momento-multiple .mm-ticks li.hit{ background-color: var(--brand-600) !important; }
#momento-multiple .mm-ticks li.miss{ background-color: color-mix(in oklch, var(--ink) 26%, transparent) !important; }


/* === Fijación final ticks: sin bullets, visibles sobre el degradado, sin "bolitas" === */
#momento-multiple .mm-track{ position:relative; z-index:0; }
#momento-multiple .mm-fill{ position:absolute; inset:0 auto 0 0; z-index:1; }

#momento-multiple .mm-ticks{
  position:absolute; inset:0;
  margin:0; padding:0;
  list-style:none !important;
  z-index:2; pointer-events:none;
  background:none !important;
}
#momento-multiple .mm-ticks li{
  position:absolute;
  left: calc(var(--x) * 1%);
  top:0; bottom:0;
  list-style:none !important;
  width:0; /* la línea se dibuja con ::before */
}
#momento-multiple .mm-ticks li::marker{ content:""; }

#momento-multiple .mm-ticks li::before{
  content:"";
  position:absolute; left:50%;
  top:2px; bottom:2px;
  width:2px;
  transform: translateX(-50%);
  border-radius:0;
  box-shadow:none;
  background-color: var(--tick, color-mix(in oklch, var(--ink) 26%, transparent));
}

/* Colores alcanzado/pending a través de variable */
#momento-multiple .mm-ticks li.hit{ --tick: var(--brand-600); }
#momento-multiple .mm-ticks li.miss{ --tick: color-mix(in oklch, var(--ink) 26%, transparent); }


/* === Override pedido: ticks blancos y altura ajustada dentro del termómetro === */
#momento-multiple .mm-ticks{ position:absolute; inset:0; z-index:2; pointer-events:none; }
#momento-multiple .mm-ticks li{ position:absolute; left: calc(var(--x) * 1%); top:0; bottom:0; width:0; }
#momento-multiple .mm-ticks li::before{
  content:"";
  position:absolute; left:50%;
  /* Ajuste de altura para que quede bien dentro del track (18px alto): */
  top:3px; bottom:3px;       /* líneas de ~12px de alto centradas */
  width:2px;                 /* grosor */
  transform: translateX(-50%);
  background-color:#ffffff !important; /* SIEMPRE blanco */
  border-radius:0;
  box-shadow:none;
}


/* === Override final: ticks grises, a altura completa dentro del termómetro === */
#momento-multiple .mm-ticks{ position:absolute; inset:0; z-index:2; pointer-events:none; }
#momento-multiple .mm-ticks li{
  position:absolute;
  left: calc(var(--x) * 1%);
  top:0; bottom:0;           /* altura completa del track */
  width:0;                   /* la línea va en ::before */
  list-style:none !important;
}
#momento-multiple .mm-ticks li::marker{ content:""; }

#momento-multiple .mm-ticks li::before{
  content:"";
  position:absolute; left:50%;
  top:1px; bottom:1px;       /* dentro del borde (track 18px + borde 1px) */
  width:2px;                 /* grosor claro y estable */
  transform: translateX(-50%);
  border-radius:0;
  box-shadow:none;
  background-color: color-mix(in oklch, var(--ink) 55%, transparent) !important; /* gris neutro */
}

/* Fuerza gris para alcanzados y pendientes por igual */
#momento-multiple .mm-ticks li.hit::before,
#momento-multiple .mm-ticks li.miss::before{
  background-color: color-mix(in oklch, var(--ink) 55%, transparent) !important;
}


/* === Separadores por porcentaje con pseudo-elemento: sin cortes, encima del degradado === */
#momento-multiple .mm-track{ position:relative; }
#momento-multiple .mm-fill{ position:absolute; inset:0 auto 0 0; z-index:1; }
#momento-multiple .mm-ticks{ display:none !important; } /* ocultamos las líneas antiguas para evitar conflictos */

#momento-multiple .mm-track::after{
  content:"";
  position:absolute; inset:0;
  z-index:3; pointer-events:none;
  --tickc: color-mix(in oklch, var(--ink) 55%, transparent);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* Cada linear-gradient dibuja una línea vertical completa en un % concreto */
  background-image:
    linear-gradient(90deg, transparent calc(0% - 1px), var(--tickc) calc(0% - 1px), var(--tickc) calc(0% + 1px), transparent calc(0% + 1px)),
    linear-gradient(90deg, transparent calc(10% - 1px), var(--tickc) calc(10% - 1px), var(--tickc) calc(10% + 1px), transparent calc(10% + 1px)),
    linear-gradient(90deg, transparent calc(15% - 1px), var(--tickc) calc(15% - 1px), var(--tickc) calc(15% + 1px), transparent calc(15% + 1px)),
    linear-gradient(90deg, transparent calc(20% - 1px), var(--tickc) calc(20% - 1px), var(--tickc) calc(20% + 1px), transparent calc(20% + 1px)),
    linear-gradient(90deg, transparent calc(30% - 1px), var(--tickc) calc(30% - 1px), var(--tickc) calc(30% + 1px), transparent calc(30% + 1px)),
    linear-gradient(90deg, transparent calc(35% - 1px), var(--tickc) calc(35% - 1px), var(--tickc) calc(35% + 1px), transparent calc(35% + 1px)),
    linear-gradient(90deg, transparent calc(70% - 1px), var(--tickc) calc(70% - 1px), var(--tickc) calc(70% + 1px), transparent calc(70% + 1px)),
    linear-gradient(90deg, transparent calc(80% - 1px), var(--tickc) calc(80% - 1px), var(--tickc) calc(80% + 1px), transparent calc(80% + 1px)),
    linear-gradient(90deg, transparent calc(90% - 1px), var(--tickc) calc(90% - 1px), var(--tickc) calc(90% + 1px), transparent calc(90% + 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), var(--tickc) calc(100% - 1px), var(--tickc) calc(100% + 1px), transparent calc(100% + 1px));
}


/* Trayectoria: botón brillante "Activa" (sin duplicar línea de timeline) */
#trayectoria .hit{ position:relative; }
#trayectoria .badge-active{
  position:absolute; right:10px; top:50%; transform: translateY(-50%);
  padding:.18rem .5rem; border-radius:999px; font-size:.78rem; font-weight:700;
  color:#081018; background: linear-gradient(90deg, #48e0ff, #2ac2ff, #7a62ff);
  box-shadow: 0 0 12px rgba(66,180,255,.55), 0 0 28px rgba(122,98,255,.35);
  border: 1px solid rgba(255,255,255,.45);
  text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap;
}
@media (max-width:560px){
  #trayectoria .badge-active{ position:static; transform:none; display:inline-flex; margin-left:.4rem; }
}


/* Últimas actualizaciones: solo (en proceso) en blanco; resto gris; sin líneas */
#actualizaciones hr{ display:none !important; }
#actualizaciones .updates{ list-style: disc; padding-left: 1.2rem; }
#actualizaciones .updates li{ color: color-mix(in oklch, var(--ink) 55%, transparent); }
#actualizaciones .updates li.in-progress{ color: inherit; }


/* Momento Múltiple: badge ¡Nuevo! en línea con el título (derecha) */
#momento-multiple h2{ display:flex; align-items:center; gap:.6rem; }
#momento-multiple h2 .badge-new-inline{
  margin-left:auto;
  background:#7a1626; color:#fff; font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; font-size:.82rem; padding:.22rem .5rem;
  border-radius:10px; border:1px solid rgba(0,0,0,.25);
  box-shadow: 0 6px 18px rgba(122,22,38,.35);
}


/* Termómetro Momento Múltiple */
.mm-wrap{ margin-top:12px; }
.mm-track{
  position:relative; height:18px; border-radius:999px; outline:1px solid var(--line);
  background: linear-gradient(90deg, #777 0 50%, #555 50% 100%); /* base neutra */
  overflow:hidden;
}
.mm-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, #00b8ff, #3b82f6, #7a62ff, #ff4dda, #ff9a00);
  background-size: 200% 100%;
  animation: mmflow 4s linear infinite;
}
@keyframes mmflow{ 0%{background-position:0 0} 100%{background-position:200% 0} }
.mm-ticks{ position:absolute; inset:0; list-style:none; margin:0; padding:0; }
.mm-ticks li{
  position:absolute; top:2px; bottom:2px; width:2px;
  left: calc(var(--x) * 1%);
  transform: translateX(-1px);
  background: color-mix(in oklch, var(--ink) 65%, transparent); /* gris visible en todo el alto */
  opacity:.8;
}
.mm-ticks li.hit{ background: #5fb0ff; } /* superado (azul) */
.mm-indicator{ position:relative; height:0; }
.mm-indicator-label{
  position:absolute; left: calc(var(--p,0) * 1%); transform: translate(-50%,-8px);
  display:inline-flex; align-items:center; gap:.4rem; padding:.12rem .4rem;
  border-radius:8px; font-size:.86rem; background: #0b1117; color:#dbe7f3; border:1px solid #ffffff26;
}
html[data-theme="light"] .mm-indicator-label{ background:#ffffff; color:#0f1720; border-color:#0f172014; }
.mm-indicator-tri{
  position:absolute; left: calc(var(--p,0) * 1%); top: 10px; width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:6px solid currentColor; color:#5fb0ff; transform: translateX(-50%);
}
.mm-legend{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.25rem; }
.mm-legend li{ opacity:.8; }
.mm-legend li.done{ color:#5fb0ff; opacity:1; }
.mm-legend li.todo{ color:#9aa8b6; }


/* Obras destacadas: leve zoom en hover */
.tile img{ transition: transform .35s ease; }
.tile:hover img{ transform: scale(1.03); }


/* Modal pop-in */
.modal.open .modal-card{ animation: modalPop .28s cubic-bezier(.22,1,.36,1); }
@keyframes modalPop{ from{ opacity:.0; transform: scale(.985) translateY(6px); } to{ opacity:1; transform: scale(1) translateY(0); } }


/* Logos (tras contacto, celda transparente) */
#logos{ padding: 1.2rem 0; }
#logos .logos-cell{
  background: transparent;
  border: 1px solid color-mix(in oklch, var(--line) 40%, transparent);
  border-radius: 12px;
  padding: 14px;
}
#logos .grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap:18px; align-items:center; justify-items:center; }
#logos .logo{
  width: 140px; height: 80px; border:1px dashed color-mix(in oklch, var(--line) 60%, transparent); border-radius:12px;
  display:grid; place-items:center; background: transparent;
  color: var(--muted); font-weight:600; letter-spacing:.06em; font-size:.9rem;
}


/* Footer: ticker + mini logo */
.ticker{ position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:8px auto 0; max-width: var(--shellw); }
.ticker-track{ display:inline-block; white-space: nowrap; padding:6px 0; animation: slideX 60s linear infinite; opacity:.9; }
.ticker-track:hover{ animation-play-state: paused; }
@keyframes slideX{ from{ transform:translateX(0); } to{ transform: translateX(-50%); } }
footer.site .footer-logo{ display:block; margin:0 auto 6px; width:120px; max-width:40%; height:auto; opacity:.95; filter: drop-shadow(0 4px 12px rgba(0,0,0,.2)); }
html[data-theme="light"] .footer-logo.logo-dark{ display:none; }
html[data-theme="dark"] .footer-logo.logo-light{ display:none; }

/* Trayectoria: botón brillante "Activa" */
#trayectoria .hit{ position:relative; }
#trayectoria .badge-active{
  position:absolute; right:10px; top:50%; transform: translateY(-50%);
  padding:.18rem .5rem; border-radius:999px; font-size:.78rem; font-weight:700;
  color:#081018; background: linear-gradient(90deg, #48e0ff, #2ac2ff, #7a62ff);
  box-shadow: 0 0 12px rgba(66,180,255,.55), 0 0 28px rgba(122,98,255,.35);
  border: 1px solid rgba(255,255,255,.45);
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
@media (max-width:560px){
  #trayectoria .badge-active{ position:static; transform:none; display:inline-flex; margin-left:.4rem; }
}

/* Últimas actualizaciones: destacar (en proceso) */
#actualizaciones .updates li{ color: color-mix(in oklch, var(--ink) 55%, transparent); }
#actualizaciones .updates li.in-progress{ color: inherit; }

/* Momento Múltiple: badge ¡Nuevo! a la derecha */
#momento-multiple h2{ display:flex; align-items:center; gap:.6rem; }
#momento-multiple h2 .badge-new-inline{
  margin-left:auto;
  background:#7a1626; color:#fff; font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; font-size:.82rem; padding:.22rem .5rem;
  border-radius:10px; border:1px solid rgba(0,0,0,.25);
  box-shadow: 0 6px 18px rgba(122,22,38,.35);
}
/* Termómetro (arcoíris animado, sin bolitas; ticks grises; superados en azul) */
.mm-wrap{ margin-top:12px; }
.mm-track{
  position:relative; height:18px; border-radius:999px; outline:1px solid var(--line);
  background: linear-gradient(90deg, #777 0 50%, #555 50% 100%);
  overflow:hidden;
}
.mm-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, #00b8ff, #3b82f6, #7a62ff, #ff4dda, #ff9a00);
  background-size: 200% 100%;
  animation: mmflow 4s linear infinite;
}
@keyframes mmflow{ 0%{background-position:0 0} 100%{background-position:200% 0} }
.mm-ticks{ position:absolute; inset:0; list-style:none; margin:0; padding:0; }
.mm-ticks li{
  position:absolute; top:2px; bottom:2px; width:2px;
  left: calc(var(--x) * 1%);
  transform: translateX(-1px);
  background: color-mix(in oklch, var(--ink) 65%, transparent);
  opacity:.85;
}
.mm-ticks li.hit{ background: #5fb0ff; }
.mm-indicator{ position:relative; height:0; }
.mm-indicator-label{
  position:absolute; left: calc(var(--p,0) * 1%); transform: translate(-50%,-8px);
  display:inline-flex; align-items:center; gap:.4rem; padding:.12rem .4rem;
  border-radius:8px; font-size:.86rem; background: #0b1117; color:#dbe7f3; border:1px solid #ffffff26;
}
html[data-theme="light"] .mm-indicator-label{ background:#ffffff; color:#0f1720; border-color:#0f172014; }
.mm-indicator-tri{
  position:absolute; left: calc(var(--p,0) * 1%); top: 10px; width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:6px solid currentColor; color:#5fb0ff; transform: translateX(-50%);
}
.mm-legend{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.25rem; }
.mm-legend li{ opacity:.85; }
.mm-legend li.done{ color:#5fb0ff; opacity:1; }
.mm-legend li.todo{ color:#9aa8b6; }

/* Logos (después de contacto) — limpio */
#logos{ padding-top: clamp(20px, 4vw, 36px); padding-bottom: clamp(20px, 4vw, 36px); }
#logos .logos-cell{
  background: transparent;
  border: 1px solid rgba(128,128,128,.25);
  border-radius: 12px;
  padding: 14px;
}
#logos .grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:18px; align-items:center; justify-items:center; }
#logos .logo{ display:grid; place-items:center; width: 140px; height: 80px; border:none; background:transparent; text-decoration:none; }
#logos .logo img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Footer ticker + mini logo */
.ticker{ position:relative; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:8px auto 0; max-width: var(--shellw); }
.ticker-track{ display:inline-block; white-space: nowrap; padding:6px 0; animation: slideX 60s linear infinite; opacity:.9; }
.ticker-track:hover{ animation-play-state: paused; }
@keyframes slideX{ from{ transform:translateX(0); } to{ transform: translateX(-50%); } }
footer.site .footer-logo{ display:block; margin:0 auto 6px; width:120px; max-width:40%; height:auto; opacity:.95; filter: drop-shadow(0 4px 12px rgba(0,0,0,.2)); }
html[data-theme="light"] .footer-logo.logo-dark{ display:none; }
html[data-theme="dark"] .footer-logo.logo-light{ display:none; }


/* === Modal mobile fix: scrollable & dvh-safe === */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-content: start;            /* don't vertically center on mobile, allow content to start at top */
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: transparent !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow-y: auto;                /* outer container can scroll */
  -webkit-overflow-scrolling: touch;
  height: 100dvh;                  /* iOS 16+ dvh for proper viewport height */
  overscroll-behavior: contain;
  z-index: 99999;
}
@supports not (height: 100dvh){
  .modal{ height: 100vh; }
}
.modal.open{ display: grid; }      /* show grid layout only when open */
.modal-card{
  width: min(920px, 94vw);
  margin: 0 auto;
  max-height: calc(100dvh - 2 * max(12px, env(safe-area-inset-top))); /* card can scroll if too tall */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card, rgba(255,255,255,.06));
  border-radius: 14px;
}
@supports not (height: 100dvh){
  .modal-card{ max-height: calc(100vh - 24px); }
}
.modal.open .modal-card{ animation: modalPop .28s cubic-bezier(.22,1,.36,1); }
@keyframes modalPop{ from{ opacity:.0; transform: scale(.985) translateY(6px); } to{ opacity:1; transform: scale(1) translateY(0); } }



/* prevent background scroll while modal open (does not block inner .modal-card scroll) */
.modal-open, .modal-open body{ overflow: hidden; }


















/* Easter: Galería Nocturna */
html.galeria-nocturna {
  filter: contrast(1.05) saturate(1.08);
}
html.galeria-nocturna .shell,
html.galeria-nocturna body {
  background: color-mix(in oklch, #000 92%, transparent);
}
html.galeria-nocturna::before {
  content:""; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.0) 40%, rgba(0,0,0,.25) 100%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 10 10"><rect width="10" height="10" fill="none"/><circle cx="1" cy="1" r=".15" fill="%23fff" opacity=".06"/></svg>');
  mix-blend-mode: soft-light;
  opacity: .9;
}
@media (prefers-reduced-motion: reduce) {
  html.galeria-nocturna { filter: none; }
}








/* Glitch suave */
@keyframes txt-glitch {
  0% { text-shadow: 0 0 transparent, 0 0 transparent; }
  40% { text-shadow: 1px 0 rgba(0,180,255,.7), -1px 0 rgba(255,0,180,.7); }
  80% { text-shadow: -1px 0 rgba(0,180,255,.5), 1px 0 rgba(255,0,180,.5); }
  100% { text-shadow: none; }
}
.glitch-on h1, .glitch-on h2, .glitch-on .title {
  animation: txt-glitch 800ms ease;
}

/* === Icon-only buttons next to theme toggle === */
.icon-only{
  width: var(--tap);
  height: var(--tap);
  display:inline-grid;
  place-items:center;
  padding:0;
}
.icon-only svg{ width:20px; height:20px; }







:root{
  /* cuánto quieres “de la altura del header” (0.90=90%, 0.95=95%, etc.) */
  --anchor-scale: 0.48;

  /* cojín extra fijo encima del título */
  --anchor-extra: 8px;
}

html{
  scroll-behavior: smooth;
  /* = (header * algo menos) + cojín */
  scroll-padding-top: calc(var(--anchor-scale) * var(--header-offset, 84px) + var(--anchor-extra));
}
:where(section,[id]){
  scroll-margin-top: calc(var(--anchor-scale) * var(--header-offset, 84px) + var(--anchor-extra));
}