@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{color-scheme:dark;--base:#080b13;--line:#222a3c;--muted:#aab3c8;--blue:#97aaff;--ink:#f4f6ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--base);color:var(--ink);font:16px/1.6 'Instrument Sans',system-ui,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--blue);outline-offset:5px}img{display:block;max-width:100%}.wrap{width:min(1160px,calc(100% - 80px));margin:auto}.sitehead{border-bottom:1px solid var(--line);background:var(--base)}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:11px;align-items:center;font-size:19px;font-weight:700;white-space:nowrap}.brand img{width:33px;height:33px;border-radius:8px}.nav nav{display:flex;gap:32px;color:var(--muted);font-size:14px}.nav a:hover,.foot a:hover{color:var(--blue)}.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 77% 50%,var(--hero-glow,#182456) 0%,transparent 49%),var(--base)}.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#586ea51c 1px,transparent 1px),linear-gradient(90deg,#586ea51c 1px,transparent 1px);background-size:47px 47px;mask-image:linear-gradient(90deg,transparent 24%,black 86%);pointer-events:none}.hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:45px;min-height:580px;padding:66px 0}.mono{font:500 12px/1.5 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}.hero .mono{display:flex;gap:12px;align-items:center}.hero .mono:before{content:"";height:1px;width:24px;background:var(--blue)}h1,h2,h3,p{margin:0}h1{font-size:clamp(53px,7.5vw,112px);line-height:.98;letter-spacing:-.06em;margin:19px 0 23px}h1 span{color:var(--blue)}.intro{max-width:430px;color:var(--muted);font-size:19px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;border:1px solid transparent;border-radius:8px;padding:12px 17px;font-weight:700;font-size:14px;transition:background .2s,color .2s}.primary{background:#c2cdff;color:#101636;margin-top:29px}.primary:hover{background:white}.hero-art{display:grid;place-items:center;position:relative;min-width:0;aspect-ratio:1}.hero-art:before,.hero-art:after{content:"";position:absolute;inset:7%;border:1px solid #849aee33;border-radius:50%}.hero-art:after{inset:0;border-style:dashed}.hero-art img{width:69%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:22%;border:1px solid #8b9de955;box-shadow:0 22px 70px #0008,0 0 50px #466cff38;transform:rotate(-7deg);z-index:1}.projects{padding:87px 0 103px}.about{border-block:1px solid var(--line);background:#0c101b}.about-in{padding:70px 0;display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}.about .mono{margin-bottom:13px}.about p:not(.mono),.foot{border-top:1px solid var(--line);color:var(--muted);font-size:13px}.foot .wrap{display:flex;justify-content:space-between;gap:15px;padding-block:23px}.skip{position:absolute;left:10px;top:-100px;z-index:10;padding:10px;background:var(--base)}.skip:focus{top:10px}@media(max-width:850px){.wrap{width:calc(100% - 48px)}.hero-in{min-height:460px;gap:20px}}@media(max-width:620px){.wrap{width:calc(100% - 36px)}.nav{height:63px;gap:8px}.nav nav{gap:11px;font-size:13px}.hero-in{grid-template-columns:1fr;padding:53px 0 30px;gap:30px}.hero-art{width:min(76%,310px);justify-self:center}.hero:before{mask-image:linear-gradient(transparent,black)}.hero{background:radial-gradient(ellipse at 55% 85%,var(--hero-glow,#182456),transparent 52%),var(--base)}.intro{font-size:17px}.projects{padding:57px 0}.about-in{grid-template-columns:1fr}.about-in{padding:52px 0;gap:18px}.foot{font-size:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.nav nav{align-items:center;flex-wrap:wrap;row-gap:5px}
.nav nav [aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:6px}
.page{min-height:calc(100svh - 145px);padding:clamp(48px,8vw,92px) 0}
.page h1{font-size:clamp(46px,8vw,88px);margin:12px 0 22px}
.page-head{max-width:680px;margin-bottom:clamp(30px,6vw,62px)}
.page-head p:not(.mono),.text p{color:var(--muted);font-size:18px;max-width:58ch}
.project-list{display:grid;gap:24px}
.project{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:16px;background:var(--panel,#101521);overflow:hidden}
.project-copy{padding:clamp(22px,4vw,50px);align-self:center}
.project-copy h2,.text h2,.social-card strong{font-size:clamp(27px,4vw,46px);line-height:1.06;letter-spacing:-.05em;margin:9px 0 14px}
.project-copy p:not(.mono),.project-copy li{color:var(--muted)}
.project-copy ol{padding-left:21px;margin:14px 0 0}
.project-copy li+li{margin-top:5px}
.project img{display:block;width:100%;height:auto}
.project figure{margin:0;align-self:center;padding:14px;background:var(--eco-frame,#161f1b)}
.project figure img{border-radius:8px}
.project.jardin figure{background:var(--garden-frame,#24322c)}
.project.pin{grid-template-columns:1fr}
.text{display:grid;grid-template-columns:.7fr 1.3fr;gap:25px;border-top:1px solid var(--line);padding:32px 0}
.text h2{margin:0}
.text p+p{margin-top:12px}
.social-card{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center;padding:26px;border:1px solid var(--line);background:var(--panel,#101521);border-radius:14px;max-width:680px}
.social-card strong{display:block;margin:0 0 5px}
.social-card .handle{color:var(--muted)}
.social-card .button{background:#c2cdff;color:#101636}
.social-card .button:hover{background:white}
@media(max-width:680px){.project,.text{grid-template-columns:1fr}.nav{height:auto;min-height:72px;flex-wrap:wrap;padding-block:12px}.nav nav{gap:7px 14px}.project figure{padding:10px}}
.extras{padding-block:clamp(50px,8vw,105px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.8fr);gap:20px}
.extras h2,.home-links h2{font-size:clamp(28px,4vw,52px);letter-spacing:-.055em;line-height:1.04}
.visit-panel,.game{padding:clamp(20px,3.2vw,36px);border:1px solid var(--line);border-radius:18px;background:var(--panel,#101521)}
.visit-panel{display:grid;align-content:center;gap:15px}
.visit-panel output{font:500 clamp(35px,5vw,64px)/1 'IBM Plex Mono',monospace;color:var(--blue);overflow-wrap:anywhere}
.visit-panel p,.game p,.home-links nav span{color:var(--muted)}
.game{display:grid;grid-template-columns:1fr minmax(125px,.75fr);gap:20px;align-items:center;background:radial-gradient(ellipse at right,var(--game-glow,#202c52),transparent 72%),var(--panel,#101521)}
.game h2{margin:5px 0 9px}
.game .primary{margin-top:12px;cursor:pointer;font-family:inherit}
.game .primary:disabled{opacity:.6;cursor:default}
.game-stats{display:flex;gap:17px;color:var(--ink);margin-top:12px;font:500 13px 'IBM Plex Mono',monospace}
#game-status{font-size:14px;margin-top:6px}
.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.game-cell{aspect-ratio:1;border:1px solid #485682;background:var(--cell,#1a2340);border-radius:8px;cursor:pointer}
.game-cell:disabled{cursor:default}
.game-cell.lit{background:#aec2ff;border-color:#e0e7ff;box-shadow:0 0 17px #92aaff83}
.game-cell:focus-visible,#start-game:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.home-links{border-top:1px solid var(--line);padding:45px 0 63px}
.home-links nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.home-links nav a{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--line);background:var(--panel,#101521);border-radius:11px}
.home-links nav a:hover{border-color:var(--blue)}
.home-links nav strong{font-size:18px}
.home-links nav span{font-size:14px}
.pin-story{padding:0 clamp(22px,4vw,50px) clamp(22px,4vw,42px)}
.pin-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.pin-panels figure{background:var(--pin-frame,#161d34);align-self:stretch;border-radius:10px}
.pin-panels figcaption{text-align:center;padding:8px 0 3px}
.social-name{display:flex;align-items:center;gap:16px}
.social-name svg{box-sizing:content-box;padding:10px;border-radius:13px;background:linear-gradient(35deg,#b44552,#693c9a);color:white}
@media(max-width:760px){.extras{grid-template-columns:1fr}.home-links nav{grid-template-columns:1fr}}
@media(max-width:530px){.pin-panels{grid-template-columns:1fr}.game{grid-template-columns:1fr}.game-grid{width:min(100%,290px)}}
:root[data-theme="light"] {
  color-scheme: light;
  --base: #f3f5fb;
  --panel: #fff;
  --line: #cbd4e6;
  --muted: #46536c;
  --blue: #304bbb;
  --ink: #17223b;
  --hero-glow: #d5dffc;
  --game-glow: #e1e8ff;
  --cell: #e4eafa;
  --eco-frame: #e4efea;
  --garden-frame: #e3eee7;
  --pin-frame: #e6ecff;
}
.nav nav a { display: inline-flex; align-items: center; gap: 6px; }
.nav nav a svg { width: 16px; height: 16px; }
.theme-picker { display: flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel,#101521); }
.theme-picker button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; color: var(--muted); cursor: pointer; background: transparent; }
.theme-picker button[aria-pressed="true"] { color: #162345; background: #becdff; }
.theme-picker button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[data-theme="light"] .game-cell.lit { background: #3f60d1; border-color: #304bbb; box-shadow: 0 0 14px #6483ef8c; }
.home-links { border-top: 0; border-bottom: 1px solid var(--line); padding: clamp(42px,7vw,78px) 0; }
.home-links nav { gap: 18px; margin-top: 26px; }
.home-links nav a { grid-template-rows: auto 1fr; gap: 0; padding: 0; overflow: hidden; border-radius: 17px; transition: transform .2s, border-color .2s; }
.home-links nav a:hover { transform: translateY(-3px); }
.card-art { display: flex; align-items: center; justify-content: space-between; min-height: clamp(84px,10vw,130px); gap: 12px; padding: 20px 24px; color: #dce7ff; background: radial-gradient(ellipse at right top, var(--card-glow), transparent 78%), var(--card-tint); }
.card-art svg { width: 46px; height: 46px; }
.home-links nav .card-art span { align-self: start; color: inherit; font: 24px system-ui,sans-serif; }
.projects-card { --card-tint: #18274d; --card-glow: #344f9b; }
.studio-card { --card-tint: #262142; --card-glow: #564589; }
.socials-card { --card-tint: #142e3c; --card-glow: #285d70; }
.card-caption { display: grid; gap: 3px; padding: 17px 24px 21px; }
.home-links nav strong { font-size: clamp(21px,2.3vw,29px); letter-spacing: -.04em; }
@media(max-width:760px) {
  .nav { height: auto; flex-wrap: wrap; padding-block: 12px; gap: 10px; }
  .nav nav { order: 3; width: 100%; gap: 7px 14px; }
  .home-links nav { gap: 13px; }
  .card-art { min-height: 79px; padding-block: 13px; }
  .card-art svg { width: 34px; height: 34px; }
}
.contact-card { --card-tint: #302345; --card-glow: #674582; }
@media(min-width: 901px) { .home-links nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media(min-width: 601px) and (max-width: 900px) { .home-links nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.coming-soon { margin-top: 24px; padding: clamp(24px, 5vw, 48px); border: 1px dashed var(--line); border-radius: 16px; background: radial-gradient(ellipse at right top, var(--hero-glow, #182456), transparent 75%), var(--panel, #101521); }
.coming-soon h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1.1; letter-spacing: -.05em; }
.coming-soon p { color: var(--muted); margin-top: 8px; }
.contact-page { text-align: center; }
.contact-page .page-head { margin-inline: auto; }
.contact-page .page-head p { margin-inline: auto; }
.contact-window { width: min(100%, 560px); margin-inline: auto; padding: clamp(18px, 4vw, 38px); border: 1px solid var(--line); border-radius: 18px; background: var(--panel, #101521); }
.contact-address { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
#contact-email { font-size: clamp(16px, 4vw, 23px); font-weight: 700; overflow-wrap: anywhere; }
.copy-email { cursor: pointer; font-family: inherit; background: #c2cdff; color: #101636; }
.copy-email:hover { background: #dbe3ff; }
.copy-email:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.copy-status { min-height: 1.6em; margin: 6px 0; color: var(--muted); font-size: 14px; }
.gmail-link { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.header-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media(max-width:1040px) { .nav { height: auto; flex-wrap: wrap; padding-block: 12px; } .nav nav { order: 3; width: 100%; } }
[dir="rtl"] body { font-family: system-ui, sans-serif; }
[dir="rtl"] .mono { letter-spacing: normal; }
[dir="rtl"] .button span[aria-hidden="true"] { transform: scaleX(-1); }
.language-picker { position: relative; z-index: 5; }
.language-picker summary { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 11px; list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 12px; background: var(--panel,#101521); color: var(--ink); }
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker[open] summary, .language-picker summary:hover { border-color: var(--blue); }
.language-chevron { width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.language-picker[open] .language-chevron { transform: translateY(2px) rotate(225deg); }
.language-options { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; width: 170px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel,#101521); box-shadow: 0 12px 28px #0004; }
.language-options button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 43px; padding: 8px 12px; border: 0; border-radius: 8px; text-align: start; font: inherit; font-size: 14px; color: var(--ink); background: transparent; cursor: pointer; }
.language-options button:hover { background: var(--cell,#1a2340); }
.language-options button[aria-pressed="true"] { background: var(--cell,#1a2340); color: var(--blue); font-weight: 700; }
.language-options button[aria-pressed="true"]::after { content: '✓' / ''; }
.language-picker :focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
@media(max-width:380px) { .header-controls { margin-inline-start: auto; } }
.news-card { --card-tint: #273046; --card-glow: #495d90; }
@media (min-width: 1080px) { .home-links nav { grid-template-columns: repeat(5,minmax(0,1fr)); } }
.news-list { display: grid; gap: 18px; max-width: 760px; }
.news-entry, .news-empty { border: 1px solid var(--line); border-radius: 16px; background: var(--panel,#101521); padding: clamp(18px,4vw,32px); overflow-wrap: anywhere; }
.news-entry time { color: var(--blue); font-size: 14px; }
.news-entry small { margin-inline-start: 12px; color: var(--muted); }
.news-entry h2 { margin-block: 10px 8px; font-size: clamp(24px,4vw,36px); line-height: 1.15; }
.news-entry p, .news-empty { color: var(--muted); }
.news-entry p { white-space: pre-wrap; }
#news-languages { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 20px; }
.news-editor fieldset { margin: 0; min-width: 0; }
.news-editor label { display: grid; gap: 5px; margin-block: 8px 14px; }
.news-editor input,.news-editor textarea { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--base); color: var(--ink); font: inherit; }
.news-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-block: 16px; }
.news-actions a { text-decoration: underline; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 29px; }
.hero-actions .primary { margin-top: 0; }
.hero-news { border-color: var(--line); background: var(--panel,#101521); }
.hero-news:hover { border-color: var(--blue); color: var(--blue); }

/* Evita la selección accidental en Inicio. */
body:has(.hero) {
  -webkit-user-select: none;
  user-select: none;
}