body{padding-bottom:90px}footer{flex-wrap:wrap}.portfolio-float{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:16px;z-index:10;background:var(--acid);color:var(--black);border:1px solid var(--black);padding:17px 19px;font:700 12px 'IBM Plex Mono',monospace;box-shadow:none}.portfolio-float:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.terms-link{font:600 12px/1.5 'IBM Plex Mono',monospace;text-decoration:underline;padding:10px 0}.page-intro,.home-work{padding:48px 5vw;border-bottom:var(--line)}.page-intro h1{font:900 clamp(32px,6.5vw,96px)/1 'Archivo Black',sans-serif;letter-spacing:-.055em;overflow-wrap:anywhere}.page-intro h1 span{color:var(--orange)}.page-intro p{max-width:700px;font-size:18px;line-height:1.6}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--black);border:var(--line)}.work{background:var(--paper);min-width:0}.work-image{display:block;position:relative;background:#fff}.work-image img{display:block;width:100%;height:420px;object-fit:contain}.work-image span{position:absolute;right:0;bottom:0;background:var(--acid);padding:10px;font:600 11px 'IBM Plex Mono'}.work>div{padding:24px}.work small{text-transform:uppercase;font:500 12px 'IBM Plex Mono'}.work h2{font-size:25px;letter-spacing:-.04em}.work p{line-height:1.5}.source-link{text-decoration:underline;font-size:12px}.home-work>.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:28px 0}.home-work .work-image img{height:280px}.home-work>h2{font:900 clamp(30px,5vw,64px)/1 'Archivo Black';letter-spacing:-.05em}.terms-copy{max-width:940px;margin:auto;padding:40px 5vw}.terms-copy h2{font-size:24px;margin-top:38px}.terms-copy p{line-height:1.8}.terms-copy a,.terms-check a{text-decoration:underline}.terms-copy form{border:var(--line);padding:24px;background:var(--acid);display:grid;gap:20px}.terms-copy form>label{display:grid;gap:10px}.terms-copy input:not([type=checkbox]){width:100%;padding:14px;border:var(--line);font:inherit;background:var(--paper)}.terms-check{display:flex!important;align-items:flex-start;gap:12px!important;margin:16px 0;font-size:14px;line-height:1.6}.terms-check input[type=checkbox]{width:20px!important;height:20px;flex:0 0 20px;accent-color:var(--black);margin:2px 0}.terms-source{font-size:13px;border-top:var(--line);padding-top:25px}#work-dialog{padding:52px 12px 12px;background:var(--paper);border:1px solid black;max-width:95vw;max-height:95dvh}#work-dialog::backdrop{background:#000d}#work-dialog img{display:block;max-width:88vw;max-height:78dvh;object-fit:contain}#close-work{position:absolute;right:12px;top:10px;padding:9px 15px;background:var(--acid);border:var(--line);font:700 12px 'IBM Plex Mono';cursor:pointer}@media(max-width:780px){.work-grid,.home-work>.work-grid{grid-template-columns:1fr}.work-image img{height:auto;max-height:480px}.home-work .work-image img{height:320px}.page-intro{padding:32px 5vw}.terms-copy form{padding:18px}.terms-copy .button{white-space:normal;width:100%}}

/* DESIGNIO — Fondo editorial global / The Designio Times */
html{
  background:#f3f1eb;
}
body{
  background-color:rgba(243,241,235,.86);
  background-image:url('/designio-times-bg.webp');
  background-repeat:repeat;
  background-position:center top;
  background-size:760px auto;
  background-attachment:fixed;
}

/* Mantiene el fondo visible sin afectar bloques de color deliberados */
main,
.page-intro,
.home-work,
.terms-copy{
  background-color:rgba(243,241,235,.84);
  backdrop-filter:blur(.15px);
}

/* Conserva tarjetas y zonas especiales legibles */
.work,
.contact-form,
nav,
footer,
.area,
.lab,
.hero-photo,
.utility{
  background-clip:padding-box;
}

@media(max-width:780px){
  body{
    background-size:520px auto;
    background-attachment:scroll;
  }
}


/* Restaurar fondo naranja original de CONTACTO */
.contact-section{background:var(--orange)!important;}


/* DESIGNIO — CONTROLES GLOBALES FIJOS */
:root{--designio-control-h:34px;--designio-control-gap:6px}

.portfolio-float,
.music-toggle,
.motion-toggle{
  position:fixed!important;
  bottom:max(20px,env(safe-area-inset-bottom))!important;
  height:var(--designio-control-h)!important;
  min-height:var(--designio-control-h)!important;
  padding:0 12px!important;
  border:1px solid var(--black)!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font:600 9px/1 'IBM Plex Mono',monospace!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
  z-index:12!important;
}

.portfolio-float{
  left:16px!important;
  background:var(--black)!important;
  color:var(--paper)!important;
}

.motion-toggle{
  right:80px!important;
  background:#fff!important;
  color:var(--black)!important;
}

.music-toggle{
  right:calc(80px + 108px + var(--designio-control-gap))!important;
  background:var(--black)!important;
  color:var(--paper)!important;
  cursor:pointer!important;
}

.whatsapp{
  right:20px!important;
  bottom:max(10px,calc(env(safe-area-inset-bottom) + 10px))!important;
  z-index:13!important;
}

.portfolio-float:focus-visible,
.music-toggle:focus-visible,
.motion-toggle:focus-visible{outline:3px solid var(--orange)!important;outline-offset:3px!important}

@media(max-width:540px){
  :root{--designio-control-h:32px;--designio-control-gap:4px}
  .portfolio-float,.music-toggle,.motion-toggle{padding:0 9px!important;font-size:8px!important}
  .portfolio-float{left:8px!important}
  .motion-toggle{right:70px!important}
  .music-toggle{right:calc(70px + 96px + var(--designio-control-gap))!important}
  .whatsapp{right:10px!important;width:48px!important;height:48px!important}
}