@font-face{font-family:Alegreya;src:url(/fonts/Alegreya-Regular.otf)format("opentype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Alegreya;src:url(/fonts/Alegreya-Italic.otf)format("opentype");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Alegreya;src:url(/fonts/Alegreya-Black.otf)format("opentype");font-weight:900;font-style:normal;font-display:swap}:root{--gap:clamp(.625rem, .5rem + .5vw, .875rem);--line-width:1.5px;--pad:clamp(.875rem, 4.5cqw, 1.5rem)}.site{background:var(--bg);min-height:100svh;color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-size:1rem;line-height:1.45}.site a{color:inherit;text-decoration-line:underline;-webkit-text-decoration-color:color-mix(in oklab, currentColor 35%, transparent);text-decoration-color:color-mix(in oklab, currentColor 35%, transparent);text-underline-offset:.18em;text-decoration-thickness:1px;transition:text-decoration-color .2s}.site a:hover{text-decoration-color:currentColor}.frame{max-width:76rem;margin-inline:auto;padding:clamp(1.25rem,3vw,3rem) clamp(1rem,3vw,2.5rem) 2rem}.masthead{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;padding-block-end:clamp(1rem,2.5vw,2rem);display:flex}.masthead h1{font-family:var(--font-display);font-weight:var(--display-weight,400);letter-spacing:var(--display-tracking,-.01em);margin:0;font-size:clamp(1.75rem,1.2rem + 2.4vw,3.25rem);line-height:1}.masthead p{max-width:34rem;color:var(--muted);margin:0;font-size:clamp(.95rem,.9rem + .25vw,1.1rem)}.colophon{border-top:var(--line-width) solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin-block-start:clamp(1.5rem,3vw,2.5rem);padding-block-start:1rem;font-size:.875rem;display:flex}.colophon nav{gap:1rem;display:flex}.bento-container{container-type:inline-size}.bento-grid{gap:var(--gap);grid-template-columns:minmax(0,1fr);grid-auto-rows:82cqw;grid-template-areas:var(--areas-1);display:grid}@container (min-width:30rem){.bento-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100cqw - var(--gap)) / 2);grid-template-areas:var(--areas-2)}}@container (min-width:46rem){.bento-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:calc((100cqw - 2 * var(--gap)) / 3);grid-template-areas:var(--areas-3)}}@container (min-width:64rem){.bento-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc((100cqw - 3 * var(--gap)) / 4);grid-template-areas:var(--areas-4)}}.bento-cell{background:var(--surface);border:var(--line-width) solid var(--line);border-radius:var(--radius,0);outline:none;position:relative;overflow:hidden;container-type:size}.bento-cell[data-tone=ink]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.bento-cell[data-tone=accent]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.bento-cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.bento-layer{position:absolute;inset:0}.bento-layer[data-layer=art]>:is(svg,img,video){object-fit:cover;width:100%;height:100%;display:block}.bento-layer[data-layer=content]{padding:var(--pad);flex-direction:column;display:flex}.bento-layer[data-layer=reveal]{pointer-events:none;opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1);transform:translateY(6px)}.bento-cell[data-reveals]:is(:hover,:focus-visible,:focus) .bento-layer[data-layer=reveal]{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.bento-layer[data-layer=reveal]{transition:opacity .2s;transform:none}}.card-kicker{color:var(--muted);margin:0 0 .35rem;font-size:clamp(.75rem,4.6cqmin,.9rem)}[data-tone=ink] .card-kicker,[data-tone=accent] .card-kicker{color:inherit;opacity:.7}.card-title{font-family:var(--font-display);font-weight:var(--display-weight,400);letter-spacing:var(--display-tracking,-.01em);text-wrap:balance;margin:0;font-size:clamp(1.05rem,8.4cqmin,1.9rem);line-height:1.08}.card-body{text-wrap:pretty;margin:.6rem 0 0;font-size:clamp(.82rem,5.2cqmin,1rem);line-height:1.42}.card-foot{color:var(--muted);margin-top:auto;padding-right:3rem;font-size:clamp(.72rem,4.4cqmin,.875rem)}[data-tone=ink] .card-foot,[data-tone=accent] .card-foot{color:inherit;opacity:.75}.bento-note{background:var(--bg);max-width:min(78%,18rem);color:var(--ink);border:var(--line-width) solid var(--ink);margin:0;padding:.45rem .65rem;font-size:clamp(.8rem,4cqw,.95rem);line-height:1.3;position:absolute}.bento-note:after{content:"";background:var(--bg);border:var(--line-width) solid var(--ink);width:.6rem;height:.6rem;position:absolute;rotate:45deg}.bento-note[data-tail=down]:after{bottom:-.36rem;left:var(--tail-x,30%);border-top:none;border-left:none}.bento-note[data-tail=up]:after{top:-.36rem;left:var(--tail-x,30%);border-bottom:none;border-right:none}.bento-note[data-tail=left]:after{left:-.36rem;top:var(--tail-y,50%);border-top:none;border-right:none}.bento-note[data-tail=right]:after{right:-.36rem;top:var(--tail-y,50%);border-bottom:none;border-left:none}.bento-corner-link{z-index:2;background:var(--bg);border:var(--line-width) solid var(--line);border-radius:999px;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;transition:background-color .2s,transform .3s cubic-bezier(.22,1,.36,1);display:inline-flex;position:absolute;bottom:.6rem;right:.6rem;color:var(--ink)!important}.bento-corner-link svg{width:1rem;height:1rem}.bento-corner-link:hover{background:var(--accent);transform:rotate(-12deg);color:var(--accent-ink)!important}.card-list{gap:.45rem;margin:.8rem 0 0;padding:0;font-size:clamp(.8rem,5cqmin,.98rem);list-style:none;display:grid}.card-list li{gap:.05rem;display:grid}.card-list small{color:var(--muted);font-size:.85em}[data-tone=ink] .card-list small,[data-tone=accent] .card-list small{color:inherit;opacity:.72}.big-number{font-family:var(--font-display);font-weight:var(--display-weight,400);letter-spacing:-.02em;font-variant-numeric:lining-nums;font-size:clamp(2.2rem,24cqmin,4.5rem);line-height:.95}.bento-cell[data-art=side] .bento-layer[data-layer=art]{left:56%}.bento-cell[data-art=side] .bento-layer[data-layer=content]{padding-right:calc(44% + var(--pad))}@container not (min-width:26rem){.bento-cell[data-art=side] .bento-layer[data-layer=art]{top:55%;left:0}.bento-cell[data-art=side] .bento-layer[data-layer=content]{padding-right:var(--pad)}}.site[data-site=ochodelocho]{--bg:#fff;--surface:#fff;--ink:#14171f;--muted:#5f6472;--line:#14171f;--accent:#5b3cc4;--accent-ink:#fff;--soft:#e6dffb;--mint:#34c9a6;--font-display:"Alegreya", Georgia, serif;--font-body:"Alegreya", Georgia, serif;--display-weight:900;--display-tracking:-.015em}@media (prefers-color-scheme:dark){.site[data-site=ochodelocho]{--bg:#14171f;--surface:#191d27;--ink:#fff;--muted:#a3a8b5;--line:#3a3f4c;--soft:#2a2347}}.logo-plate{justify-content:center;align-items:center;height:100%;padding:12%;display:flex}.logo-plate img{object-fit:contain;max-width:100%;max-height:100%}@media (prefers-color-scheme:dark){.logo-plate[data-plate]{background:#fff}}.character{--c-ink:#1b1d22;--c-paper:#fff;--c-accent:var(--accent);width:100%;height:100%;display:block;overflow:visible}.character .c-line{stroke:var(--c-ink);stroke-width:3.2px;stroke-linejoin:round;stroke-linecap:round}.character .c-thin{fill:none;stroke:var(--c-ink);stroke-width:2px;stroke-linecap:round}.character .c-ink,.character .c-dark{fill:var(--c-ink)}.character .c-paper{fill:var(--c-paper)}.character .c-accent{fill:var(--c-accent)}.character .c-accent-soft{fill:color-mix(in oklab, var(--c-accent) 35%, white);stroke:var(--c-ink);stroke-width:2px}.character .c-accent-line{fill:none;stroke:var(--c-accent);stroke-width:3.2px;stroke-linejoin:round}.character .c-mouth{fill:#5a1f24;stroke:var(--c-ink);stroke-width:2.4px;stroke-linejoin:round}.character .c-blush{fill:#f08b8b;opacity:.35}.character .c-arm{fill:none;stroke:var(--c-ink);stroke-width:5px;stroke-linecap:round}.character .c-hand{fill:var(--c-hand);stroke:var(--c-ink);stroke-width:3.2px}.character .c-finger{stroke:var(--c-ink);stroke-width:6px;stroke-linecap:round}.character .c-handle{fill:none;stroke:var(--c-ink);stroke-width:6px;stroke-linecap:round}.character .c-lens{fill:#bfe3f299;fill:lab(87.9889% -9.80809 -11.464/.6)}.character .c-grille{stroke:#5c606a;stroke-width:2px}.character .c-tree{fill:none;stroke:var(--c-accent);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.character .c-hat{fill:#f2c230}.character[data-mascot=Pancho]{--c-hand:#e9b98f}.character .p-skin{fill:#e9b98f}.character .p-hair{fill:#2b2420}.character .p-hoop{fill:none;stroke:#a7aeb8;stroke-width:2.4px}.character .p-shirt{fill:#b9bdc3}.character[data-mascot=Ocho]{--c-hand:#34c9a6}.character .o-body{fill:#5b3cc4}.character .o-face{fill:#e6dffb}.character .o-hole{fill:var(--surface,#fff)}.character[data-mascot=Relato]{--c-hand:#fff;--c-accent:#b08d4f}.character .r-bubble{fill:#fff}.character .r-monocle{fill:none;stroke:#b08d4f;stroke-width:3px}.character .r-chain{fill:none;stroke:#b08d4f;stroke-width:1.6px;stroke-dasharray:2 3}.character .c-bob{animation:3.2s ease-in-out infinite c-bob}.character .c-eyes{animation:4.6s infinite c-blink}.character .c-wave{animation:1.4s ease-in-out infinite c-wave}@keyframes c-bob{50%{translate:0 2.5px}}@keyframes c-blink{0%,94%,to{scale:1}96%{scale:1 .1}}@keyframes c-wave{0%,to{rotate:-6deg}50%{rotate:16deg}}@media (prefers-reduced-motion:reduce){.character .c-bob,.character .c-eyes,.character .c-wave{animation:none}}.char-spot{--char:62cqmin;width:var(--char);height:var(--char);transition:transform .5s cubic-bezier(.34,1.4,.64,1);position:absolute}.char-spot[data-at=br]{bottom:0;right:4%}.char-spot[data-at=bl]{bottom:0;left:4%}.char-spot[data-at=bc]{left:calc(50% - var(--char) / 2);bottom:0}.char-spot[data-at=r]{right:0;top:calc(50% - var(--char) / 2);transform-origin:50%;translate:-4%;rotate:-90deg}.char-spot[data-at=l]{left:0;top:calc(50% - var(--char) / 2);translate:4%;rotate:90deg}.bento-layer[data-layer=reveal] .char-spot,.bento-layer[data-layer=reveal] .char-spot[data-at=r],.bento-layer[data-layer=reveal] .char-spot[data-at=l]{transform:translateY(45%)}.bento-cell[data-reveals]:is(:hover,:focus-visible,:focus) .char-spot{transform:none}.char-note{transform-origin:var(--note-origin,100% 100%);transition:scale .3s cubic-bezier(.34,1.5,.64,1) .12s,opacity .2s .12s}.bento-layer[data-layer=reveal] .char-note{opacity:0;scale:.85}.bento-cell[data-reveals]:is(:hover,:focus-visible,:focus) .char-note{opacity:1;scale:1}.char-note[data-near=br]{right:calc(4% + var(--char) * .82);bottom:calc(var(--char) * .52);--tail-y:70%}.char-note[data-near=bl]{left:calc(4% + var(--char) * .82);bottom:calc(var(--char) * .52);--tail-y:70%;--note-origin:0 100%}.char-note[data-near=bc]{left:50%;bottom:calc(var(--char) * .95);--tail-x:50%;--note-origin:50% 100%;translate:-50%}.char-note[data-near=r]{right:calc(var(--char) * .6);top:calc(50% - var(--char) * .45);--tail-y:60%}.char-note[data-near=l]{left:calc(var(--char) * .6);top:calc(50% - var(--char) * .45);--tail-y:60%;--note-origin:0 50%}.char-home .char-spot{--char:92cqmin;transition:transform .45s cubic-bezier(.34,1.3,.64,1)}.char-home .char-note{transition:opacity .2s,scale .25s}.bento-grid:has(.bento-cell[data-reveals]:is(:hover,:focus-visible,:focus)) .char-home .char-spot{transform:translateY(105%)}.bento-grid:has(.bento-cell[data-reveals]:is(:hover,:focus-visible,:focus)) .char-home .char-note{opacity:0;scale:.85}.scene{--char:62cqmin;position:absolute;inset:0}.scene .char-spot{--char:inherit}.intro-stage{position:absolute;inset:0}.intro-stage .char-home .char-spot{--char:88cqmin;left:1%}.intro-bubbles{top:var(--pad);right:var(--pad);bottom:var(--pad);flex-direction:column;justify-content:center;gap:.7rem;width:58%;display:flex;position:absolute}.intro-bubbles .bento-note{--tail-y:40%;max-width:none;padding:.7rem .85rem;font-size:clamp(.82rem,5cqmin,1rem);line-height:1.4;position:relative}.intro-bubbles .card-title{font-size:clamp(1rem,7.6cqmin,1.7rem)}.intro-bubbles .card-kicker{margin-bottom:.25rem}.intro-bubbles p{margin:0}@container not (min-width:30rem){.intro-stage .char-home .char-spot{--char:64cqmin}.intro-bubbles{left:var(--pad);justify-content:flex-start;width:auto;bottom:calc(64cqmin + .5rem)}.intro-bubbles .bento-note{--tail-x:18%}.intro-bubbles .bento-note:last-child:after{border-top:none;border-left:none;border-bottom:var(--line-width) solid var(--ink);border-right:var(--line-width) solid var(--ink);top:auto;bottom:-.36rem;left:14%;rotate:45deg}.intro-bubbles .bento-note:not(:last-child):after{display:none}}.case-cell{gap:0}.case-shot{min-height:0;margin:.8rem calc(-1 * var(--pad)) calc(-1 * var(--pad));border-top:var(--line-width) solid var(--line);background:#fff;flex:1;position:relative;overflow:hidden}.case-shot img{object-fit:cover;object-position:50% 0;width:100%;height:100%;transition:object-position 6s ease-in-out;display:block;position:absolute;inset:0}.bento-cell:hover .case-shot img{object-position:50% 100%}.case-shot[data-kind=el] img{object-fit:contain;object-position:50% 50%;transition:none}.case-shot[data-kind=el][data-dark]{background:#191a2e}.case-shot[data-kind=el]:not([data-dark]){background:#f5f1e6}[data-tone=ink] .case-shot{border-color:var(--bg)}.label-cell .card-title{font-size:clamp(1.8rem,16cqmin,3.4rem)}.masthead h1 a{text-decoration:none}
