/* Tipografías alojadas en el propio sitio (antes: Google Fonts) */
/* latin-ext */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bebas-neue-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/bebas-neue-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/chakra-petch-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/chakra-petch-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/onest-300-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../fonts/onest-300-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/space-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/space-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-mono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/space-mono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Paddy Records — estilos de la landing */
  :root{
    --bg:#070809; --panel:#0E1012; --panel-2:#14171A; --line:rgba(255,255,255,.07);
    --text:#ECEFF0; --muted:#8B9298; --dim:#5A6066;
    --green:#98E05F; --cyan:#0DE3AC; --ink:#04110C;
    --grad:linear-gradient(115deg,#98E05F 0%,#0DE3AC 100%);
    --edge:linear-gradient(150deg,rgba(13,227,172,.55),rgba(255,255,255,.07) 28%,rgba(255,255,255,.03) 70%,rgba(152,224,95,.35));
    --c:22px; --gutter:20px; --max:1200px;
    --mono:"Space Mono",ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--text);font:400 16px/1.6 Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  h1,h2,h3{font-weight:400;letter-spacing:-.03em;line-height:1.02}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative}
  section{padding:96px 0;position:relative}
  .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* Etiquetas técnicas */
  .mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .label{display:flex;align-items:center;gap:12px;margin-bottom:22px}
  .label .tag{color:var(--cyan);white-space:nowrap}
  .label>span:last-child{white-space:nowrap}
  @media (max-width:520px){.label .rule{display:none}}
  .label .rule{flex:0 0 46px;height:1px;background-image:linear-gradient(90deg,var(--dim) 50%,transparent 0);background-size:6px 1px}
  .h2{font-family:"Chakra Petch",Onest,sans-serif;font-weight:600;font-size:clamp(32px,6.6vw,58px);letter-spacing:-.025em;line-height:1.04}
  .lead{color:var(--muted);font-size:17px;max-width:540px;margin-top:18px;font-weight:300}

  /* Paneles con esquina cortada y borde luminoso */
  .panel{position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.02) 42%,rgba(255,255,255,.04));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,0,.85)}
  .cut{border-radius:6px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
  .panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--edge);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}
  .panel::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 0% 0%,rgba(13,227,172,.10),transparent 55%);pointer-events:none;z-index:0}
  .panel>*{position:relative;z-index:1}

  /* Botones */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 26px;font:500 15px Onest;border-radius:14px;position:relative}
  .btn-primary{background:var(--grad);color:var(--ink);box-shadow:0 10px 40px -10px rgba(13,227,172,.55)}
  .btn-ghost{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .btn svg{width:18px;height:18px}

  /* Fondo: planos del triángulo del logo + resplandor */
  .bg-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
  .bg-shapes svg{position:absolute}
  .glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}

  /* Nav */
  .nav{position:absolute;inset:0 0 auto;z-index:10;padding-top:14px}
  .nav .bar{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 10px 0 16px;border-radius:18px;background:rgba(14,16,18,.6);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  .logo{display:flex;align-items:center;gap:10px}
  .logo-mark{height:30px;width:auto}
  .logo-word{height:20px;width:auto}
  .nav-links{display:none;gap:30px}
  .nav-links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .nav-cta{display:flex;gap:8px;align-items:center}
  .nav-cta .btn{height:42px;padding:0 16px;font-size:14px;border-radius:11px}
  .burger{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center}
  .burger i{width:15px;height:1.5px;background:#fff;box-shadow:0 5px 0 #fff,0 -5px 0 #fff}

  /* Hero */
  .hero{padding:96px 0 72px;overflow:hidden;position:relative}
  .hero-grid{display:grid;gap:36px}
  .hero h1{font-family:"Bebas Neue",Onest,sans-serif;font-size:clamp(66px,18vw,106px);font-weight:400;letter-spacing:.005em;line-height:.9}
  .hero h1 b{font-weight:400}
  .hero p.sub{color:#B9BFC4;font-size:18px;font-weight:300;max-width:500px;margin:24px 0 32px}
  .ctas{display:flex;flex-direction:column;gap:12px}
  .specs-row{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid var(--line)}
  .specs-row div{padding:18px 0 0}
  .specs-row b{display:block;font:500 26px Onest;letter-spacing:-.02em}
  .specs-row span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

  .monitor{--c:28px;aspect-ratio:1/1.08}
  @media (min-width:900px){.monitor{aspect-ratio:4/5}}
  .monitor .shot{position:absolute;inset:1px;clip-path:inherit;background:#0b0c0e url(../img/estudio-sala.webp) center 40%/cover}
  .monitor .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,9,.55),transparent 22%,transparent 62%,rgba(7,8,9,.92))}
  .hud{position:absolute;inset:0;z-index:2;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(236,239,240,.85)}
  .hud-top,.hud-bot{display:flex;justify-content:space-between;align-items:center}
  .rec{display:flex;align-items:center;gap:8px}
  .rec i{width:8px;height:8px;border-radius:50%;background:#FF4D4D;box-shadow:0 0 12px #FF4D4D}
  .wave{display:flex;align-items:center;gap:3px;height:44px;margin-bottom:12px}
  .wave span{flex:1;border-radius:2px;background:var(--grad);opacity:.9}

  /* Servicios */
  .grid-services{display:grid;gap:14px;margin-top:48px}
  .svc{padding:28px 26px 26px;display:flex;flex-direction:column;gap:14px;min-height:100%}
  .svc-top{display:flex;justify-content:space-between;align-items:flex-start}
  .svc-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(13,227,172,.07);border:1px solid rgba(13,227,172,.2);color:var(--cyan)}
  .svc-icon svg{width:22px;height:22px}
  .svc h3{font-family:"Chakra Petch",Onest,sans-serif;font-size:27px;font-weight:600;letter-spacing:-.015em;margin-top:8px}
  .svc .for{color:var(--muted);font-size:15px;font-weight:300}
  .svc ul{list-style:none;display:grid;gap:9px;font-size:14.5px;color:#C9CED2;padding-top:16px;border-top:1px dashed rgba(255,255,255,.1)}
  .svc li{display:flex;gap:10px;align-items:baseline}
  .svc li::before{content:"+";font-family:var(--mono);color:var(--cyan)}
  .svc .more{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);display:flex;gap:10px;align-items:center}
  .svc .more::after{content:"";flex:1;height:1px;background:var(--line)}

  /* Proceso */
  .steps{display:grid;gap:14px;margin-top:48px;position:relative}
  .step{padding:26px;--c:18px}
  .step-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
  .step-n{font:700 13px var(--mono);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--ink);box-shadow:0 0 30px -4px rgba(13,227,172,.6)}
  .step h3{font-family:"Chakra Petch",Onest,sans-serif;font-size:22px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
  .step p{color:var(--muted);font-size:15px;font-weight:300}
  .step .chip{display:inline-block;margin-top:16px;font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(13,227,172,.3);padding:6px 10px;border-radius:8px;background:rgba(13,227,172,.05)}

  /* Portafolio */
  .head-row{display:flex;flex-direction:column;gap:20px}
  .filters{display:flex;gap:6px;flex-wrap:wrap;padding:5px;border-radius:14px;background:var(--panel);border:1px solid var(--line);width:max-content;max-width:100%}
  .filters span{font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 13px;border-radius:10px;color:var(--muted)}
  .filters .on{background:var(--panel-2);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.5)}
  .grid-work{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
  .work .thumb{--c:16px;aspect-ratio:1/1}
  .work .thumb img{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:cover;clip-path:inherit;filter:saturate(.85) contrast(1.05)}
  .work .thumb .play{position:absolute;right:10px;bottom:10px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(7,8,9,.65);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center}
  .work .thumb .play svg{width:13px;height:13px;fill:#fff;margin-left:2px}
  .work .meta{padding:12px 2px 0}
  .work h4{font:500 16px Onest}
  .work span{font:400 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

  /* Estudio */
  .studio-grid{display:grid;gap:12px;margin-top:44px}
  .ph{--c:24px;min-height:260px}
  .ph .img{position:absolute;inset:1px;clip-path:inherit;background-size:cover;background-position:center}
  .ph .cap{position:absolute;left:18px;bottom:16px;z-index:2;font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(7,8,9,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);padding:7px 10px;border-radius:8px}
  .swatches{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
  .sw{--c:16px;padding:18px 18px 16px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between}
  .sw b{font:500 17px Onest}
  .sw small{display:block;font:400 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);line-height:1.6}

  /* Paddy */
  .about{display:grid;gap:36px;align-items:center}
  .portrait{--c:30px;aspect-ratio:4/5}
  .portrait .img{position:absolute;inset:1px;clip-path:inherit;background:url(../img/paddy.webp) center 28%/cover}
  .portrait .img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(7,8,9,.75))}
  .portrait .hud{justify-content:flex-end}
  .sig{display:flex;gap:28px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
  .sig b{display:block;font:500 16px Onest}

  /* Testimonio */
  .quote{padding:56px 0}
  .quote p{font:300 clamp(28px,5vw,48px)/1.15 Onest;letter-spacing:-.025em;max-width:960px}
  .quote cite{display:flex;gap:14px;align-items:center;margin-top:28px;font-style:normal}
  .quote cite b{font:500 15px Onest}

  /* Portal teaser */
  .portal{display:grid;gap:36px;align-items:center}
  .portal ul{list-style:none;display:grid;gap:12px;margin-top:26px}
  .portal li{display:flex;gap:12px;align-items:center;color:#C9CED2;font-weight:300}
  .portal li i{width:30px;height:30px;flex:none;border-radius:9px;border:1px solid rgba(13,227,172,.25);background:rgba(13,227,172,.06);display:grid;place-items:center;color:var(--cyan);font:700 11px var(--mono);font-style:normal}
  .login{--c:30px;padding:36px 26px 30px;max-width:440px;width:100%;justify-self:center}
  .login .lm{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:28px}
  .login .lm img{height:56px}
  .login .lm h3{font-family:"Chakra Petch",Onest,sans-serif;font-size:28px;font-weight:600}
  .field{margin-bottom:16px}
  .field label{display:block;font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  .field div{height:52px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line);box-shadow:inset 0 2px 6px rgba(0,0,0,.5);display:flex;align-items:center;gap:12px;padding:0 16px;color:var(--dim);font-size:14.5px}
  .field svg{width:18px;height:18px;color:var(--muted)}
  .forgot{text-align:right;font-size:13px;margin:-4px 0 20px}
  .login .btn{width:100%;justify-content:space-between}
  .soon{position:absolute;top:18px;right:34px;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--grad);padding:5px 9px;border-radius:7px}

  /* FAQ */
  .faq{display:grid;gap:10px;margin-top:40px}
  .faq details{--c:14px}
  .faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 22px;font:500 16.5px Onest;cursor:pointer}
  .faq summary::after{content:"+";font:400 18px var(--mono);color:var(--cyan)}
  .faq details[open] summary::after{content:"−"}
  .faq details p{padding:0 22px 22px;color:var(--muted);font-size:15px;font-weight:300;max-width:680px}

  /* CTA final */
  .final{--c:40px;padding:72px 26px;overflow:hidden}
  .final h2{font-family:"Bebas Neue",Onest,sans-serif;font-size:clamp(64px,15vw,130px);font-weight:400;letter-spacing:.005em;line-height:.9;max-width:900px}
  .final h2 b{font-weight:400!important}
  .final p{color:#B9BFC4;margin:20px 0 32px;max-width:460px;font-weight:300}

  /* Footer */
  footer{padding:72px 0 110px;border-top:1px solid var(--line);margin-top:24px;color:var(--muted);font-size:14px;font-weight:300}
  .foot{display:grid;gap:36px}
  .foot h5{font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-bottom:14px}
  .foot ul{list-style:none;display:grid;gap:9px}
  .legal{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px;font:400 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}

  .wa{position:fixed;right:16px;bottom:16px;z-index:20;height:52px;padding:0 18px;border-radius:14px;background:var(--grad);color:var(--ink);display:flex;align-items:center;gap:10px;font:600 14px Onest;box-shadow:0 12px 34px -8px rgba(13,227,172,.6)}
  .wa svg{width:20px;height:20px}

  /* Celular: contenido centrado y sin desbordes laterales */
  header,section,footer{overflow-x:clip}
  @media (max-width:899px){
    .wrap{padding-left:20px;padding-right:20px}
    .hero-grid>div:last-child,.h2,.lead,.head-row,.about>div:last-child,.portal>div:first-child,.quote,.final>div:last-child{text-align:center}
    .label{justify-content:center}
    .lead{margin-left:auto;margin-right:auto}
    .hero p.sub{margin-left:auto;margin-right:auto}
    .ctas{align-items:stretch}
    .specs-row{text-align:center}
    .filters{margin:0 auto}
    .head-row{align-items:center}
    .sig{justify-content:center;text-align:center}
    .quote cite{justify-content:center}
    .portal ul{max-width:340px;margin-left:auto;margin-right:auto;text-align:left}
    .final{padding:64px 22px}
    .final p{margin-left:auto;margin-right:auto}
    .svc,.step{text-align:left}
    .foot{text-align:center}
    .foot .logo{justify-content:center}
    .foot p{margin-left:auto;margin-right:auto}
    .legal{justify-content:center;text-align:center}
    .grid-work .meta{text-align:center}
    .sw{text-align:center}
  }

  @media (min-width:900px){
    :root{--gutter:40px}
    section{padding:140px 0}
    .nav-links{display:flex}
    .burger{display:none}
    .hero{padding:150px 0 110px}
    .hero-grid{grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
    .hero .monitor{order:2}
    .ctas{flex-direction:row}
    .grid-services{grid-template-columns:repeat(4,1fr)}
    .steps{grid-template-columns:repeat(4,1fr)}
    .steps::before{content:"";position:absolute;left:47px;right:47px;top:47px;height:1px;background-image:linear-gradient(90deg,rgba(13,227,172,.5) 50%,transparent 0);background-size:8px 1px;z-index:2}
    .head-row{flex-direction:row;justify-content:space-between;align-items:flex-end}
    .grid-work{grid-template-columns:repeat(3,1fr);gap:20px}
    .studio-grid{grid-template-columns:1.25fr 1fr;grid-template-rows:300px 300px}
    .studio-grid .tall{grid-row:span 2}
    .swatches{grid-template-columns:repeat(4,1fr)}
    .about{grid-template-columns:.9fr 1.1fr;gap:90px}
    .portal{grid-template-columns:1.1fr .9fr;gap:80px}
    .final{padding:110px 80px}
    .foot{grid-template-columns:1.5fr 1fr 1fr 1fr}
    footer{padding-bottom:64px}
    .wa{display:none}
  }

/* ---------- Accesibilidad y utilidades ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.btn{cursor:pointer}
.burger{cursor:pointer;background:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:10px}
.skip:focus{left:8px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
html{scroll-behavior:smooth}
section[id],header[id]{scroll-margin-top:90px}
.svc .more{cursor:pointer;background:none;border:0;text-align:left;width:100%}

/* ---------- Menú móvil ---------- */
.mobile-menu{display:none;margin-top:8px;padding:10px;border-radius:18px;background:rgba(14,16,18,.92);backdrop-filter:blur(16px);border:1px solid var(--line)}
.mobile-menu.open{display:grid}
.mobile-menu a{padding:14px 12px;border-radius:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.mobile-menu a+a{border-top:1px solid var(--line)}
@media (min-width:900px){.mobile-menu{display:none!important}}

/* ---------- Portafolio: filtro ---------- */
.filters button{font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:9px 13px;border-radius:10px;color:var(--muted)}
.filters button.on{background:var(--panel-2);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.5)}
.work[hidden]{display:none}

/* ---------- Modal de cotización ---------- */
.cot{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;background:rgba(3,4,5,.72);backdrop-filter:blur(8px)}
.cot.open{display:flex}
body.cot-lock{overflow:hidden}
.cot-box{position:relative;width:100%;max-width:520px;max-height:100dvh;overflow:auto;background:#08090a;border-radius:28px 28px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));border:1px solid var(--line);box-shadow:0 -20px 60px rgba(0,0,0,.6)}
.cot-box::before{content:"";position:absolute;width:320px;height:320px;left:-140px;top:-140px;border-radius:50%;background:rgba(13,227,172,.2);filter:blur(80px);pointer-events:none}
.cot-box>*{position:relative}
@media (min-width:640px){.cot{align-items:center;padding:24px}.cot-box{border-radius:28px;padding:28px 30px 30px;max-height:calc(100dvh - 48px)}}
.cot-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cot-top img{height:26px}
.cot-x{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font-size:16px}
.cot-progress{display:flex;gap:6px;margin-bottom:10px}
.cot-progress i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.08)}
.cot-progress i.on{background:var(--grad)}
.cot h2{font:600 26px/1.12 "Chakra Petch",Onest,sans-serif;letter-spacing:-.015em;margin:12px 0 6px}
.cot .hint{color:var(--muted);font-size:14px;font-weight:300;margin-bottom:18px}
.cot-step{display:none}
.cot-step.on{display:block}
.cot-opts{display:grid;gap:9px}
.cot-grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cot-opt{position:relative;display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;text-align:left;width:100%;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 50%,rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.07)}
.cot-opt .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(13,227,172,.07);border:1px solid rgba(13,227,172,.2);color:var(--cyan);flex:none}
.cot-opt .ic svg{width:18px;height:18px}
.cot-opt b{display:block;font:500 14.5px Onest}
.cot-opt span.d{display:block;font-size:12px;color:var(--muted);font-weight:300}
.cot-opt .radio{margin-left:auto;width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);flex:none}
.cot-opt[aria-pressed="true"]{background:linear-gradient(160deg,rgba(13,227,172,.16),rgba(13,227,172,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(13,227,172,.45)}
.cot-opt[aria-pressed="true"] .radio{border:0;background:var(--grad);box-shadow:inset 0 0 0 5px #0b1f19}
.cot-grid2 .cot-opt{flex-direction:column;align-items:flex-start;gap:4px;padding:13px 34px 13px 13px;min-height:74px}
.cot-grid2 .cot-opt .radio{position:absolute;top:12px;right:12px}
.cot-field{margin-bottom:14px}
.cot-field>label,.cot-field>.lbl{display:block;font:400 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.cot input[type=text],.cot input[type=tel],.cot input[type=email],.cot input[type=url],.cot textarea{width:100%;height:50px;border-radius:12px;background:rgba(0,0,0,.4);border:1px solid var(--line);box-shadow:inset 0 2px 6px rgba(0,0,0,.5);padding:0 14px;font:400 16px Onest;color:var(--text)}
.cot textarea{height:92px;padding:12px 14px;resize:vertical}
.cot input::placeholder,.cot textarea::placeholder{color:var(--dim)}
.cot input:focus,.cot textarea:focus{outline:none;border-color:rgba(13,227,172,.5)}
.cot .tel{display:flex;align-items:center;border-radius:12px;background:rgba(0,0,0,.4);border:1px solid var(--line)}
.cot .tel span{padding:0 10px 0 14px;color:var(--muted);border-right:1px solid var(--line)}
.cot .tel input{border:0!important;box-shadow:none!important;background:none!important}
.cot-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.4);border:1px solid var(--line)}
.cot-seg button{padding:10px 0;border-radius:9px;font-size:14px;color:var(--muted)}
.cot-seg button[aria-pressed="true"]{background:linear-gradient(160deg,rgba(13,227,172,.22),rgba(13,227,172,.06));color:var(--text);box-shadow:inset 0 0 0 1px rgba(13,227,172,.35)}
.cot-chips{display:flex;flex-wrap:wrap;gap:7px}
.cot-chips button{font-size:13px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:rgba(255,255,255,.03)}
.cot-chips button[aria-pressed="true"]{color:var(--ink);background:var(--grad);border-color:transparent;font-weight:500}
.cot-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);font-weight:300;margin-top:6px;cursor:pointer}
.cot-check input{width:18px;height:18px;margin-top:1px;accent-color:#0DE3AC;flex:none}
.cot-check a{color:var(--text);text-decoration:underline}
.cot-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cot-nav{display:grid;gap:10px;margin-top:22px}
.cot-nav .btn{width:100%;height:54px}
.cot-nav .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.cot-back{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px}
.cot-err{display:none;margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(255,77,77,.08);border:1px solid rgba(255,77,77,.3);color:#ffb3b3;font-size:13.5px}
.cot-err.on{display:block}
.cot-done{text-align:center}
.cot-done .ok{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:var(--grad);margin:6px auto 10px;box-shadow:0 0 50px -6px rgba(13,227,172,.7);color:var(--ink)}
.cot-done .ok svg{width:34px;height:34px}
.cot-code{font:700 24px var(--mono);letter-spacing:.08em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:4px 0 16px}
.cot-sum{text-align:left;padding:14px 16px;border-radius:16px;display:grid;gap:9px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cot-sum div{display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.cot-sum div span:first-child{color:var(--muted);font-weight:300}
.cot-sum div span:last-child{text-align:right}

/* ---------- Páginas internas (políticas, etc.) ---------- */
.page-wrap{padding:140px 0 80px}
.page-wrap .entry{max-width:760px;margin:0 auto}
.page-wrap h1{font:600 clamp(34px,6vw,54px)/1.05 "Chakra Petch",Onest,sans-serif;letter-spacing:-.02em;margin-bottom:28px}
.entry-content{color:#C9CED2;font-weight:300;font-size:17px;line-height:1.75}
.entry-content h2,.entry-content h3{font-family:"Chakra Petch",Onest,sans-serif;font-weight:600;color:var(--text);margin:36px 0 12px;letter-spacing:-.01em}
.entry-content h2{font-size:26px}.entry-content h3{font-size:20px}
.entry-content p,.entry-content ul,.entry-content ol{margin-bottom:16px}
.entry-content ul,.entry-content ol{padding-left:22px}
.entry-content a{color:var(--cyan);text-decoration:underline}

/* ---------- v1.1: textos orientados al artista ---------- */
.label .rule{flex:0 0 26px;height:2px;border-radius:2px;background:var(--grad)}
.label{color:var(--muted)}
.hero h1{font-size:clamp(56px,15vw,100px)}
.cta-note{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:14px;color:var(--muted);font-weight:300}
.cta-note .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}

/* Tarjetas de etapas */
.svc-top{align-items:center}
.svc-tag{font:400 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(13,227,172,.3);background:rgba(13,227,172,.06);padding:6px 10px;border-radius:8px}
.svc h3{font-size:24px;line-height:1.12}
.svc .more{display:flex;align-items:center;gap:8px;color:var(--cyan);font:500 15px Onest;letter-spacing:0;text-transform:none;padding-top:14px}
.svc .more::after{display:none}
.svc .more svg{width:16px;height:16px;transition:transform .2s}
.svc .more:hover svg{transform:translateX(3px)}

/* No tienes que llegar con todo resuelto */
.ready{padding:44px 24px;overflow:hidden}
.ready-grid{position:relative;z-index:1;display:grid;gap:36px;align-items:center}
.bring{list-style:none;display:grid;gap:10px}
.bring li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--line);color:#D6DBDE;font-size:15px}
.bring i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--ink)}
.bring i svg{width:13px;height:13px}

/* Proceso */
.step-head{margin-bottom:22px}

/* Estudio: tres datos alineados arriba */
.swatches{grid-template-columns:1fr;gap:10px}
.sw{min-height:0;padding:18px 20px;display:flex;flex-direction:column;justify-content:flex-start;gap:6px}
.sw small{color:var(--cyan)}
.sw b{font:500 18px Onest}

/* Paddy */
.about .lead p+p{margin-top:14px}

/* Testimonios */
.quotes{display:grid;gap:14px;margin-top:44px}
.quote-card{margin:0;padding:28px 26px;display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.quote-card blockquote{font:300 17px/1.6 Onest;color:#D6DBDE}
.quote-card figcaption{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px dashed rgba(255,255,255,.1)}
.quote-card img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #070809,0 0 0 3px rgba(13,227,172,.6)}
.quote-card b{display:block;font:500 16px Onest}

/* CTA final y aviso del portal */
.final h2{font-size:clamp(50px,11vw,96px)}
.portal-strip{margin-top:14px;padding:22px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.portal-strip .soon{position:static;flex:none}
.portal-strip b{display:block;font:600 18px "Chakra Petch",Onest,sans-serif}
.portal-strip p{color:var(--muted);font-size:14.5px;font-weight:300;margin-top:2px}

@media (max-width:899px){
  .ready-grid>div:first-child{text-align:center}
  .ready-grid>div:first-child .lead{margin-left:auto;margin-right:auto}
  .ready-grid>div:last-child>.mono{text-align:center}
  .cta-note{justify-content:center}
  .about .lead{text-align:center}
  .quote-card{text-align:left}
  .portal-strip{justify-content:center;text-align:center}
}
@media (min-width:900px){
  .ready{padding:72px 64px}
  .ready-grid{grid-template-columns:1.1fr .9fr;gap:64px}
  .swatches{grid-template-columns:repeat(3,1fr);gap:12px}
  .quotes{grid-template-columns:repeat(3,1fr)}
  .portal-strip{flex-wrap:nowrap}
}
.svc .more{justify-content:flex-start;text-align:left}
.ready .h2{font-size:clamp(30px,6.4vw,50px)}

/* v1.2: más aire en "No tienes que llegar…" y botón del menú en celular */
#empezar{padding:40px 0 112px}
.show-sm{display:none}
@media (max-width:520px){.hide-sm{display:none}.show-sm{display:inline}}
@media (min-width:900px){#empezar{padding:40px 0 170px}.ready{padding:96px 72px}}

/* v1.3: tarjeta final original y alineaciones */
.final h2{font-size:clamp(64px,15vw,130px)}
.label .rule.dashed{flex:0 0 46px;height:1px;border-radius:0;background:none;background-image:linear-gradient(90deg,var(--dim) 50%,transparent 0);background-size:6px 1px}
.step{display:flex;flex-direction:column}
.step .chip{margin-top:auto;align-self:flex-start}
.step p{margin-bottom:18px}
@media (min-width:900px){
  .step h3{min-height:2.3em}
  .svc h3{min-height:2.3em}
  .svc .for{min-height:6.4em}
}
/* Las miniaturas de YouTube traen franjas negras: se recortan */
.work .thumb img{transform:scale(1.34);transform-origin:center}

/* v1.4: pasos centrados con títulos alineados abajo */
.step{align-items:center;text-align:center}
.step .step-head{justify-content:center;width:100%}
.step .chip{align-self:center}
@media (min-width:900px){.step h3{display:flex;align-items:flex-end;justify-content:center}}
.steps::before{display:none}
.hero .btn-primary svg{width:18px;height:18px}

/* v1.5: dirección y enlace a Maps */
.sw-link .go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font:500 14px Onest;color:var(--cyan)}
.sw-link .go svg{width:14px;height:14px}
.foot .addr a{display:flex;gap:10px;align-items:flex-start}
.foot .addr svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--cyan)}
.foot .addr small{display:block;margin-top:4px;color:var(--cyan);font-size:13px}
.foot .addr span{max-width:260px}
@media (max-width:899px){.foot .addr a{justify-content:center;text-align:left}.sw-link{align-items:center}}

/* v1.6: dirección centrada en celular y tablet */
@media (max-width:899px){.foot .addr a{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}.foot .addr span{max-width:300px;margin:0 auto}.foot .addr svg{margin-top:0}}

/* v1.6: diseño de tablet (600–899 px) */
@media (min-width:600px) and (max-width:899px){
  :root{--gutter:32px}
  .monitor{aspect-ratio:16/10;max-height:460px}
  .hero h1{font-size:clamp(64px,11vw,92px)}
  .grid-services,.steps,.quotes{grid-template-columns:1fr 1fr}
  .grid-work{grid-template-columns:repeat(3,1fr)}
  .ready-grid{grid-template-columns:1fr 1fr;gap:32px;align-items:center}
  .ready-grid>div:first-child{text-align:left}
  .ready-grid>div:first-child .label{justify-content:flex-start}
  .studio-grid{grid-template-columns:1.3fr 1fr;grid-template-rows:240px 240px}
  .studio-grid .tall{grid-row:span 2}
  .swatches{grid-template-columns:repeat(3,1fr)}
  .about{grid-template-columns:.8fr 1.2fr;gap:36px}
  .about>div:last-child,.about .lead,.sig{text-align:left;justify-content:flex-start}
  .about .label{justify-content:flex-start}
  .about .h2{text-align:left}
  .portrait{aspect-ratio:4/5}
  .faq{max-width:680px;margin-left:auto;margin-right:auto}
  .foot{grid-template-columns:repeat(3,1fr);text-align:left}
  .foot>div:first-child{grid-column:1/-1;text-align:center}
  .foot .addr a{flex-direction:row;align-items:flex-start;text-align:left}
  .foot .addr svg{margin-top:2px}
}
@media (min-width:600px) and (max-width:899px){
  .ready-grid>div:first-child .h2,.ready-grid>div:first-child .lead{text-align:left;margin-left:0}
  .ready .h2{font-size:clamp(30px,5vw,40px)}
  .about .h2{font-size:clamp(28px,4.6vw,36px)}
  .portrait .hud{font-size:9.5px;padding:14px}
  .portrait .hud-bot span{white-space:nowrap}
}

/* v1.6: íconos de contacto colgados a la izquierda; los textos quedan alineados */
.foot .ci a{position:relative;display:block}
.foot .ci svg{position:absolute;left:-28px;top:2px;width:18px;height:18px;margin:0;color:var(--cyan)}
.foot .addr a{display:block}
.foot .addr span{display:block;max-width:240px}
@media (max-width:599px){
  .foot .ci a{display:inline-block;text-align:center}
  .foot .ci svg{position:static;display:block;margin:0 auto 6px}
  .foot .addr span{margin:0 auto}
}
@media (min-width:600px) and (max-width:899px){
  .foot .addr a{display:block;text-align:left}
}

/* v1.7: áreas táctiles de al menos 40 px en celular */
@media (max-width:899px){
  .foot ul{gap:0}
  .foot ul a{display:inline-block;padding:9px 6px}
  .foot ul li{line-height:1.4}
  .foot .ci a{padding:8px 6px}
  .legal a{display:inline-block;padding:10px 4px}
  .svc .more{min-height:44px}
}