/* Irrational Lab — site styles
   Tipografías: Proxima Nova (Adobe Fonts, familia "proxima-nova") con Montserrat de respaldo.
   Display v3: Unbounded (Google Fonts), extendida como la propuesta de marca; Aktiv Grotesk de respaldo. Serif acento: Instrument Serif. Etiquetas: JetBrains Mono. */
:root{
  --ink:#0a0a0a; --ink-2:#141414; --ink-3:#1e1e1e;
  --paper:#efeeea; --paper-2:#e4e2dc;
  --white:#f6f5f1; --mute:#8d8a84; --mute-d:#5f5c57; --line-d:#2a2a2a; --line-l:#cfccc5;
  --red:#e0412f;
  --sans:'proxima-nova','Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Unbounded','aktiv-grotesk','proxima-nova',system-ui,sans-serif;
  --wide:'Unbounded','aktiv-grotesk',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --wrap:1240px; --gut:clamp(18px,4vw,48px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* grano de película sobre todo el sitio */
body::after{content:"";position:fixed;inset:-50%;z-index:100;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.label{font-family:var(--wide);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:10px}
.label .star{width:12px;height:12px;flex:none}
.label.red{color:var(--red)}
.bin{font-family:var(--mono);font-size:10.5px;color:var(--red);letter-spacing:.08em;opacity:.85}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
.display{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.02}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
p{margin:0}
.lead{font-size:clamp(17px,1.6vw,20px);color:#c9c6bf;max-width:58ch}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(10,10,10,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-d)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.nav .logo img{height:34px;width:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px}
.nav ul a{text-decoration:none;font-family:var(--wide);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#cfcbc4}
.nav ul a:hover{color:#fff}
.nav .right{display:flex;align-items:center;gap:14px}
.lang{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-decoration:none;color:var(--mute);border:1px solid var(--line-d);padding:6px 9px}
.lang:hover{color:#fff;border-color:#555}
@media (max-width:900px){.nav ul{display:none}}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:15px;text-decoration:none;padding:14px 22px;border:1px solid var(--white);color:var(--ink);background:var(--white);transition:background .2s,color .2s,border-color .2s;cursor:pointer}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent;color:var(--white);border-color:#4a4a4a}
.btn.ghost:hover{border-color:var(--white);background:transparent}
.btn.sm{padding:9px 14px;font-size:13.5px}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}
.light .btn{background:var(--ink);color:var(--white);border-color:var(--ink)}
.light .btn:hover{background:var(--red);border-color:var(--red)}
.light .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-l)}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(56px,9vw,110px) clamp(56px,8vw,96px);overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:960px){.hero .grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(34px,4.9vw,68px);margin-top:22px}
.hero h1 .serif{font-size:1.08em;color:#fff}
.hero .lead{margin-top:24px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero .rays{position:absolute;right:-120px;top:-120px;width:560px;opacity:.14;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.spin{animation:spin 60s linear infinite}.spin.slow{animation-duration:120s}}
@keyframes spin{to{transform:rotate(360deg)}}

.video{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;border:1px solid var(--line-d);overflow:hidden}
.video button{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.video img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05);transition:transform .6s,filter .6s}
.video:hover img{transform:scale(1.03);filter:none}
.video .play{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.video .play i{width:54px;height:54px;border-radius:50%;background:var(--white);display:grid;place-items:center}
.video .play i::before{content:"";border-left:14px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cap{display:flex;justify-content:space-between;gap:12px;margin-top:10px}

/* ---------- logos ---------- */
.logos{border-block:1px solid var(--line-d);padding-block:28px;overflow:hidden}
.logos .track{display:flex;gap:56px;align-items:center;width:max-content}
@media (prefers-reduced-motion:no-preference){.logos .track{animation:marquee 40s linear infinite}}
@keyframes marquee{to{transform:translateX(-50%)}}
.logos img{height:34px;width:auto;opacity:.72;filter:grayscale(1) brightness(1.4)}
.logos .word{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em;opacity:.8;white-space:nowrap}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding-block:clamp(72px,10vw,128px)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}
.sec-head h2{font-size:clamp(28px,3.6vw,48px);margin-top:16px}
.light{background:var(--paper);color:var(--ink)}
.light .lead{color:#48453f}
.light .label{color:var(--mute-d)}

/* para quién */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l)}
@media (max-width:860px){.who{grid-template-columns:1fr}}
.who article{background:var(--paper);padding:30px 28px 34px}
.who h3{font-size:22px;margin-top:40px}
.who p{margin-top:10px;color:#48453f;font-size:16px}
.who .n{font-family:var(--mono);font-size:12px;color:var(--red)}

/* casos */
.cases{display:grid;gap:20px}
.case{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;border-top:1px solid var(--line-d);padding-top:28px;text-decoration:none}
.case:nth-child(even) .case-media{order:-1}
@media (max-width:860px){.case{grid-template-columns:1fr}.case:nth-child(even) .case-media{order:0}}
.case .big{font-family:var(--display);font-weight:700;font-size:clamp(60px,9vw,128px);line-height:.9;letter-spacing:-.03em}
.case .big small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:12px;font-weight:400}
.case h3{font-size:clamp(24px,2.6vw,32px);margin-top:26px}
.case p{color:#bdb9b1;margin-top:10px;max-width:52ch}
.case .more{display:inline-flex;gap:8px;margin-top:20px;font-weight:600;font-size:15px;border-bottom:1px solid var(--red);padding-bottom:3px}
.case-media{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.case-media img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-d)}
.case-media img:first-child{grid-column:1/3}
.case:hover .more{color:var(--red)}

/* servicios */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0;border-top:1px solid var(--line-l)}
.svc{padding:28px 24px 34px 0;border-bottom:1px solid var(--line-l);margin-right:24px}
.svc .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.svc h3{font-size:24px;margin-top:14px}
.svc p{margin-top:10px;color:#48453f;font-size:16px}
.svc ul{margin:14px 0 0;padding:0;list-style:none;font-size:15px;color:#2d2b27}
.svc li{padding:6px 0;border-top:1px dashed var(--line-l)}

/* proceso */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:s}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{border-top:2px solid var(--red);padding-top:16px}
.step .n{font-family:var(--mono);font-size:12px;color:var(--mute)}
.step h3{font-size:20px;margin-top:10px}
.step p{margin-top:8px;color:#bdb9b1;font-size:15.5px}
.owned{margin-top:48px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;border:1px solid var(--line-d);padding:26px 28px}
.owned img{width:84px;opacity:.9}
.owned h3{font-size:22px}
.owned p{color:#bdb9b1;margin-top:6px}
@media (max-width:560px){.owned{grid-template-columns:1fr}}

/* testimonios */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}
.q{background:var(--paper-2);padding:30px 30px 26px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.q blockquote{margin:0;font-size:18px;line-height:1.55;color:#1f1e1b}
.q blockquote::before{content:"“";font-family:var(--serif);font-size:64px;line-height:.4;display:block;color:var(--red);margin-bottom:18px}
.q .who-q{display:flex;align-items:center;gap:14px}
.q img{width:48px;height:48px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.q b{display:block;font-size:15.5px}
.q span{font-size:13.5px;color:var(--mute-d)}

/* sobre */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.about{grid-template-columns:1fr}}
.about .photo{position:relative}
.about .photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;filter:grayscale(.15)}
.about .photo .tag{position:absolute;left:14px;bottom:14px;background:var(--ink);padding:8px 12px}
.about h2{font-size:clamp(32px,4vw,52px);margin-top:16px}
.about p{margin-top:16px;color:#c9c6bf;max-width:60ch}
.about .quote{margin-top:28px;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,32px);line-height:1.2;color:#fff;border-left:2px solid var(--red);padding-left:18px}
.about .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;border-top:1px solid var(--line-d);padding-top:20px}
.about .facts b{display:block;font-family:var(--display);font-weight:600;font-size:28px}
.about .facts span{font-size:13.5px;color:var(--mute)}

/* faq */
.faq{border-top:1px solid var(--line-l)}
.faq details{border-bottom:1px solid var(--line-l);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-size:19px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;color:var(--red);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:#48453f;max-width:72ch}

/* cta */
.cta{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:860px){.cta{grid-template-columns:1fr}}
.cta h2{font-size:clamp(32px,4.6vw,62px)}
.cta .lead{margin-top:20px}
.cta .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cta .contact{margin-top:28px;display:grid;gap:6px;font-size:15px;color:#bdb9b1}
.cta .contact a{text-decoration:none;border-bottom:1px solid var(--line-d)}


/* footer */
footer{border-top:1px solid var(--line-d);padding-block:36px 48px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
footer img{height:30px;width:auto}
footer p{font-size:13px;color:var(--mute)}

/* case pages */
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.crumb:hover{color:#fff}
.c-hero h1{font-size:clamp(36px,5vw,70px);margin-top:18px}
.c-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line-d);border:1px solid var(--line-d);margin-top:44px}
.c-stats div{background:var(--ink);padding:22px 22px}
.c-stats b{display:block;font-family:var(--display);font-size:clamp(34px,4vw,50px);line-height:1}
.c-stats span{display:block;margin-top:8px;font-size:13.5px;color:var(--mute)}
.c-body{display:grid;grid-template-columns:260px 1fr;gap:clamp(24px,5vw,64px)}
@media (max-width:860px){.c-body{grid-template-columns:1fr}}
.c-body h2{font-size:26px}
.c-body p{margin-top:12px;color:#48453f;max-width:66ch}
.c-body ul{margin:14px 0 0;padding-left:18px;color:#2d2b27}
.c-body li{margin:6px 0}
.c-block + .c-block{margin-top:44px;padding-top:36px;border-top:1px solid var(--line-l)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.gallery a{text-decoration:none}
.gallery img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-d)}
.gallery span{display:block;font-size:14px;color:#bdb9b1;margin-top:8px}
.chart{margin-top:10px}
.chart svg{width:100%;height:auto}

/* reveal */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}
    .logo-in{animation:blurin 1.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes blurin{from{filter:blur(12px);opacity:0;transform:translateX(-12px)}to{filter:none;opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= v3 ================= */
/* cursor estrella */
@media (pointer:fine){
  html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6f5f1' stroke='%230a0a0a' stroke-width='.8' d='M12 1C12.8 7.6 16.4 11.2 23 12 16.4 12.8 12.8 16.4 12 23 11.2 16.4 7.6 12.8 1 12 7.6 11.2 11.2 7.6 12 1Z'/%3E%3C/svg%3E") 13 13, auto}
  a,button,summary,.video button,label{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath fill='%23e0412f' stroke='%23f6f5f1' stroke-width='.8' d='M12 1C12.8 7.6 16.4 11.2 23 12 16.4 12.8 12.8 16.4 12 23 11.2 16.4 7.6 12.8 1 12 7.6 11.2 11.2 7.6 12 1Z'/%3E%3C/svg%3E") 15 15, pointer}
}
.lead{font-weight:400}
.serif{font-family:var(--serif)!important}
.hero h1 .serif{font-weight:400;letter-spacing:0}

/* etiqueta vertical (como la propuesta) */
.side{position:relative}
.vlab{position:absolute;left:calc(var(--gut) - 58px);top:6px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--wide);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;display:flex;gap:12px;align-items:center;border-left:1px solid currentColor;padding-left:10px;height:200px;opacity:.7}
.vlab em{font-style:normal;color:var(--red)}
@media (max-width:1400px){.side>.vlab{display:none}}

/* sello circular que gira */
.badge{position:absolute;width:132px;height:132px;display:grid;place-items:center;text-decoration:none;color:var(--white);z-index:3}
.badge svg{overflow:visible}
.badge text{font-family:var(--wide);font-size:13.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;fill:currentColor}
.badge .star{width:26px;height:26px;color:var(--red);transition:transform .4s}
.badge:hover .star{transform:rotate(90deg) scale(1.2)}
@media (prefers-reduced-motion:no-preference){.badge svg{animation:spin 18s linear infinite}}
.hero-media{position:relative}
.hero-badge{right:-34px;bottom:-40px;background:rgba(10,10,10,.6);border-radius:50%;backdrop-filter:blur(4px)}
@media (max-width:960px){.hero-badge{right:8px;bottom:-54px;width:112px;height:112px}}

/* esfera de líneas */
.globe{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.35;overflow:visible}
@media (prefers-reduced-motion:no-preference){.globe .spinY{transform-origin:50px 50px;animation:globe 9s linear infinite}}
@keyframes globe{to{transform:rotateY(360deg)}}

/* casos destacados */
.feats{display:grid;gap:clamp(70px,9vw,120px)}
.feat{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:end}
.feat .vlab{left:-58px;top:0}
@media (max-width:1400px){.feat .vlab{display:none}}
.feat-media{grid-column:1/13;grid-row:1;position:relative;display:block;overflow:hidden;border:1px solid var(--line-d);text-decoration:none;aspect-ratio:16/8}
.feat-media>img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:transform 1s,filter .6s}
.feat-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.85),rgba(10,10,10,.15) 55%,rgba(10,10,10,.2))}
.feat-media:hover>img{transform:scale(1.03);filter:none}
.feat-title{position:absolute;left:clamp(20px,4vw,48px);top:clamp(20px,4vw,44px);z-index:2}
.feat-title .big{font-family:var(--display);font-weight:600;font-size:clamp(54px,8vw,120px);line-height:.9;letter-spacing:-.04em}
.feat-title small{display:block;font-family:var(--wide);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#d8d4cc;margin-top:12px;max-width:30ch;line-height:1.5}
.feat-side{position:absolute;right:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);display:grid;gap:10px;width:26%;z-index:2}
.feat-side img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(255,255,255,.25)}
.feat-box{grid-column:2/8;grid-row:2;margin-top:-90px;position:relative;z-index:3;background:var(--white);color:var(--ink);padding:clamp(22px,3vw,34px)}
.feat:nth-child(even) .feat-box{grid-column:6/12}
.feat-box h3{font-size:clamp(24px,2.6vw,34px);margin-top:14px}
.feat-box .short{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--red);margin-top:6px}
.feat-box p{color:#48453f;margin-top:10px;font-size:16px}
.feat-box .label{color:var(--red)}
@media (max-width:860px){.feat-media{aspect-ratio:4/3}.feat-side{display:none}.feat-box,.feat:nth-child(even) .feat-box{grid-column:1/13;margin-top:-40px;margin-inline:12px}}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tags span{font-family:var(--wide);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor;padding:5px 9px;opacity:.75}
.oval{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:12px 24px;border:1px solid currentColor;border-radius:999px;font-family:var(--wide);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.oval:hover,a:hover .oval{background:var(--red);border-color:var(--red);color:#fff}
.oval span{transition:transform .2s}.oval:hover span{transform:translateX(4px)}

/* servicios (lista tipo road map) */
.sec-rays{position:absolute;right:-200px;top:60px;width:520px;opacity:.07;pointer-events:none;filter:invert(1)}
.svcs{border-top:1px solid var(--ink)}
.svc{border-bottom:1px solid var(--line-l)}
.svc summary{list-style:none;display:grid;grid-template-columns:60px 150px 1fr 40px;gap:18px;align-items:center;padding:24px 8px;transition:background .2s,padding .2s}
.svc summary::-webkit-details-marker{display:none}
.svc summary:hover{background:var(--paper-2);padding-left:18px}
.svc .n{font-family:var(--wide);font-size:11px;font-weight:600;color:var(--red)}
.svc .k{font-family:var(--wide);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-d)}
.svc h3{font-size:clamp(19px,2.2vw,28px);font-weight:500}
.svc .pm{width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;position:relative;justify-self:end;transition:transform .3s,background .2s}
.svc .pm::before,.svc .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.svc .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.svc[open] .pm{transform:rotate(45deg);background:var(--red);border-color:var(--red)}
.svc[open] .pm::before,.svc[open] .pm::after{background:#fff}
.svc-body{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,4vw,56px);padding:4px 8px 36px 86px}
.svc-body p{color:#48453f;font-size:17px;max-width:48ch}
.bul{list-style:none;margin:16px 0 0;padding:0}
.bul li{padding:9px 0 9px 24px;border-top:1px dashed var(--line-l);position:relative;font-size:15.5px}
.bul li::before{content:"✦";position:absolute;left:2px;color:var(--red);font-size:12px}
@media (max-width:860px){.svc summary{grid-template-columns:40px 1fr 34px}.svc .k{display:none}.svc-body{grid-template-columns:1fr;padding-left:8px}}
.lv-h{font-family:var(--wide);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-d);margin-bottom:10px}
.levels-w{border:1px solid var(--line-l);margin-bottom:22px}
.levels-w>.lv-h{background:var(--paper);margin:0;padding:12px 14px;border-bottom:1px solid var(--line-l);display:flex;justify-content:space-between;gap:10px}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-l)}
.swipe{display:none;color:var(--red)}
.lv{background:var(--paper);padding:14px}
.lv b{font-family:var(--display);font-weight:600;font-size:16px}
.lv span{display:block;font-size:13px;color:var(--mute-d);margin-top:4px}
.lv ul{margin:10px 0 0;padding-left:16px;font-size:13.5px;color:#2d2b27}
.lv li{margin:3px 0}
@media (max-width:640px){
  .levels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .levels::-webkit-scrollbar{display:none}
  .lv{flex:0 0 84%;scroll-snap-align:start}
  .swipe{display:inline}
}
.exs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.exs .lv-h{width:100%;margin:0 0 2px}
.ex{display:inline-flex;gap:8px;align-items:center;padding:10px 14px;border:1px solid var(--ink);font-size:14px;font-weight:600;text-decoration:none;background:var(--white);color:var(--ink);transition:background .2s,color .2s}
.ex:hover{background:var(--ink);color:#fff}
.ex span{color:var(--red)}
.ex.soon{border-style:dashed;border-color:#b3afa7;color:var(--mute-d);background:transparent;font-weight:500}
.ex.soon .star{width:11px;height:11px;color:var(--red)}
section:not(.light) .ex{background:transparent;color:var(--white);border-color:#555}
section:not(.light) .ex:hover{background:var(--white);color:var(--ink)}

/* proceso */
.owned img{width:92px}

/* marcas */
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l)}
.lg{background:var(--paper);display:grid;place-items:center;padding:28px 18px;min-height:110px;transition:background .3s}
.lg img{max-height:36px;width:auto;filter:grayscale(1) brightness(.2);opacity:.75;transition:opacity .3s,transform .3s}
.lg .word{font-family:var(--display);font-weight:600;font-size:15px;text-align:center;opacity:.8}
.lg:hover{background:var(--white)}.lg:hover img{opacity:1;transform:scale(1.06)}
@media (max-width:860px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
.own{margin-top:clamp(60px,8vw,100px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:960px){.own{grid-template-columns:1fr}}
.own-h h2{font-size:clamp(26px,3vw,40px);margin-top:14px}
.own-h .lead{margin-top:14px}
.own-cards{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
@media (max-width:640px){.own-cards{grid-template-columns:1fr}}
.own-card{background:var(--ink);color:var(--white);text-decoration:none;display:flex;flex-direction:column;overflow:hidden;position:relative}
.own-card>img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.3);transition:filter .5s,transform .8s}
.own-card:hover>img{filter:none;transform:scale(1.03)}
.own-in{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.own-in .label{color:#bdb9b1;line-height:1.5}
.own-in h3{font-size:26px;margin-top:12px}
.own-in p{color:#bdb9b1;font-size:15px;margin-top:8px}
.own-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;border-top:1px solid var(--line-d);padding-top:14px}
.own-stats b{display:block;font-family:var(--display);font-weight:600;font-size:26px}
.own-stats span{font-size:12.5px;color:var(--mute)}
.live{display:flex;align-items:center;gap:8px;font-family:var(--wide);font-size:9.5px!important;letter-spacing:.14em;text-transform:uppercase;margin-top:14px!important;color:var(--mute)!important}
.live i{width:7px;height:7px;border-radius:50%;background:#555}
.live.on i{background:#39c07f;box-shadow:0 0 0 4px rgba(57,192,127,.18)}
.oval.dark{align-self:flex-start;color:var(--white)}
.own-card.next{border:1px dashed #b3afa7;background:transparent;color:var(--ink);justify-content:flex-end}
.own-card.next .globe{position:absolute;right:-30px;top:-30px;width:180px;height:180px;color:var(--ink);opacity:.35}
.own-card.next .own-in .label{color:var(--mute-d)}
.own-card.next p{color:#48453f}
.own-card.next h3{font-size:54px;font-weight:300;color:var(--red)}

/* testimonios sobre fondo negro */
section:not(.light) .q{background:var(--ink-2);border:1px solid var(--line-d)}
section:not(.light) .q blockquote{color:#e8e5de}
section:not(.light) .q span{color:var(--mute)}

/* sobre */
.light .about p{color:#48453f}
.light .about .quote{color:var(--ink)}
.light .about .facts{border-top-color:var(--line-l)}
.about .photo .tag{font-family:var(--wide);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.about h2{font-size:clamp(28px,3.4vw,46px)}

/* cta */
.cta-sec{overflow:hidden}
.cta-rays{position:absolute;left:-220px;bottom:-220px;width:620px;opacity:.1;pointer-events:none}
.cta .contact{grid-template-columns:auto;font-size:15px}
.cta .contact span{font-family:var(--wide);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.cta .contact a{font-size:20px;color:var(--white);width:max-content}
.cta-photo{position:relative}
.cta-photo img{width:100%;aspect-ratio:4/4.6;object-fit:cover;object-position:50% 35%;border:1px solid var(--line-d)}
.cta-badge{left:-50px;top:44%;background:rgba(10,10,10,.75);border-radius:50%}
@media (max-width:860px){.cta-badge{left:auto;right:10px;top:-40px;width:110px;height:110px}}

/* casos: página */
.c-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:end}
@media (max-width:900px){.c-top{grid-template-columns:1fr}}
.c-short{font-size:clamp(24px,2.6vw,34px);color:var(--red);margin-top:10px;font-style:italic}
.c-cover{position:relative}
.c-cover img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line-d)}
.c-cover .tag{position:absolute;left:12px;bottom:12px;background:var(--ink);padding:7px 11px;font-family:var(--wide);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.c-stats b{font-weight:600;font-size:clamp(28px,3.4vw,44px)}
.note{margin-top:12px;color:var(--mute);font-family:var(--wide);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
ol.did{counter-reset:d;list-style:none;padding:0;margin:16px 0 0}
ol.did li{counter-increment:d;position:relative;padding:12px 0 12px 46px;border-top:1px solid var(--line-l);margin:0}
ol.did li::before{content:counter(d,decimal-leading-zero);position:absolute;left:0;top:12px;font-family:var(--wide);font-size:11px;font-weight:600;color:var(--red)}
.c-body h2{font-size:22px}
.gallery span{font-size:14px}
html,body{overflow-x:clip}
#servicios,#services{overflow:hidden}
img{height:auto}
.badge text{font-size:12px;letter-spacing:.08em}
.feat-media::after{background:linear-gradient(90deg,rgba(10,10,10,.92),rgba(10,10,10,.45) 50%,rgba(10,10,10,.25))}
.badge>svg:first-child{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.badge>.star{position:relative;inset:auto;width:26px;height:26px}
.own-card.next .globe{width:140px;height:140px;right:-20px;top:-20px;opacity:.22}

/* ================= v4 · texturas y brillos del Figma "IL / Irrational Lab Web" ================= */
/* textura de polvo y grano: oscura en secciones negras, invertida en las claras */
.tex{position:relative;isolation:isolate}
.tex::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../img/tex-dark.webp) 0 0/1024px 1024px repeat;mix-blend-mode:screen;opacity:.5}
.light.tex::before,.man.tex::before{background-image:url(../img/tex-light.webp);background-position:300px 500px;mix-blend-mode:multiply;opacity:.3}
.hero.tex::before{opacity:.7}

/* brillos flotantes */
.glow{position:absolute;pointer-events:none;z-index:0;height:auto;user-select:none}
.tex>.wrap{position:relative;z-index:1}
.g-hero1{width:110px;left:-38px;top:64%;opacity:.5}
.g-hero2{width:64px;left:47%;top:12%;opacity:.8}
.g-proc{width:170px;right:6%;top:70px;opacity:.35}
.g-q{width:120px;right:9%;top:90px;opacity:.4}
.g-cta{width:90px;left:44%;top:18%;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .float{animation:floaty 9s ease-in-out infinite}
  .float.d2{animation-duration:11s;animation-delay:-3s}
  .float.d3{animation-duration:13s;animation-delay:-6s}
  @keyframes floaty{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0,-14px) rotate(18deg) scale(1.06)}}
}
@media (max-width:760px){.g-hero2,.g-q,.g-proc{display:none}.g-hero1{width:80px;top:auto;bottom:4%}.g-cta{left:auto;right:6%;top:6%}}

/* pincelada roja detrás de las palabras en serif */
.hero h1 .serif{position:relative;z-index:0;padding-inline:.08em;white-space:nowrap}
.hero h1 .serif::before{content:"";position:absolute;z-index:-1;left:-.12em;right:-.18em;top:.42em;height:.62em;background:var(--red);opacity:.9;
  -webkit-mask:url(../img/brush.webp) center/100% 100% no-repeat;mask:url(../img/brush.webp) center/100% 100% no-repeat}
@media (prefers-reduced-motion:no-preference){
  .hero h1 .serif::before{transform-origin:left center;animation:brush 1.1s .5s cubic-bezier(.7,0,.2,1) both}
  @keyframes brush{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.man h2 .serif{position:relative;z-index:0;white-space:nowrap}
.man h2 .serif::before{content:"";position:absolute;z-index:-1;left:-.1em;right:-.1em;top:.52em;height:.5em;background:var(--red);opacity:.85;
  -webkit-mask:url(../img/brush.webp) center/100% 100% no-repeat;mask:url(../img/brush.webp) center/100% 100% no-repeat}
@media (max-width:560px){.man h2{font-size:clamp(26px,8vw,34px)}}

/* manifiesto (fondo gris claro con polvo, como el Figma) */
.man{background:#e6e5e1;color:var(--ink);padding-block:clamp(80px,11vw,150px);overflow:hidden}
.man-in{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,5vw,72px);align-items:center}
.man-word{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--display);font-weight:700;font-size:clamp(46px,6vw,92px);letter-spacing:-.02em;line-height:.9;text-transform:uppercase;color:var(--ink)}
.man-body{position:relative;max-width:820px}
.man-curve{position:absolute;top:-58px;left:-10px;width:300px;height:auto;overflow:visible}
.man-curve text{font-family:var(--display);font-weight:600;font-size:21px;fill:var(--ink)}
.man h2{font-size:clamp(34px,4.6vw,64px);margin:18px 0 38px;line-height:1.06}
.man h2 .serif{font-size:1.08em}
.man-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:1px solid #c9c7c1;padding-top:26px}
.man-cols p{font-size:14.5px;line-height:1.6;color:#3b3a37}
.man-cols span{display:block;font-family:var(--wide);font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--red);margin-bottom:10px}
.man-sticker{position:relative;display:grid;place-items:center;width:170px;height:170px;text-decoration:none;color:var(--ink)}
.man-sticker img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 18px rgba(255,255,255,.9))}
.man-sticker span{position:relative;font-family:var(--display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em;transform:rotate(-12deg);text-align:center;line-height:1.05;max-width:9ch}
@media (prefers-reduced-motion:no-preference){.man-sticker img{animation:spin 40s linear infinite}.man-sticker:hover img{animation-duration:6s}}
.man-sticker:hover span{color:var(--red)}
.g-m1{width:360px;right:-60px;top:-80px;opacity:.9}
.g-m2{width:120px;left:30%;bottom:40px;opacity:.95}
.g-m3{width:150px;left:2%;top:40px;opacity:.9}
@media (max-width:900px){
  .man-in{grid-template-columns:1fr}
  .man-word{writing-mode:horizontal-tb;transform:none;font-size:clamp(40px,12vw,64px)}
  .man-cols{grid-template-columns:1fr;gap:18px}
  .man-sticker{justify-self:start;width:140px;height:140px}
  .man-curve{position:static;width:240px;margin-bottom:8px}
  .g-m1{width:220px}
}

/* v4.1 · insignia del hero fuera del video, logos ajustados */
.g-hero2{left:auto;right:47%;top:9%}
.logos img.l-guitarzoom{height:20px}
.logos img.l-brain{height:48px}
.logos img.l-pilot{height:28px}
.logos img.l-skillshare{height:40px}
.logos img.l-cma{height:36px}
.lg img.l-guitarzoom{max-height:24px}
.lg img.l-brain{max-height:58px}
.lg img.l-pilot{max-height:26px}
.lg img.l-skillshare{max-height:44px}
.logo-grid{grid-template-columns:repeat(7,1fr)}
.lg.you{text-decoration:none;font-family:var(--wide);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);text-align:center}
.lg.you:hover{background:var(--ink);color:#fff}
@media (max-width:1100px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:860px){.logo-grid{grid-template-columns:repeat(2,1fr)}}

/* v7 · caso CMA Exam Academy e índice de casos */
.all-cases{margin-top:40px;display:flex;justify-content:center}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ba-card{position:relative;text-decoration:none;display:block}
.ba-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-d)}
.ba-card.b img{filter:grayscale(.35) brightness(.85)}
.ba-tag{position:absolute;top:14px;left:14px;z-index:1;font-family:var(--wide);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:7px 11px;background:var(--ink);color:#fff;border:1px solid #444}
.ba-card.a .ba-tag{background:var(--red);border-color:var(--red)}
.ba-cap{display:block;font-size:14px;color:#bdb9b1;margin-top:10px}
.stills{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stills img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-l)}
.bts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bts img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bts img:first-child{grid-column:span 2;grid-row:span 2;height:100%}
.handoff{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px);align-items:center}
.handoff video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line-l);display:block}
.ci-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.ci-card{position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;border:1px solid var(--line-d);min-height:340px}
.ci-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:transform .6s,opacity .3s}
.ci-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.96) 20%,rgba(10,10,10,.35) 80%)}
.ci-card:hover>img{transform:scale(1.04);opacity:.7}
.ci-in{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px}
.ci-in h3{font-size:clamp(24px,2.6vw,34px);margin:10px 0 4px}
.ci-in p{color:#e8e5df;font-size:19px;margin-bottom:16px}
@media (max-width:760px){.ba,.ci-grid,.handoff{grid-template-columns:1fr}.stills,.bts{grid-template-columns:1fr 1fr}.bts img:first-child{grid-column:span 2;grid-row:auto;height:auto}}
.figma-board{width:100%;height:auto;border:1px solid var(--line-l);background:#e6e6e6}
.sec:not(.light) .stills img{border-color:var(--line-d)}

/* v9 · Skindion */
.main-video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line-d);display:block}
.guide{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.guide img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line-l)}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.photos img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.bts-video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;margin-bottom:12px;display:block}
.logo-grid{grid-template-columns:repeat(8,1fr)}
.logos img.l-skindion{height:26px}
.lg img.l-skindion{max-height:26px}
@media (max-width:1100px){.logo-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:860px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.guide,.photos{grid-template-columns:1fr 1fr}}
.courses{display:grid;gap:34px}
.course{display:grid;grid-template-columns:.8fr 2fr;gap:28px;align-items:start;border-top:1px solid var(--line-d);padding-top:26px}
.course-h .n{font-family:var(--wide);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.course-h h3{font-size:clamp(22px,2.2vw,30px);margin:10px 0 6px}
.course-h p{color:#cfcbc4;font-size:19px}
.course-h ul{margin:14px 0 0;padding-left:16px;color:#a9a59e;font-size:14px}
.course-g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.course-g img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-d)}
@media (max-width:860px){.course{grid-template-columns:1fr}}

/* v10.1 · Intro sin video (temporal): el texto ocupa el ancho y el sello "Agenda una llamada" queda a la derecha */
.hero--sin-video .grid{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.hero--sin-video .grid>div:first-child{max-width:920px}
.hero--sin-video .hero-media{width:132px;height:132px;margin-right:clamp(0px,4vw,48px)}
.hero--sin-video .hero-badge{right:0;bottom:0}
@media (max-width:960px){.hero--sin-video .hero-media{display:none}}
