/* itormor · estilos compartidos
   Layout: top bar + hero + tarjetas/paneles + contacto; claro limpio / oscuro rico */
:root{
  --bg:#f3f5fb; --surface:#ffffff; --surface-2:#eef1f9; --fg:#121726; --muted:#586278;
  --line:#dde3f0; --accent:#2a63f0;
  --it:#0e8ea8; --dev:#6d3be0; --cyber:#d6314e; --other:#16924a;
  --shadow:0 1px 2px rgba(18,23,38,.06), 0 12px 30px -16px rgba(18,23,38,.18);
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1080px;
  --page:var(--accent);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0a0d15; --surface:#111728; --surface-2:#0d1320; --fg:#e9eefb; --muted:#93a0ba;
  --line:#202a40; --accent:#5e8bff;
  --it:#28d2ea; --dev:#a98bff; --cyber:#fb7185; --other:#4fdd8b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.7);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0a0d15; --surface:#111728; --surface-2:#0d1320; --fg:#e9eefb; --muted:#93a0ba;
  --line:#202a40; --accent:#5e8bff;
  --it:#28d2ea; --dev:#a98bff; --cyber:#fb7185; --other:#4fdd8b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.7);
  color-scheme:dark;
}

/* accentos por página */
.p-it{--page:var(--it)} .p-dev{--page:var(--dev)} .p-cyber{--page:var(--cyber)} .p-other{--page:var(--other)}

*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 0);
  background-size:26px 26px;
}
.wrap{ max-width:var(--maxw); margin:0 auto;
  padding-left:max(20px, env(safe-area-inset-left,0px));
  padding-right:max(20px, env(safe-area-inset-right,0px)); }
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; text-wrap:balance; font-family:var(--font-display); font-weight:700; letter-spacing:-.01em}

/* top bar */
.bar{ position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); }
.bar-in{ display:flex; align-items:center; gap:12px 18px; padding-block:13px; flex-wrap:wrap; }
.brand{ font-family:var(--font-mono); font-weight:700; font-size:1.05rem; letter-spacing:.02em; display:flex; align-items:center; gap:10px }
.brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent) }
.brand .blogo{ width:28px; height:28px; border-radius:8px; display:block; box-shadow:0 2px 8px rgba(0,0,0,.18) }
.brand b{color:var(--accent)}
.nav{ display:flex; gap:4px; align-items:center; margin-left:auto; overflow-x:auto; max-width:100%; }
.nav a{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.04em; color:var(--muted); padding:7px 11px; border-radius:8px; white-space:nowrap; border:1px solid transparent }
.nav a:hover{ color:var(--fg); background:var(--surface-2) }
.nav a.active{ color:var(--page); border-color:color-mix(in srgb,var(--page) 40%, var(--line)) }
.toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--fg);
  border-radius:999px; padding:8px 14px; font:inherit; font-size:.85rem; }
.toggle:hover{border-color:var(--accent)}
.toggle svg{width:16px; height:16px}
.bar-in .toggle{ margin-left:auto }
.nav + .toggle{ margin-left:0 }

/* hero */
.hero{ padding-block:clamp(44px,8vw,92px) clamp(28px,5vw,56px); }
.eyebrow{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--page); display:flex; align-items:center; gap:10px; }
.eyebrow::before{content:""; width:28px; height:1px; background:var(--page); display:inline-block}
.hero h1{ font-size:clamp(1.9rem,4.6vw,3.25rem); line-height:1.1; margin-top:20px; max-width:18ch }
.hero h1 .hi{ background:linear-gradient(100deg,var(--it),var(--dev)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero.area h1{ color:var(--page) }
.hero p{ margin-top:18px; color:var(--muted); font-size:clamp(1rem,2vw,1.15rem); max-width:56ch }
.hero .cta{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px }
.btn{ display:inline-flex; align-items:center; gap:9px; border-radius:11px; padding:12px 20px; font-weight:600; font-size:.95rem; cursor:pointer; border:1px solid transparent }
.btn.primary{ background:var(--accent); color:#fff }
.btn.primary:hover{ filter:brightness(1.07) }
.btn.ghost{ background:var(--surface); border-color:var(--line); color:var(--fg) }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent) }

/* section head */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px }
.section-head h2{ font-size:clamp(1.3rem,3vw,1.7rem) }
.section-head .note{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted) }

