/* ===== Mural 35 Años — v8.2 (marco madera ultra + corcho pro + bordes delgados) ===== */
:root{
  --wood:#353f79;
  --wood-dark:#192159;
 

  --note-lines: 5;
  --note-fs: 14px;
  --note-author-fs:12px;
  --zoom-scale: 2.35;

  /* Ruta del pin */
  --pin-url: url("/assets/pin.png");

  /* Board */
  --board-radius: 14px;                 /* radio exterior del tablero */
  --board-pad: clamp(12px, 2.6vw, 24px);/* padding interno para notas */
  --frame: clamp(10px, 2.5vw, 22px);    /* grosor del marco (más delgado) */
}

/* Reset básico */
html,body{height:100%; margin:0}
body{
  background:var(--wood);
  font-family:"Cormorant Garamond", serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{ overflow:hidden; }

/* ===== Contenedor del tablero ===== */
.board{
  position:relative;
  isolation:isolate;
  z-index:1;
  margin: clamp(8px, 2.2vw, 20px);
  height:calc(100vh - 2*clamp(8px, 2.2vw, 20px));
  height:calc(100svh - 2*clamp(8px, 2.2vw, 20px));
  border-radius:var(--board-radius);
  overflow:hidden;
  box-shadow: 0 10px 40px var(--shadow);
}



/* Realce extra de cantos (brillos/sombras suaves) */
.board--framed::after{
  content:"";
  position:absolute; inset:0; padding: var(--frame);
  border-radius: inherit; pointer-events:none; z-index:2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 18%, transparent 82%, rgba(0,0,0,.18)),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 25%, transparent 75%, rgba(0,0,0,.20));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Panel de corcho incrustado */
.board__cork{
  position:absolute;
  inset: var(--frame);
  border-radius: calc(var(--board-radius) - 8px);
  overflow:hidden;

  /* textura corcho (poros + fibras + base) */
  background:
    radial-gradient(circle, rgba(0,0,0,.055) 1px, transparent 1.6px) 0 0 / 10px 10px,
    radial-gradient(circle, rgba(0,0,0,.040) 1px, transparent 2px) 6px 5px / 12px 12px,
    repeating-linear-gradient(25deg, rgba(95,61,23,.06) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #d9b17a 0%, #c2945e 60%, #d3a469 100%);
  border:1px solid rgba(0,0,0,.16);
  box-shadow:
    inset 0 -6px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* Grano/ruido sutil sobre el corcho */
.board__cork::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:2;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.05) 0 1px, transparent 1.2px) 0 0 / 22px 22px,
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.05) 0 1px, transparent 1.2px) 0 0 / 26px 26px,
    radial-gradient(circle at 40% 80%, rgba(0,0,0,.05) 0 1px, transparent 1.2px) 0 0 / 30px 30px;
  opacity:.3;
}

/* ===== Temas alternos (aplícalos en <main class="board board--framed board--graph">) ===== */
/* Corporativo azul con grilla dorada */
.board.board--graph .board__cork{
  background:
    radial-gradient(1000px 600px at 10% -20%, rgba(201,163,107,.12), transparent 60%),
    radial-gradient(900px 700px at 110% -30%, rgba(201,163,107,.08), transparent 60%),
    linear-gradient(180deg, #0d3767 0%, #0b2e59 35%, #0b2e59 100%);
  border-color: rgba(255,255,255,.08);
}
.board.board--graph .board__cork::before{
  --dot: radial-gradient(circle at center, rgba(201,163,107,.38) 0.6px, transparent 0.7px);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 2px, rgba(0,0,0,.028) 2px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, rgba(0,0,0,.02) 2px 4px),
    var(--dot) 0 0/26px 26px;
  opacity:.7;
}

