/*
Theme Name: Maru Garcia
Theme URI: https://marugarcia.tk
Description: Portfolio de Maru Garcia. Minimalista, con paletas intercambiables (el ojo), señal de barras de prueba y una tele con canales.
Version: 2.3
Requires at least: 6.3
Requires PHP: 7.4
Author: Maru Garcia
Author URI: mailto:maru.garciam@gmail.com
Text Domain: marugarcia
*/

/*
Guía:
1. Tokens y paletas (las cambia el ojo)
2. Base y grano
3. Header y ojo
4. Cambio de canal
5. Presentación y señal
6. Proyectos
7. Sobre mí (tele)
8. Contacto y footer
9. WordPress (barra de admin)
10. Páginas internas y 404
*/

/* Layout: el de siempre. Header fino con el ojo al centro, presentación centrada, lista grande de proyectos,
   experiencia en filas con líneas finas, contacto. Entre la presentación y los proyectos, la señal:
   un canvas fijo (encima del flujo, sin pin) donde el arcoíris se vuelve barras de prueba y se retira. */
:root{
  --color-dark:#11141B; --color-light:#D3CEC3; --color-bone:#D8D2C4; --color-ink:#24316A; --color-petrol:#21494C; --color-oxide:#7E3E2C;
  --bg:var(--color-dark); --fg:var(--color-light);
  --font:"Satoshi",system-ui,sans-serif;
  color-scheme:dark;
}
:root.bone{--bg:var(--color-bone);--fg:var(--color-dark);color-scheme:light}
:root.ink{--bg:var(--color-ink);--fg:var(--color-light)}
:root.petrol{--bg:var(--color-petrol);--fg:var(--color-light)}
:root.oxide{--bg:var(--color-oxide);--fg:var(--color-light)}

html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .4s,color .4s;overflow-x:hidden}
::selection{background:var(--fg);color:var(--bg)}
a{color:inherit;text-decoration:none;transition:.3s all}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

/* grano: canvas vivo (#grain, lo crea el JS). Este SVG es solo el respaldo sin JavaScript */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.4;background-size:257px auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='257' height='257'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.25 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
.has-grain body::after{display:none}
#grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:999;opacity:.12}

.container{max-width:1440px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:992px){.container{padding-left:max(70px,env(safe-area-inset-left,0px));padding-right:max(70px,env(safe-area-inset-right,0px))}}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--fg);transition:background-color .4s,border-color .4s}
.header .container{position:relative;display:flex;justify-content:space-between;align-items:center;min-height:64px}
@media (min-width:992px){.header .container{min-height:90px}}
/* mismo tipo que el footer: 12px, mayúsculas, espaciado .1em, light */
.logo,.menu{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:300}
.menu{display:flex;gap:clamp(14px,2.5vw,30px);list-style:none;margin:0;padding:0}
.menu a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:1px}
.menu a:hover{text-decoration-color:currentColor}

.eye{position:absolute;left:calc(50% - 20px);top:calc(50% - 20px);width:40px;height:40px;padding:0;border:1px solid var(--fg);border-radius:50%;background:var(--fg);overflow:hidden;cursor:pointer;display:grid;place-items:center;animation:blink 4s ease-in-out infinite;transition:background-color .4s,border-color .4s}
.eye:hover{animation:shake .82s cubic-bezier(.36,.07,.19,.97) infinite}
.pupil{width:10px;height:10px;border-radius:50%;background:var(--bg);transition:background-color .4s,scale .3s;will-change:transform}
.eye:hover .pupil{scale:2.5}
@keyframes blink{85%{transform:rotateX(0)}90%{transform:rotateX(90deg)}}
@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,-2px,0)}30%,50%,70%{transform:translate3d(-2px,-3px,0)}40%,60%{transform:translate3d(2px,0,0)}}
.click{position:absolute;top:100%;left:calc(50% - 50px);width:100px;height:20px;background:var(--fg);color:var(--bg);border-radius:0 0 50px 50px;text-transform:uppercase;text-align:center;font-size:10px;font-weight:700;letter-spacing:1.5px;line-height:21px;transform:scaleY(0);transform-origin:top center;transition:transform .3s ease-in-out,background-color .4s,color .4s;pointer-events:none;font-variant-numeric:tabular-nums}
.eye:hover ~ .click,.eye:focus-visible ~ .click,.click.show{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){.eye,.eye:hover{animation:none}}

/* cambio de canal */
.tune{position:fixed;inset:0;z-index:18;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--fg) 10%,transparent) 0 1px,transparent 1px 3px)}
.tune::after{content:"";position:absolute;left:0;right:0;height:22vh;top:-22vh;background:linear-gradient(transparent,color-mix(in srgb,var(--fg) 18%,transparent),transparent)}
.tuning .tune{opacity:1}
.tuning .tune::after{animation:sweep .28s linear}
.tuning main,.tuning .logo{animation:chroma .28s steps(4)}
@keyframes sweep{to{transform:translateY(144vh)}}
@keyframes chroma{
  0%{transform:translateX(0);text-shadow:none}
  25%{transform:translateX(-3px);text-shadow:-3px 0 rgba(163,78,54,.7),3px 0 rgba(55,107,115,.7)}
  50%{transform:translateX(2px);text-shadow:2px 0 rgba(163,78,54,.6),-2px 0 rgba(55,107,115,.6)}
  75%{transform:translateX(-1px);text-shadow:-1px 0 rgba(163,78,54,.4),1px 0 rgba(55,107,115,.4)}
  100%{transform:none;text-shadow:none}}

