/* MACOVI STUDIOS · web del estudio
   Capítulos de color: cada sección es un campo plano de un color de la marca.
   Tokens de marca (los mismos de tokens/tokens.css), fuentes locales, sin build. */

@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap;
  src: url('assets/fonts/fredoka-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap;
  src: url('assets/fonts/fredoka-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF; }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('assets/fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url('assets/fonts/nunito-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('assets/fonts/nunito-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('assets/fonts/nunito-latin-800-normal.woff2') format('woff2'); }

:root {
  /* marca */
  --tinta: #24163A; --crema: #FFF4E2; --noche: #1C1430; --maco: #FFD23F;
  --cresta: #FF4F5E; --pico: #FF9B26; --cerdito: #FF77B4; --orca: #3F8CFF; --iguana: #8BD94A; --cielo: #8DBBFF;
  --crema-2: #FCE7C8; --noche-2: #2A1F45; --suave: #CFC3E4;
  /* tipo: cinco tamaños */
  --display: 'Fredoka', ui-rounded, system-ui, sans-serif;
  --body: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --t-display: clamp(56px, 9.6vw, 156px);
  --t-h2: clamp(40px, 5.4vw, 88px);
  --t-statement: clamp(22px, 2.2vw, 32px);
  --t-body: 19px;
  --t-small: 15px;
  /* espacio */
  --m: clamp(16px, 3vw, 44px);
  --pad: clamp(96px, 11vw, 176px);
  --r: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--noche); color: var(--crema); font: 400 var(--t-body)/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .08em; }
p, figure, h1, h2, h3 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, .display, .h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: .92; }
.display { font-size: var(--t-display); }
.h2 { font-size: var(--t-h2); }
.statement { font: 600 var(--t-statement)/1.25 var(--display); letter-spacing: -.01em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--maco); outline-offset: 4px; border-radius: 6px; }
::selection { background: var(--maco); color: var(--tinta); }
.zoo ::selection, .contact ::selection { background: var(--tinta); color: var(--maco); }
.zoo :focus-visible, .contact :focus-visible, .wall .next :focus-visible { outline-color: var(--tinta); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--maco); color: var(--tinta); padding: 10px 16px; border-radius: 999px; font-weight: 800; }
.skip:focus { top: 12px; }

