/* ══════════════════════════════════════════════════════════════
   DMO · ESTILOS  —  el diseño de la web
   ──────────────────────────────────────────────────────────────
   Aquí están los COLORES, los TAMAÑOS de letra, los espacios y
   toda la apariencia del sitio.
   Los colores de la marca están justo abajo, en el bloque :root
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   DMO — según guía de marca del cliente (DMO_WEB.pdf)
   Sidebar: logo + wordmark azul fijo + nav + contacto.
   5 pantallas: Inicio · Proyectos · Descripción · Info · Empecémos.
   Tipos: Helvetica Neue (UltraLight/Thin/Light) + Big Caslon (serif).
   Colores: azul #182DA8 · negro #000 · gris #707376 · fondo blanco.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#ffffff; --ink:#000000; --gray:#707376; --blue:#182DA8; --line:#e8e8e8;   /* azul EXACTO de la guía de marca DMO = #182DA8 (el que pidió el cliente) */
  --sans:'Inter Fallback','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Big Caslon','Libre Caslon Display','Playfair Display','Times New Roman',Georgia,serif;
  --side:clamp(300px,29vw,392px);
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;position:fixed;inset:0;}
::selection{background:var(--blue);color:#fff;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;}
input,textarea{font:inherit;color:inherit;background:none;border:0;outline:0;}
.hide-sb{scrollbar-width:thin;}
.hide-sb::-webkit-scrollbar{width:7px;height:7px;}
.hide-sb::-webkit-scrollbar-thumb{background:#dcdcdc;}

/* ─────────── SIDEBAR ─────────── */
.menu{position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:60;
  display:flex;flex-direction:column;padding:clamp(36px,6vh,64px) 34px clamp(44px,6.5vh,78px);pointer-events:none;overflow-y:auto;}
.menu > *{pointer-events:auto;}
.menu::-webkit-scrollbar{width:0;}

.brand{cursor:pointer;margin-bottom:26px;}
.brand__mark svg{width:clamp(104px,9.6vw,132px);height:auto;color:var(--ink);display:block;}
.wordmark{margin-top:16px;color:var(--blue);font-weight:200;letter-spacing:-.01em;
  font-size:clamp(23px,2.55vw,35px);line-height:1.14;white-space:nowrap;}
/* animación al pasar el cursor por el logo: el significado "se desglosa" letra a letra, sutil y elegante */
.wordmark .wch{display:inline-block;will-change:transform,opacity;}
.wordmark .wch--sym{color:var(--blue);font-weight:700;}   /* el · y el + en azul MÁS MARCADO (negrita) */
/* (la cascada vieja se reemplazó por el efecto scramble en JS) */
@keyframes wcascade{0%{opacity:.12;transform:translateY(9px)}60%{opacity:1;transform:translateY(-1px)}100%{opacity:1;transform:none}}

.nav{margin-top:clamp(30px,5.5vh,60px);display:flex;flex-direction:column;gap:clamp(22px,4.2vh,48px);}
/* NAV: Helvetica Neue UltraLight (100) · #000000 (guía). Más grande + más separación. Jerarquía por opacidad. */
.nav__item{position:relative;font-weight:200;font-size:clamp(21px,2.05vw,30px);letter-spacing:.02em;
  color:var(--ink);opacity:.6;width:max-content;transition:opacity .3s ease,transform .5s var(--ease);}
.nav__item:hover{opacity:1;transform:translateX(3px);}
.nav__item.is-active{opacity:1;}
.nav__item.is-active::before{content:"";position:absolute;left:-18px;top:.62em;width:10px;height:1px;background:var(--ink);}

/* bloque de contacto (pie) — visible en todas las pestañas (como antes) */
.addr{margin-top:auto;padding-top:30px;line-height:1.6;}
.addr__serif{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(14px,0.98vw,18px);color:var(--blue);letter-spacing:.01em;margin-top:6px;margin-bottom:2px;}
.addr__row{display:block;font-family:var(--sans);font-weight:200;font-size:clamp(11.5px,0.8vw,14px);letter-spacing:.03em;color:var(--blue);}   /* tel + email = Helvetica Neue UltraLight */
.addr__place{font-weight:200;}   /* CUENCA_ECUADOR = Helvetica Neue Thin */
.addr__row a{color:var(--blue);transition:opacity .3s;}
.addr__row a:hover{opacity:.65;}
.addr__credit{display:block;margin-top:14px;font-family:var(--sans);font-weight:200;font-size:9px;letter-spacing:.06em;color:var(--gray);opacity:.5;text-decoration:none;transition:opacity .3s;}
.addr__credit:hover{opacity:.85;}
/* ficha del proyecto en el sidebar (solo móvil + detalle; reemplaza a la dirección) */
.side-meta{display:none;margin-top:auto;padding-top:30px;font-size:11.5px;line-height:1.95;color:var(--gray);letter-spacing:.01em;}
.side-meta__num{display:block;font-weight:300;font-size:11px;letter-spacing:.14em;color:var(--blue);margin-bottom:4px;}
.side-meta__title{display:block;font-family:var(--serif);font-weight:500;color:var(--blue);font-size:16px;line-height:1.14;margin-bottom:16px;}
.side-meta b{font-family:var(--serif);font-weight:500;color:var(--gray);}
.side-meta i{font-style:italic;font-weight:300;color:var(--gray);}

/* ─────────── STAGE / VIEWS ─────────── */
.stage{position:fixed;inset:0;z-index:10;}
.view{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease;overflow-y:auto;overflow-x:hidden;}
.view.is-on{opacity:1;visibility:visible;}

/* ── GRID de proyectos — columnas con DESPLAZAMIENTO INDEPENDIENTE ──
   Cada columna scrollea sola; la barra izquierda queda fija. */
.view--inicio,.view--proyectos{overflow:hidden;}
.grid{display:flex;gap:clamp(24px,3vw,52px);align-items:stretch;height:100vh;
  padding:0 clamp(24px,3vw,52px) 0 calc(var(--side) + clamp(24px,3vw,52px));}   /* borde izq (desde sidebar) = borde der (desde el borde) = mismo espacio */
.col{flex:1 1 0;height:100%;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:clamp(30px,5vh,64px);
  padding:clamp(46px,7vh,80px) 0 26vh;scrollbar-width:none;}   /* sin padding horizontal → las fotos llegan al borde exacto (mismo que info/detalle/empecémos) */
.col::-webkit-scrollbar{width:0;height:0;}
.col:nth-child(2){padding-top:17vh;}
.col:nth-child(3){padding-top:9vh;}
.card{cursor:pointer;}
/* nombre del proyecto ENCIMA de la foto — Big Caslon serif azul (tipografía de nombres DMO) */
.card__title{font-family:var(--serif);font-weight:500;color:var(--blue);font-size:clamp(21px,1.5vw,28px);line-height:1.15;letter-spacing:.01em;margin-bottom:10px;}   /* "proyecto" = Big Caslon Medium (agrandado) */
.card__pnum{font-family:var(--sans);font-style:italic;font-weight:500;font-size:clamp(17px,1.2vw,22px);margin-left:-4px;}   /* número = Helvetica Neue Itálica Medium 17px, pegado a "proyecto" */
/* en desktop (con cursor): el nombre aparece SOLO al pasar el mouse; en touch queda visible (no hay hover) */
@media (hover:hover) and (pointer:fine){
  .card__title{opacity:0;transition:opacity .45s var(--ease);}
  .card:hover .card__title{opacity:1;}
}
/* imagen VACÍA (aún sin fotos) + al hover: número + título */
.card__frame{position:relative;width:100%;aspect-ratio:var(--ar);overflow:hidden;background:#ececec;}
.card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease),filter .45s var(--ease);}
.card:hover .card__img{transform:scale(1.03);}
.card__over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;
  text-align:left;padding:11px 16px 0;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.6) 20%,rgba(255,255,255,0) 52%);}
