/* ============================================================
   Portafolio · Oriana Serrano Piñero
   Tema OSCURO ÚNICO · formal-editorial · efectos sobrios
   Reglas aplicadas: Vercel Web Interface Guidelines
   ============================================================ */
:root{
  --bg:#0A0E17; --bg2:#0F1421; --card:#131A2A; --line:#1E2740;
  --ink:#E8ECF4; --mut:#98A3BA; --dim:#6B7691;
  --acc:#7C9CFF; --acc2:#4C6EE8; --acc-ink:#0A0F22;
  --warm:#E8B86D;                      /* personalidad — uso puntual */
  --ok:#3FBF87; --bad:#F0716A;
  --maxw:1160px; --nav-h:64px;
  --r:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 44px rgba(0,0,0,.42);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
}
html{
  color-scheme:dark;                       /* scrollbar e inputs nativos en oscuro */
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
}
@media (pointer:fine){ html{overscroll-behavior:none} }
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.62 var(--font); -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(124,156,255,.25);
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
::selection{background:var(--acc2); color:#fff}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:6px}
.tabular{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.skip{
  position:absolute; left:14px; top:-70px; z-index:200; background:var(--acc); color:var(--acc-ink);
  padding:11px 17px; border-radius:10px; font-weight:750; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* ================= NAVEGACIÓN ================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60; height:var(--nav-h);
  background:rgba(10,14,23,.55); backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled{background:rgba(10,14,23,.9); border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; gap:16px; height:var(--nav-h)}
.brand{display:flex; align-items:center; gap:11px; font-weight:750; letter-spacing:-.3px; text-decoration:none; font-size:15.5px}
.brand .est{
  width:28px; height:28px; border-radius:9px; flex:none;
  background:linear-gradient(145deg,var(--acc),var(--acc2));
  display:grid; place-items:center; color:#fff; font-size:12.5px; font-weight:850;
  box-shadow:0 4px 14px rgba(76,110,232,.42);
}
.brand small{display:block; font-size:10px; font-weight:550; color:var(--dim); letter-spacing:.5px; text-transform:uppercase}
.nav nav{margin-left:auto; display:flex; gap:2px; align-items:center}
.nav nav a{
  position:relative; text-decoration:none; color:var(--mut); font-size:14px; font-weight:600;
  padding:9px 13px; border-radius:9px; touch-action:manipulation;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.nav nav a:hover{color:var(--ink); background:rgba(124,156,255,.09)}
.nav nav a.activo{color:var(--acc)}
.nav nav a.activo:after{
  content:''; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  background:var(--acc); border-radius:2px;
}
.progreso{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg,var(--acc2),var(--acc));
}
@media (max-width:820px){
  /* las4 opciones siempre visibles */
  .nav nav a.ocultar{display:inline-block}
  .nav nav{gap:0}
  .nav nav a{padding:9px 8px; font-size:13px}
}

/* ================= HERO ================= */
.hero{position:relative; padding:calc(var(--nav-h) + 54px) 0 34px; overflow:hidden; isolation:isolate}
.hero:before{                                  /* aurora lenta */
  content:''; position:absolute; z-index:-2; inset:-45% -20% auto; height:660px;
  background:
    radial-gradient(46% 52% at 22% 18%, rgba(124,156,255,.30), transparent 62%),
    radial-gradient(38% 46% at 78% 6%, rgba(232,184,109,.13), transparent 64%),
    radial-gradient(30% 40% at 55% 42%, rgba(76,110,232,.20), transparent 70%);
  filter:blur(16px); animation:aurora 26s var(--ease) infinite alternate;
}
@keyframes aurora{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.07)}}
.hero:after{                                  /* retícula fina, se desvanece */
  content:''; position:absolute; z-index:-1; inset:0;
  background-image:linear-gradient(rgba(124,156,255,.055) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(124,156,255,.055) 1px, transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 84% 72% at 50% 26%, #000 22%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 84% 72% at 50% 26%, #000 22%, transparent 78%);
}
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,7vw,74px); line-height:1.05; letter-spacing:-1.1px;
  margin:18px 0 20px; text-wrap:balance;
}
.hero h1 .marca{
  background:linear-gradient(115deg,var(--acc) 12%,#A9C0FF 54%,var(--warm) 97%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rol{font-size:clamp(16px,2.1vw,19.5px); color:var(--mut); margin:0; max-width:710px; text-wrap:pretty}
.rol b{color:var(--ink); font-weight:640}
.dispo{
  display:inline-flex; gap:9px; align-items:center; font-size:12.8px; font-weight:600; color:var(--mut);
  border:1px solid var(--line); background:rgba(19,26,42,.72); border-radius:99px; padding:7px 15px;
}
.dispo .pt{
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  animation:latido 2.6s ease-out infinite;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(63,191,135,.55)}
  70%{box-shadow:0 0 0 9px rgba(63,191,135,0)}
  100%{box-shadow:0 0 0 0 rgba(63,191,135,0)}
}
.ctas{display:flex; flex-wrap:wrap; gap:13px; margin-top:32px}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  padding:14px 24px; border-radius:12px; font-weight:650; font-size:15px;
  border:1px solid transparent; cursor:pointer; touch-action:manipulation;
  transition:transform .18s var(--ease), background .18s var(--ease),
             border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-p{background:linear-gradient(140deg,var(--acc),var(--acc2)); color:#fff; box-shadow:0 10px 28px rgba(76,110,232,.32)}
.btn-p:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(76,110,232,.44)}
.btn-p:active{transform:translateY(0)}
.btn-s{border-color:var(--line); background:rgba(19,26,42,.7); color:var(--ink)}
.btn-s:hover{border-color:var(--acc); background:rgba(124,156,255,.10)}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:34px}
.stat{
  background:linear-gradient(165deg,var(--card),rgba(19,26,42,.5));
  border:1px solid var(--line); border-radius:var(--r); padding:19px 17px;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.stat:hover{border-color:rgba(124,156,255,.42); transform:translateY(-3px)}
.stat b{
  display:block; font-family:var(--serif); font-size:33px; line-height:1.04; letter-spacing:-.5px;
  color:var(--acc); font-variant-numeric:tabular-nums;
}
.stat span{font-size:12.8px; color:var(--mut); line-height:1.42; display:block; margin-top:6px}

/* ================= SECCIONES ================= */
section{padding:46px 0; scroll-margin-top:calc(var(--nav-h) + 8px)}
.tit{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.tit h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,4vw,46px);
  margin:0; letter-spacing:-.9px; line-height:1.1; text-wrap:balance;
}
.tit .sub{color:var(--mut); font-size:14.3px; padding-bottom:7px; max-width:540px; text-wrap:pretty}
.tit .linea{flex:1; min-width:70px; height:1px; background:linear-gradient(90deg, rgba(124,156,255,.55), rgba(124,156,255,.05))}
.eyebrow{
  font-size:11.5px; font-weight:800; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--acc); margin-bottom:10px; display:block;
}

/* filtros */
.filtros{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:26px}
.filtro{
  border:1px solid var(--line); background:var(--bg2); color:var(--mut);
  padding:9px 17px; border-radius:99px; font-size:13.5px; font-weight:650; cursor:pointer;
  touch-action:manipulation;
  transition:color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.filtro:hover{color:var(--ink); border-color:rgba(124,156,255,.5)}
.filtro[aria-pressed="true"]{background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}
#recuento{font-size:13px; color:var(--dim); margin:-14px 0 20px; font-variant-numeric:tabular-nums}

/* ================= TARJETAS ================= */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(312px,1fr)); gap:20px}
.caso{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; cursor:pointer; text-align:left; padding:0; color:inherit; font:inherit;
  display:flex; flex-direction:column; touch-action:manipulation;
  transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.caso:hover{transform:translateY(-6px); border-color:rgba(124,156,255,.55); box-shadow:var(--shadow)}
.caso:active{transform:translateY(-2px)}
.caso .thumb.retrato{aspect-ratio:4/5}
.thumb.retrato img{object-fit:cover; object-position:top center}
.thumb{aspect-ratio:16/10; overflow:hidden; background:var(--bg2); border-bottom:1px solid var(--line); position:relative}
.caso .thumb img{width:100%; height:100%; object-fit:contain; object-position:center center; display:block; transition:transform .35s var(--ease)}
.caso:hover .thumb img{transform:scale(1.06)}
.caso .thumb:after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(19,26,42,.75), transparent 48%);
  transition:opacity .3s var(--ease); opacity:.92;
}
.caso:hover .thumb:after{opacity:.5}
.caso .cuerpo{padding:17px 18px 19px; display:flex; flex-direction:column; gap:9px; flex:1; min-width:0}
.caso .tag{font-size:10.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--acc)}
.caso h3{margin:0; font-size:18.5px; letter-spacing:-.5px; font-weight:700; text-wrap:balance}
.caso p{margin:0; color:var(--mut); font-size:13.7px; line-height:1.56}
.caso .ir{
  margin-top:auto; padding-top:12px; font-size:13.2px; font-weight:700; color:var(--acc);
  display:flex; gap:7px; align-items:center;
}
.caso .ir span{transition:transform .25s var(--ease)}
.caso:hover .ir span{transform:translateX(5px)}
.caso[hidden]{display:none}