/* presentación */
.presentation{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:clamp(90px,16vw,200px) 0}
.presentation h1{font-size:clamp(34px,5vw,60px);line-height:1.05;font-weight:400;margin:0;max-width:16ch;text-wrap:balance}
.presentation p{font-size:clamp(17px,1.6vw,21px);line-height:1.35;font-weight:300;margin:24px auto 0;max-width:44ch;text-wrap:pretty}
/* franja de barras de color al pie del hero; con la señal activa la dibuja el canvas */
.bars{display:flex;width:100%;height:clamp(44px,6vw,84px);margin-top:clamp(90px,14vw,180px)}
.bars span{flex:1}
.bars span:nth-child(1){background:#C5C0B3}.bars span:nth-child(2){background:#A78E35}.bars span:nth-child(3){background:#376B73}
.bars span:nth-child(4){background:#2F6656}.bars span:nth-child(5){background:#824360}.bars span:nth-child(6){background:#A34E36}.bars span:nth-child(7){background:#293C83}
.has-signal .bars{visibility:hidden}

.signal-space{display:none}
.has-signal .signal-space{display:block;height:140vh}
@media (max-width:767px){.has-signal .signal-space{height:100vh}}
#signal{position:fixed;inset:0;width:100%;height:100%;z-index:15;pointer-events:none;display:none}
.has-signal #signal{display:block}

/* títulos */
.section{padding-block:clamp(60px,8vw,100px)}
.title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 24px;margin-bottom:clamp(24px,4vw,50px)}
.subtitle{font-size:12px;text-transform:uppercase;font-weight:300;letter-spacing:.1em;margin:0}
.count{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:300;font-variant-numeric:tabular-nums}

/* proyectos */
.feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--fg)}
.feed li{border-bottom:1px solid var(--fg);transition:opacity .25s ease-in-out,border-color .4s}
.feed:hover li{opacity:.25}
.feed:hover li:hover,.feed li:focus-within{opacity:1}
.feed a{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-block:clamp(16px,1.4vw,14px)}
.feed h2{font-size:clamp(30px,5vw,60px);line-height:1.15;font-weight:300;margin:0;transition:transform .3s;min-width:0}
.feed a:hover h2,.feed a:focus-visible h2{transform:translateX(15px)}
.seemore{font-size:12px;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;padding-bottom:.6em}
@media (max-width:560px){.seemore{display:none}}

/* experiencia */
.jobs{list-style:none;margin:0;padding:0;border-top:1px solid var(--fg)}
.job{display:grid;grid-template-columns:minmax(120px,1fr) 3fr;gap:10px 40px;padding-block:28px;border-bottom:1px solid var(--fg)}
.when{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:300;padding-top:10px;font-variant-numeric:tabular-nums}
.job h3{font-size:clamp(24px,2.6vw,34px);font-weight:400;line-height:1.15;margin:0}
.org{font-weight:300;margin:6px 0 14px}
.job p.desc{font-weight:300;margin:0;max-width:62ch}
@media (max-width:640px){.job{grid-template-columns:1fr}.when{padding-top:0}}