/* cards (home) */
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:640px){ .grid{ grid-template-columns:1fr } }
.card{ position:relative; display:flex; flex-direction:column; gap:14px; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px;
  box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease; overflow:hidden; }
.card::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--c); opacity:.9 }
.card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--c) 55%, var(--line)) }
.card .ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c) 15%, transparent); color:var(--c); }
.card .ico svg{ width:24px; height:24px }
.card .tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c); font-weight:700 }
.card h3{ font-size:1.18rem }
.card p{ margin:0; color:var(--muted); font-size:.95rem; flex:1 }
.card .more{ font-family:var(--font-mono); font-size:.82rem; color:var(--fg); display:inline-flex; align-items:center; gap:7px; font-weight:600 }
.card .more .arw{ transition:transform .18s ease; color:var(--c) }
.card:hover .more .arw{ transform:translateX(4px) }

/* paneles de subpágina */
.panels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:18px; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow); min-width:0;
  border-top:3px solid var(--page); display:flex; flex-direction:column; gap:12px }
.panel h3{ font-size:1.12rem }
.panel p{ margin:0; color:var(--muted); font-size:.97rem }
.panel .pico{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--page) 14%, transparent); color:var(--page) }
.panel .pico svg{ width:21px; height:21px }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:6px }
.chip{ font-family:var(--font-mono); font-size:.78rem; padding:7px 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--fg) }
.chip::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--page); margin-right:8px; vertical-align:middle }

/* lista de competencias (otros) */
.skills{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:14px; list-style:none; padding:0; margin:0 }
.skills li{ display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:18px; box-shadow:var(--shadow) }
.skills .n{ font-family:var(--font-mono); font-weight:700; color:var(--page); font-size:.95rem; line-height:1.5 }
.skills b{ display:block; font-family:var(--font-display); font-size:1.02rem; margin-bottom:2px }
.skills span{ color:var(--muted); font-size:.92rem }

.lead-block{ margin-block:clamp(28px,5vw,48px) }
.lead-block p{ font-size:clamp(1.05rem,2.2vw,1.25rem); max-width:62ch; color:var(--fg) }

/* contacto */
.contact{ margin-block:clamp(44px,8vw,84px); background:var(--surface); border:1px solid var(--line);
  border-radius:22px; padding:clamp(28px,5vw,52px); box-shadow:var(--shadow); position:relative; overflow:hidden }
.contact::after{ content:""; position:absolute; inset:auto -60px -80px auto; width:240px; height:240px;
  background:radial-gradient(circle, color-mix(in srgb,var(--page) 22%, transparent), transparent 70%); pointer-events:none }
.contact h2{ font-size:clamp(1.4rem,3.4vw,2rem) }
.contact p{ color:var(--muted); margin:12px 0 24px; max-width:48ch }
.mail{ display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:12px; overflow:hidden; max-width:100%; }
.mail .addr{ font-family:var(--font-mono); font-size:.95rem; padding:12px 16px; background:var(--surface-2); color:var(--fg); overflow-x:auto; white-space:nowrap }
.mail .copy{ border:0; border-left:1px solid var(--line); background:var(--surface); color:var(--fg); padding:0 16px; cursor:pointer; font:inherit; font-size:.85rem; display:flex; align-items:center; gap:7px }
.mail .copy:hover{ color:var(--accent) }
.mail .copy.ok{ color:var(--other) }
.socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
.social{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:11px;
  background:var(--surface); border:1px solid var(--line); color:var(--fg); font-size:.92rem; font-weight:500;
  transition:border-color .18s, color .18s, transform .18s }
.social:hover{ border-color:var(--page); color:var(--page); transform:translateY(-2px) }
.social svg{ width:19px; height:19px; flex:0 0 auto }

footer{ border-top:1px solid var(--line); padding-block:26px; color:var(--muted); font-size:.85rem;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }
footer .fmono{ font-family:var(--font-mono) }

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }