/* Arterial V4 — «Combinada»: el lienzo que se pinta (V2) + el pulso que late (V3), en una página corta. */

:root {
  --azul: #084890;
  --celeste: #5AB4E6;
  --rojo: #E00000;
  --amarillo: #F8C840;
  --verde: #2E8B57;
  --cafe: #3A2418;
  --tinta: #16110d;
  --lienzo: #fbfaf6;
  --papel: #ffffff;
  --gris: #5d554e;
  --narrow: "Archivo Narrow", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mano: "Permanent Marker", "Comic Sans MS", cursive;
  --pad: clamp(16px, 4vw, 56px);
  --gut-l: 104px;          /* margen izquierdo: ahí corre el pulso */
  --line-x: 38px;          /* posición del pulso */
  --sec: clamp(48px, 6vw, 86px);
  --sombra: 0 1px 0 rgba(22, 17, 13, .05), 0 22px 50px -22px rgba(22, 17, 13, .42);
  --nav-h: 66px;
  --beat: .83s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font: 400 17px/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

.c-azul { color: var(--azul); }
.c-rojo { color: var(--rojo); }
.mano { font-family: var(--mano); font-weight: 400; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--gut-l) var(--pad); }

/* ------------------------------------------------------------ lienzo + pulso */
.lienzo { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 0; pointer-events: none; }
.pulso { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .8s; }
.pulso.is-on { opacity: 1; }
main, .pie, .marquee { position: relative; z-index: 1; }
section { position: relative; }

/* ------------------------------------------------------------ tipos */
.h-xl {
  font: 700 clamp(46px, 6.4vw, 104px)/.9 var(--narrow);
  letter-spacing: -.025em;
  margin: 0 0 .3em;
  text-wrap: balance;
}
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font: 700 14px/1 var(--narrow); letter-spacing: .14em; text-transform: uppercase; color: var(--azul);
  background: rgba(251, 250, 246, .9); padding: 4px 8px 4px 0; border-radius: 4px;
}
.kicker__n {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--rojo); color: #fff; letter-spacing: .04em;
}
.kicker.is-hit .kicker__n { animation: hit .6s cubic-bezier(.3, .7, .4, 1.5); }
@keyframes hit { 0% { transform: scale(1); } 30% { transform: scale(1.35); box-shadow: 0 0 0 8px rgba(224, 0, 0, .18); } 100% { transform: scale(1); } }
.kicker--sm { font-size: 12.5px; margin-bottom: 8px; }
.kicker--sm .kicker__n { height: 22px; min-width: 26px; }

