/* ═══════════ Revisión Galit · 22 oct 2026 ═══════════ */

/* — Sin tipografía serif en toda la web: los <em> heredan la de la página — */
.team-lab h2 em,.journal-masthead h1 em,.end-card em,.contact-cover h1,.journal-cover h1,
.letter-spread h2,.notes-services h2,.process-essay h3{font-family:var(--font-display)!important;font-style:normal!important;font-weight:inherit!important;letter-spacing:inherit}
.team-lab h2 em{background:none}

/* — Índice seleccionado en móvil: filas con miniatura, nombre, servicios y ciudad — */
.idx-thumb{display:none}
@media (max-width:760px){
  .index-list .idx-row{display:grid!important;grid-template-columns:76px 1fr auto;grid-template-areas:"thumb num arrow" "thumb name arrow" "thumb tags tags" "thumb year year";
    column-gap:16px;row-gap:2px;align-items:start;padding:16px 0!important;min-height:0;height:auto}
  .index-list .idx-thumb{display:block;grid-area:thumb;width:76px;height:76px;overflow:hidden;background:#eee;align-self:center}
  .index-list .idx-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .index-list .idx-num{grid-area:num;font-size:10px;letter-spacing:.12em;opacity:.55}
  .index-list .idx-name{grid-area:name;font-size:21px!important;line-height:1.1;letter-spacing:-.02em}
  .index-list .idx-tags{grid-area:tags;display:block!important;font-size:10px!important;line-height:1.45;letter-spacing:.04em;opacity:.7;margin-top:4px;white-space:normal}
  .index-list .idx-year{grid-area:year;display:block!important;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:4px;text-align:left!important}
  .index-list .idx-year:empty{display:none!important}
  .index-list .idx-arrow{grid-area:arrow;display:block!important;width:18px;height:18px;opacity:.6;align-self:center}
  .index-list .idx-arrow svg{width:18px;height:18px}
  .index .idx-preview{display:none!important}
  .index-foot{flex-direction:column;align-items:flex-start;gap:14px}
}

/* — What you leave with: imagen con proporción natural, sin estirar — */
.leave .pillar-media{aspect-ratio:4/5;height:auto!important;max-height:none;overflow:hidden}
.leave .pillar-media img{width:100%;height:100%;object-fit:cover;object-position:center}
@media (max-width:760px){.leave .pillar-media{aspect-ratio:4/5;max-width:440px}}

/* — Ventana de carpetas: la foto completa, sin cortar caras — */
.desk-window .desk-media{aspect-ratio:4/5;height:auto!important;background:#f3f3ef}
.desk-window .desk-media>img,.desk-window .desk-media>video{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.desk-window.show-portrait .desk-media>img{object-fit:contain;object-position:center}
.desk-media .desk-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.desk-media{position:relative}

/* — Founder: la cita más contenida — */
.founders .founder-quote{font-size:clamp(17px,1.35vw,21px)!important;line-height:1.5!important}
.founder-feature blockquote{font-size:clamp(20px,2vw,30px)!important;line-height:1.38!important;max-width:30ch}
@media (max-width:760px){.founder-feature blockquote{font-size:20px!important;max-width:none}}
.founders-photo img{object-fit:cover;object-position:50% 20%}

/* — About: titular invertido — */
.about-cover .cover-intro h1{font-size:clamp(28px,2.7vw,46px)!important;line-height:1.04!important;letter-spacing:-.03em;max-width:14ch}
.about-cover .cover-intro .cover-roof{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.5vw,24px);letter-spacing:-.01em;margin-top:18px}
.belief-copy{max-width:760px;margin:34px 0 0;text-align:left}
.belief-copy p{font-size:clamp(17px,1.3vw,20px);line-height:1.62;margin:0 0 1.05em;color:inherit}
.belief-copy p:last-child{margin-bottom:0}
.belief-copy strong{font-family:var(--font-display);font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;line-height:1.2;display:block;margin-top:.4em}

/* — Menú móvil: The studio como fila — */
.mobile-mega .mobile-menu-row{display:flex!important;align-items:center;gap:18px;min-height:82px;padding:0!important;border-top:1px solid #111;text-decoration:none;color:inherit;font-size:32px!important}
.mobile-mega .mobile-menu-row>span:nth-child(2){flex:1;font-family:var(--font-display);font-size:32px;font-weight:500;letter-spacing:-.04em;line-height:1}
.mobile-mega .mobile-row-arrow{display:flex;align-items:center}
.mobile-mega .mobile-row-arrow svg{width:26px;height:26px}

/* — Servicios: tarjetas con carpeta animada al pasar el cursor — */
.service-file .folder-drawn{transition:transform .5s cubic-bezier(.2,.9,.25,1.3),filter .4s ease;transform-origin:20% 90%;will-change:transform}
.service-file .service-file-body,.service-file .file-tab{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,background-color .3s ease}
.service-file .file-arrow{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .service-file:hover .service-file-body{transform:translateY(-6px);box-shadow:8px 10px 0 #111}
  .service-file:hover .file-tab{transform:translateY(-6px)}
  .service-file:hover .folder-drawn{transform:translateY(-8px) rotate(-8deg) scale(1.18);filter:drop-shadow(0 10px 12px rgba(0,0,0,.18)) brightness(1.06)}
  .service-file:hover .file-arrow{transform:translate(4px,-4px) rotate(0deg) scale(1.1)}
  .service-file:hover h2{text-decoration:none}
  .desk-folder:hover .df-icon img{transform:translateY(-6px) rotate(-6deg) scale(1.08)}
}
.desk-folder .df-icon img{transition:transform .45s cubic-bezier(.2,.9,.25,1.3)}

/* — Páginas de servicio: texto centrado + imagen que crece al hacer scroll — */
.service-cover-centered{text-align:center!important;display:flex!important;grid-template-columns:none!important;flex-direction:column;align-items:center;min-height:auto!important;padding-bottom:clamp(24px,3vw,44px)!important;border-bottom:0!important}
.service-cover-centered>*{grid-column:auto!important;justify-self:center!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;max-width:min(100%,1100px)}
.service-cover-centered h1{width:auto!important}
.service-cover-centered .hero-bottom{display:flex!important;flex-direction:column;align-items:center;gap:22px;max-width:640px;margin:28px auto 0;text-align:center;grid-template-columns:none!important}
.service-cover-centered .hero-bottom p{margin:0 auto}
.scale-stage{position:relative;height:230vh;margin:0}
.scale-stage{--p:0}
.scale-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;padding-top:calc(6vh * (1 - var(--p)))}
.scale-frame{width:calc(36vw + 64vw * var(--p));height:calc(42vh + 58vh * var(--p));border-radius:calc(22px * (1 - var(--p)));overflow:hidden;background:#111;position:relative;will-change:width,height}
.scale-asset{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scale-web-design .scale-asset{object-position:top center}
.scale-brand-dna .scale-asset{object-position:center}
.scale-naomi-in-house .scale-asset{object-position:50% 22%}
.scale-phones{display:flex;gap:2.2%;align-items:center;justify-content:center;background:#fff59a;padding:4% 3%}
.scale-phones img{position:static;flex:0 1 calc((100% - 11%) / 6);min-width:0;height:auto;max-height:92%;width:auto;aspect-ratio:1206/1978;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.scale-social-media .scale-frame{background:#fff59a}
@media (max-width:760px){
  .scale-stage{height:180vh}
  .scale-frame{width:calc(70vw + 30vw * var(--p));height:calc(34vh + 66vh * var(--p))}
  .scale-phones{padding:6% 3%;flex-wrap:wrap;align-content:center;gap:3%}
  .scale-phones img{flex:0 1 30%;border-radius:8px;max-height:46%}
}
@media (prefers-reduced-motion:reduce){
  .scale-stage{height:auto}
  .scale-sticky{position:relative;height:auto;padding:0 0 40px}
  .scale-frame{width:100vw;height:80vh;border-radius:0}
}

/* — Portadas de proyecto: imágenes pequeñas no se estiran — */
.project-hero .project-hero-frame.is-small{padding:0!important;transform-origin:center}
.project-hero .hero-backdrop{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(38px) saturate(1.1) brightness(.55);transform:scale(1.1);z-index:-3;transition:background-image .6s ease;pointer-events:none}

.film-figure video{width:100%;display:block;background:#000;aspect-ratio:2.58/1;object-fit:cover}

/* — Fichas: todas las imágenes al mismo ancho, sin marco — */
.case-stream .archive-image,.archive-figure .archive-image{border:0!important;background:transparent!important;padding:0!important;aspect-ratio:auto!important;display:block!important;width:100%!important}
.case-stream .archive-image img,.archive-figure .archive-image img{position:static!important;width:100%!important;height:auto!important;max-height:none!important;object-fit:cover!important;inset:auto!important}
.archive-figure{width:100%!important;max-width:none!important}

/* — Brand DNA: muro de marcas en 3D que se aplana con el scroll — */
.dna-wall{--p:0;position:relative;height:260vh;background:#f4f3ee}
.dna-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.dna-stage{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 40%}
.dna-grid{position:absolute;left:50%;top:50%;width:140vw;height:220vh;display:flex;gap:14px;justify-content:center;
  transform:translate(-50%,-50%) rotateX(calc(42deg * (1 - var(--p)))) rotateZ(calc(-14deg * (1 - var(--p)))) scale(calc(1.18 - .3 * var(--p)));transform-style:preserve-3d;will-change:transform}
.dna-col{flex:1 1 0;min-width:0;transform:translateY(calc(var(--dir) * 180px * var(--p)))}
.dna-track{display:flex;flex-direction:column;gap:14px;animation:dna-up var(--dur,60s) linear infinite}
.dna-col[data-dir="1"] .dna-track{animation-name:dna-down}
@keyframes dna-up{to{transform:translateY(-50%)}}
@keyframes dna-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.dna-tile{display:block;aspect-ratio:1;overflow:hidden;background:#ddd;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease,filter .4s ease}
.dna-tile img{width:100%;height:100%;object-fit:cover;display:block}
.dna-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px;pointer-events:none;z-index:2;
  opacity:calc(1 - max(0, (var(--p) - .55) * 3.2));transform:translateY(calc(-40px * max(0, var(--p) - .55)))}
.dna-copy::before{content:"";position:absolute;width:min(760px,92vw);height:min(420px,60vh);background:radial-gradient(closest-side,#f4f3ee 55%,rgba(244,243,238,0));z-index:-1}
.dna-copy h2{font-family:var(--font-display);font-size:clamp(40px,6vw,96px);line-height:.95;letter-spacing:-.045em;margin:14px 0 18px}
.dna-copy p:not(.kicker){max-width:440px;font-size:clamp(15px,1.2vw,18px);line-height:1.5;margin:0 auto 18px}
.dna-copy .mono{font-size:10px;letter-spacing:.14em}
.dna-wall.is-open .dna-grid:hover .dna-tile{opacity:.35;filter:grayscale(.6)}
.dna-wall.is-open .dna-grid .dna-tile:hover{opacity:1;filter:none;transform:scale(1.12);position:relative;z-index:3;box-shadow:0 22px 50px rgba(0,0,0,.25)}
.dna-wall:not(.is-open) .dna-grid{pointer-events:none}
.dna-wall.is-open .dna-grid:hover .dna-track{animation-play-state:paused}
@media (max-width:760px){
  .dna-wall{height:200vh}
  .dna-grid{width:190vw;gap:8px}
  .dna-track{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .dna-wall{height:auto}
  .dna-sticky{position:relative;height:90vh}
  .dna-grid{transform:translate(-50%,-50%) scale(.9)}
  .dna-track{animation:none}
  .dna-copy{opacity:1;transform:none}
}