/* revelado al hacer scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--i,0) * 70ms)}
.reveal.in{opacity:1; transform:none}

/* ================= DIÁLOGO ================= */
dialog{
  border:1px solid var(--line); background:var(--bg2); color:var(--ink);
  width:min(960px,94vw); max-height:92vh; border-radius:22px; padding:0;
  box-shadow:var(--shadow); overscroll-behavior:contain;
}
dialog[open]{animation:dlgIn .34s var(--ease)}
@keyframes dlgIn{from{opacity:0; transform:translateY(16px) scale(.975)}to{opacity:1; transform:none}}
dialog::backdrop{background:rgba(5,8,15,.78); backdrop-filter:blur(6px)}
.dlg-top{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:14px;
  background:rgba(15,20,33,.95); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); padding:15px 20px;
}
.dlg-top .num{
  width:32px; height:32px; border-radius:10px; background:linear-gradient(145deg,var(--acc),var(--acc2));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; flex:none;
}
.dlg-top h3{margin:0; font-size:17.5px; font-weight:700; letter-spacing:-.3px}
.cerrar{
  margin-left:auto; border:1px solid var(--line); background:var(--bg); color:var(--mut);
  width:36px; height:36px; border-radius:10px; cursor:pointer; font-size:17px; touch-action:manipulation;
  transition:color .16s var(--ease), border-color .16s var(--ease);
}
.cerrar:hover{color:var(--bad); border-color:var(--bad)}
.dlg-body{padding:24px 26px 38px; overflow-y:auto; max-height:calc(92vh - 62px)}
.galeria{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:24px; align-items:start; justify-items:center}
.galeria img{grid-column:1 / -1}            /* horizontal: fila completa */
.galeria img.retrato{grid-column:auto; max-height:56vh}   /* verticales: de2 en2 */
/* una imagen por fila: usa todo el ancho del diálogo sin agrandarla nunca */
.galeria .pie{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100%}
.galeria img{border:1px solid var(--line); border-radius:13px; width:auto; max-width:100%; height:auto; max-height:74vh; object-fit:contain; margin:0 auto; cursor:zoom-in; background:var(--bg); transition:border-color .2s var(--ease); image-rendering:auto; display:block}
.galeria img:hover{border-color:var(--acc)}
.dlg-body h3{font-family:var(--serif); font-weight:400; font-size:26px; margin:30px 0 11px; letter-spacing:-.6px}
.dlg-body h3:first-child{margin-top:0}
.dlg-body h4{
  font-size:12px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--acc); margin:27px 0 10px;
}
.dlg-body p{margin:10px 0; color:var(--mut); font-size:14.8px; text-wrap:pretty}
.dlg-body strong{color:var(--ink); font-weight:650}
.dlg-body ul{margin:11px 0; padding-left:21px; color:var(--mut); font-size:14.6px}
.dlg-body li{margin:6px 0}
.dlg-body code{background:var(--bg); border:1px solid var(--line); padding:2px 7px; border-radius:7px; font-size:13px; color:var(--acc)}
.dlg-body blockquote{
  margin:16px 0; padding:14px 18px; border-left:3px solid var(--warm);
  background:rgba(232,184,109,.06); border-radius:0 12px 12px 0; color:var(--ink); font-size:14.6px;
}
.tbl{overflow-x:auto; margin:16px 0; border:1px solid var(--line); border-radius:13px}
table{border-collapse:collapse; width:100%; font-size:13.7px}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--bg); color:var(--acc); font-weight:750; font-size:12px; text-transform:uppercase; letter-spacing:.7px}
tr:last-child td{border-bottom:0}
td{color:var(--mut)}
td:first-child{color:var(--ink); font-weight:560}
.cvlinea{
  margin-top:26px; padding:17px 20px; border:1px dashed rgba(124,156,255,.5);
  border-radius:14px; background:rgba(124,156,255,.07); font-size:14.5px; color:var(--ink);
}
.cvlinea b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:1.6px; color:var(--acc); margin-bottom:7px}