.card:hover .card__over{opacity:1;}
.card__num{font-family:var(--sans);font-weight:200;font-size:clamp(12px,0.85vw,15px);letter-spacing:.16em;color:var(--blue);}
.card__name{font-family:var(--sans);font-weight:400;color:var(--blue);
  font-size:clamp(18px,1.8vw,28px);letter-spacing:.01em;text-transform:capitalize;
  transform:translateY(6px);transition:transform .55s var(--ease);}
.card:hover .card__name{transform:translateY(0);}

/* ── INFO — manifesto ESTÁTICO (izq) + bios con DESPLAZAMIENTO INDEPENDIENTE (der) ── */
.view--info{overflow:hidden;}
.info{height:100vh;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:6vw;
  padding:0 clamp(24px,3vw,52px) 0 calc(var(--side) + clamp(24px,3vw,52px));align-items:start;}   /* borde izq (desde sidebar) = borde der = mismo espacio */
.info__left{padding-top:clamp(60px,12vh,150px);}
.info__right{height:100%;overflow-y:auto;scrollbar-width:none;padding:clamp(60px,12vh,150px) 0 18vh;}   /* sin padding horizontal → el contenido llega al borde (bordes izq=der exactos) */
.info__right::-webkit-scrollbar{width:0;}
.serifH{font-family:var(--serif);font-weight:500;color:var(--blue);font-size:clamp(24px,2.4vw,34px);letter-spacing:.01em;margin-bottom:26px;}
/* cuerpo = Helvetica UltraLight (100); énfasis = Helvetica Light (300), MISMO gris (guía) */
.prose{font-weight:200;font-size:clamp(15px,1.05vw,20px);line-height:1.78;color:var(--gray);max-width:34em;}
.prose p{margin-bottom:1.15em;}
.prose strong{font-family:var(--serif);font-weight:500;color:var(--gray);font-size:1.12em;}   /* negritas INFO = IDÉNTICAS a las de PROYECTOS (.detail__desc strong). El 1.12em es la clave: Big Caslon se dibuja más chica que Inter al mismo tamaño, y sin ese ajuste la negrita se veía más débil que el texto normal (2026-10-03). */
/* equipo INTERCALADO (zigzag): impar a la izquierda, par a la derecha */
.team__member{margin-bottom:64px;display:flex;flex-direction:column;}
.team__member .prose{max-width:none;}   /* bio del equipo ocupa TODO el ancho de la columna (como la guía), sin margen blanco */
.team__member:nth-child(even){align-items:flex-end;text-align:right;}
.team__member:nth-child(even) .prose{text-align:left;}
.team__name{font-family:var(--serif);font-weight:500;color:var(--blue);font-size:clamp(24px,2.4vw,34px);margin-bottom:16px;}   /* mismo tamaño que "manifesto" (.serifH) */
.team__photo{width:100%;max-width:300px;aspect-ratio:1/1;background:#ececec;position:relative;margin-top:22px;overflow:hidden;}
.team__photo img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);}