/* Papel limpio */
.board.board--paper .board__cork{
  background: linear-gradient(180deg, #fbfbfb, #f5f6f7 60%, #eef0f3 100%);
  border-color: rgba(0,0,0,.08);
}
.board.board--paper .board__cork::before{
  background:
    repeating-linear-gradient(12deg, rgba(0,0,0,.03) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-8deg, rgba(0,0,0,.025) 0 2px, transparent 2px 7px);
  opacity:.55;
}

/* Oscuro elegante */
.board.board--midnight .board__cork{
  background:
    radial-gradient(900px 600px at 110% -20%, rgba(201,163,107,.18), transparent 55%),
    linear-gradient(180deg, #0a1224, #0a0f1d 60%, #090d18 100%);
  border-color: rgba(255,255,255,.08);
}
.board.board--midnight .board__cork::before{
  background:
    radial-gradient(1px 1px at 30% 20%, rgba(255,255,255,.35), transparent 60%) 0 0/22px 22px,
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.22), transparent 60%) 0 0/28px 28px,
    radial-gradient(1px 1px at 50% 80%, rgba(255,255,255,.18), transparent 60%) 0 0/32px 32px;
  opacity:.7;
}

/* Viñeta de bordes (dentro del corcho) */
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.20) 100%);
  pointer-events:none; z-index:15;
}

/* Marca y botón */
.brand{
  position:absolute; 
  top:  calc(var(--frame) + 6px);
  left: calc(var(--frame) + 8px);
  display:inline-flex; align-items:center;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  z-index:50; pointer-events:auto;
}
.brand img{ height:56px; width:auto; display:block; }

.btn-back{
  position:absolute; 
  top:   calc(var(--frame) + 4px);
  right: calc(var(--frame) + 8px);
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px;
  font-weight:600; font-size:14px; text-decoration:none; color:#fff;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  z-index:50; pointer-events:auto;
}
.btn-back:hover{ background: rgba(0,0,0,.45); }
.btn-back .caret{ transform: rotate(180deg); opacity:.8 }

/* Marca central (debajo de notas) */
.center-mark{
  position:relative;   inset:0; display:grid; place-items:center;
  text-align:center; color:#000; z-index:5; pointer-events:none;
  margin-top: 120px;
}
.center-mark .num {
  font-family: "Playfair Display", serif;
  font-size: clamp(120px, 18vw, 220px);
  line-height: 0.8;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
 margin-bottom: 50px;
}
.center-mark .years{
  margin-top:6px; font-size: clamp(18px, 2.4vw, 28px); letter-spacing:.12em;
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top: 5px;
}
.center-mark .years .line{
  display:inline-block; width:min(120px,16vw); height:1px; background:#2d2d2d; opacity:.6;
}
.center-mark .slogan{
  margin-top:12px; font-size: clamp(22px, 3vw, 34px); line-height:1.08;
  letter-spacing:.05em; font-weight:600;
}

/* Estados */
.mural-loading,
.mural-empty{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(255,255,255,.78); color:#111;
  padding:10px 14px; border-radius:10px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.18); z-index:45;
}

/* ===== Capa de notas ===== */
#notes-layer,
.notes-layer{
  position:absolute;
  inset: calc(var(--frame) + 58px) var(--board-pad) calc(var(--frame) + 10px) var(--board-pad);
  min-height:200px;
  pointer-events:none;
  z-index:40;
  touch-action: pan-x pan-y;
}