/* experiencia como tele: solo con JS (sin JS queda la lista de arriba) */
.panel,.static{display:none}
.has-tv .tv{position:relative;max-width:1200px;margin:0 auto}
.has-tv .screen{position:relative;overflow:hidden;border-radius:22px/26px;background:color-mix(in srgb,var(--fg) 7%,var(--bg));
  box-shadow:inset 0 0 90px color-mix(in srgb,#000 32%,transparent);transition:background-color .4s}
.has-tv .screen::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--fg) 5%,transparent) 0 1px,transparent 1px 3px)}
.has-tv .jobs{display:grid;border:0;min-height:clamp(320px,40vw,440px)}
.has-tv .job{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;gap:0;border:0;padding:clamp(40px,6vw,64px) clamp(24px,6vw,72px);visibility:hidden;opacity:0}
.has-tv .job.on{visibility:visible;opacity:1}
.has-tv .when{display:none}
.has-tv .job h3{font-size:clamp(32px,4.4vw,56px);max-width:18ch;text-wrap:balance;margin-bottom:clamp(16px,2vw,24px)}
.job p.desc+p.desc{margin-top:12px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:clamp(22px,3vw,32px) 0 0;max-width:min(100%,920px)}
.tags li{font-size:11px;text-transform:uppercase;letter-spacing:.12em;border:1px solid var(--fg);border-radius:50px;padding:5px 12px;transition:border-color .4s}
.cv{display:inline-block;margin-top:clamp(22px,3vw,32px);font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;border-bottom:1px solid var(--fg);padding-bottom:3px}
.cv:hover{opacity:.6}
.has-tv .job p.desc{font-size:clamp(15px,1.3vw,18px)}
.has-tv .static{display:block;position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background-size:180px auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E")}
.has-tv .static::after{content:"";position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(transparent,color-mix(in srgb,var(--fg) 8%,transparent),transparent)}
.has-tv .static-on .static{animation:staticflash .4s steps(1) forwards}
.has-tv .static-on .static::after{animation:roll .4s linear}
.has-tv .static-on .job.on{animation:chroma .4s steps(4)}
@keyframes staticflash{0%{opacity:.32;background-position:0 0}20%{background-position:47px 83px}40%{opacity:.24;background-position:-61px 22px}60%{opacity:.16;background-position:33px -54px}80%{opacity:.08;background-position:-12px 40px}100%{opacity:0}}
@keyframes roll{to{transform:translateY(440%)}}
.has-tv .panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:clamp(14px,1.6vw,20px) 0 0}
.presets,.arrows{display:flex;align-items:center;gap:8px}
.led{width:6px;height:6px;border-radius:50%;background:var(--fg);margin-right:6px;transition:opacity .2s}
.static-on .led{opacity:.2}
.ch{font:inherit;font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;width:30px;height:30px;border-radius:50%;border:1px solid var(--fg);background:none;color:var(--fg);cursor:pointer;padding:0;transition:.25s all}
.ch[aria-pressed="true"],.ch:hover{background:var(--fg);color:var(--bg)}
.chstep{font:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.12em;border:1px solid var(--fg);border-radius:50px;background:none;color:var(--fg);padding:7px 14px;cursor:pointer;transition:.25s all}
.chstep:hover{background:var(--fg);color:var(--bg)}
@media (max-width:640px){.has-tv .screen{border-radius:16px/20px}}
@media (prefers-reduced-motion:reduce){.has-tv .static-on .static,.has-tv .static-on .static::after,.has-tv .static-on .job.on{animation:none}}

/* contacto */
.contact{text-align:center}
.contact h2{font-size:clamp(46px,10vw,120px);font-weight:700;line-height:1;margin:0;letter-spacing:-.02em}
.contact p{font-weight:300;font-size:clamp(17px,1.6vw,21px);margin:20px auto 28px;max-width:40ch}
.mail{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 20px}
.mail code{font-family:var(--font);font-size:clamp(18px,2.4vw,28px);user-select:all;word-break:break-all}
.copy{font:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;color:var(--fg);background:none;border:1px solid var(--fg);border-radius:50px;padding:8px 16px;transition:.3s all}
.copy:hover{background:var(--fg);color:var(--bg)}
.footer{border-top:1px solid var(--fg);padding-block:24px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:300;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}


/* 9. WordPress: con sesión iniciada, la barra de admin ocupa la parte de arriba */
.admin-bar .header{top:32px}
@media (max-width:782px){.admin-bar .header{top:46px}}
@media (max-width:600px){.admin-bar .header{top:0}}

/* 10. Páginas internas y 404 */
.page-title{font-size:clamp(34px,5vw,60px);font-weight:400;line-height:1.05;margin:0;text-wrap:balance}
.prose{max-width:65ch;font-weight:300;font-size:clamp(17px,1.4vw,19px);line-height:1.6}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose h2,.prose h3{font-weight:400;line-height:1.2;margin:1.6em 0 .5em}
.page-404{padding-bottom:clamp(90px,16vw,200px)}
.page-404 .subtitle{display:block;margin-bottom:20px}
.btnlink{display:inline-block;margin-top:28px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;border:1px solid var(--fg);border-radius:50px;padding:8px 16px}
.btnlink:hover{background:var(--fg);color:var(--bg)}

/* 11. Arranque: la tele se enciende */
/* Cortina inmediata (antes del JS). Si algo falla, desaparece sola a los 9 s */
html.booting::after{content:"";position:fixed;inset:0;z-index:998;background:#11141B;animation:bootfallback 0s 9s forwards}
@keyframes bootfallback{to{visibility:hidden}}
html.boot-on body{overflow:hidden}
#boot{position:fixed;inset:0;z-index:998;cursor:pointer;--boot-a:1}
#boot canvas{position:absolute;inset:0;width:100%;height:100%}
#boot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--boot-a);
  background:repeating-linear-gradient(0deg,rgba(211,206,195,.035) 0 1px,transparent 1px 3px)}
#boot::after{content:"";position:absolute;left:0;right:0;top:-30vh;height:30vh;z-index:1;pointer-events:none;opacity:var(--boot-a);
  background:linear-gradient(transparent,rgba(211,206,195,.05),transparent);animation:bootroll 3.4s linear infinite}
@keyframes bootroll{to{transform:translateY(160vh)}}
.boot-eye{--s:clamp(28px,3vw,40px);position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:50%;background:#D3CEC3;display:grid;place-items:center;z-index:2;visibility:hidden;will-change:transform}
.boot-pupil{width:25%;height:25%;border-radius:50%;background:#11141B;will-change:transform}