/* =====================================================================
   NUESTRA HISTORIA — se carga después de style.css y sedes.css
   (reutiliza .sec, .crv, .scard, .band, botones, curvas y tokens).
   Paleta: #000 · #653B84 · #F4F0E6 · #FFC447 — Anton + Manrope.
   Generada por scripts/build_historia.py (no editar historia.html a mano).
   ===================================================================== */
.hBone { background: var(--bone); color: var(--ink); }
.bk { background: #000; color: var(--bone); }
.bk .kicker { color: var(--yellow); }
.hBone .kicker { color: var(--purple); }
.uline { display: block; width: 132px; height: 7px; margin-top: 26px; border-radius: 7px; background: var(--yellow); transform: rotate(-1.5deg); }

/* ---------- 1 · HERO ---------- */
.hh { --padX: clamp(20px, 4vw, 72px); --curve: clamp(48px, 8vw, 110px);
  position: relative; background: #000; color: var(--bone); overflow: hidden; isolation: isolate; min-height: clamp(600px, calc(100vh - 76px), 800px); }
@supports (height: 100svh) { .hh { min-height: clamp(600px, calc(100svh - 76px), 800px); } }
.hh .glowP { background:
  radial-gradient(52% 56% at 74% 62%, rgba(101,59,132,.55), rgba(101,59,132,0) 72%),
  radial-gradient(40% 36% at 6% 100%, rgba(101,59,132,.32), rgba(101,59,132,0) 74%); }
.hhIn { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(16px, 3vw, 48px); align-items: center; min-height: inherit; padding: 36px var(--padX) calc(var(--curve) + 16px); }
.hhCopy { position: relative; z-index: 4; animation: rise 1s var(--ease) .15s both; }
.hhTitle { font-size: clamp(70px, 10.6vw, 176px); line-height: .92; color: var(--bone); }
.hhTitle em { font-style: normal; color: var(--yellow); }
.hhSub { margin: 26px 0 0; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.5; font-weight: 600; color: rgba(244,240,230,.94); max-width: 30ch; }
.hhArt { position: relative; height: 100%; min-height: 440px; display: flex; align-items: center; justify-content: flex-start; }
.hhWords { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; pointer-events: none; animation: fadein 1.4s ease .3s both; margin-right: calc(var(--padX) * -.6); }
.hhWords span { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-style: italic; text-transform: uppercase; font-size: clamp(56px, 9.2vw, 156px); line-height: .98; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 2px rgba(244,240,230,.55); white-space: nowrap; }
@supports not (-webkit-text-stroke: 1px #000) { .hhWords span { color: rgba(244,240,230,.18); } }
.hhBurger { position: relative; z-index: 2; width: min(88%, 540px); height: auto; margin-left: -9%; filter: drop-shadow(0 34px 40px rgba(0,0,0,.6)); animation: photoIn 1.1s var(--ease) .2s both; }
.hh .curve { position: absolute; z-index: 5; left: 0; bottom: -1px; width: 100%; height: var(--curve); display: block; pointer-events: none; }
@media (max-width: 820px) {
  .hhIn { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 34px 20px calc(var(--curve) + 10px); }
  .hhTitle { font-size: clamp(66px, 20vw, 130px); }
  .hhSub { margin-top: 18px; font-size: 17px; }
  .hhArt { min-height: 0; margin: 10px -20px 0; justify-content: flex-start; padding-bottom: 8px; }
  .hhBurger { width: min(70vw, 380px); margin: 0 0 0 1vw; }
  .hhWords { margin-right: 0; align-items: flex-end; padding-right: 10px; }
  .hhWords span { font-size: clamp(50px, 17vw, 110px); -webkit-text-stroke-width: 1.5px; }
}

/* ---------- 2 · ASÍ COMENZÓ TODO ---------- */
.hOrig { padding: 36px 0 110px; }
.orig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 84px); align-items: center; padding-top: 30px; }
.origTx h2 { font-size: clamp(50px, 5.7vw, 96px); }
.origTx h2 em { font-style: normal; color: var(--purple); }
.origTx .kicker { margin-bottom: 18px; }
.origTx .lead { font-size: 19px; line-height: 1.65; margin: 28px 0 0; max-width: 50ch; }
.origTx .sub { font-size: 17px; line-height: 1.65; margin: 16px 0 0; max-width: 50ch; color: rgba(23,21,21,.78); }
.origPh { position: relative; padding: 0 0 72px; }
.origMain { position: relative; margin: 0; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 3.3; box-shadow: 0 26px 50px rgba(23,21,21,.22); }
.origMain img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.origFam { position: absolute; right: -3%; bottom: 0; width: 46%; margin: 0; padding: 10px; border-radius: 26px; background: var(--purple); box-shadow: 0 20px 40px rgba(23,21,21,.3); }
.origFam img { display: block; width: 100%; height: auto; border-radius: 18px; }
.rays { position: absolute; right: -2%; bottom: calc(72px + 12vw * .34); width: 54px; height: auto; pointer-events: none; }
.sedePg .origPh .sticker { left: -16px; top: -22px; }
.js .origFam.rv { transition-delay: .15s; }
@media (max-width: 980px) { .orig { grid-template-columns: minmax(0, 1fr); } .origFam { right: -2%; } }
@media (max-width: 720px) { .origFam { width: 52%; } .rays { display: none; } .hOrig { padding-bottom: 90px; } }

/* cuatro conocimientos */
.disc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 3fr); gap: clamp(24px, 3vw, 44px); align-items: center; margin-top: 90px; padding-top: 56px; border-top: 1px solid rgba(23,21,21,.16); }
.discT { font-size: clamp(28px, 2.4vw, 38px); overflow-wrap: anywhere; line-height: 1.02; color: var(--purple); }
.discL { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.di { padding: 6px 22px 8px; border-left: 1px solid rgba(23,21,21,.16); }
.di .ico { box-sizing: content-box; width: 34px; height: 34px; padding: 12px; border-radius: 16px; background: var(--purple); color: var(--yellow); display: block; margin-bottom: 16px; transition: transform .3s var(--ease); }
.di:hover .ico { transform: translateY(-4px) rotate(-4deg); }
.di h4 { font-size: clamp(26px, 2.3vw, 36px); line-height: 1; }
.di p { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: rgba(23,21,21,.74); }
.js .discL .rv:nth-child(2) { transition-delay: .1s; } .js .discL .rv:nth-child(3) { transition-delay: .2s; } .js .discL .rv:nth-child(4) { transition-delay: .3s; }
@media (max-width: 980px) {
  .disc { grid-template-columns: minmax(0, 1fr); margin-top: 70px; }
  .discL { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .di:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 480px) { .discL { grid-template-columns: minmax(0, 1fr); } .di, .di:nth-child(odd) { border-left: 0; padding: 0 0 22px; border-bottom: 1px solid rgba(23,21,21,.14); } }

/* ---------- 3 · MÁS QUE UNA BURGER ---------- */
.hPeople { padding: calc(var(--crv) + 70px) 0 140px; }
.pTop { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: start; position: relative; z-index: 2; }
.pTx h2 { font-size: clamp(56px, 7.4vw, 124px); }
.pTx h2 em { font-style: normal; color: var(--yellow); }
.pTx .lead { font-size: 19px; line-height: 1.65; margin: 28px 0 0; max-width: 52ch; color: rgba(244,240,230,.94); }
.pTx .sub { font-size: 17px; line-height: 1.65; margin: 16px 0 0; max-width: 52ch; color: rgba(244,240,230,.78); }
.pCard { background: var(--yellow); color: #000; border-radius: 28px; padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; gap: 16px; transform: rotate(-1.2deg); box-shadow: 0 24px 50px rgba(0,0,0,.5); margin-top: clamp(0px, 3vw, 36px); }
.pCard .ico { width: 56px; height: 56px; color: var(--purple); }
.pCard p { margin: 0; font-size: clamp(36px, 3.6vw, 56px); line-height: .98; }
.pCard .uline { background: var(--purple); }
.js .pCard.rv { transform: translateY(38px) rotate(-1.2deg); }
.js .pCard.rv.in { transform: rotate(-1.2deg); }
.pPhotos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: 60px; position: relative; z-index: 2; }
.pp { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 2; background: #171515; }
.pp0 { grid-column: span 7; } .pp1 { grid-column: span 5; aspect-ratio: auto; }
.pp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pp:hover img { transform: scale(1.04); }
.pp figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; font-weight: 800; font-size: 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); }
.js .pp.rv img { transform: scale(1.1); transition: transform 1.2s var(--ease); }
.js .pp.rv.in img { transform: scale(1); }
.js .pp.rv.in:hover img { transform: scale(1.04); transition-duration: .5s; }
@media (max-width: 900px) {
  .pTop { grid-template-columns: minmax(0, 1fr); }
  .pCard { max-width: 480px; }
  .pPhotos { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .pp0, .pp1 { grid-column: auto; aspect-ratio: 3 / 2; }
}

/* ---------- 4 · LO QUE NOS MUEVE ---------- */
.hMV { padding: calc(var(--crv) + 64px) 0 130px; }
.mvTop h2 { font-size: clamp(52px, 6.6vw, 108px); }
.mvTop h2 em { font-style: normal; color: var(--purple); }
.mvGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 46px; position: relative; z-index: 2; }
.mvCard { border-radius: 30px; padding: clamp(26px, 3vw, 46px); border: 2px solid transparent; transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.mvM { background: #E9E1CF; } .mvV { background: #E2D6EC; }
.mvCard:hover { transform: translateY(-6px); box-shadow: 0 26px 46px rgba(23,21,21,.16); border-color: var(--purple); }
.js .mvCard.rv.in:hover { transform: translateY(-6px); transition-delay: 0s; transition-duration: .3s; }
.js .mvGrid .rv:nth-child(2) { transition-delay: .12s; }
.mvH { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.mvH .ico { box-sizing: content-box; width: 34px; height: 34px; padding: 12px; border-radius: 16px; background: var(--purple); color: var(--yellow); flex: none; }
.mvH h3 { font-size: clamp(42px, 4.2vw, 68px); color: var(--purple); }
.mvCard p { margin: 0 0 14px; font-size: 17px; line-height: 1.7; }
.mvCard p:last-child { margin-bottom: 0; }
.mvNote { margin: 24px 0 0; font-size: 13.5px; color: rgba(23,21,21,.64); }
@media (max-width: 860px) { .mvGrid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 5 · SEDES + CIERRE ---------- */
.hSedes { padding: calc(var(--crv) + 70px) 0 150px; }
.hSedes .secTop h2 { font-size: clamp(56px, 7.4vw, 124px); }
.hSedes .secTop h2 em { color: var(--yellow); font-style: normal; }
.hCta h2 { max-width: none !important; }
.ctaRow { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 720px) { .ctaRow .btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .hhCopy, .hhBurger, .hhWords { animation: none !important; }
  .js .pp.rv img, .js .pCard.rv { transform: none; }
  .js .pCard.rv.in, .js .pCard.rv { transform: rotate(-1.2deg); }
  .mvCard:hover, .di:hover .ico { transform: none; }
}