.btn { display: inline-flex; align-items: center; min-height: 56px; padding: 0 28px; border-radius: 999px; border: 0; background: var(--maco); color: var(--tinta);
  font: 600 var(--t-body)/1 var(--display); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.btn:hover { transform: translateY(-2px); background: #FFDE6E; }
.btn-ink { background: var(--tinta); color: var(--crema); }
.btn-ink:hover { background: #3A2858; }
.btn:active { transform: scale(.96); }
.btn.done { background: #1E7A3C; }
.text-link { font: 600 var(--t-body)/1.2 var(--display); text-decoration: underline; text-decoration-thickness: .1em; text-underline-offset: .22em; transition: text-underline-offset .2s var(--ease); }
.text-link:hover { text-underline-offset: .34em; }

/* ================================================================ PORTADA */
.hero { position: relative; min-height: max(720px, min(100svh, 1000px)); padding: 0 var(--m); overflow: hidden; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; position: relative; z-index: 2; }
.brand img { height: 44px; width: auto; }
.nav ul { display: flex; gap: clamp(16px, 2.4vw, 36px); }
.nav a:not(.brand) { font: 600 var(--t-body)/1 var(--display); text-decoration: none; padding: 10px 0; }
.nav a:not(.brand):hover { text-decoration: underline; text-decoration-thickness: .12em; }
.menu-btn, .menu-maco, .menu-mail { display: none; }
.hero-copy { padding-top: clamp(56px, 9vh, 104px); position: relative; z-index: 1; }
.hero-lead { margin-top: 36px; max-width: 34ch; font-weight: 600; }
.hero-note { position: absolute; left: var(--m); bottom: 28px; max-width: 30%; font-size: var(--t-small); font-weight: 700; }
.hero-actions { margin-top: 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.stage { position: absolute; left: 44%; right: 0; top: 46%; bottom: 0; background: var(--maco);
  clip-path: polygon(0 96px, 96px 0, 100% 0, 100% 100%, 0 100%); }
.stage-film { position: absolute; left: 56px; top: 56px; right: 0; border-radius: var(--r) 0 0 var(--r); overflow: hidden; background: var(--noche); }
.stage-film video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.stage-maco { --w: clamp(140px, 13vw, 210px); position: absolute; z-index: 2; width: var(--w); right: 6vw; top: calc(46% - var(--w) * .86); }

/* ================================================================ ZOO (la cosa viva) */
.zoo { background: var(--maco); color: var(--tinta); padding: var(--pad) var(--m); min-height: 100svh; display: grid; align-content: center; gap: clamp(32px, 4vw, 56px); }
.zoo-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.zoo-maco img { width: clamp(120px, 13vw, 200px); }
.zoo-maco img.pop { animation: pop .45s var(--ease); }
@keyframes pop { 0% { transform: scale(.82) rotate(-6deg); } 100% { transform: none; } }
.word { position: relative; }
.word img { width: 100%; }
.word button { position: absolute; top: 0; bottom: 0; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 18px; transition: transform .25s var(--ease); }
.word button:hover { transform: translateY(-6px); }
.word button::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -22px; height: 8px; border-radius: 99px; background: var(--tinta); transform: scaleX(0); transition: transform .35s var(--ease); }
.word button[aria-current="true"]::after { transform: scaleX(1); }
.zoo-foot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: end; }
.zoo-foot .statement { max-width: 30ch; }
.zoo-foot .statement b { font-weight: 700; }
.zoo-picker { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.zoo-picker button { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(36, 22, 58, .12); color: var(--tinta);
  font: 600 var(--t-small)/1 var(--display); transition: transform .2s var(--ease), background-color .2s var(--ease); }
.zoo-picker button:hover { transform: translateY(-2px); background: rgba(36, 22, 58, .2); }
.zoo-picker button[aria-pressed="true"] { background: var(--tinta); color: var(--crema); }

/* ================================================================ PIRROW */
.game { background: var(--noche-2); color: var(--crema); padding: var(--pad) var(--m); }
.game-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.game-head h2 { line-height: .82; }
.game-intro { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.game-intro .statement { max-width: 36ch; }
.game-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; font: 600 var(--t-body)/1.2 var(--display); }
.game-facts span { display: block; font: 400 var(--t-small)/1.4 var(--body); color: var(--suave); margin-bottom: 4px; }
.wall { margin-top: clamp(48px, 6vw, 88px); display: grid; gap: 10px; }
.wall-row { display: flex; gap: 10px; }
.wall-row.r1 { height: clamp(260px, 30vw, 460px); }
.wall-row.r2 { height: clamp(220px, 24vw, 360px); }
.wall figure { flex: var(--ar) 1 0; min-width: 0; display: flex; flex-direction: column; }
.wall img { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: var(--r); background: var(--noche); transition: transform .35s var(--ease); }
.wall figure:hover img { transform: scale(1.02); }
.wall figcaption { padding-top: 10px; font-size: var(--t-small); font-weight: 600; color: var(--suave); }
.wall .next { background: var(--maco); color: var(--tinta); border-radius: var(--r); padding: 20px; justify-content: space-between; }
.wall .next img { flex: 0 1 auto; width: 58%; max-height: 62%; object-fit: contain; background: none; border-radius: 0; }
.wall .next figcaption { color: var(--tinta); font-size: var(--t-small); line-height: 1.4; }
.wall .next a { font-weight: 800; }

/* ================================================================ QUIÉNES SOMOS */
.about { background: var(--noche); padding: var(--pad) var(--m); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; }
.story { font: 600 var(--t-statement)/1.34 var(--display); letter-spacing: -.01em; columns: 2 22ch; column-gap: clamp(32px, 4vw, 64px); }
.story mark { color: var(--tinta); background: var(--maco); padding: 0 .12em; border-radius: .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-end { background: var(--crema); color: var(--tinta); text-decoration: none; padding: 0 .2em; border-radius: .2em; white-space: nowrap; transition: background-color .2s var(--ease); }
.hl-end:hover { background: var(--maco); }

/* ================================================================ VALORES */
.values { background: var(--noche-2); padding: var(--pad) var(--m); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; }
.values > h2 { align-self: start; position: sticky; top: 40px; }
.rows { display: grid; gap: clamp(72px, 8vw, 120px); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px clamp(32px, 4vw, 64px); align-items: start; }
.row h3 { max-width: 20ch; }
.row p { margin-top: 16px; max-width: 38ch; font-weight: 600; }
.pic { border-radius: var(--r); object-fit: cover; }
.pic.p1 { width: clamp(150px, 15vw, 230px); }
.pic.p2 { width: clamp(140px, 13vw, 200px); aspect-ratio: 9 / 16; }
.pic.p3 { width: clamp(130px, 12vw, 180px); }
.pic.p4 { width: clamp(170px, 18vw, 270px); aspect-ratio: 4 / 5; }

/* ================================================================ PRENSA */
.press { background: var(--noche); padding: var(--pad) var(--m) clamp(72px, 8vw, 120px); }
.press-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: end; }
.press-head p { max-width: 46ch; font-weight: 600; }
.press-rows { margin: clamp(48px, 6vw, 80px) calc(var(--m) * -1) 0; }
.press-rows li:nth-child(odd) a { background: var(--noche-2); }
.press-rows a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: clamp(28px, 3.4vw, 48px) var(--m) clamp(20px, 2.4vw, 32px);
  font: 600 var(--t-h2)/1 var(--display); letter-spacing: -.03em; text-decoration: none; transition: background-color .2s var(--ease); }
.press-rows a:hover { background: var(--maco) !important; color: var(--tinta); }
.press-rows small { font: 600 var(--t-small)/1.2 var(--body); letter-spacing: 0; white-space: nowrap; }
.press-copy { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 32px; align-items: start; }
.press-copy p { max-width: 52ch; font-weight: 600; }
.press-copy .btn { grid-column: 2; justify-self: start; }
.press-copy h3 { grid-row: span 2; }

/* ================================================================ CONTACTO / PIE */
.contact { background: var(--maco); color: var(--tinta); padding: 32px var(--m) 28px; display: flex; flex-direction: column; }
.contact-top { display: flex; justify-content: space-between; gap: 24px; font-size: var(--t-small); font-weight: 700; }
.contact-main { padding-top: clamp(96px, 12vw, 176px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.contact-main p { margin-top: 24px; max-width: 36ch; font-weight: 600; }
.contact-maco { width: clamp(130px, 14vw, 220px); }
.mail { display: block; margin-top: clamp(24px, 3vw, 40px); line-height: .95; text-decoration: none; overflow-wrap: anywhere; transition: color .2s var(--ease); }
.mail:hover { color: #6B4A00; }
.meta { margin-top: clamp(40px, 5vw, 72px); display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; font-size: var(--t-small); font-weight: 700; }
.meta ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.meta a { text-decoration: none; } .meta a:hover { text-decoration: underline; }

/* ================================================================ PÁGINAS LEGALES */
.doc-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px var(--m) 0; }
.doc-top .home img { height: 44px; width: auto; }
.doc { max-width: 76ch; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--m) clamp(80px, 10vw, 140px); }
.doc h1 { font-size: var(--t-h2); }
.doc .updated { margin-top: 20px; font-weight: 700; }
.doc .intro { margin-top: 28px; font: 600 var(--t-statement)/1.3 var(--display); letter-spacing: -.01em; }
.doc h2 { margin-top: 64px; font-size: var(--t-statement); line-height: 1.15; letter-spacing: -.01em; }
.doc h3 { margin-top: 32px; font: 700 var(--t-body)/1.3 var(--body); letter-spacing: 0; }
.doc p, .doc ul, .doc .card { margin-top: 14px; }
.doc ul { padding-left: 1.2em; list-style: disc; }
.doc li + li { margin-top: 6px; }
.doc a { font-weight: 700; overflow-wrap: anywhere; }
.doc .card { background: var(--noche-2); border-radius: var(--r); padding: 8px 24px; }
.doc .card .kv { padding: 0; margin: 0; list-style: none; }
.doc .card .kv li { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; margin: 0; font-weight: 700; }
.doc .card .kv li + li { border-top: 2px solid var(--noche); }
.doc .card .kv li > span:first-child { flex: 0 0 auto; font-weight: 400; }
.doc .card .kv li > span:last-child { text-align: right; }
.doc-foot { padding: 28px var(--m); background: var(--maco); color: var(--tinta); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: var(--t-small); font-weight: 700; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.doc-foot a[aria-current="page"] { text-decoration-thickness: .16em; }

/* ================================================================ ENTRADAS (con JS; sin JS todo se ve) */
.js .rise { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }
.js .stage-film { clip-path: inset(0 0 0 100%); transition: clip-path 1.1s var(--ease) .15s; }
.js .stage-film video { transform: scale(1.12); transition: transform 1.4s var(--ease) .15s; }
.js .stage-film.open { clip-path: inset(0); }
.js .stage-film.open video { transform: none; }
.js .stage-maco { opacity: 0; transform: translateY(40px) rotate(-8deg); transition: opacity .6s var(--ease) .7s, transform .7s var(--ease) .7s; }
.js .stage-maco.open { opacity: 1; transform: none; }

/* ================================================================ TABLETA */
@media (max-width: 1080px) {
  .stage { left: 30%; top: 54%; }
  .stage-maco { top: calc(54% - var(--w) * .86); }
  .hero-note { display: none; }
  .about, .values, .press-head, .press-copy { grid-template-columns: 1fr; }
  .press-copy p, .press-copy .btn { grid-column: 1; }
  .press-copy h3 { grid-row: auto; }
  .story { columns: 1; }
  .values > h2 { position: static; }
  .game-intro { grid-template-columns: 1fr; }
}

/* ================================================================ MÓVIL */
@media (max-width: 680px) {
  :root { --t-body: 17px; --r: 18px; }
  .hero { min-height: 0; padding-bottom: 0; }
  .nav { padding-top: 16px; flex-wrap: wrap; }
  .brand img { height: 38px; }
  .nav ul { gap: 20px; flex-wrap: wrap; }
  .js .brand, .js .menu-btn { position: relative; z-index: 41; }
  .js .menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--maco); color: var(--tinta); font: 600 var(--t-small)/1 var(--display); transition: transform .2s var(--ease); }
  .js .menu-btn:active { transform: scale(.95); }
  .js .menu-btn::after { content: ''; box-sizing: border-box; width: 16px; height: 11px; border-top: 2.5px solid; border-bottom: 2.5px solid; transition: height .2s var(--ease); }
  .js .nav.open .menu-btn::after { height: 2.5px; border-bottom: 0; }
  .js .nav ul { position: fixed; inset: 0; z-index: 40; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; padding: 96px var(--m) 56px; background: var(--noche);
    opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; }
  .js .nav.open ul { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .js .nav ul a:not(.brand) { display: block; padding: 6px 0; font-size: var(--t-h2); letter-spacing: -.03em; }
  .js .nav ul a:not(.brand):active { color: var(--maco); }
  .js .nav .menu-maco { display: block; margin-bottom: auto; padding-top: 24px; }
  .js .nav .menu-maco img { width: 46vw; }
  .js .nav .menu-mail { display: block; margin-top: 28px; }
  .js .nav ul .menu-mail a { font: 700 var(--t-body)/1.2 var(--display); letter-spacing: 0; color: var(--maco); }
  .menu-open { overflow: hidden; }
  .hero-copy { padding-top: 40px; }
  .hero h1 { font-size: 17vw; }
  .hero-lead { margin-top: 24px; }
  .hero-actions { gap: 20px; }
  .stage { position: relative; left: auto; top: auto; margin: 112px calc(var(--m) * -1) 0; height: auto; padding: 32px 0 32px 16px; clip-path: polygon(0 56px, 56px 0, 100% 0, 100% 100%, 0 100%); }
  .stage-film { position: relative; left: auto; top: auto; }
  .hero > .stage-maco, .stage-maco { display: none; }
  .hero { --maco-phone: 1; }
  .zoo { min-height: 0; }
  .zoo-top { flex-direction: column; align-items: flex-start; }
  .zoo-maco img { width: 104px; }
  .zoo-foot { grid-template-columns: 1fr; }
  .zoo-picker { justify-content: flex-start; gap: 8px; }
  .zoo-picker button { padding: 0 16px; font-size: 16px; }
  .game-head h2 { font-size: 24vw; }
  .wall-row { flex-wrap: wrap; height: auto !important; }
  .wall figure { flex: 1 1 40%; }
  .wall img { aspect-ratio: 9 / 14; flex: none; }
  .wall .r1 figure:first-child { flex-basis: 100%; }
  .wall .r1 figure:first-child img { aspect-ratio: 16 / 9; }
  .wall .next { flex-basis: 100%; flex-direction: row; align-items: center; gap: 16px; }
  .wall .next img { width: 40%; aspect-ratio: auto; }
  .story { font-size: 22px; line-height: 1.4; }
  .row { grid-template-columns: 1fr; }
  .row:nth-child(even) .pic { justify-self: end; }
  .pic.p1, .pic.p3 { width: 46%; }
  .pic.p2, .pic.p4 { width: 58%; }
  .press-rows a { flex-direction: column; gap: 10px; font-size: 32px; }
  .contact { min-height: 0; padding-top: 24px; }
  .contact-top { flex-direction: column; gap: 6px; }
  .contact-main { padding-top: 88px; }
  .contact-maco { width: 110px; }
  .mail { font-size: 12.4vw; }
  .meta { flex-direction: column; align-items: flex-start; }
  .doc-top .home img { height: 36px; }
  .doc .card { padding: 4px 16px; }
  .doc .card .kv li { flex-direction: column; gap: 2px; }
  .doc .card .kv li > span:last-child { text-align: left; }
}

/* ================================================================ MOVIMIENTO REDUCIDO */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js .rise, .js .stage-maco { opacity: 1; transform: none; }
  .js .stage-film { clip-path: none; }
  .js .stage-film video { transform: none; }
}