/* ===== Notas ===== */
.note{
  --note-bg: #fff28a;
  --note-border: #e4c95d;
  --pin: #ef4444;

  position:absolute;
  width:clamp(120px, 17vw, 180px);
  aspect-ratio:1 / 1;
  padding:12px 12px;
  border-radius:12px;
  color:#2b2b2b;
  background:
    repeating-linear-gradient(transparent 0 10px, rgba(0,0,0,.03) 10px 11px),
    radial-gradient(140% 140% at 18% 12%, rgba(255,255,255,.45), transparent 42%),
    var(--note-bg);
  border:1px solid var(--note-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.05),
    0 8px 22px rgba(0,0,0,.18);
  transform:rotate(var(--rot,0deg)) translateZ(0);
  will-change:transform, box-shadow, left, top;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  pointer-events:auto; overflow:visible; touch-action:none; user-select:none; cursor: grab;
  z-index:30;
}
.note:active{ cursor: grabbing; }
.note:focus-visible{ outline:2px solid #0ea5e9; outline-offset:2px; }
.note:hover{ box-shadow:0 14px 36px rgba(0,0,0,.42); transform:translateY(-2px) rotate(calc(var(--rot, 0deg))); }
.note--dragging{ box-shadow:0 18px 42px rgba(0,0,0,.4); }
.note--top{ z-index:55; }

/* Contenido */
.note__content{
  position:relative; display:flex; flex-direction:column; gap:8px;
  height:100%; overflow:auto; padding-top:6px;
}
.note__content p{
  margin:0; line-height:1.22; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;
  line-clamp:var(--note-lines);
  -webkit-line-clamp:var(--note-lines);
  font-size: var(--note-fs);
}
@supports (line-clamp: 3){ .note__content p{ display:block; } }
.note--zoomed .note__content p{
  display:block; overflow:visible; text-overflow:clip; line-clamp:unset; -webkit-line-clamp:unset;
}
.note__content .author{
  margin-top:auto; font-style:italic; opacity:.85; font-size: var(--note-author-fs);
}

/* Pin */
.pin{
  position:absolute;
  left:50%; top:-16px; transform:translateX(-50%);
  width:46px; height:46px;
  pointer-events:none; z-index:3;
  background: center top / contain no-repeat;
  background-image: var(--pin-url);
  background-image: image-set( var(--pin-url) 1x, var(--pin-url) 2x );
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.28));
}

/* Zoom overlay */
.zoom-backdrop{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.55); z-index:1000;
}
.zoom-backdrop.active{ display:flex; }
.zoom-card{
  position:relative;
  width:min(90vw, 500px); max-height:90vh; aspect-ratio:1 / 1;
  border-radius:16px; padding:20px; overflow:auto; transform-origin:center center;
  background:
    repeating-linear-gradient(transparent 0 12px, rgba(0,0,0,.03) 12px 13px),
    radial-gradient(140% 140% at 20% 12%, rgba(255,255,255,.5), transparent 45%),
    var(--note-bg);
  border:1px solid var(--note-border);
  box-shadow:0 24px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.65);
  animation:zoomIn .15s ease forwards;
  line-height: 1.4;
}
.zoom-card p{ line-height:1.35; font-size: calc(var(--note-fs) * var(--zoom-scale)); }
.zoom-card .author{
  display:block; margin-top:12px; font-style:italic;
  font-size: calc(var(--note-author-fs) * var(--zoom-scale)); opacity:.9;
}
/* Deja que la chincheta sobresalga y crea espacio arriba */
.zoom-card{
  overflow: visible;         /* <— clave */
  padding-top: 52px;         /* espacio para la chincheta por fuera */
}

/* Saca un poco más la chincheta */
.zoom-card .pin{
  top: -26px;                /* ajústalo a tu gusto: -18, -22, -30… */
  width: 72px;
  height: 72px;
}

/* Mueve el scroll al contenido, no al card (para no volver a recortar) */
.zoom-card .note__content{
  max-height: calc(90vh - 52px - 40px); /* alto útil ≈ viewport - padding/top/bordes */
  overflow: auto;
}

/* Por si algún padre recorta (normalmente no, pero seguro no sobra) */
.zoom-backdrop{
  overflow: visible;
}


@keyframes zoomIn { from{ transform:scale(.96)} to{ transform:scale(1)} }

@media (prefers-reduced-motion: reduce){ .note{ transition:none } }