.sec-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(20px, 2.6vw, 36px); }
.sec-head .h-xl { margin: 0; }
.sec-head__sub { margin: 0 0 .5em; max-width: 32em; font-size: clamp(16px, 1.2vw, 18.5px); color: #2c2620; background: rgba(251, 250, 246, .88); }

/* ------------------------------------------------------------ botones */
.btn {
  --bg: var(--tinta); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: .8em 1.4em;
  background: var(--bg); color: var(--fg);
  border: 2.5px solid var(--tinta); border-radius: 999px;
  font: 700 16.5px/1.1 var(--narrow); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; box-shadow: 4px 4px 0 var(--tinta);
  transition: transform .18s cubic-bezier(.3, .7, .4, 1.4), box-shadow .18s;
}
.btn:hover { transform: translate(-2px, -2px) rotate(-1.2deg); box-shadow: 7px 7px 0 var(--tinta); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.btn--azul { --bg: var(--azul); }
.btn--rojo { --bg: var(--rojo); }
.btn--ghost { --bg: #fff; --fg: var(--tinta); }
.btn--sm { font-size: 14.5px; min-height: 42px; padding: .6em 1.1em; box-shadow: 3px 3px 0 var(--tinta); }
.btn--xs { white-space: nowrap; font-size: 13px; min-height: 34px; padding: .45em .9em; box-shadow: 2px 2px 0 var(--tinta); border-width: 2px; }

/* ------------------------------------------------------------ cinta adhesiva */
.tape {
  position: absolute; width: 92px; height: 28px; z-index: 3;
  background: rgba(244, 226, 168, .82);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  clip-path: polygon(3% 8%, 9% 0, 16% 10%, 24% 2%, 33% 9%, 42% 1%, 52% 8%, 61% 0, 70% 9%, 79% 2%, 88% 10%, 96% 1%, 100% 50%, 97% 92%, 89% 100%, 80% 90%, 71% 99%, 62% 91%, 52% 100%, 43% 92%, 34% 99%, 25% 90%, 16% 98%, 7% 91%, 0 50%);
}
.tape--tl { top: -12px; left: -18px; transform: rotate(-32deg); }
.tape--tr { top: -12px; right: -18px; transform: rotate(30deg); }
.tape--br { bottom: -12px; right: -18px; transform: rotate(-28deg); }
.papel { position: relative; background: var(--papel); padding: clamp(22px, 2.6vw, 40px); box-shadow: var(--sombra); }

/* ------------------------------------------------------------ nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 95; height: var(--nav-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--pad) 0 clamp(14px, 2vw, 28px);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__logo {
  display: block; background: #fff; padding: 2px 6px; border-radius: 12px; box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .35);
  transform: rotate(-2deg); transition: transform .2s;
}
.nav__logo img { height: 44px; width: auto; }
.nav__logo:hover { transform: rotate(1deg) scale(1.04); }
.vitals {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px;
  background: rgba(255, 255, 255, .92); border-radius: 999px; box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .35);
  font: 700 14px/1 var(--narrow); letter-spacing: .06em; color: var(--tinta); white-space: nowrap;
}
.vitals__ecg { width: 46px; height: 14px; }
.vitals__ecg path { fill: none; stroke: var(--rojo); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 120; animation: ecgsweep calc(var(--beat) * 2) linear infinite; }
@keyframes ecgsweep { from { stroke-dashoffset: 120; } to { stroke-dashoffset: -120; } }
.vitals__bpm { display: inline-flex; align-items: baseline; gap: 4px; }
.vitals__bpm #bpm { display: inline-block; min-width: 2.1ch; text-align: right; font-variant-numeric: tabular-nums; font-size: 16px; }
.vitals__bpm small { font-size: 11.5px; color: var(--gris); }
.corazon { display: inline-block; color: var(--rojo); font-style: normal; font-size: 15px; animation: latido var(--beat) infinite; transform-origin: 50% 60%; }
.corazon.is-big { animation: latidoFuerte .5s ease-out; }
@keyframes latido { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.3); } 24% { transform: scale(.95); } 36% { transform: scale(1.15); } 50% { transform: scale(1); } }
@keyframes latidoFuerte { 0% { transform: scale(1); } 30% { transform: scale(1.9); } 100% { transform: scale(1); } }
.is-paused .corazon, .is-paused .vitals__ecg path { animation-play-state: paused; }

.nav__links {
  display: flex; gap: 2px; margin-left: auto; padding: 5px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .35);
}
.nav__links a { font: 700 15px/1 var(--narrow); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; padding: 10px 12px; border-radius: 999px; transition: background .2s, color .2s; white-space: nowrap; }
.nav__links a:hover, .nav__links a.is-here { background: var(--amarillo); }
.nav__links .nav__cta { background: var(--rojo); color: #fff; padding-inline: 16px; }
.nav__links .nav__cta:hover { background: var(--tinta); }
.nav__menu {
  display: none; align-items: center; gap: 10px; height: 44px; padding: 0 16px; margin-left: auto;
  background: var(--tinta); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 15px/1 var(--narrow); letter-spacing: .08em; text-transform: uppercase;
}
.nav__menu i { width: 18px; height: 10px; border-top: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transition: transform .3s; }
.nav__menu[aria-expanded="true"] i { transform: rotate(90deg); }

.menu { position: fixed; inset: 0; z-index: 90; background: var(--lienzo); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 12px) var(--pad) 32px calc(var(--gut-l) - 8px); overflow-y: auto; }
.menu__splat { position: absolute; inset: 0; pointer-events: none; opacity: .9; }
.menu nav { position: relative; }
.menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .04em; }
.menu__list a { display: inline-flex; align-items: baseline; gap: .35em; font: 700 clamp(34px, 6.6vh, 80px)/1 var(--narrow); letter-spacing: -.02em; text-decoration: none; transition: transform .25s cubic-bezier(.3, .7, .4, 1.4); }
.menu__list li:nth-child(4n+1) a { color: var(--azul); }
.menu__list li:nth-child(4n+2) a { color: var(--rojo); }
.menu__list li:nth-child(4n+3) a { color: var(--verde); }
.menu__list li:nth-child(4n+4) a { color: var(--tinta); }
.menu__list a:hover { transform: translateX(14px) rotate(-1.5deg); }
.menu__list em { font: 400 .3em/1 var(--mano); color: var(--tinta); font-style: normal; min-width: 2.6em; }
.menu__foot { position: relative; margin-top: 28px; font-size: 20px; color: var(--gris); }

/* ------------------------------------------------------------ paleta / gota */
.paleta {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 14px;
  background: rgba(255, 255, 255, .95); border-radius: 999px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45);
}
.paleta__label { font-size: 15px; margin-right: 4px; color: var(--gris); }
.paleta__c { width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--c); cursor: pointer; padding: 0; position: relative; transition: transform .2s; }
.paleta__c:hover { transform: scale(1.18); }
.paleta__c.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tinta); }
.rainbow { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--azul), var(--rojo), var(--amarillo), var(--verde), var(--celeste), var(--azul)); }
.paleta__pausa { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--tinta); color: #fff; cursor: pointer; display: grid; place-items: center; margin-left: 4px; }
.i-pausa { width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.paleta__pausa[aria-pressed="true"] .i-pausa { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.gota { position: fixed; left: 0; top: 0; z-index: 85; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50% 50% 50% 0; background: var(--azul); pointer-events: none; opacity: 0; transform: translate(-100px, -100px); box-shadow: 0 0 0 2px #fff; transition: opacity .3s; }
.gota.is-on { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .gota { display: none; }
  .paleta { padding: 4px; }
  .paleta__label, .paleta__c { display: none; }
  .paleta__pausa { margin: 0; }
}

/* ------------------------------------------------------------ HERO */
.hero__scene { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 1100px; overflow: hidden; }
.hero__kicker {
  position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--nav-h) + 2.4vh);
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  font: 700 clamp(13px, 1.15vw, 16px)/1.3 var(--narrow); letter-spacing: .2em; text-transform: uppercase; color: var(--azul);
  padding-inline: var(--pad); text-align: center;
}
.hero__kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); }
.wordmark {
  --wm: 24vw;
  position: absolute; z-index: 2; left: 0; right: 0; top: clamp(112px, 17vh, 190px);
  display: flex; justify-content: center;
  font: 700 var(--wm)/.8 var(--narrow); letter-spacing: -.02em; white-space: nowrap;
  user-select: none;
}
.wm { display: inline-flex; }
.wm b { display: inline-block; font-weight: 700; will-change: transform; }
.wm--arte { color: var(--azul); }
.wm--rial { color: var(--rojo); }
/* halo blanco alrededor de las letras, como en el logo de Miguel */
.wordmark { filter: drop-shadow(0 0 .025em var(--lienzo)) drop-shadow(0 0 .07em rgba(251, 250, 246, .95)); }
.hero__kicker, .hero__lead { text-shadow: 0 0 4px var(--lienzo), 0 0 10px var(--lienzo), 0 0 18px var(--lienzo); }
/* la pintura va DEBAJO del wordmark: el título siempre se lee */
.hero__paint { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.stickers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.st {
  position: absolute; display: inline-block;
  font: 400 clamp(22px, 2.6vw, 42px)/1 var(--mano);
  padding: .16em .42em .12em; border-radius: 6px;
  box-shadow: 0 0 0 4px #fff, 0 14px 26px -12px rgba(0, 0, 0, .5);
  transform: rotate(var(--r, 0deg));
  will-change: transform;
}
.st--amar { --r: -9deg; background: var(--rojo); color: #fff; left: 7%; top: 14%; }
.st--ven { --r: 7deg; background: var(--amarillo); color: var(--azul); left: 41%; top: 12.5%; font-size: clamp(26px, 3.2vw, 52px); }
.st--dime { --r: -5deg; background: var(--celeste); color: var(--tinta); right: 6%; top: 15%; }
.st--verdad { --r: 6deg; background: #fff; color: var(--rojo); border: 3px solid var(--rojo); left: 11%; top: 55%; }
.st--no {
  --r: -8deg; background: transparent; box-shadow: none; color: var(--rojo);
  font-size: clamp(40px, 5vw, 86px); right: 14%; top: 50%; padding: .05em .4em;
  border: 4px solid var(--rojo); border-radius: 50% 46% 52% 44% / 54% 48% 52% 46%;
}
.st--tiempo { --r: -3deg; background: var(--verde); color: #fff; left: 50%; top: 56%; }

.hero__bottom {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: max(9vh, 70px);
  padding-inline: var(--gut-l) var(--pad);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lead ctas" "chips chips"; gap: 20px 40px; align-items: end;
}
.hero__lead { grid-area: lead; margin: 0; max-width: 36em; font: 700 clamp(24px, 2.2vw, 34px)/1.05 var(--narrow); letter-spacing: -.01em; }
.hero__lead span { display: block; font: 500 clamp(16px, 1.2vw, 18.5px)/1.45 var(--texto); letter-spacing: 0; margin-top: .4em; color: #3b342e; }
.hero__ctas { grid-area: ctas; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__chips { grid-area: chips; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__chips a {
  display: inline-block; padding: 8px 13px; border-radius: 999px; background: #fff; border: 2px solid var(--tinta);
  font: 700 14px/1 var(--narrow); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: background .2s, transform .2s;
}
.hero__chips li:nth-child(1) a:hover { background: var(--celeste); }
.hero__chips li:nth-child(2) a:hover { background: var(--amarillo); }
.hero__chips li:nth-child(3) a:hover { background: #ff8a8a; }
.hero__chips li:nth-child(4) a:hover { background: #8fd3a9; }
.hero__chips li:nth-child(5) a:hover { background: var(--celeste); }
.hero__chips a:hover { transform: rotate(-3deg); }
.h-xl, .sec-head__sub, .miguel__lede, .talleres__sub, .contacto__copy > p, .cita p { text-shadow: 0 0 2px var(--lienzo), 0 0 6px var(--lienzo), 0 0 12px var(--lienzo); }
.hero__kicker, .hero__lead, .hero__hint { text-shadow: 0 0 3px var(--lienzo), 0 0 8px var(--lienzo), 0 0 14px var(--lienzo); }
.hero__hint { position: absolute; z-index: 4; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 18px; color: var(--gris); margin: 0; }
.hint--touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint--mouse { display: none; } .hint--touch { display: inline; } }

/* ------------------------------------------------------------ marquesina */
.marquee { height: clamp(84px, 8vw, 118px); overflow: hidden; display: grid; place-items: center; }
.mq { position: absolute; left: -10%; width: 120%; padding: .06em 0; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .5); }
.mq--rojo { background: var(--rojo); color: #fff; transform: rotate(-2.5deg); }
.mq__track { display: flex; width: max-content; will-change: transform; }
.mq__track span { flex: 0 0 auto; white-space: pre; font: 700 clamp(30px, 4.2vw, 64px)/1.1 var(--narrow); letter-spacing: -.01em; padding-top: .04em; }

/* ------------------------------------------------------------ OBRAS */
.obras { padding: clamp(28px, 3vw, 48px) 0 var(--sec); }
.obras__bar {
  position: relative; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 0 0 clamp(22px, 3vw, 40px); padding: 7px; width: fit-content; max-width: 100%;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 22px; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .4);
}
.seg { display: inline-flex; background: #efebe2; border-radius: 999px; padding: 4px; }
.seg__b { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; cursor: pointer; font: 700 15px/1 var(--narrow); text-transform: uppercase; letter-spacing: .06em; }
.seg__b.is-on { background: var(--tinta); color: #fff; }
.seg__b--prints.is-on { background: var(--azul); }
.filtros { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; transition: opacity .25s; }
.filtros::-webkit-scrollbar { display: none; }
.filtros.is-off { display: none; }
.filtro { flex: 0 0 auto; border: 2px solid var(--tinta); background: #fff; padding: 7px 12px; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--narrow); letter-spacing: .03em; }
.filtro i { font-style: normal; opacity: .6; }
.filtro.is-on { background: var(--amarillo); }

.prints-info {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px clamp(20px, 3vw, 44px); align-items: center;
  background: #fff; padding: 18px 22px; margin: 0 0 clamp(22px, 3vw, 36px); box-shadow: var(--sombra); border-left: 10px solid var(--azul);
}
.prints-info h3 { font: 700 clamp(30px, 3vw, 46px)/.95 var(--narrow); letter-spacing: -.02em; }
.specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.specs li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid #ece6d9; }
.specs b { font: 700 24px/1 var(--narrow); color: var(--azul); }
.specs span { font-size: 14px; line-height: 1.25; }
.prints-info__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.prints-info__precios { margin: 0; font: 700 16px/1.25 var(--narrow); letter-spacing: .02em; background: var(--amarillo); padding: 6px 10px; transform: rotate(-1.5deg); }

.pared { position: relative; margin: 0 auto; max-width: 1440px; padding-inline: var(--gut-l) var(--pad); }
.pared.is-pared { height: 900px; }
.pared.is-galeria { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.pared.is-prints { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.is-pared .card { position: absolute; }
.card.is-out { display: none; }
.card__in { display: block; position: relative; }
.card__paper { display: block; position: relative; background: #fff; padding: clamp(5px, .6vw, 9px); box-shadow: var(--sombra); transition: transform .35s cubic-bezier(.3, .7, .4, 1.3), box-shadow .35s; }
.card__img { display: block; width: 100%; height: auto; background: #eee; }
.card__label {
  position: absolute; left: 10px; bottom: -12px; z-index: 4; max-width: calc(100% - 16px);
  font: 700 clamp(11.5px, .95vw, 14px)/1.1 var(--narrow); text-transform: uppercase; letter-spacing: .04em;
  background: var(--c, var(--amarillo)); color: var(--ct, var(--tinta)); padding: 5px 8px;
  box-shadow: 0 0 0 3px #fff, 0 8px 14px -8px rgba(0, 0, 0, .55); transform: rotate(-3deg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__label i { font: 400 1em var(--mano); font-style: normal; margin-left: .3em; text-transform: none; }
.card__meta { display: none; }
.card__ed { display: none; }
.card .tape { width: clamp(46px, 4vw, 70px); height: clamp(16px, 1.4vw, 22px); }
.is-pared .card:hover { z-index: 15 !important; }
.is-pared .card:hover .card__paper, .is-pared .card:focus-visible .card__paper { transform: rotate(calc(var(--r) * -1)) scale(1.12); box-shadow: 0 30px 60px -20px rgba(22, 17, 13, .55); }
.card:focus-visible { outline: none; }
.card:focus-visible .card__paper { outline: 3px solid var(--azul); outline-offset: 4px; }
.nota-pared { position: absolute; z-index: 16; font: 400 clamp(17px, 1.4vw, 22px)/1.1 var(--mano); color: var(--azul); pointer-events: none; white-space: nowrap; }

.is-galeria .card .tape, .is-galeria .card__label, .is-galeria .nota-pared { display: none; }
.is-galeria .card__paper { padding: 10px; }
.is-galeria .card__img { aspect-ratio: 1; object-fit: contain; background: #f2efe7; }
.is-galeria .card__meta { display: block; padding: 12px 2px 2px; }
.card__meta b { display: block; font: 700 clamp(17px, 1.3vw, 20px)/1.1 var(--narrow); letter-spacing: -.005em; }
.card__meta span { display: block; font-size: 13.5px; color: var(--gris); margin-top: 3px; }
.card__meta em { display: inline-block; margin-top: 7px; font: 700 14px/1 var(--narrow); text-transform: uppercase; letter-spacing: .05em; font-style: normal; color: var(--rojo); }
.is-prints .card__ed { display: block; position: absolute; right: 16px; top: 16px; z-index: 2; font: 400 14px/1 var(--mano); background: #fff; color: var(--azul); padding: 5px 8px; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .5); transform: rotate(3deg); }
.is-galeria .card:hover .card__paper { transform: translateY(-6px) rotate(-.8deg); }

/* ------------------------------------------------------------ MIGUEL */
.miguel { padding: var(--sec) 0; }
.miguel__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.retrato { position: relative; margin: 0; background: #fff; padding: 18px 18px 16px; box-shadow: var(--sombra); transform: rotate(-3deg); max-width: 380px; justify-self: center; width: 100%; }
.retrato__dibujo { display: block; width: 100%; height: auto; max-height: 46vh; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(8, 72, 144, .08) 31px 32px), #fffef9; padding: 14px 10px 0; }
.retrato__foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 30% 20%; max-height: 58vh; background: #f3efe8; }
.retrato figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 12px; }
.retrato figcaption .mano { font-size: 16px; color: var(--gris); line-height: 1.2; }
.stamp {
  display: inline-block; font: 700 clamp(18px, 1.7vw, 23px)/1 var(--narrow); letter-spacing: .08em; text-transform: uppercase;
  color: var(--rojo); border: 3px solid var(--rojo); padding: .35em .55em; border-radius: 6px; transform: rotate(-5deg);
  mix-blend-mode: multiply; opacity: .92;
}
.miguel__title { font-size: clamp(46px, 5.8vw, 96px); }
.miguel__lede { font: 500 clamp(18px, 1.5vw, 22px)/1.45 var(--texto); max-width: 34em; background: rgba(251, 250, 246, .9); }
.datos { list-style: none; margin: 4px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 10px; }
.dato { font: 700 clamp(13.5px, 1.05vw, 15px)/1.2 var(--narrow); text-transform: uppercase; letter-spacing: .05em; padding: 9px 13px; border-radius: 6px; box-shadow: 0 0 0 3px #fff, 0 10px 20px -12px rgba(0, 0, 0, .5); }
.dato:nth-child(odd) { transform: rotate(-2deg); }
.dato:nth-child(even) { transform: rotate(1.8deg); }
.dato--azul { background: var(--azul); color: #fff; }
.dato--amarillo { background: var(--amarillo); color: var(--tinta); }
.dato--rojo { background: var(--rojo); color: #fff; }
.dato--verde { background: var(--verde); color: #fff; }
.cita { margin: 0 0 24px; padding: 4px 0 4px 18px; border-left: 5px solid var(--rojo); max-width: 36em; }
.cita p { margin: 0; font: 600 clamp(19px, 1.6vw, 24px)/1.25 var(--sans); letter-spacing: -.015em; background: rgba(251, 250, 246, .88); }

/* ------------------------------------------------------------ COLOR AL HOSPITAL */
.hospital { padding: 0; }
.hospital__scene {
  height: 100vh; height: 100svh; min-height: 680px; max-height: 1100px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 4vw;
  max-width: 1440px; margin: 0 auto; padding: calc(var(--nav-h) + 8px) var(--pad) 24px var(--gut-l);
}
.hospital__stage { position: relative; z-index: 1; height: min(74vh, 700px); }
.hospital__meter { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) rotate(-2deg); margin: 0; font-size: 18px; color: var(--gris); background: #fff; padding: 4px 12px; box-shadow: var(--sombra); white-space: nowrap; z-index: 3; }
.hospital__meter b { color: var(--rojo); font-weight: 400; display: inline-block; min-width: 2.2ch; text-align: right; }
.hospital__copy { position: relative; z-index: 2; }
.cotona { position: absolute; inset: 0; display: grid; place-items: center; }
.cotona svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 26px 30px rgba(22, 17, 13, .22)); }
.cotona--b, .cotona--c { opacity: 0; }
.cotona--b { transform: translate(-24%, 8%) scale(.58) rotate(-9deg); }
.cotona--c { transform: translate(24%, 8%) scale(.58) rotate(9deg); }
.hospital__title { font-size: clamp(46px, 6vw, 100px); margin-bottom: .22em; }
.beats { list-style: none; margin: 0 0 22px; padding: 0; position: relative; min-height: 4.6em; font: 600 clamp(19px, 1.7vw, 26px)/1.22 var(--sans); letter-spacing: -.015em; }
.beat { position: absolute; inset: 0 0 auto 0; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.beat p { margin: 0; background: rgba(255, 255, 255, .94); padding: .45em .65em; box-shadow: var(--sombra); }
.beat strong { color: var(--rojo); font-weight: 800; }
.beat__n { display: grid; place-items: center; width: 1.75em; height: 1.75em; border-radius: 50%; background: var(--azul); color: #fff; font: 700 .85em/1 var(--narrow); }
.js .beat:not(:first-child) { opacity: 0; }
.hospital__copy > .btn { margin-top: 18px; }

/* pestañas de formatos (Color al Hospital, Talleres) */
.ptabs { min-width: 0; background: #fff; box-shadow: var(--sombra); border-radius: 14px; overflow: hidden; max-width: 640px; }
.ptabs__list { display: flex; gap: 0; border-bottom: 2px solid var(--tinta); background: #f6f2ea; overflow-x: auto; scrollbar-width: none; }
.ptabs__list::-webkit-scrollbar { display: none; }
.ptab { flex: 1 0 auto; border: 0; background: transparent; padding: 13px 14px 11px; cursor: pointer; font: 700 14.5px/1.1 var(--narrow); letter-spacing: .05em; text-transform: uppercase; color: var(--gris); border-bottom: 4px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.ptab:hover { color: var(--tinta); background: #fff8e4; }
.ptab.is-on { color: var(--tinta); background: #fff; border-bottom-color: var(--rojo); }
.ptabs__panel { padding: 16px 20px 18px; }
.ptabs__panel h3 { font: 700 clamp(22px, 1.9vw, 28px)/1.05 var(--narrow); letter-spacing: -.01em; margin-bottom: 6px; }
.ptabs__panel p { margin: 0; color: #3b342e; }

/* ------------------------------------------------------------ TALLERES */
.talleres { padding: var(--sec) 0; }
.talleres__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.talleres__title { margin-bottom: .2em; }
.talleres__mano { display: inline-block; font-size: .92em; letter-spacing: 0; transform: rotate(-3deg); margin-top: .06em; }
.talleres__sub { font: 600 clamp(18px, 1.5vw, 22px)/1.35 var(--sans); max-width: 26em; background: rgba(251, 250, 246, .88); margin-bottom: 18px; }
.ptabs--talleres { margin-bottom: 24px; }
.ptabs--talleres .ptabs__panel { padding: 14px 20px; }
.deck { position: relative; height: clamp(330px, 32vw, 440px); }
.chip { position: absolute; left: 50%; top: 50%; width: min(400px, 88%); background: #fff; border-radius: 10px; box-shadow: var(--sombra); will-change: transform; cursor: default; transition: transform .6s cubic-bezier(.3, .7, .3, 1.15), z-index 0s .2s; transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); }
.chip[data-pos="0"] { --rot: -2deg; --sc: 1; z-index: 3; }
.chip[data-pos="1"] { --dx: 64px; --dy: -22px; --rot: 8deg; --sc: .9; z-index: 2; }
.chip[data-pos="2"] { --dx: -60px; --dy: -30px; --rot: -10deg; --sc: .86; z-index: 1; }
.chip__sw { position: relative; display: block; height: clamp(150px, 14vw, 210px); background: var(--c); border-radius: 10px 10px 0 0; }
.chip__art { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.chip__drips { position: absolute; left: 0; right: 0; top: calc(100% - 1px); width: 100%; height: 54px; z-index: 2; pointer-events: none; }
.chip__sw::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .12)); }
.chip__sw b { position: absolute; left: 18px; bottom: 14px; z-index: 1; font: 700 15px/1 var(--narrow); letter-spacing: .14em; color: var(--ct, #fff); }
.chip__b { position: relative; padding: 44px 22px 22px; }
.chip__b h3 { font: 700 clamp(24px, 2vw, 32px)/1.02 var(--narrow); letter-spacing: -.01em; margin-bottom: 6px; }
.chip__b p { margin: 0; color: #3b342e; }
.chip:not([data-pos="0"]) .chip__b > * { opacity: 0; transition: opacity .3s; }
.chip[data-pos="0"] .chip__b > * { transition: opacity .4s .25s; }

/* ------------------------------------------------------------ MERCH */
.merch { padding: var(--sec) 0; }
.merch__title { white-space: nowrap; }
.merch__z { position: relative; display: inline-block; text-shadow: none; color: transparent; -webkit-text-stroke: 2px var(--tinta); -webkit-background-clip: text; background-clip: text; background-image: var(--art, linear-gradient(90deg, var(--azul), var(--rojo), var(--amarillo), var(--verde))); background-size: cover; background-position: center; padding-right: .04em; }
.merch__z-under { position: absolute; left: 0; right: 0; bottom: -.06em; height: .12em; border-radius: 99px; background: var(--rojo); transform-origin: left; transform: rotate(-1.5deg); }
.taller {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(18px, 2.6vw, 40px);
  background: #fff; border-radius: 26px; padding: clamp(12px, 1.6vw, 22px); box-shadow: 0 40px 80px -40px rgba(22, 17, 13, .5), 0 0 0 3px var(--tinta);
}
.taller__stage { position: relative; border-radius: 18px; overflow: hidden; min-height: 420px; display: grid; place-items: center; background: radial-gradient(ellipse 70% 60% at 50% 55%, #ffffff 0%, #f1ede4 70%, #e7e1d4 100%); }
.taller__product { width: 100%; height: 100%; display: grid; place-items: center; padding: 50px 22px 56px; }
.taller__product svg { width: 100%; height: auto; max-height: 440px; overflow: visible; }
.maqueta { position: absolute; top: 14px; left: 14px; z-index: 2; font: 700 12px/1 var(--narrow); letter-spacing: .24em; text-transform: uppercase; padding: 7px 10px; border: 1.5px solid currentColor; border-radius: 4px; color: var(--gris); background: rgba(255, 255, 255, .7); }
.taller__now { position: absolute; left: 16px; bottom: 12px; margin: 0; font-size: 15px; }
.taller__now .mano { color: var(--gris); margin-right: 4px; }
.taller__ctrl { display: flex; flex-direction: column; gap: 14px; padding: 6px 4px; }
.tabs { display: inline-flex; align-self: flex-start; background: #efebe2; border-radius: 999px; padding: 4px; }
.tab { border: 0; background: transparent; padding: 11px 16px; border-radius: 999px; cursor: pointer; font: 700 15px/1 var(--narrow); text-transform: uppercase; letter-spacing: .06em; }
.tab.is-on { background: var(--tinta); color: #fff; }
.taller__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.taller__lbl { margin: 0; font: 700 14px/1.1 var(--narrow); text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.botes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.bote { position: relative; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: #ddd center / cover no-repeat; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 4px 10px -4px rgba(0, 0, 0, .5); transition: transform .2s cubic-bezier(.3, .7, .4, 1.5); }
.bote:hover { transform: scale(1.12) rotate(-6deg); }
.bote[aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tinta); transform: scale(1.06); }
.taller__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2px; }
.taller__nota { margin: 0; font-size: 13px; color: var(--gris); }
.como { border-top: 2px solid #ece6d9; padding-top: 10px; }
.como summary { cursor: pointer; font: 700 15px/1.2 var(--narrow); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); list-style: none; display: flex; align-items: center; gap: 8px; }
.como summary::-webkit-details-marker { display: none; }
.como summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--azul); color: #fff; font-size: 16px; transition: transform .25s; }
.como[open] summary::before { transform: rotate(45deg); }
.pasos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.pasos li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.4; }
.paso__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--amarillo); font: 400 17px/1 var(--mano); }
.pasos li:nth-child(2) .paso__n { background: var(--celeste); }
.pasos li:nth-child(3) .paso__n { background: #ff9a8f; }

/* ------------------------------------------------------------ CONTACTO */
.contacto { padding: var(--sec) 0 calc(var(--sec) * .8); }
.contacto__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contacto__copy .h-xl { font-size: clamp(46px, 5.4vw, 88px); }
.contacto__copy > p { font-size: clamp(16.5px, 1.3vw, 19px); background: rgba(251, 250, 246, .88); }
.garantias { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.garantias li { display: flex; gap: 12px; background: #fff; padding: 12px 16px; box-shadow: var(--sombra); font-weight: 500; font-size: 15.5px; }
.garantias span { color: var(--rojo); font-weight: 800; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; transform: rotate(.5deg); }
.f { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.f--half { grid-column: span 1; }
.f label { font: 700 13px/1 var(--narrow); text-transform: uppercase; letter-spacing: .14em; }
.f input, .f select, .f textarea {
  width: 100%; border: 0; border-bottom: 2.5px solid var(--tinta); border-radius: 0; background: transparent;
  font: 400 17px/1.4 var(--texto); padding: 9px 2px; color: var(--tinta);
}
.f select { appearance: none; -webkit-appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2316110d' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right: 26px; }
.f textarea { resize: vertical; min-height: 84px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-bottom-color: var(--azul); box-shadow: 0 2px 0 var(--azul); }
.form__err { grid-column: 1 / -1; margin: 0; color: var(--rojo); font-weight: 600; }
.form__end { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form__nota { margin: 0; font-size: 13.5px; color: var(--gris); flex: 1 1 220px; }

/* ------------------------------------------------------------ FOOTER */
.pie { padding: 0 0 84px; }
.pie__ecg { display: block; width: 100%; height: 90px; overflow: visible; margin-bottom: 8px; }
.pie__ecg path { fill: none; stroke: var(--rojo); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pie__ecg #pieHeart { fill: rgba(224, 0, 0, 0); transition: fill .5s .2s; }
.pie.is-done #pieHeart { fill: var(--rojo); animation: latido var(--beat) infinite; transform-box: fill-box; transform-origin: 50% 70%; }
.pie__row { display: grid; grid-template-columns: auto 1fr auto; gap: 20px 32px; align-items: center; }
.pie__logo { width: 84px; height: auto; transform: rotate(-6deg); box-shadow: 0 0 0 4px #fff, var(--sombra); }
.pie__row p { margin: 0; font-size: 15px; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; }
.pie__nav a { font: 700 14.5px/1.6 var(--narrow); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; }
.pie__nav a:hover { border-color: var(--rojo); }

/* ------------------------------------------------------------ MODAL (biografía) */
.modal { position: fixed; inset: 0; z-index: 118; display: grid; place-items: center; padding: 20px; }
.modal__bg { position: absolute; inset: 0; background: rgba(22, 17, 13, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal__card { position: relative; width: min(1120px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(26px, 3.4vw, 52px); transform: rotate(-.4deg); }
.modal__close { position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--tinta); background: var(--tinta); color: #fff; cursor: pointer; font: 700 20px/1 var(--sans); box-shadow: 3px 3px 0 rgba(0, 0, 0, .25); z-index: 2; }
.modal__titulo { font: 700 clamp(38px, 4.6vw, 72px)/.92 var(--narrow); letter-spacing: -.02em; margin-bottom: 22px; padding-right: 50px; }
.modal__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.modal__bio p { font-size: 16.5px; }
.modal__bio .lede { font: 600 clamp(19px, 1.5vw, 22px)/1.35 var(--sans); letter-spacing: -.01em; }
.modal__bio a { color: var(--rojo); font-weight: 600; }
.statement { position: relative; margin: 0; background: #fbf8f0; padding: clamp(24px, 3vw, 40px); border-left: 8px solid var(--rojo); }
.statement::before { content: "“"; position: absolute; top: -.18em; right: .1em; font: 700 140px/1 var(--narrow); color: var(--rojo); opacity: .9; }
.statement__text { font: 600 clamp(20px, 1.9vw, 28px)/1.22 var(--sans); letter-spacing: -.02em; margin: 0; }
.statement__text .w { opacity: .14; transition: opacity .35s; }
.statement__text .w.is-on { opacity: 1; }
.statement footer { margin-top: 1em; font-size: 18px; color: var(--azul); }

/* ------------------------------------------------------------ FICHA */
.ficha { position: fixed; inset: 0; z-index: 120; }
.ficha__bg { position: absolute; inset: 0; background: rgba(251, 250, 246, .97); overflow: hidden; }
.ficha__blob { position: absolute; left: -10vw; top: -14vh; width: 78vw; height: 128vh; opacity: .95; }
.ficha__blob svg { width: 100%; height: 100%; }
.ficha__inner { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: 72px clamp(24px, 5vw, 80px) 84px; overflow-y: auto; }
.ficha__fig { margin: 0; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.ficha__fig img { max-width: 100%; max-height: calc(100svh - 170px); width: auto; height: auto; object-fit: contain; background: #fff; padding: clamp(8px, 1vw, 14px); box-shadow: 0 40px 80px -30px rgba(22, 17, 13, .6); }
.ficha__info { background: #fff; padding: clamp(22px, 3vw, 40px); box-shadow: var(--sombra); max-width: 560px; }
.ficha__count { margin: 0 0 8px; font: 700 15px/1 var(--narrow); letter-spacing: .16em; color: var(--azul); }
.ficha__titulo { font: 700 clamp(38px, 4.4vw, 70px)/.92 var(--narrow); letter-spacing: -.02em; margin-bottom: 20px; }
.ficha__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0 0 18px; }
.ficha__dl div { border-top: 2px solid var(--tinta); padding-top: 8px; }
.ficha__dl dt { font: 700 12px/1 var(--narrow); text-transform: uppercase; letter-spacing: .16em; color: var(--gris); margin-bottom: 6px; }
.ficha__dl dd { margin: 0; font: 600 18px/1.25 var(--sans); }
.ficha__dl dd small { display: block; font: 500 12px/1.3 var(--texto); color: var(--gris); }
.ficha__historia { margin: 14px 0 14px; font-size: 15px; line-height: 1.5; color: var(--tinta, #16110d); max-width: 46ch; padding-left: 12px; border-left: 3px solid var(--rojo, #E00000); }
.ficha__print { margin: 0 0 10px; font-weight: 600; color: var(--azul); }
.ficha__nota { font-size: 14px; color: var(--gris); margin-bottom: 20px; }
.ficha__acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ficha__nav { position: fixed; left: clamp(16px, 3vw, 40px); bottom: 20px; display: flex; gap: 10px; z-index: 3; }
.ficha__arrow, .ficha__close { width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid var(--tinta); background: #fff; cursor: pointer; font: 800 22px/1 var(--sans); box-shadow: 3px 3px 0 var(--tinta); transition: transform .15s; }
.ficha__arrow:hover, .ficha__close:hover { transform: translate(-1px, -1px) rotate(-6deg); }
.ficha__close { position: fixed; top: 16px; right: clamp(16px, 3vw, 40px); z-index: 3; background: var(--tinta); color: #fff; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 140; transform: translate(-50%, 220%); visibility: hidden; transition: transform .35s cubic-bezier(.3, .7, .4, 1.3), visibility 0s .35s; background: var(--tinta); color: #fff; padding: 12px 20px; border-radius: 999px; font: 700 16px/1.2 var(--narrow); letter-spacing: .03em; pointer-events: none; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .35s cubic-bezier(.3, .7, .4, 1.3); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1240px) {
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__links { margin-left: auto; }
  .nav__menu { display: inline-flex; margin-left: 0; }
  .pared.is-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pared.is-prints { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prints-info { grid-template-columns: auto minmax(0, 1fr); }
  .prints-info__cta { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .ptab { flex: 1 1 0; white-space: normal; text-align: center; font-size: 13px; padding: 11px 6px 9px; }
}
@media (min-width: 821px) and (max-height: 820px) {
  .hero__chips { display: none; }
  .hero__bottom { bottom: 64px; }
  .beats { font-size: clamp(18px, 1.5vw, 22px); }
  .hospital__title { font-size: clamp(44px, 5vw, 80px); }
}

@media (max-width: 820px) {
  :root { --nav-h: 60px; --gut-l: 32px; --line-x: 12px; --pad: 18px; }
  body { font-size: 16px; }
  .nav { padding-inline: 10px var(--pad); gap: 8px; }
  .nav__logo img { height: 36px; }
  .vitals { height: 34px; padding: 0 10px; font-size: 13px; gap: 6px; }
  .vitals__ecg { display: none; }
  .nav__links { display: none; }
  .nav__menu { margin-left: auto; height: 40px; padding: 0 14px; }
  .h-xl { font-size: clamp(42px, 12vw, 64px); }

  .hero__scene { min-height: 620px; }
  .hero__kicker { top: calc(var(--nav-h) + 16px); font-size: 12px; letter-spacing: .14em; }
  .wordmark { top: max(150px, 20%); flex-direction: column; align-items: center; line-height: .82; }
  .wm { justify-content: center; }
  .st { font-size: 19px; box-shadow: 0 0 0 3px #fff, 0 10px 18px -10px rgba(0, 0, 0, .5); }
  .st--amar { left: 8%; top: max(124px, 15.5%); }
  .st--ven { left: auto; right: 5%; top: max(128px, 16%); font-size: 22px; }
  .st--dime { right: 3%; top: 37%; }
  .st--verdad { left: 9%; top: 40%; font-size: 16px; }
  .st--no { right: 4%; top: 53%; font-size: 30px; border-width: 3px; }
  .st--tiempo { left: 10%; top: 59%; font-size: 16px; }
  .hero__bottom { grid-template-columns: 1fr; grid-template-areas: "lead" "ctas" "chips"; gap: 12px; bottom: 50px; }
  .hero__lead { font-size: 23px; }
  .hero__lead span { font-size: 14.5px; margin-top: .3em; }
  .hero__ctas { flex-wrap: nowrap; gap: 10px; }
  .hero__ctas .btn { flex: 1 1 0; font-size: 14px; padding: .7em .6em; min-height: 46px; box-shadow: 3px 3px 0 var(--tinta); }
  .hero__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; margin-right: calc(var(--pad) * -1); padding: 2px var(--pad) 2px 0; }
  .hero__chips::-webkit-scrollbar { display: none; }
  .hero__chips li { flex: 0 0 auto; }
  .hero__chips a { font-size: 13px; padding: 7px 10px; }
  .hero__hint { font-size: 15px; bottom: 14px; }

  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sec-head__sub { font-size: 15.5px; }
  .kicker { font-size: 12.5px; gap: 8px; }
  .obras__bar { border-radius: 18px; width: 100%; padding: 6px; }
  .seg { width: 100%; }
  .seg__b { flex: 1; padding: 9px 8px; }
  .prints-info { grid-template-columns: 1fr; padding: 16px; }
  .specs { grid-template-columns: 1fr 1fr; }
  .prints-info__cta { flex-direction: row; flex-wrap: wrap; }
  .pared.is-galeria, .pared.is-prints { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .is-galeria .card__paper { padding: 7px; }
  .card__meta b { font-size: 16px; }
  .card__meta span { font-size: 12px; }
  .card__label { font-size: 10px; padding: 4px 6px; left: 6px; bottom: -10px; box-shadow: 0 0 0 2px #fff, 0 6px 10px -6px rgba(0, 0, 0, .5); }
  .card__label i { display: none; }
  .is-prints .card__ed { right: 10px; top: 10px; font-size: 12px; }

  .miguel__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .retrato { max-width: 250px; order: 2; }
  .retrato__dibujo { max-height: 240px; }
  .retrato__foto { max-height: none; }
  .miguel__lede { font-size: 17px; }

  .hospital__scene { height: auto; min-height: 0; max-height: none; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: var(--sec); padding-bottom: var(--sec); }
  .hospital__stage { height: 66vw; max-height: 440px; order: 2; }
  .hospital__copy { order: 1; min-width: 0; }
  .hospital__copy > .btn { width: 100%; }
  .beats { min-height: 0; display: grid; gap: 10px; font-size: 17px; }
  .beat { position: static; gap: 10px; }
  .js .beat:not(:first-child) { opacity: 1; }
  .ptab { flex: 1 1 0; white-space: normal; text-align: center; font-size: 12.5px; padding: 11px 6px 9px; }
  .ptabs__panel { padding: 14px 16px; }

  .talleres__grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .talleres__copy { min-width: 0; }
  .deck { height: 290px; }
  .nota-pared { display: none; }
  .chip { width: min(300px, 78%); }
  .chip__sw { height: 120px; }
  .chip__b { padding: 40px 16px 16px; }
  .chip[data-pos="1"] { --dx: 34px; --dy: -14px; }
  .chip[data-pos="2"] { --dx: -32px; --dy: -18px; }
  .talleres__copy > .btn { width: 100%; }

  .merch__title { white-space: normal; }
  .taller { grid-template-columns: 1fr; border-radius: 22px; }
  .taller__stage { min-height: 280px; }
  .taller__product { padding: 44px 6px 48px; }
  .taller__ctas .btn { flex: 1 1 100%; }
  .tabs { align-self: stretch; }
  .tab { flex: 1; padding: 11px 8px; font-size: 14px; }

  .contacto__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .form { grid-template-columns: 1fr; transform: none; }
  .f--half { grid-column: 1 / -1; }
  .form__send { width: 100%; }

  .pie__row { grid-template-columns: auto 1fr; }
  .pie__nav { grid-column: 1 / -1; justify-content: flex-start; }

  .modal { padding: 10px; align-items: end; }
  .modal__card { max-height: calc(100svh - 20px); transform: none; padding: 24px 18px; }
  .modal__cols { grid-template-columns: 1fr; }
  .statement::before { font-size: 100px; }

  .ficha__inner { display: block; padding: 70px 16px 110px; }
  .ficha__fig { height: auto; margin-bottom: 22px; }
  .ficha__fig img { max-height: 52svh; }
  .ficha__info { max-width: none; }
  .ficha__dl dd { font-size: 16px; }
  .ficha__nav { left: 16px; top: 16px; bottom: auto; }
  .ficha__arrow, .ficha__close { width: 48px; height: 48px; font-size: 20px; }
  .ficha__acts .btn { flex: 1 1 auto; }
}
@media (max-width: 820px) and (max-height: 720px) {
  .st--tiempo, .st--dime { display: none; }
  .hero__chips { display: none; }
  .hero__bottom { bottom: 44px; }
}

/* ------------------------------------------------------------ sin animación */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .statement__text .w { opacity: 1 !important; }
  .js .beat:not(:first-child) { opacity: 1; }
  .beats { min-height: 0; display: grid; gap: 10px; }
  .beat { position: static; }
  .cotona--b, .cotona--c { opacity: 1; }
  .cotona--a { transform: scale(.86); }
  .hero__hint { display: none; }
  .hospital__scene { height: auto; max-height: none; padding-block: var(--sec); }
}

/* ============================== DONACIONES (borrador: lo marcado .pendiente falta confirmarlo con Miguel) */
.dona { padding: var(--sec) 0; }
.dona__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; }
.dona__promesa { transform: rotate(-1.5deg); }
.dona__pct { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dona__pct b { font: 700 clamp(64px, 8vw, 120px)/.9 var(--narrow); color: var(--rojo); letter-spacing: -.02em; }
.dona__pct span { font: 700 clamp(17px, 1.5vw, 21px)/1.25 var(--narrow); text-transform: uppercase; letter-spacing: .06em; }
.dona__a { margin: 14px 0 0; font-size: clamp(18px, 1.6vw, 22px); }
.dona__a b { color: var(--azul); }
.dona__como { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--gris); }
.dona__como span { color: var(--rojo); margin-right: 6px; }
.dona__h { margin: 0 0 14px; font: 700 clamp(22px, 2vw, 28px)/1.1 var(--narrow); text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 0 6px var(--lienzo), 0 0 12px var(--lienzo); }
.donadas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.donada { padding: 12px 12px 14px; }
.donada:nth-child(1) { transform: rotate(1.4deg); }
.donada:nth-child(2) { transform: rotate(-1.2deg) translateY(10px); }
.donada:nth-child(3) { transform: rotate(.8deg); }
.donada__foto {
  aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; padding: 12px;
  border: 2px dashed rgba(8, 72, 144, .35); border-radius: 4px;
  background: repeating-linear-gradient(-45deg, rgba(8, 72, 144, .04) 0 10px, transparent 10px 20px), #fffef9;
}
.donada__foto .mano { font-size: 15px; color: var(--gris); line-height: 1.2; }
.donada__dl { margin: 12px 0 0; display: grid; gap: 6px; }
.donada__dl div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: baseline; }
.donada__dl dt { font: 700 12px/1.2 var(--narrow); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.donada__dl dd { margin: 0; font-size: 15px; line-height: 1.3; }
.pendiente { background: rgba(248, 200, 64, .35); border-radius: 3px; padding: 0 .15em; }
.dona__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 44px); }
.botes--colores { grid-template-columns: repeat(4, minmax(0, 64px)); }
@media (max-width: 820px) {
  .dona__grid { grid-template-columns: minmax(0, 1fr); }
  .dona__lista { min-width: 0; }
  .donadas { grid-template-columns: repeat(3, minmax(210px, 1fr)); overflow-x: auto; padding: 6px 4px 14px; scroll-snap-type: x mandatory; }
  .donada__dl div { grid-template-columns: 1fr; gap: 2px; }
  .donada { scroll-snap-align: start; }
}
.bordes-row { display: flex; flex-direction: column; gap: 10px; }
.bordes-row[hidden] { display: none; }
.botes--bordes { grid-template-columns: repeat(6, minmax(0, 40px)); }
.bote--borde { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .14), 0 4px 10px -4px rgba(0, 0, 0, .5); }