/* ── DETALLE — texto (izq) + imágenes (der), ambos con DESPLAZAMIENTO INDEPENDIENTE ── */
.view--detalle{overflow:hidden;}
.detail{height:100vh;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:5vw;
  padding:0 clamp(24px,3vw,52px) 0 calc(var(--side) + clamp(24px,3vw,52px));align-items:start;}   /* borde izq (desde sidebar) = borde der = mismo espacio */
.detail__text{height:100%;overflow-y:auto;scrollbar-width:none;padding:clamp(56px,10vh,120px) 4px 14vh;}
.detail__text::-webkit-scrollbar{width:0;}
.detail__num{font-family:var(--serif);font-weight:500;color:var(--blue);font-size:clamp(20px,1.8vw,26px);letter-spacing:.02em;}
.detail__title{font-family:var(--serif);font-weight:500;color:var(--blue);font-size:clamp(30px,4vw,54px);line-height:1.02;letter-spacing:-.01em;text-transform:capitalize;margin:6px 0 26px;}
/* meta = label Big Caslon + valor itálica (como el documento) */
.detail__meta{font-weight:300;font-size:clamp(13px,0.9vw,16px);line-height:2;color:var(--gray);letter-spacing:.01em;margin-bottom:34px;}
.detail__meta b{font-family:var(--serif);font-weight:500;color:var(--gray);}
.detail__meta i{font-style:italic;font-weight:300;}
.detail__desc{font-weight:200;font-size:clamp(15px,1.05vw,20px);line-height:1.85;color:var(--gray);max-width:40em;border-top:1px solid var(--line);padding-top:30px;}
/* contexto. / estrategia. / resultado. = Big Caslon serif (exacto del documento) */
.detail__desc strong{font-family:var(--serif);font-weight:500;color:var(--gray);font-size:1.12em;}
.detail__dl-wrap{margin-top:clamp(22px,2.4vw,34px);}
.detail__dl{display:inline-block;font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.35vw,24px);letter-spacing:.01em;color:var(--ink);text-decoration:none;cursor:pointer;transition:color .25s ease;-webkit-tap-highlight-color:transparent;}
.detail__dl:hover{color:var(--blue);}
.detail__dl:active,.detail__dl.is-dl{color:var(--blue);}
/* descripción full-width para móvil (oculta en desktop) */
.detail__desc-m{display:none;font-weight:200;font-size:clamp(15px,1.05vw,20px);line-height:1.85;color:var(--gray);}
.detail__desc-m strong{font-family:var(--serif);font-weight:500;color:var(--gray);font-size:1.12em;}
.detail__gallery{height:100%;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:5vh;padding:clamp(56px,10vh,120px) 4px 14vh;}
.detail__gallery::-webkit-scrollbar{width:0;}
.detail__gallery .g{position:relative;background:#f1f1f1;overflow:hidden;width:100%;flex-shrink:0;}
.detail__gallery .g.gempty{background:#ececec;display:flex;align-items:center;justify-content:center;}
.detail__gallery .g.gempty span{font-weight:200;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#b8b8b8;}
.detail__gallery .g img.ph{width:100%;filter:blur(14px);transform:scale(1.04);display:block;}
.detail__gallery .g img.full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease;}
.detail__gallery .g img.full.loaded{opacity:1;}
.detail__gallery .g img.gimg{width:100%;height:auto;display:block;}

/* ── EMPECÉMOS (formulario) ── */
.start{padding:var(--start-top,clamp(110px,16vh,150px)) clamp(24px,3vw,52px) clamp(32px,4.6vh,56px) calc(var(--side) + clamp(24px,3vw,52px));display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:3vw;row-gap:0;min-height:100vh;}
.start__intro{font-weight:200;font-size:clamp(15px,1.05vw,20px);line-height:1.7;color:var(--gray);max-width:34em;}
.start__intro p{margin-bottom:.85em;}
.start__intro strong{font-family:var(--serif);font-weight:500;color:var(--gray);font-size:1.12em;}   /* negritas EMPECÉMOS = idénticas a PROYECTOS, con el mismo 1.12em (2026-10-03) */
.form{max-width:780px;margin-left:auto;width:100%;}
.form__group{margin-bottom:10px;}
/* preguntas: Big Caslon gris #707376 (guía) */
.form__q{font-family:var(--serif);font-weight:500;color:var(--gray);font-size:clamp(16px,1.12vw,21px);margin-bottom:4px;}
.form__q--top{font-size:clamp(22px,2.2vw,30px);color:var(--blue);margin-bottom:16px;}
/* inputs, placeholders y opciones: AZUL #182DA8 UltraLight (guía) */
.form__in{width:100%;font-weight:300;font-size:clamp(12px,0.92vw,15px);color:var(--blue);padding:6px 2px;border-bottom:1px solid var(--line);transition:border-color .3s;}
.form__in::placeholder{color:var(--blue);opacity:1;font-weight:300;}
.form__in:focus{border-color:var(--blue);}
textarea.form__in{resize:none;min-height:40px;border-bottom:1px solid var(--line);}
/* placeholder personalizado (span azul) que se DESVANECE al empezar a escribir */
.form__field{position:relative;}
.form__ph{position:absolute;left:2px;top:6px;right:2px;color:var(--blue);font-weight:300;font-size:clamp(12px,0.92vw,15px);line-height:1.5;white-space:nowrap;pointer-events:none;transition:opacity .55s var(--ease);}
.form__field.filled .form__ph{opacity:0;}
.opts{display:flex;flex-wrap:wrap;justify-content:space-between;gap:11px 8px;width:100%;}   /* desktop: opciones estiradas hasta el borde derecho; envuelven si la fuente del SO es más ancha (Windows) */
.opt{position:relative;font-weight:300;font-size:clamp(12px,0.92vw,15px);letter-spacing:.004em;color:var(--blue);padding:5px 2px;white-space:nowrap;transition:opacity .3s,background .3s;}
.opts--group{justify-content:flex-start;gap:12px clamp(24px,2.8vw,46px);}   /* "¿Qué tipo?": row-gap chico + column-gap grande (envuelve limpio) */
.opt::before{content:"[ ";color:inherit;} .opt::after{content:" ]";color:inherit;}
.opt:hover{opacity:.65;}
.opt.on{background:var(--blue);color:#fff;padding:5px 10px;}
.opt.on::before,.opt.on::after{content:"";}
.form__submit{margin-top:10px;font-weight:500;font-size:clamp(15px,1.05vw,19px);letter-spacing:.05em;color:var(--blue);position:relative;}
.form__submit::before{content:"[ ";} .form__submit::after{content:" ]";}
.form__submit:hover{background:var(--blue);color:#fff;padding:5px 10px;}
.form__submit:hover::before,.form__submit:hover::after{content:"";}
.form__done{display:none;font-family:var(--serif);font-weight:500;color:var(--blue);font-size:20px;margin-top:20px;}
/* iconos = fila horizontal bajo el formulario, subidos y compactos (como la guía) */
/* figuras: en la columna del formulario (alineadas con él), empujadas al fondo (altura de la dirección), centradas */
.icons{grid-column:2;align-self:end;margin:0 0 0 auto;max-width:780px;width:100%;display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,2.2vw,34px);flex-wrap:nowrap;}
.icon{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;}
.icon svg{width:clamp(96px,7.4vw,120px);height:clamp(96px,7.4vw,120px);color:var(--ink);}
.icon span{font-weight:200;font-size:clamp(12px,0.85vw,15px);letter-spacing:.12em;color:var(--blue);}

/* ─────────── COVER + boot ─────────── */
/* transición ÚNICA = fade BLANCO con logo DMO negro (misma para el boot y cada cambio de pestaña) */
.cover{position:fixed;inset:0;z-index:80;background:var(--bg);opacity:0;display:none;pointer-events:none;}
.cover.play{display:block;animation:coverfade .9s var(--ease) forwards;}
@keyframes coverfade{0%{opacity:0}22%{opacity:1}68%{opacity:1}100%{opacity:0}}
.cover__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--ink);opacity:1;}
.cover__mark svg{width:60px;height:auto;display:block;}
.boot{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .7s ease;}
.boot svg{width:70px;color:var(--ink);}
.boot.gone{opacity:0;pointer-events:none;}

/* ─────────── MONITORES GRANDES (≥1600px): escala proporcional ───────────
   Laptops ≤1600px (incl. 13″) quedan EXACTOS. Arriba de 1600px cada tamaño
   crece con el ancho vía un vw ANCLADO (en 1600px = mismo valor, sin salto),
   para verse igual de proporcionado en pantallas externas 24/27/32″.
   NO usa transform scale ni zoom. */
@media (min-width:1600px){
  :root{--side:clamp(392px,24.5vw,680px);}
  /* bordes izq = der: mismo clamp horizontal escalado en las 4 vistas */
  .grid{gap:clamp(24px,3vw,82px);padding:0 clamp(24px,3vw,82px) 0 calc(var(--side) + clamp(24px,3vw,82px));}
  .info{padding:0 clamp(24px,3vw,82px) 0 calc(var(--side) + clamp(24px,3vw,82px));}
  .detail{padding:0 clamp(24px,3vw,82px) 0 calc(var(--side) + clamp(24px,3vw,82px));}
  .start{padding:var(--start-top,clamp(110px,16vh,150px)) clamp(24px,3vw,82px) clamp(44px,6.5vh,78px) calc(var(--side) + clamp(24px,3vw,82px));}
  /* sidebar */
  .brand__mark svg{width:clamp(132px,8.25vw,200px);}
  .wordmark{font-size:clamp(35px,2.19vw,52px);}
  .nav__item{font-size:clamp(30px,1.875vw,45px);}
  .addr__serif{font-size:clamp(14px,0.98vw,27px);}
  .addr__row{font-size:clamp(11.5px,0.8vw,21px);}
  /* grid de tarjetas */
  .card__title{font-size:clamp(21px,1.5vw,42px);}
  .card__pnum{font-size:clamp(17px,1.2vw,33px);}
  .card__num{font-size:clamp(12px,0.85vw,22px);}
  .card__name{font-size:clamp(28px,1.75vw,42px);}
  /* info */
  .serifH{font-size:clamp(34px,2.125vw,50px);}
  .prose{font-size:clamp(15px,1.05vw,30px);}
  .team__name{font-size:clamp(34px,2.125vw,50px);}
  .team__photo{max-width:clamp(300px,18.75vw,460px);}
  /* detalle */
  .detail__num{font-size:clamp(26px,1.625vw,38px);}
  .detail__title{font-size:clamp(54px,3.375vw,80px);}
  .detail__meta{font-size:clamp(13px,0.9vw,24px);}
  .detail__desc,.detail__desc-m{font-size:clamp(15px,1.05vw,30px);}
  .detail__dl-wrap{margin-top:clamp(34px,2.125vw,50px);}
  .detail__dl{font-size:clamp(18px,1.35vw,36px);}
  /* empecémos — la forma y los iconos crecen junto con la fuente (mantiene "todo en una línea") */
  .form,.icons{max-width:clamp(780px,48.75vw,1200px);}
  .start__intro{font-size:clamp(15px,1.05vw,30px);}
  .form__q{font-size:clamp(16px,1.12vw,31px);}
  .form__q--top{font-size:clamp(30px,1.875vw,45px);}
  .form__in,.form__ph,.opt{font-size:clamp(14px,0.9vw,22px);}   /* acompañan a las preguntas en monitores grandes (2026-10-01) */
  .form__submit{font-size:clamp(15px,1.05vw,29px);}
  .icon svg{width:clamp(96px,7.4vw,182px);height:clamp(96px,7.4vw,182px);}
  .icon span{font-size:clamp(12px,0.85vw,22px);}
  .icons{gap:clamp(34px,2.125vw,52px);}
}
.boot.hidden{display:none;}
/* entrada de la barra */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.brand{animation:rise .85s var(--ease) both .68s;}
.nav{animation:rise .85s var(--ease) both .8s;}
.addr{animation:rise .85s var(--ease) both .92s;}

/* ─────────── MÓVIL ─────────── */
@media (max-width:900px){
  /* MÓVIL = estilo Go Hasegawa: sidebar FIJO a la izquierda (~46vw) + imágenes a la derecha con scroll independiente. Solo EMPECÉMOS pasa el sidebar a barra horizontal arriba. */
  :root{--side:46vw;}
  .menu{padding:22px 16px 18px;}
  .brand{margin-bottom:14px;}
  .brand__mark svg{width:clamp(50px,13vw,74px);}
  .wordmark{font-size:clamp(13px,3.8vw,18px);margin-top:10px;white-space:normal;line-height:1.14;}
  .nav{margin-top:clamp(16px,4vh,34px);gap:clamp(12px,2.6vh,22px);flex-direction:column;}
  .nav__item{font-size:clamp(14px,3.9vw,20px);}
  .nav__item.is-active::before{left:-11px;width:7px;}
  .addr{font-size:10px;line-height:1.5;}
  .addr__serif{font-size:12px;margin-bottom:5px;}
  .addr__row{font-size:10px;}
  .side-meta{font-size:11px;}
  .side-meta__title{font-size:15px;}
  .m-contact{display:none;}

  /* GRID (inicio/proyectos): columna de imágenes que scrollea sola (mecanismo desktop), sidebar fijo */
  .grid{padding:0 10px 0 calc(var(--side) + 12px);}
  .col{padding:clamp(26px,5.5vh,52px) 0 24vh;}
  .col:nth-child(2){padding-top:12vh;}
  .card{position:relative;}
  /* nombre OCULTO; 1er toque lo revela SOBRE la foto, 2do toque abre el proyecto */
  .card__title{position:absolute;top:0;left:0;right:0;z-index:2;margin:0;padding:9px 12px 26px;
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.5) 55%,rgba(255,255,255,0));
    opacity:0;transition:opacity .4s var(--ease);pointer-events:none;font-size:clamp(15px,4.2vw,21px);}
  .card.is-revealed .card__title{opacity:1;}
  .card__pnum{font-size:clamp(12px,3.4vw,17px);}

  /* INFO: sidebar izq + contenido apilado en el area derecha (scroll de la vista) */
  .view--info{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .info{display:block;height:auto;min-height:auto;padding:clamp(30px,7vh,70px) 10px 16vh calc(var(--side) + 12px);}
  .info__left{padding-top:0;}
  .serifH{font-size:clamp(20px,5.6vw,28px);margin-bottom:16px;}
  .info__right{height:auto;overflow:visible;padding:0;margin-top:38px;}
  .team__member{margin-bottom:38px;}
  .team__member:nth-child(even){align-items:flex-start;text-align:left;}
  .team__member .prose{max-width:100%;}
  .team__name{font-size:clamp(19px,5.4vw,27px);}
  .team__photo{max-width:100%;}

  /* DETALLE: sidebar izq muestra la FICHA del proyecto (reemplaza direccion) + memoria e imagenes en el area derecha */
  .view--detalle{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  body.in-detalle .addr{display:none;}
  body.in-detalle .side-meta{display:block;}
  body.in-detalle .detail__num,body.in-detalle .detail__title,body.in-detalle .detail__meta{display:none;}
  .detail{display:block;height:auto;padding:clamp(30px,7vh,70px) 10px 16vh calc(var(--side) + 12px);}
  .detail__text,.detail__gallery{height:auto;overflow:visible;padding:0;}
  /* CELULAR: al abrir un proyecto se ELIMINA la memoria y se muestran SOLO las fotos */
  .detail__desc,.detail__desc-m{display:none!important;}
  .detail__gallery{display:flex;flex-direction:column;gap:12px;margin-top:0;}

  /* EMPECEMOS = barra horizontal arriba (UNICA excepcion) + formulario a pantalla completa */
  body[data-view="empecemos"] .menu{width:100vw;height:auto;bottom:auto;background:var(--bg);border-bottom:1px solid var(--line);z-index:70;padding:13px 5.5vw 11px;}
  body[data-view="empecemos"] .brand{margin-bottom:6px;}
  body[data-view="empecemos"] .brand__mark svg{width:42px;}
  body[data-view="empecemos"] .wordmark{font-size:13px;margin-top:6px;}
  body[data-view="empecemos"] .nav{flex-direction:row;flex-wrap:wrap;gap:7px 20px;margin-top:10px;}
  body[data-view="empecemos"] .nav__item{font-size:14px;}
  body[data-view="empecemos"] .addr{display:none;}
  .view--empecemos{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .start{display:block;height:auto;min-height:auto;padding:clamp(150px,24vh,190px) 6vw 18vh;}
  .start__intro{max-width:100%;font-size:15.5px;line-height:1.85;margin-bottom:34px;}
  .form{max-width:100%;}
  .form__q--top{font-size:clamp(26px,7.4vw,34px);margin-bottom:22px;}
  .form__q{font-size:16px;margin-bottom:12px;}
  .form__in{font-size:16px;padding:9px 2px;}
  .form__ph{font-size:16px;top:9px;white-space:normal;}
  .opts{gap:12px 16px;flex-wrap:wrap;justify-content:flex-start;}
  .opts--group{gap:12px 16px;}
  .opt{font-size:13px;letter-spacing:.04em;}
  .form__submit{font-size:17px;margin-top:22px;}
  .icons{position:static;grid-column:auto;align-self:auto;max-width:100%;width:auto;margin:48px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:40px 16px;justify-items:center;}
  .icon{gap:12px;}
  .icon svg{width:74px;height:74px;}
  .icon span{font-size:12px;}
}