/* Responsivo */
@media (max-width: 900px){
  .brand img{ height:48px }
  #notes-layer, .notes-layer{ inset: calc(var(--frame) + 56px) 18px 24px }
  .note{ width:clamp(110px, 32vw, 160px); }
}
@media (max-width: 600px){
  .brand img{ height:42px }
  .btn-back{ font-size:13px }
  .note{ width:clamp(100px, 78vw, 150px); }
  .zoom-card{ width:92vw; }
}

/* Paleta de notas */
.note--c0{ --note-bg:#fff28a; --note-border:#e4c95d; --pin:#ef4444; }
.note--c1{ --note-bg:#a7e3ff; --note-border:#6ec9f0; --pin:#2563eb; }
.note--c2{ --note-bg:#b7f4cf; --note-border:#6ee7a8; --pin:#10b981; }
.note--c3{ --note-bg:#ffd1b3; --note-border:#ff9f7a; --pin:#f97316; }
.note--c4{ --note-bg:#e3d0ff; --note-border:#c4a3ff; --pin:#8b5cf6; }
.note--c5{ --note-bg:#ffc7df; --note-border:#ff91c0; --pin:#ec4899; }


/* === Gancho superior (cuelga el tablero) =============================== */
.board{ overflow: visible; } /* permite que el gancho sobresalga del marco */

.board__hanger{
  position:absolute;
  top: calc(-1 * var(--frame) - 18px);   /* lo ubicamos en el “espacio” café */
  left: 50%;
  transform: translateX(-50%);
  width: 140px;                          /* área de trabajo del gancho */
  height: calc(var(--frame) + 48px);
  z-index: 6;                            /* por encima del marco (::before z≈2) */
  pointer-events: none;

  /* Tornillo metálico con ranura (todo con backgrounds) */
  background:
    /* ranura del tornillo */
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55) 46% 54%, transparent 55%) 50% 8px / 14px 14px no-repeat,
    /* cabeza del tornillo */
    radial-gradient(circle, #fefefe 0 35%, #d9d9d9 36% 60%, #a2a2a2 61% 78%, #6e6e6e 79% 98%, transparent 99%) 50% 4px / 22px 22px no-repeat;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.18));
}

/* Cuerdas (dos líneas inclinadas que “sostienen” el tablero) */
.board__hanger::before,
.board__hanger::after{
  content:"";
  position:absolute;
  top: 22px;                               /* nace debajo del tornillo */
  width: 2px;
  height: calc(var(--frame) + 26px);       /* llega al marco de madera */
  background: linear-gradient(180deg, #f2f2f2, #cfcfcf);
  box-shadow: 0 0 1px rgba(0,0,0,.35), 0 10px 12px rgba(0,0,0,.18);
  transform-origin: top center;
  border-radius: 2px;
}
.board__hanger::before{ left: 38px;  transform: rotate(20deg); }
.board__hanger::after { right: 38px; transform: rotate(-20deg); }

/* Detalle coqueto: leve balanceo al pasar el mouse (opc.) */
@media (hover:hover){
  .board:hover .board__hanger{ animation: hang-sway 2.2s ease-in-out infinite; }
}
@keyframes hang-sway{
  0%,100%{ transform: translateX(-50%) rotate(0deg); }
  50%{    transform: translateX(-50%) rotate(.6deg); }
}


/* =========================================================
   Mural — Ajustes móviles (notas más pequeñas y fluidas)
   Pega esto AL FINAL del CSS. Override friendly. 
   ========================================================= */

/* Teléfonos medianos ≤ 480px */
@media (max-width: 480px){
  :root{
    --note-fs: 13px;          /* texto de la nota un pelín más chico */
    --note-author-fs: 11px;   /* autor pequeño pero legible */
    --note-lines: 4;          /* menos líneas en grid para evitar corte feo */
    --board-pad: clamp(8px, 4vw, 14px); /* más compacto en bordes */
  }

  /* Más área útil para notas dentro del marco */
  #notes-layer,
  .notes-layer{
    inset: calc(var(--frame) + 48px) 10px 14px 10px !important;
    min-height: 180px;
  }

  /* Las notas: más pequeñas y con menos padding */
  .note{
    width: clamp(84px, 44vw, 128px) !important;
    padding: 10px 10px !important;
    border-radius: 10px;
  }

  /* Chincheta más pequeña y cercana */
  .pin{
    width: 36px; height: 36px;
    top: -14px;
  }

  /* Centro de marca un poco más discreto para no tapar notas */
  .center-mark .num{
    font-size: clamp(72px, 18vw, 120px);
  }
  .center-mark .years{ font-size: clamp(16px, 2vw, 22px); }
  .center-mark .slogan{ font-size: clamp(18px, 2.4vw, 26px); }
}

/* Teléfonos pequeños/estrechos ≤ 360px (modo “tamagotchi”) */
@media (max-width: 360px){
  :root{
    --note-fs: 12px;
    --note-author-fs: 10px;
    --note-lines: 4;
    --board-pad: clamp(6px, 4.5vw, 12px);
  }

  #notes-layer,
  .notes-layer{
    inset: calc(var(--frame) + 46px) 8px 12px 8px !important;
    min-height: 160px;
  }

  .note{
    width: clamp(72px, 46vw, 114px) !important;
    padding: 8px 9px !important;
    border-radius: 9px;
  }

  .pin{
    width: 32px; height: 32px;
    top: -12px;
  }

  /* Zoom modal: adapta pin y caja para pantallas mini */
  .zoom-card{
    width: 94vw;
    padding-top: 46px;           /* deja sitio para la chincheta */
  }
  .zoom-card .pin{
    width: 56px; height: 56px;   /* más pequeña que en desktop */
    top: -22px;
  }
}

/* Suaviza hover en móvil (menos “salto” visual si hay emulación) */
@media (hover:none){
  .note:hover{
    transform: translateY(-1px) rotate(calc(var(--rot, 0deg)));
    box-shadow: 0 12px 28px rgba(0,0,0,.26);
  }
}


/* === Notas 40% más pequeñas (override) ================= */
.note{
  width: clamp(72px, 10vw, 108px) !important; /* antes: 120px,17vw,180px */
  aspect-ratio: 1 / 1;                        /* cuadradas */
  padding: 8px 8px !important;                /* era 12px */
}

/* Ajusta la chincheta en proporción */
.pin{
  width: 28px; 
  height: 28px;
  top: -10px;
}

/* Breakpoints equivalentes (manteniendo el -40%) */
@media (max-width: 900px){
  .note{ width: clamp(66px, 19vw, 96px) !important; }    /* antes: 110px,32vw,160px */
}
@media (max-width: 600px){
  .note{ width: clamp(60px, 47vw, 90px) !important; }    /* antes: 100px,78vw,150px */
}
@media (max-width: 480px){
  .note{ width: clamp(50px, 26vw, 77px) !important; }    /* antes: 84px,44vw,128px */
  .pin{ width: 24px; height: 24px; top: -9px; }
}
@media (max-width: 360px){
  .note{ width: clamp(44px, 28vw, 68px) !important; }    /* antes: 72px,46vw,114px */
  .pin{ width: 22px; height: 22px; top: -8px; }
}

/* === Frame azul oscuro (override) ======================= */
.board--framed{ background: transparent; }

.board--framed::before{
  content:"";
  position:absolute; inset:0;
  padding: var(--frame);
  border-radius: inherit;
  pointer-events:none;
  z-index:2;

  /* Azul oscuro con volumen suave */
  background:
    linear-gradient(90deg, rgba(107, 254, 1, 0.05), transparent 30%, transparent 70%, rgba(0,0,0,.25)),
    linear-gradient(180deg, #b1a74a 0%, #0f380b 100%);

  /* Deja solo el anillo del marco */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  /* Bisel */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 0 2px rgba(0,0,0,.35),
    inset 0 8px 24px rgba(0,0,0,.38);
}