/* ================= DEMO ================= */
.demos{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:22px}
.demo-ficha{
  background:linear-gradient(160deg,var(--card),rgba(19,26,42,.5));
  border:1px solid var(--line); border-radius:22px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.demo-ficha:hover{transform:translateY(-4px); border-color:rgba(124,156,255,.55)}
.demo-ficha .prev{
  position:relative; aspect-ratio:16/10; background:#0A0E17;
  border-bottom:1px solid var(--line); overflow:hidden;
}
.demo-ficha .prev img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.demo-ficha .etq .pt{width:7px; height:7px; border-radius:50%; background:#4ADE80; display:inline-block; margin-right:7px; box-shadow:0 0 0 0 rgba(74,222,128,.7); animation:latido 2.4s infinite}
.demo-ficha .etq{
  position:absolute; top:12px; left:12px; z-index:2; font-size:10.5px; font-weight:800;
  letter-spacing:1.3px; text-transform:uppercase; background:rgba(10,14,23,.9);
  border:1px solid var(--line); color:var(--acc); padding:5px 11px; border-radius:99px;
}
.demo-ficha .info{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1}
.demo-ficha h3{font-family:var(--serif); font-weight:400; font-size:27px; margin:0; letter-spacing:-.7px}
.demo-ficha p{color:var(--mut); font-size:14.7px; margin:0; text-wrap:pretty}
.demo-ficha p strong{color:var(--ink)}
.demo-ficha .cred{
  font-size:13.5px; color:var(--ink); background:rgba(124,156,255,.08);
  border:1px dashed rgba(124,156,255,.4); border-radius:10px; padding:9px 13px;
}
.demo-ficha .cred b{color:var(--acc); font-weight:700; letter-spacing:.4px}
.demo-ficha .btn{margin-top:auto; align-self:flex-start}
.demo-ficha .btn + .btn{margin-top:0}

/* ================= SOBRE / STACK ================= */
/* ficha personal: retrato pequeño, sin robar peso al contenido */
.yo{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.yo img{width:76px; height:76px; border-radius:50%; object-fit:cover;
        border:2px solid var(--line); box-shadow:var(--shadow); flex:none}
.yo b{display:block; font-size:17px; letter-spacing:-.2px}
.yo span{display:block; font-size:12.6px; color:var(--mut); margin-top:2px; text-wrap:pretty}

.sobre{display:grid; grid-template-columns:1.08fr .92fr; gap:22px}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:27px}
.panel h3{font-family:var(--serif); font-weight:400; font-size:25px; margin:0 0 14px; letter-spacing:-.6px}
.panel p{color:var(--mut); font-size:15px; margin:11px 0; text-wrap:pretty}
.panel strong{color:var(--ink); font-weight:640}
.grupo{margin-bottom:19px}
.grupo:last-child{margin-bottom:0}
.grupo b{font-size:11px; font-weight:800; letter-spacing:1.7px; text-transform:uppercase; color:var(--acc); display:block; margin-bottom:10px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chipx{
  border:1px solid var(--line); background:var(--bg2); color:var(--mut);
  padding:7px 13px; border-radius:99px; font-size:13.2px; font-weight:600;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
.chipx:hover{border-color:rgba(124,156,255,.5); color:var(--ink)}
@media (max-width:860px){ .sobre{grid-template-columns:1fr} }

/* ================= CONTACTO ================= */
.contacto{
  position:relative; overflow:hidden;
  background:linear-gradient(155deg, rgba(124,156,255,.10), var(--card) 58%);
  border:1px solid var(--line); border-radius:26px; padding:48px 32px; text-align:center;
}
.contacto:before{
  content:''; position:absolute; inset:-60% -10% auto; height:340px;
  background:radial-gradient(50% 60% at 50% 0%, rgba(124,156,255,.26), transparent 68%);
  pointer-events:none;
}
.contacto h2{font-family:var(--serif); font-weight:400; font-size:clamp(27px,4vw,44px); margin:0 0 12px; letter-spacing:-.9px; text-wrap:balance; position:relative}
.contacto p{color:var(--mut); max-width:610px; margin:0 auto 26px; font-size:15.2px; text-wrap:pretty; position:relative}
.contacto .ctas{justify-content:center; position:relative}

/* ================= FOOTER ================= */
footer{border-top:1px solid var(--line); padding:30px 0; color:var(--dim); font-size:13.2px}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer strong{color:var(--mut); font-weight:600}

/* ================= LIGHTBOX ================= */
.lightbox{border:0; padding:0; background:transparent; width:auto; height:auto; max-width:96vw; max-height:96vh; overflow:visible}
.lightbox::backdrop{background:rgba(4,6,12,.93)}
.lightbox img{max-width:94vw; max-height:92vh; border-radius:14px; box-shadow:var(--shadow)}

/* ================= MOVIMIENTO REDUCIDO ================= */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}


/* ================= MODO TELÉFONO ================= */
@media (max-width:640px){
  :root{--nav-h:54px}
  .wrap{padding:0 16px}
  .brand small{display:none}
  .nav nav a{padding:8px 6px; font-size:12.4px; letter-spacing:-.2px; white-space:nowrap}
  .brand{font-size:14.5px}
  /* encabezado más arriba y menos aire entre módulos */
  .hero{padding:calc(var(--nav-h) + 34px) 0 26px}
  section{padding:26px 0}
  .tit{margin-bottom:16px; gap:7px}
  .stats{margin-top:22px; gap:10px; grid-template-columns:repeat(2,1fr)}
  .filtros{gap:7px; overflow-x:auto; padding-bottom:3px}
  .eyebrow{margin-bottom:8px}
  /*2 proyectos por línea */
  .grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .caso .cuerpo{padding:12px 12px 14px; gap:6px}
  .caso h3{font-size:14.6px; letter-spacing:-.3px}
  .caso .tag{font-size:9.4px; letter-spacing:1.1px}
  .caso p{font-size:11.3px; line-height:1.44; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden}
  .caso .ir{font-size:11.6px}
  .demo-ficha .info{padding:18px}
  .demo-ficha h3{font-size:22px}
  .demos{gap:16px}
  .sobre{gap:16px}
  .yo img{width:64px; height:64px}
}