/* Lucian Adamec — "Executive": el diseno del entregable de Casino Guru (columna de identidad fija, negro y oro,
   Cinzel + Manrope, secciones numeradas, paneles de cristal), rehecho sin Tailwind. */
:root{
  --onyx:#070709; --char:#121215; --plat:#E5E4E2; --gold:#C5A059; --gold-hi:#D9B978;
  --muted:rgba(229,228,226,.68); --dim:rgba(229,228,226,.6); --line:rgba(255,255,255,.07); --gline:rgba(197,160,89,.3);
  --serif:'Cinzel',Georgia,'Times New Roman',serif; --sans:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--onyx); color:var(--plat); font-family:var(--sans); font-weight:300; line-height:1.75; -webkit-font-smoothing:antialiased;}
::selection{background:var(--gold); color:var(--onyx);}
img{display:block; max-width:100%; height:auto;}
a{color:inherit;}
p{margin:0 0 1.1em;}
strong{color:#fff; font-weight:500;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--gold); color:var(--onyx); padding:8px 14px; font-weight:600;}
.skip:focus{left:8px;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
::-webkit-scrollbar{width:4px;} ::-webkit-scrollbar-track{background:var(--onyx);} ::-webkit-scrollbar-thumb{background:#2A2A2E; border-radius:4px;}
.noise{position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* --- estructura: identidad fija + contenido --- */
.shell{max-width:1800px; margin:0 auto; display:grid; grid-template-columns:minmax(340px,36%) 1fr; position:relative; z-index:1;}
.id-panel{position:sticky; top:0; height:100vh; overflow-y:auto; padding:56px 56px 40px; display:flex; flex-direction:column; justify-content:space-between; gap:32px; border-right:1px solid var(--line); background:var(--onyx);}
.id-photo{display:block; width:96px; height:96px; border-radius:50%; overflow:hidden; border:1px solid rgba(197,160,89,.45); margin-bottom:36px;}
.id-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 25%;}
.id-name{font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,3.2vw,3.1rem); line-height:1.12; letter-spacing:-.01em; color:#fff; margin:0 0 14px;}
.id-name a{text-decoration:none;}
.id-role{font-size:.68rem; text-transform:uppercase; letter-spacing:.3em; color:var(--gold); font-weight:600; line-height:1.9; margin:0 0 24px;}
.id-blurb{font-size:.9rem; color:var(--dim); max-width:26rem; margin:0 0 40px;}
.index{display:flex; flex-direction:column; gap:20px;}
.index a{display:flex; align-items:center; gap:14px; text-decoration:none; font-size:.74rem; text-transform:uppercase; letter-spacing:.2em; color:var(--dim); transition:color .3s;}
.index .rule{display:block; width:16px; height:1px; background:rgba(229,228,226,.3); transition:width .3s, background .3s;}
.index .num{font-family:var(--serif); letter-spacing:.05em;}
.index a:hover,.index a.on{color:var(--gold);}
.index a:hover .rule,.index a.on .rule{width:34px; background:var(--gold);}
.langs{display:flex; gap:18px; margin-bottom:14px;}
.langs a{font-family:var(--serif); font-size:.8rem; letter-spacing:.18em; text-decoration:none; color:var(--dim); padding-bottom:4px; border-bottom:1px solid transparent;}
.langs a:hover{color:var(--plat);}
.langs a.on{color:var(--gold); border-bottom-color:var(--gold);}
.id-foot{font-size:.62rem; text-transform:uppercase; letter-spacing:.2em; color:var(--dim); margin:0;}

.content{position:relative; padding:96px clamp(32px,5vw,96px) 40px; min-width:0;}
.glow{position:absolute; top:0; right:0; width:min(500px,80%); height:500px; background:rgba(197,160,89,.06); filter:blur(120px); border-radius:50%; pointer-events:none;}
main{position:relative;}

/* --- secciones --- */
.sec{margin-bottom:128px;}
.page-head{margin-bottom:56px;}
.sec-head{display:flex; align-items:center; gap:16px; margin-bottom:36px;}
.sec-n{font-family:var(--serif); font-style:italic; color:var(--gold); font-size:.9rem;}
.sec-line{display:block; width:50px; height:1px; background:var(--gline);}
.sec-label{font-size:.66rem; text-transform:uppercase; letter-spacing:.24em; color:var(--muted);}
.display{font-family:var(--serif); font-weight:500; color:#fff; font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.1; letter-spacing:-.01em; margin:0 0 36px;}
.display em{color:var(--gold); font-weight:400; font-style:italic;}
.display.small{font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:20px;}
.h2{font-family:var(--serif); font-weight:500; color:#fff; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.25; margin:0 0 18px;}
.sub-h{font-size:.7rem; text-transform:uppercase; letter-spacing:.24em; color:var(--gold); font-weight:600; margin:40px 0 18px;}
.sub-h:first-of-type{margin-top:0;}
.lede{color:var(--muted); max-width:44rem; font-size:1rem;}
.when{font-size:.66rem; text-transform:uppercase; letter-spacing:.24em; color:var(--gold); font-weight:600; margin:0 0 8px;}
.link-more{display:inline-block; margin-top:28px; font-size:.72rem; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); text-decoration:none; border-bottom:1px solid var(--gline); padding-bottom:4px;}
.link-more:hover{color:var(--gold-hi); border-color:var(--gold);}

.phil-grid{display:grid; grid-template-columns:minmax(0,1fr) clamp(240px,22vw,320px); gap:clamp(32px,4vw,64px); align-items:start;}
.cols{color:var(--muted); line-height:1.9; max-width:40rem;}
.cols blockquote{margin-top:6px;}
blockquote{margin:0; padding-left:18px; border-left:1px solid var(--gline); font-style:italic; color:var(--dim);}
.portrait{margin:0; border:1px solid var(--gline); padding:10px; position:relative;}
.portrait img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 18%; filter:saturate(.85);}

.stack{display:flex; flex-direction:column; gap:20px;}
.glass{display:block; background:rgba(18,18,21,.45); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--line); padding:36px 40px; transition:background .4s, border-color .4s; text-decoration:none;}
.glass:hover{background:rgba(18,18,21,.85); border-color:var(--gline);}
.glass-top{border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px;}
.glass h2,.glass h3{font-family:var(--serif); font-weight:500; color:#fff; font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.25; margin:0; transition:color .3s;}
.glass:hover h2,.glass:hover h3{color:var(--gold-hi);}
.org{color:var(--plat); font-weight:500; font-size:.92rem; margin:8px 0 0;}
.glass > p,.glass p:last-child{color:var(--muted); font-size:.93rem; max-width:38rem; margin-bottom:0;}

.book-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:32px;}
.book-card{display:block; text-decoration:none; border:1px solid var(--line); background:rgba(18,18,21,.45); padding:14px 14px 18px; transition:border-color .3s, transform .3s;}
.book-card:hover{border-color:var(--gline); transform:translateY(-3px);}
.book-card .cover{width:100%; margin-bottom:14px;}
.bk-n{font-family:var(--serif); color:var(--gold); font-size:.8rem;}
.book-card h3{font-family:var(--serif); font-weight:500; color:#fff; font-size:1rem; line-height:1.3; margin:4px 0 6px;}
.book-card p{font-size:.8rem; color:var(--dim); line-height:1.55; margin:0;}

.init-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px;}
.init{display:flex; flex-direction:column; gap:16px; padding:26px 28px;}
.init-top{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.init-name{font-size:.66rem; text-transform:uppercase; letter-spacing:.2em; color:var(--muted);}
.init-ext{color:var(--dim); transition:color .3s;}
.init:hover .init-ext{color:var(--gold);}
.init img{height:24px; width:auto; opacity:.9; object-fit:contain; object-position:left;}
.init-p{font-size:.84rem; color:var(--muted); line-height:1.65;}

.off-grid{display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:center;}
.off-photo,.wide-photo{margin:0;}
.off-photo img{width:100%; border:1px solid var(--line);}
.off-photo figcaption{font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:var(--dim); margin-top:12px;}
.wide-photo{margin-bottom:28px; border:1px solid var(--gline); padding:10px;}
.wide-photo img{width:100%; aspect-ratio:16/7; object-fit:cover; object-position:50% 22%;}

.facts{margin:0 0 36px; border-top:1px solid var(--line);}
.fact{display:grid; grid-template-columns:200px 1fr; gap:24px; padding:16px 0; border-bottom:1px solid var(--line);}
.fact dt{font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); font-weight:600; padding-top:4px;}
.fact dd{margin:0; color:var(--plat); font-size:.95rem;}

.btn{display:inline-block; border:1px solid var(--gold); color:var(--gold); background:transparent; padding:14px 30px; font-family:var(--sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.24em; font-weight:600; text-decoration:none; cursor:pointer; transition:background .5s, color .5s;}
.btn:hover{background:var(--gold); color:var(--onyx);}

.book{display:grid; grid-template-columns:200px 1fr; gap:36px; align-items:start; scroll-margin-top:40px;}
.book .cover{width:100%;}
.book h2{margin-bottom:0;}
.book > div > p:not(.when):not(.org):not(.parts-h){color:var(--muted); font-size:.95rem; margin-top:16px;}
.parts-h{font-size:.66rem; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); font-weight:600; margin:18px 0 8px;}
.parts{margin:0; padding-left:20px; color:var(--muted); font-size:.9rem;}

.contact-box{position:relative; border:1px solid rgba(255,255,255,.1); background:rgba(18,18,21,.25); padding:clamp(28px,5vw,64px); overflow:hidden;}
.corner{position:absolute; width:110px; height:110px; margin:16px; opacity:.6; pointer-events:none;}
.corner.tr{top:0; right:0; border-top:1px solid var(--gline); border-right:1px solid var(--gline);}
.corner.bl{bottom:0; left:0; border-bottom:1px solid var(--gline); border-left:1px solid var(--gline);}
.contact-grid{position:relative; display:grid; grid-template-columns:2fr 3fr; gap:56px;}
.c-val{margin:0 0 22px; color:var(--plat);}
.c-val a{color:var(--plat); text-decoration:underline; text-decoration-color:var(--gline); text-underline-offset:4px;}
.c-val a:hover{color:var(--gold);}
.exec-form{display:flex; flex-direction:column; gap:30px;}
.exec-form .two{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.exec-form label{display:block; font-size:.64rem; text-transform:uppercase; letter-spacing:.22em; color:var(--muted);}
.exec{width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.25); color:var(--plat); padding:10px 0; font-family:var(--serif); font-size:1.05rem; border-radius:0; transition:border-color .3s;}
.exec:focus{outline:none; border-bottom-color:var(--gold);}
select.exec{-webkit-appearance:none; appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,#C5A059 50%),linear-gradient(135deg,#C5A059 50%,transparent 50%); background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%; background-size:5px 5px; background-repeat:no-repeat;}
select.exec option{background:var(--char); color:var(--plat); font-family:var(--sans);}
textarea.exec{resize:vertical; font-family:var(--sans); font-size:.98rem;}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--muted);}
.consent label{font-size:.85rem; text-transform:none; letter-spacing:0; color:var(--muted);}
.consent input{margin-top:5px; accent-color:var(--gold); flex-shrink:0;}
.consent a,.legal a{color:var(--gold); text-underline-offset:3px;}
.send-row{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.note{font-size:.62rem; text-transform:uppercase; letter-spacing:.2em; color:var(--dim);}

.legal{max-width:46rem;}
.legal h2{font-family:var(--serif); font-weight:500; color:#fff; font-size:1.2rem; margin:34px 0 8px;}
.legal p{color:var(--muted);}

.site-foot{border-top:1px solid var(--line); padding-top:30px; width:100%;}
.foot-row{display:flex; justify-content:space-between; align-items:center; gap:16px 32px; flex-wrap:wrap; margin-bottom:14px;}
.foot-c{font-size:.64rem; text-transform:uppercase; letter-spacing:.2em; color:var(--dim); margin:0;}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 22px; margin:0;}
.foot-links a{font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted); text-decoration:none;}
.foot-links a:hover{color:var(--gold);}
.fine{font-size:.74rem; color:var(--dim); margin:6px 0 0;}
.site-foot .kc-foot{font-size:.74rem; color:var(--dim); margin:10px 0 0;}
.nf .lede a{color:var(--gold);}
.nf .btn{margin:6px 0 26px;}

/* --- animacion del entregable, solo con JS y sin reduced-motion --- */
.js .fade-up{opacity:0; transform:translateY(30px); transition:opacity 1s ease-out, transform 1s cubic-bezier(.16,1,.3,1);}
.js .fade-up.visible{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .js .fade-up{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }

/* --- responsive: la columna fija pasa arriba y el indice se pone en fila --- */
@media (max-width:1180px){
  .phil-grid{grid-template-columns:1fr;}
  .portrait{max-width:360px;}
  .book-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1023px){
  .shell{grid-template-columns:1fr;}
  .id-panel{position:static; height:auto; overflow:visible; padding:36px 24px 28px; border-right:0; border-bottom:1px solid var(--line); gap:22px;}
  .id-top{display:grid; grid-template-columns:auto 1fr; column-gap:20px; align-items:center;}
  .id-photo{width:72px; height:72px; margin:0; grid-row:span 2;}
  .id-name{font-size:1.9rem; margin:0;}
  .id-role{margin:6px 0 0; letter-spacing:.22em;}
  .id-blurb{grid-column:1 / -1; margin:20px 0 22px; max-width:none;}
  .index{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; gap:12px 22px;}
  .index .rule{width:10px;}
  .index a:hover .rule,.index a.on .rule{width:20px;}
  .id-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
  .langs{margin:0;}
  .content{padding:56px 24px 32px;}
  .sec{margin-bottom:88px;}
  .off-grid,.contact-grid{grid-template-columns:1fr; gap:36px;}
  .off-photo{max-width:420px;}
}
@media (max-width:640px){
  .init-grid,.exec-form .two{grid-template-columns:1fr; gap:22px;}
  .glass{padding:26px 22px;}
  .book{grid-template-columns:1fr; gap:22px;}
  .book .cover{max-width:200px;}
  .fact{grid-template-columns:1fr; gap:4px;}
  .content{padding:44px 16px 28px;}
  .id-panel{padding:28px 16px 24px;}
  .wide-photo img{aspect-ratio:4/3;}
}
@media (max-width:420px){ .book-grid{grid-template-columns:1fr; max-width:300px;} }
