:root{
    --page-bg:   #d6d5d1;
    --card-bg:   #ffffff;
    --hairline:  #ececea;
    --line:      #d8d7d3;   /* divisores dentro de secciones */
    --ink:       #141414;
    --muted:     #8c8a84;
    --paper:     #ffffff;
    --expand:    2;
    --ease:      cubic-bezier(.22,1,.36,1);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }

  /* iOS Safari agranda el texto por su cuenta en algunos bloques. Con cajas de
     alto ajustado y overflow:hidden —como .label— eso recorta los glifos por
     arriba. Esto lo desactiva y hace que el iPhone respete los tamaños. */
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

  body{
    font-family:"helvetica-neue-lt-pro","helvetica-lt-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:500;
    font-style:normal;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    background:var(--page-bg);
    color:var(--ink);
    min-height:100vh;
    cursor:none;                      /* el asterisco reemplaza al puntero en todo el sitio */
  }
  a{ color:inherit; text-decoration:none; }
  button{ font:inherit; color:inherit; background:none; border:none; }

  /* =============================== HOME (4 paneles) =============================== */
  /* Pantalla completa, sin recuadro exterior — igual que las secciones */
  .home{ min-height:100vh; }

  .card{
    position:relative;
    width:100vw;
    height:100vh;
    background:var(--card-bg);
    overflow:hidden;
    display:flex;
  }

  .panel{
    position:relative;
    flex:1 1 0%;
    flex-grow:var(--g,1);
    min-width:0;
    overflow:hidden;
    border-right:2px solid #000;
    transition:flex-grow .7s var(--ease);
  }
  .panel:last-child{ border-right:none; }
  .panel:hover{ flex-grow:calc(var(--g,1) * var(--expand)); }
  /* Costuras ubicadas entre las personas de la escena (23.5% / 47% / 66%) */
  .panel--obras{    --g:23.5; }
  .panel--sobre{    --g:23.5; }
  .panel--contacto{ --g:19; }
  .panel--sociales{ --g:34; }

  /* Ilusión de caminata: cada foto se fija al viewport (background-attachment:fixed)
     y ocupa todo el ancho, así cada placa es una "ventana" sobre su porción de la
     escena. El fondo (galería) queda alineado entre placas y el artista, que en cada
     cuadro está en el X que corresponde a esa placa (15% → 41% → 60% → 74%), aparece
     caminando de una placa a la siguiente. Foto fija con velo negro; en hover cambia
     al cuadro siguiente (el artista da un paso) y se saca el velo. */
  /* Una sola escena: el fondo se fija al viewport (attachment:fixed) con el MISMO
     tamaño y posición en las 4 placas, así queda perfectamente alineado entre placas
     y se lee como una única imagen. Cada placa es una ventana sobre su porción, y las
     costuras entre placas están corridas para que cada persona caiga entera en la suya. */
  .panel__media{
    position:absolute; inset:0; z-index:0; overflow:hidden;
    background-size:cover; background-position:center; background-attachment:fixed;
  }
  .panel__media::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:rgba(0,0,0,.42);
    transition:opacity .6s var(--ease);
  }
  .panel:hover .panel__media::after{ opacity:0; }
  .panel__bg{
    position:absolute; inset:0; z-index:2;
    opacity:0;
    transition:opacity .6s var(--ease);
    background-size:cover; background-position:center; background-attachment:fixed;
  }
  .panel:hover .panel__bg{ opacity:1; }

  .panel--obras    .panel__media{ background-image:url('home/obras.webp'); }
  .panel--obras    .panel__bg{    background-image:url('home/obras-hover.webp'); }
  .panel--sobre    .panel__media{ background-image:url('home/sobre.webp'); }
  .panel--sobre    .panel__bg{    background-image:url('home/sobre-hover.webp'); }
  .panel--contacto .panel__media{ background-image:url('home/contacto.webp'); }
  .panel--contacto .panel__bg{    background-image:url('home/contacto-hover.webp'); }
  .panel--sociales .panel__media{ background-image:url('home/sociales.webp'); }
  .panel--sociales .panel__bg{    background-image:url('home/sociales-hover.webp'); }

  /* inset:0 en vez de height:100%: el porcentaje se calcula contra una placa que
     es un ítem flex de alto indefinido, y Safari lo resuelve como 'auto'. Con la
     caja colapsada, la etiqueta —posicionada con bottom— se iba contra el borde
     superior de la placa. Posicionándola absoluta, siempre ocupa toda la placa. */
  .panel__inner{ position:absolute; inset:0; z-index:2; }

  /* Letras del home: claras sobre el fondo oscuro (velo); oscuras cuando el hover
     destapa la foto clara — el color acompaña al fondo. */
  .logo{
    position:absolute; top:26px; left:26px;
    height:16px; width:auto; color:var(--paper);
    filter:drop-shadow(0 1px 6px rgba(0,0,0,.25));
    transition:color .6s var(--ease), filter .6s var(--ease);
  }
  .logo svg{ height:100%; width:auto; display:block; }
  .panel--obras:hover .logo{ color:var(--ink); filter:none; }

  .label{
    position:absolute; left:26px; bottom:30px; z-index:2;
    max-width:calc(100% - 40px); overflow:hidden;
    /* 1.02 dejaba la caja más baja que los glifos: sin margen, cualquier
       diferencia de métricas entre navegadores los recorta por arriba */
    font-size:clamp(22px,2.4vw,30px); line-height:1.2; letter-spacing:.4px;
    text-transform:uppercase; color:var(--paper); white-space:nowrap;
    text-shadow:0 1px 8px rgba(0,0,0,.25);
    transition:color .6s var(--ease), text-shadow .6s var(--ease);
  }
  .panel:hover .label{ color:var(--ink); text-shadow:none; }

  /* Título en una sola línea, centrado, ocupando casi todo el ancho.
     El color NO cambia con el hover de las placas. */
  .headline{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:5; margin:0; font-weight:500;
    font-size:8vw; line-height:1; letter-spacing:.02em;
    text-transform:uppercase; color:var(--paper); white-space:nowrap; pointer-events:none;
    text-shadow:0 2px 18px rgba(0,0,0,.35);
  }

  /* ===================== CURSOR PERSONALIZADO (asterisco) ===================== */
  .cursor{
    position:fixed; top:0; left:0; z-index:90;
    font-size:34px; line-height:1; color:var(--ink);
    transform:translate(-50%,-50%); opacity:0;
    transition:opacity .2s var(--ease); pointer-events:none; will-change:transform;
  }
  .cursor.is-light{ color:var(--paper); }

  /* ============================== SECCIONES (vistas) ============================== */
  .view{
    position:fixed; inset:0; z-index:40;
    background:var(--card-bg); color:var(--ink);
    transform:translateY(100%);
    transition:transform .8s var(--ease);
    overflow-y:auto; overscroll-behavior:contain;
    visibility:hidden;
  }
  .view.open,
  .view.closing{ visibility:visible; }
  .view.open{ transform:translateY(0); }
  .view.closing{ transform:translateY(-100%); }   /* sale hacia arriba: misma animación que al entrar */

  /* Header flotante de sección: logo en la misma posición/tamaño que el home
     (26px / 26px, alto 16px) y botón Cerrar en el vértice superior derecho.
     La variante --invert (blanca) se usa sobre fondos oscuros. */
  .view__bar{ position:sticky; top:0; z-index:6; height:0; }
  .view__logo{
    position:absolute; top:26px; left:26px;
    height:16px; display:block; color:var(--ink);
  }
  .view__logo svg{ height:100%; width:auto; display:block; }
  .view__close{
    position:absolute; top:24px; right:26px;
    /* baseline y no center: centrar las cajas con line-height:0 dejaba la × más abajo
       que las mayúsculas. Alineando líneas de base, los centros ópticos coinciden. */
    display:inline-flex; align-items:baseline; gap:10px;
    font-size:13px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink);
  }
  .view__close .x{ font-size:18px; line-height:1; }
  .view__bar--invert .view__logo,
  .view__bar--invert .view__close{
    color:var(--paper);
    filter:drop-shadow(0 1px 6px rgba(0,0,0,.3));
  }

  .view__head{ padding:64px 34px 18px; }
  .view__kicker{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

  /* ----------------------------- OBRAS: listado de series ----------------------------- */
  .series{ list-style:none; padding:0 34px 80px; }
  .serie{ border-top:1px solid var(--line); }
  .serie:last-child{ border-bottom:1px solid var(--line); }

  .serie__head{
    width:100%; display:flex; align-items:baseline; gap:24px;
    padding:26px 0; text-align:left;
  }
  .serie__idx{ flex:0 0 auto; font-size:14px; letter-spacing:.1em; color:var(--muted); padding-top:6px; }
  .serie__title{
    flex:1 1 auto; min-width:0;
    font-size:clamp(38px,6.4vw,86px); line-height:.98; letter-spacing:-.01em;
    text-transform:uppercase;
    transition:opacity .3s var(--ease), transform .5s var(--ease);
  }
  .serie__count{ flex:0 0 auto; font-size:13px; letter-spacing:.08em; color:var(--muted); padding-top:6px; }
  .serie__toggle{
    flex:0 0 auto; width:26px; height:26px; position:relative; align-self:center; color:var(--ink);
  }
  .serie__toggle::before,.serie__toggle::after{
    content:""; position:absolute; left:50%; top:50%; background:currentColor;
    transition:transform .4s var(--ease), opacity .4s var(--ease);
  }
  .serie__toggle::before{ width:18px; height:1.5px; transform:translate(-50%,-50%); }
  .serie__toggle::after{ width:1.5px; height:18px; transform:translate(-50%,-50%); }
  .serie.open .serie__toggle::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg); }

  .serie:hover .serie__title{ transform:translateX(10px); }

  /* Panel desplegable con las obras de la serie */
  .serie__panel{ max-height:0; overflow:hidden; transition:max-height .7s var(--ease); }
  .serie.open .serie__panel{ max-height:78vh; }

  .serie__works{
    display:flex; gap:22px; padding:6px 0 40px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;   /* sin barra: se navega arrastrando */
    user-select:none;
  }
  .serie__works::-webkit-scrollbar{ display:none; }
  .serie__works.dragging{ scroll-behavior:auto; }
  .serie__desc{ max-width:64ch; padding:4px 0 26px; font-size:15px; line-height:1.55; }
  /* Cada obra ya viene recortada a su lienzo real → se muestra en su proporción
     (verticales, horizontales o cuadradas), a una altura de fila fija, sin recuadro negro. */
  .work{ flex:0 0 auto; }
  .work__img{
    display:block; height:clamp(240px,42vh,440px); width:auto;
    border-radius:0; -webkit-user-drag:none; user-select:none;
  }
  .work__meta{ display:flex; justify-content:space-between; gap:12px; padding-top:12px; }
  .work__title{ font-size:15px; letter-spacing:.01em; }

  /* ================================ LIGHTBOX ================================ */
  .lightbox{
    position:fixed; inset:0; z-index:60;
    background:var(--card-bg);
    display:flex; align-items:center; justify-content:center;
    padding:84px 6vw;
    opacity:0; visibility:hidden;
    transition:opacity .45s var(--ease), visibility .45s var(--ease);
  }
  .lightbox.open{ opacity:1; visibility:visible; }

  .lightbox__fig{
    display:flex; gap:clamp(28px,5vw,72px); align-items:center;
    width:100%; max-width:1180px; margin:0;
  }
  /* Marco que respeta la proporción de la obra; scroll sobre la imagen = zoom al detalle */
  .lightbox__frame{ flex:0 1 auto; overflow:hidden; line-height:0; }
  .lightbox__img{
    display:block; width:auto; height:auto;
    max-height:78vh; max-width:52vw;
    transform-origin:center center; transition:transform .12s ease-out;
  }
  .lightbox__cap{ flex:1 1 42%; max-width:420px; }
  .lightbox__serie{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .lightbox__title{ margin:14px 0 18px; font-size:clamp(30px,3.4vw,48px); line-height:1.02; letter-spacing:-.01em; text-transform:uppercase; }
  .lightbox__meta{ font-size:14px; color:var(--muted); margin-bottom:22px; }
  .lightbox__desc{ font-size:16px; line-height:1.6; max-width:42ch; }

  .lightbox__close{
    position:absolute; top:24px; right:34px;
    display:inline-flex; align-items:baseline; gap:10px;   /* mismo criterio que .view__close */
    font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  }
  .lightbox__close .x{ font-size:18px; line-height:1; }
  .lightbox__nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:54px; height:54px; font-size:22px; color:var(--ink);
    /* centrado por caja y no por línea de base: sin esto ← y → se apoyan
       distinto dentro del botón y parecen de tamaños diferentes */
    display:flex; align-items:center; justify-content:center; line-height:1;
  }
  .lightbox__nav--prev{ left:2.4vw; }
  .lightbox__nav--next{ right:2.4vw; }
  .lightbox__frame{ cursor:none; }

  /* Vista de la obra sola sobre un fondo difuminado (click en la obra dentro del lightbox) */
  .solo{
    position:fixed; inset:0; z-index:80;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden;
    transition:opacity .45s var(--ease), visibility .45s var(--ease);
  }
  .solo.open{ opacity:1; visibility:visible; }
  .solo__bg{
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    filter:blur(48px) brightness(.42) saturate(1.15);
    transform:scale(1.25);
  }
  .solo__img{
    position:relative; z-index:1; display:block;
    width:auto; height:auto; max-width:86vw; max-height:88vh;
    box-shadow:0 40px 140px rgba(0,0,0,.55);
    transform:scale(.96); transition:transform .5s var(--ease);
  }
  .solo.open .solo__img{ transform:scale(1); }

  @media (max-width:760px){
    /* En vertical los controles NO flotan sobre el contenido: entran en el flujo.
       El orden de la grilla los ubica —cerrar arriba de la imagen, flechas debajo
       del texto— así no hay nada que tape nada y no hacen falta recuadros ni
       fondos para despegarlos. El HTML no cambia: solo se les asigna su lugar. */
    .lightbox{
      display:grid; align-content:start;
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "cerrar cerrar"
        "figura figura"
        "previa siguiente";
      row-gap:26px;
      padding:22px 22px 40px; overflow-y:auto;
    }
    .lightbox__fig{ grid-area:figura; flex-direction:column; align-items:flex-start; gap:22px; }
    .lightbox__img{ max-width:100%; max-height:52vh; }

    .lightbox__close{ position:static; grid-area:cerrar; justify-self:end; }

    .lightbox__nav{
      position:static; transform:none;
      width:52px; height:52px;
    }
    .lightbox__nav--prev{ grid-area:previa;    justify-self:start; }
    .lightbox__nav--next{ grid-area:siguiente; justify-self:end; }
  }

  /* ========== SOBRE KONO (réplica del video: split negro, foto sticky, scroll suave) ========== */
  .view--sobre{ background:#000; color:#fff; }
  .sobre{ display:grid; grid-template-columns:30% 70%; }
  .sobre em{ font-style:normal; opacity:.45; }
  .about__embed{ width:100%; height:100%; border:0; display:block; }

  /* Columna izquierda (negra): dos pantallas que scrollean */
  .sobre__left{ background:#000; }
  /* padding izquierdo a 26px: alineado con el logo del header y simétrico con el derecho */
  .sobre__screen{ min-height:100vh; display:flex; flex-direction:column; padding:26px 26px 34px 26px; }

  .sobre__statement{ margin-top:18vh; }
  .sobre__statement,
  .sobre__fact{ position:relative; padding-left:44px; max-width:36ch; font-size:13.5px; line-height:1.5; color:#fff; }
  .sobre__dot{ position:absolute; left:0; top:.22em; font-size:11px; line-height:1; }

  /* 44px de sangría = la misma que separa el texto de la viñeta de su punto,
     así el video comparte borde izquierdo con el texto y el punto queda colgado al margen */
  .sobre__reel{ margin:auto 0 0 44px; }
  .sobre__reel-video{ width:min(100%,300px); aspect-ratio:16/10; background:#111; overflow:hidden; }
  .sobre__reel-video iframe{ width:100%; height:100%; border:0; display:block; }
  /* el sitio esconde el cursor en todos lados; sobre el reproductor hace falta verlo */
  .sobre__reel-video{ cursor:auto; }
  .sobre__reel-cap{
    display:flex; justify-content:space-between; width:min(100%,300px);
    margin-top:10px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  }

  .sobre__screen--2{ padding-top:20vh; gap:16vh; justify-content:flex-start; }

  /* Aparición de textos al hacer scroll */
  .reveal{ opacity:0; transform:translateY(26px); filter:blur(6px);
    transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
  .reveal.in{ opacity:1; transform:none; filter:none; }

  /* Columna derecha: foto fija (sticky) mientras scrollea la izquierda */
  .sobre__main{ position:relative; }
  .sobre__photo{
    position:sticky; top:0; height:100vh; overflow:hidden; z-index:1;
    background:#0a0a0a url('leo-lempel.webp') center top/cover no-repeat;
  }
  /* velo lateral: la pared del fondo es clara y la cita es blanca */
  .sobre__photo::before{
    content:''; position:absolute; inset:0 auto 0 0; width:52%; pointer-events:none;
    background:linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,0));
  }
  /* Misma tipografía y misma caja que .sobre__lead: cuando el párrafo grande
     termina de scrollear, la cita aparece en su lugar con el mismo registro.
     Va abajo porque la cara del artista queda en la mitad superior de la foto. */
  .sobre__quote{
    position:absolute; left:9%; right:4%; top:auto; bottom:10vh;
    font-size:clamp(24px,2.9vw,44px); line-height:1.16; letter-spacing:-.005em;
    text-indent:16%; color:#fff;
    text-shadow:0 1px 10px rgba(0,0,0,.55);
    opacity:0; transform:translateY(18px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
  }
  .sobre__quote.in{ opacity:1; transform:none; }

  /* Párrafo grande superpuesto en la primera pantalla (scrollea junto al contenido) */
  .sobre__lead{
    position:absolute; top:0; left:9%; right:4%; height:100vh; z-index:2;
    /* abajo, no centrado: centrado caía sobre la cara del artista */
    display:flex; align-items:flex-end; padding-bottom:10vh;
    font-size:clamp(24px,2.9vw,44px); line-height:1.16; letter-spacing:-.005em;
    text-indent:16%; color:#fff; pointer-events:none;
  }

  body.view-dark .cursor{ color:#fff; }

  @media (max-width:760px){
    .sobre{ grid-template-columns:1fr; }
    .sobre__main{ order:-1; }   /* mobile: foto + texto van antes del video y sus textos */
    /* padding izquierdo a 20px: mismo margen que la cita sobre la foto */
    .sobre__screen{ min-height:0; padding:22px 20px 34px 20px; }
    .sobre__statement{ margin-top:8vh; }
    /* en mobile el video se queda en el margen de 20px, alineado con la cita sobre la foto.
       Sin el tope de 300px ocupa todo el ancho disponible y queda centrado por construcción. */
    .sobre__reel{ margin-top:8vh; margin-left:0; }
    .sobre__reel-video,
    .sobre__reel-cap{ width:100%; }
    .sobre__screen--2{ padding-top:6vh; gap:8vh; }
    .sobre__main{ min-height:100vh; }
    .sobre__photo{ position:relative; height:100vh; }
    /* En mobile todo queda como estaba: el párrafo grande centrado sobre la foto
       y la cita chica abajo. El tamaño grande y la bajada son solo de desktop. */
    .sobre__lead{ align-items:center; padding-bottom:0; }
    /* la cita ocupa el ancho completo abajo de la foto, sobre un degradado que la hace legible */
    .sobre__quote{
      left:20px; right:20px; top:auto; bottom:26px; z-index:2; max-width:none;
      font-size:15px; line-height:1.5; letter-spacing:normal; text-indent:0;
      text-shadow:0 1px 10px rgba(0,0,0,.6);
    }
    .sobre__photo::before{ display:none; }
    .sobre__photo::after{
      content:''; position:absolute; inset:auto 0 0 0; height:52%; pointer-events:none;
      background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
    }
    .sobre__nav{ padding:18px 20px; }
    .sobre__lead{ left:7%; right:6%; font-size:26px; }
  }

  /* ================== CONTACTO (fondo a sangre + tarjeta de formulario) ================== */
  /* 34% y no el centro: la foto es muy vertical (2:3) y centrada le cortaba la cabeza.
     La primera capa es la viñeta: oscurece los bordes y deja limpio el centro. */
  .view--contacto{ background:#c9c2b2 url('contacto.webp') center 34%/cover no-repeat; color:var(--ink); }

  /* Viñeta: capa pegada al viewport, no al alto de la sección. En mobile la sección
     mide más que la pantalla, así que como fondo se estiraba y el marco visible
     quedaba sin efecto. Con sticky encuadra siempre lo que se está viendo. */
  .contacto__vineta{
    position:sticky; top:0; z-index:1;
    height:100vh; margin-bottom:-100vh;
    pointer-events:none;
    background:radial-gradient(125% 90% at 50% 40%, rgba(0,0,0,0) 45%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.6) 100%);
  }
  .contacto{ position:relative; z-index:2; min-height:100vh; padding:26px 34px; }   /* por encima de la viñeta */

  /* Fondo fotográfico oscuro → textos claros */
  .contacto__title{
    position:absolute; left:34px; bottom:20vh;
    font-weight:500; font-size:clamp(48px,6.5vw,92px);
    line-height:.98; letter-spacing:-.01em; text-transform:uppercase;
    color:var(--paper); text-shadow:0 1px 12px rgba(0,0,0,.35);
  }
  .contacto__info{ position:absolute; left:34px; bottom:6vh; display:flex; gap:56px; font-size:13px; line-height:1.6; color:var(--paper); text-shadow:0 1px 8px rgba(0,0,0,.35); }
  .contacto__label{ display:block; margin-bottom:10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.65); }
  .contacto__link{ border-bottom:1px solid rgba(255,255,255,.4); transition:border-color .25s var(--ease); }
  .contacto__link:hover{ border-bottom-color:#fff; }

  .cform{
    position:absolute; right:6vw; top:50%; transform:translateY(-50%);
    width:min(480px, 42vw);
    background:var(--card-bg); color:var(--ink);
    padding:30px 32px;
  }
  .cform__title{ font-weight:500; font-size:15px; margin-bottom:10px; }
  .cform__intro{ font-size:12.5px; line-height:1.55; color:var(--muted); margin-bottom:20px; }
  .cform__intro em, .cform__check em{ font-style:normal; color:var(--muted); }

  .cform__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-bottom:14px; }
  .cform__field{ display:block; }
  .cform__field--full{ margin-bottom:14px; }
  .cform__field span{ display:block; margin-bottom:6px; font-size:11.5px; }
  .cform__field i{ font-style:normal; color:#b0442c; }
  .cform__field input,
  .cform__field textarea{
    width:100%; padding:10px 12px;
    font:inherit; font-size:13px; color:var(--ink);
    background:var(--card-bg); border:1px solid var(--line); border-radius:0;
  }
  .cform__field input::placeholder,
  .cform__field textarea::placeholder{ color:#b9b7b1; }
  .cform__field input:focus,
  .cform__field textarea:focus{ outline:none; border-color:var(--ink); }
  .cform__field textarea{ resize:vertical; min-height:96px; }

  .cform__radios{ border:none; margin-bottom:14px; font-size:12px; }
  .cform__radios legend{ margin-bottom:8px; font-size:11.5px; }
  .cform__radios legend i{ font-style:normal; color:#b0442c; }
  .cform__radios label{ margin-right:18px; }
  .cform__radios input{ accent-color:var(--ink); margin-right:6px; }

  .cform__check{ display:flex; gap:10px; align-items:flex-start; font-size:11px; line-height:1.5; color:var(--muted); margin-bottom:18px; }
  .cform__check input{ accent-color:var(--ink); margin-top:2px; }
  .cform__check a{ text-decoration:underline; }

  .cform__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .cform__ok{ display:none; font-size:12px; }
  .cform.sent .cform__ok{ display:block; }
  .cform__err{ display:none; font-size:12px; color:#b0442c; max-width:30ch; }
  .cform.error .cform__err{ display:block; }
  .cform.sending .cform__send{ opacity:.55; pointer-events:none; }
  .cform__bot{ position:absolute; left:-9999px; }   /* señuelo antispam: fuera de pantalla, no display:none */
  .h-captcha{ margin:16px 0 4px; }
  /* el widget mide 303px fijos: en pantallas angostas se achica para no desbordar la tarjeta */
  @media (max-width:380px){
    .h-captcha{ transform:scale(.9); transform-origin:left top; }
  }
  .cform__send{
    display:inline-flex; align-items:center; gap:10px; margin-left:auto;
    background:var(--ink); color:var(--paper); padding:12px 22px;
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; border-radius:0;
  }

  /* ================== SOCIALES (texto + grilla que scrollea sola) ================== */
  .view--sociales{ background:var(--card-bg); color:var(--ink); overflow:hidden; }
  .sociales{ display:grid; grid-template-columns:46% 54%; min-height:100vh; }

  .sociales__left{ position:relative; padding:26px 34px; display:flex; flex-direction:column; }

  .sociales__tags{ display:flex; align-items:flex-start; justify-content:flex-end; gap:16px; margin-top:4vh; padding-right:8%; }
  .sociales__tags p{ text-align:right; font-size:15px; line-height:1.6; }
  .sociales__hash{ font-size:56px; line-height:.9; }

  .sociales__title{
    margin-top:9vh;
    font-weight:500; font-size:clamp(34px,3.8vw,54px);
    /* 1.12 hacía que el resaltado del handle pisara la "g" de Instagram */
    line-height:1.34; letter-spacing:-.01em;
  }
  .sociales__handle{ background:#cdd2c1; padding:0 6px; }
  .sociales__amp{ font-size:.72em; }

  .sociales__warn{ margin-top:auto; padding-bottom:4vh; max-width:34ch; font-size:17px; line-height:1.5; }
  .sociales__warn em{ font-style:normal; color:var(--muted); }

  .sociales__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:0 26px; height:100vh; overflow:hidden; }
  .sociales__col{ overflow:hidden; }
  .sociales__track{ display:flex; flex-direction:column; gap:22px; animation:soc-scroll 26s linear infinite; }
  .sociales__col--slow .sociales__track{ animation-duration:38s; }
  .sociales__col--fast .sociales__track{ animation-duration:19s; }
  .sociales__card{
    display:block; flex:0 0 auto; aspect-ratio:9/14; width:100%;
    background-color:#e7e5e0; background-size:cover; background-position:center;
    transition:opacity .3s var(--ease);
  }
  .sociales__card:hover{ opacity:.78; }
  .sociales__card:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
  /* sin esto no se le puede acertar a una tarjeta en movimiento */
  .sociales__col:hover .sociales__track,
  .sociales__track:focus-within{ animation-play-state:paused; }
  @keyframes soc-scroll{
    from{ transform:translateY(0); }
    to{ transform:translateY(-50%); }   /* el contenido está duplicado: loop perfecto */
  }

  @media (prefers-reduced-motion:reduce){
    .sociales__track{ animation:none; }
  }

  @media (max-width:760px){
    .contacto{ padding:22px 20px 48px; }
    /* elipse más cerrada y con más recorrido hacia adentro: los datos de contacto
       van sobre la zona clara de las máquinas y sin esto se pierden en la foto */
    .contacto__vineta{
      background:radial-gradient(92% 52% at 50% 34%, rgba(0,0,0,0) 18%, rgba(0,0,0,.34) 52%, rgba(0,0,0,.62) 78%, rgba(0,0,0,.82) 100%);
    }
    .contacto__title{ position:static; margin-top:10vh; }
    .contacto__info{ position:static; margin-top:5vh; flex-direction:column; gap:22px; }
    .cform{ position:static; transform:none; width:100%; margin-top:6vh; padding:24px 20px; }
    .cform__grid{ grid-template-columns:1fr; }

    .sociales{ grid-template-columns:1fr; }
    .sociales__grid{ height:60vh; padding:0 20px 20px; }
    .sociales__tags{ justify-content:flex-start; padding-right:0; }
    .sociales__title{ margin-top:6vh; }
    .sociales__warn{ margin-top:6vh; }
  }

  /* ================================== MÓVIL ================================== */
  @media (max-width:760px){
    body{ cursor:auto; }
    .cursor{ display:none; }
    .home{ padding:0; }

    .card{ width:100vw; height:auto; min-height:100vh; flex-direction:column; }
    .headline{ font-size:7.8vw; }
    .panel{ flex:1 1 0; min-height:0; border-right:none; border-bottom:2px solid #000; transition:none; }
    .panel:last-child{ border-bottom:none; }
    .panel:hover{ flex-grow:1; }
    .panel__media{ background-attachment:scroll; }
    .panel__bg{ opacity:0 !important; }
    .logo{ top:24px; }
    .label{ left:22px; bottom:auto; top:50%; transform:translateY(-50%); }

    .view__logo{ left:20px; }
    .view__close{ right:20px; }
    .view__head{ padding:64px 20px 8px; }
    .series{ padding:0 20px 60px; }
    .serie__head{ gap:14px; }
    .serie__count{ display:none; }
    .work__img{ height:200px; width:auto; }
  }

  @media (prefers-reduced-motion:reduce){
    *{ transition-duration:.001ms !important; }
  }

  /* ---------------------------------------------------------------------
     Respaldo de SOCIALES: las publicaciones salen de posts.json, pero si el
     fetch falla estas reglas mantienen la grilla con imagen. Van por clase y
     no por atributo style= para que la CSP pueda prohibir estilos inline.
     --------------------------------------------------------------------- */
  .sociales__card[data-post="01"]{ background-image:url('instagram/post-01.webp'); }
  .sociales__card[data-post="02"]{ background-image:url('instagram/post-02.webp'); }
  .sociales__card[data-post="03"]{ background-image:url('instagram/post-03.webp'); }
  .sociales__card[data-post="04"]{ background-image:url('instagram/post-04.webp'); }
  .sociales__card[data-post="05"]{ background-image:url('instagram/post-05.webp'); }
  .sociales__card[data-post="06"]{ background-image:url('instagram/post-06.webp'); }
  .sociales__card[data-post="07"]{ background-image:url('instagram/post-07.webp'); }
  .sociales__card[data-post="08"]{ background-image:url('instagram/post-08.webp'); }
  .sociales__card[data-post="09"]{ background-image:url('instagram/post-09.webp'); }

  /* =====================================================================
     Alto real de pantalla en móviles (iOS)
     100vh incluye el alto de las barras de Safari, así que la pantalla
     visible es más baja y lo de abajo queda cortado. dvh mide el alto que
     de verdad se ve. Va al final y dentro de @supports: los navegadores
     que no lo entienden ignoran todo esto y siguen con los 100vh de arriba.
     ===================================================================== */
  @supports (height: 100dvh){
    body{ min-height:100dvh; }
    .home{ min-height:100dvh; }
    .card{ height:100dvh; }
    .view{ min-height:100dvh; }
    .contacto{ min-height:100dvh; }
    .contacto__vineta{ height:100dvh; margin-bottom:-100dvh; }
    .sociales{ min-height:100dvh; }
    .sociales__grid{ height:100dvh; }
    .sobre__screen{ min-height:100dvh; }
    .sobre__photo{ height:100dvh; }
    .sobre__lead{ height:100dvh; }

    @media (max-width:760px){
      /* estas tres tienen valores propios en móvil: se repiten para no pisarlos */
      .card{ height:auto; min-height:100dvh; }
      .sobre__screen{ min-height:0; }
      .sociales__grid{ height:60dvh; }
      .sobre__main{ min-height:100dvh; }
      .sobre__photo{ height:100dvh; }
    }
  }

  /* ============================== PRE-LOADER ==============================
     Todo el movimiento lo calcula el JS cuadro a cuadro. Acá solo va la capa
     y sus colores: superficie blanca + formas negras, como el original.
     ====================================================================== */
  .preloader{
    position:fixed; inset:0; z-index:100;
    display:grid; place-items:center;
    /* La capa deja pasar los clicks recién al final, pero mientras está el
       velo tampoco hay nada abajo que tocar. */
    animation:pl-rescate 0s linear 6s forwards;   /* red de seguridad si falla el JS */
  }
  @keyframes pl-rescate{ to{ opacity:0; visibility:hidden; } }

  /* overflow visible: la superficie blanca y la O al crecer se salen del lienzo */
  .preloader__lienzo{ width:min(64vw,470px); height:auto; overflow:visible; }
  .preloader__forma{ fill:#ffffff; }
  .preloader__negativo{ fill:#141414; }   /* talla el bloque con el color de la superficie */

  @media (prefers-reduced-motion:reduce){
    .preloader{ display:none; }
  }

  /* ============ SOBRE KONO en móvil: tolerante al texto agrandado ============
     El párrafo grande y la cita estaban posicionados en absoluto dentro de una
     caja de alto fijo. Con el tamaño de letra aumentado por accesibilidad se
     montaban uno sobre otro —desde 1,5x— y a partir de 2x la cita se salía de
     la foto y quedaba cortada.

     Ahora los dos fluyen en columna y la foto pasa a ser el fondo del bloque:
     si el texto crece, el bloque crece con él y nada puede superponerse.
     A tamaño normal se ve igual que antes.
     Va al final del archivo para ganarle a las reglas de alto fijo de arriba. */
  @media (max-width:760px){
    .sobre__main{
      position:relative;
      min-height:100vh;
      display:flex; flex-direction:column; justify-content:center;
      gap:5vh; padding:14vh 20px 30px;
      background:#0a0a0a url('leo-lempel.webp') center top/cover no-repeat;
    }
    /* velo inferior: la foto es clara en partes y el texto es blanco */
    .sobre__main::after{
      content:''; position:absolute; inset:auto 0 0 0; height:72%;
      background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
      pointer-events:none; z-index:0;
    }
    .sobre__photo{
      position:static; height:auto; min-height:0; overflow:visible;
      background:none; order:2; z-index:1;
    }
    .sobre__photo::before,
    .sobre__photo::after{ display:none; }

    .sobre__lead{
      position:static; order:1; z-index:1;
      height:auto; left:auto; right:auto; padding:0;
      display:block; text-indent:0;
    }
    .sobre__quote{
      position:static; left:auto; right:auto; top:auto; bottom:auto;
      max-width:none;
    }
  }
  @supports (height:100dvh){
    @media (max-width:760px){ .sobre__main{ min-height:100dvh; } }
  }