/* PROCESSUAL — estilos tomados sin cambios del HTML de referencia (PROCESSUAL_VISTA_FINAL_SOBRE_ORIGINAL_28OCT.html).
   Para cambiar colores, tipografías o medidas de todo el sitio, se edita aquí. */
:root{--ink:#171717;--muted:#656565;--soft:#f6f6f4;--line:#d8d8d5;--white:#fff;--max:1460px;--margin:clamp(20px,5.4vw,94px)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#fff;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}::selection{color:#fff;background:#222}.container{width:min(calc(100% - 2 * var(--margin)),var(--max));margin:auto}.topbar{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.97);border-bottom:1px solid #e4e4e2;backdrop-filter:blur(12px)}.topbar-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:28px}.wordmark{font-size:17px;letter-spacing:-.065em;font-weight:700}.nav{display:flex;align-items:center;gap:clamp(13px,2vw,35px)}.nav a{font-size:11px;letter-spacing:.02em;padding:8px 0;position:relative;white-space:nowrap}.nav a:hover::after,.nav a:focus-visible::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:currentColor}.mobile-toggle{display:none;border:0;background:transparent;padding:12px;font-size:19px}.overline{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;line-height:1.7}.muted{color:var(--muted)}.serif{font-family:'Instrument Serif',Georgia,'Times New Roman',serif;font-weight:400}.hero{padding-top:clamp(70px,8vw,142px)}.hero-meta{display:flex;justify-content:space-between;align-items:center;gap:20px}.hero-name{font-size:clamp(62px,12.9vw,216px);font-weight:400;letter-spacing:-.102em;line-height:.96;margin:27px 0 13px;white-space:nowrap}.hero-labels{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;font-size:13px;line-height:1.4}.hero-labels span:last-child{color:#888;font-size:10px;letter-spacing:.13em;text-align:right}.hero-art{margin:clamp(30px,6vw,84px) auto 0;min-height:100px}.hero-art img{width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply}.hero-bottom{padding:clamp(35px,5vw,80px) 0 clamp(95px,12vw,170px);display:grid;grid-template-columns:1.03fr .95fr;column-gap:clamp(40px,8vw,140px);align-items:start}.hero-statement{margin:0;font-size:clamp(46px,5.65vw,92px);line-height:1.015;letter-spacing:-.035em;max-width:760px}.hero-lead{padding-top:9px;max-width:480px}.hero-lead>p{margin:0;font-size:clamp(17px,1.6vw,23px);line-height:1.55;letter-spacing:-.015em}.cta-row{display:flex;gap:11px;flex-wrap:wrap;margin-top:35px}.button-outline{display:inline-flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid #303030;padding:15px 17px;font-size:10px;letter-spacing:.105em;text-transform:uppercase;transition:background .2s,color .2s;min-height:49px}.button-outline:hover,.button-outline:focus-visible{background:#171717;color:#fff}.arrow{font-size:16px;line-height:1}.section{padding:clamp(85px,9.5vw,155px) 0;border-top:1px solid var(--line);scroll-margin-top:85px}.section-kicker{display:flex;gap:20px;align-items:center;color:#6f6f6f;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;margin-bottom:clamp(38px,5vw,75px)}.section-kicker::before{content:'';width:25px;height:1px;background:#aaa}.display-title{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(62px,8.7vw,143px);line-height:.91;letter-spacing:-.038em;font-weight:400;margin:0 0 35px;max-width:1100px}.section-intro{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(28px,3vw,47px);line-height:1.12;max-width:775px;margin:0}.prose{font-size:clamp(16px,1.33vw,19px);line-height:1.8;max-width:700px}.prose p{margin:0 0 20px}.processual-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,8vw,130px);align-items:start;margin-top:70px}.processual-intro .prose{max-width:620px}.statement-break{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(45px,6vw,95px);line-height:1.06;max-width:1000px;letter-spacing:-.025em;margin:clamp(72px,10vw,165px) 0}.processual-after{display:grid;grid-template-columns:.7fr 1fr;gap:10vw;align-items:start}.processual-after .overline{padding-top:11px}.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,55px);margin-top:clamp(80px,10vw,160px)}.pillar{border-top:1px solid #171717;padding-top:20px}.pillar h3{font-size:17px;font-weight:550;margin:0 0 20px}.pillar p{font-size:14px;line-height:1.72;color:#595959;margin:0;max-width:340px}.programs-heading{padding-bottom:clamp(75px,7vw,112px)}.program-list{border-top:1px solid #171717}.program-card{display:grid;grid-template-columns:9% 44% 47%;gap:0;min-height:205px;border-bottom:1px solid var(--line);padding:30px 0 25px;position:relative;transition:background .2s;outline-offset:7px}.program-card:hover{background:#fafafa}.program-number{font-size:10px;color:#848484;letter-spacing:.07em;padding-top:15px}.program-title{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(39px,4.3vw,71px);line-height:.94;letter-spacing:-.024em;padding-right:clamp(20px,5vw,65px)}.program-info{padding-top:14px;min-height:148px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.program-info p{font-size:clamp(13px,1.18vw,16px);line-height:1.7;color:#545454;max-width:455px;width:100%;margin:0}.program-action{font-size:10px;letter-spacing:.125em;text-transform:uppercase;display:inline-flex;align-items:center;gap:15px;align-self:flex-end;padding-top:20px;white-space:nowrap}.program-card:hover .program-action{text-decoration:underline;text-underline-offset:5px}.art-teaser-grid{display:grid;grid-template-columns:.9fr 1fr;gap:clamp(30px,9vw,145px);align-items:end}.art-teaser-grid h2{font-size:clamp(95px,12vw,190px);line-height:.87;letter-spacing:-.055em;margin:0}.art-teaser-grid .serif{font-size:clamp(30px,3.8vw,60px);line-height:1.05;margin:0 0 28px}.art-teaser-grid .prose{font-size:17px}.editorial-link{display:inline-flex;gap:18px;align-items:center;padding:10px 0 9px;border-bottom:1px solid #171717;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:23px}.editorial-link:hover{opacity:.62}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-top:85px}.step{padding-top:20px;border-top:1px solid #171717}.step small{font-size:10px;color:#777;letter-spacing:.12em}.step h3{font:400 clamp(30px,3.3vw,46px) 'Instrument Serif',Georgia,serif;margin:17px 0}.step p{font-size:14px;line-height:1.65;color:#666;max-width:280px}.fineprint{font-size:12px;color:#777;margin-top:35px}.perspective-list{margin-top:75px;border-top:1px solid #1c1c1c}.perspective{display:grid;grid-template-columns:9% 40% 51%;align-items:start;gap:0;border-bottom:1px solid var(--line);padding:30px 0 45px}.perspective-num{font-size:11px;color:#777;padding-top:10px}.perspective h3{font:400 clamp(29px,3.2vw,48px) 'Instrument Serif',Georgia,serif;margin:0}.perspective p{font-size:16px;color:#555;line-height:1.6;max-width:590px;margin:5px 0 0}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,9vw,150px);margin-top:20px}.contact-layout h2{font-size:clamp(67px,7.6vw,116px);margin-bottom:37px}.contact-copy{font-size:17px;line-height:1.8;max-width:560px;color:#535353}.contact-details{margin:58px 0 0;font-size:14px;line-height:1.65}.contact-details strong{display:block;color:#151515;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}.contact-details a{border-bottom:1px solid #555}.contact-form{border-top:1px solid #171717;padding-top:13px}.form-row{margin-top:26px}.form-row label{display:block;font-size:11px;letter-spacing:.08em;font-weight:550;margin-bottom:13px}.form-row input,.form-row select,.form-row textarea{width:100%;border:none;border-bottom:1px solid #a2a2a2;border-radius:0;background:#fff;padding:11px 2px;color:#181818;outline:none;font-size:15px;resize:vertical}.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-bottom:2px solid #171717}.form-row input::placeholder,.form-row textarea::placeholder{color:#aaa}.form-row[hidden]{display:none!important}.form-help{color:#777;font-size:11px;margin:6px 0}.form-submit{background:#171717;color:#fff;border:1px solid #171717;width:100%;min-height:55px;margin-top:35px;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:16px 17px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.form-submit:hover{background:#353535}.form-message{font-size:12px;color:#666;line-height:1.6}.site-footer{border-top:1px solid #d8d8d5;padding:25px 0 45px}.footer-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.footer-inner strong{font-size:15px;letter-spacing:-.045em}.footer-inner span{display:block;font-size:11px;color:#666;line-height:1.8}.footer-right{text-align:right}.page-hero{padding:clamp(78px,9vw,145px) 0 0}.page-back{display:inline-flex;gap:11px;align-items:center;text-transform:uppercase;letter-spacing:.11em;font-size:10px;color:#666;margin-bottom:clamp(75px,10vw,150px)}.page-back:hover{color:#111}.page-title{font:400 clamp(78px,10vw,169px)/.86 'Instrument Serif',Georgia,serif;letter-spacing:-.035em;margin:25px 0 60px;max-width:1170px}.page-epigraph{font:400 clamp(39px,4.4vw,70px)/1.12 'Instrument Serif',Georgia,serif;max-width:870px;letter-spacing:-.02em;margin:0 0 clamp(80px,11vw,165px)}.page-content{border-top:1px solid var(--line);padding:clamp(55px,7vw,120px) 0;display:grid;grid-template-columns:30% 1fr;gap:clamp(35px,8vw,110px)}.page-content .page-overline{font-size:10px;color:#757575;letter-spacing:.15em;text-transform:uppercase;padding-top:10px}.page-content .prose{max-width:780px}.page-content .prose p{margin-bottom:30px}.page-highlight{font:400 clamp(36px,4vw,64px)/1.11 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;max-width:950px;margin:30px 0 55px}.work-areas{border-top:1px solid var(--line);margin-top:65px}.work-area{display:grid;grid-template-columns:65px 1fr 1.18fr;gap:20px;border-bottom:1px solid var(--line);padding:32px 0}.work-area .num{font-size:11px;color:#888}.work-area h3{font:400 clamp(28px,3vw,43px) 'Instrument Serif',Georgia,serif;line-height:1.1;margin:0}.work-area p{font-size:15px;line-height:1.76;color:#5b5b5b;margin:0;max-width:525px}.closing{padding:clamp(85px,10vw,160px) 0;border-top:1px solid var(--line)}.closing .closing-thought{font:400 clamp(46px,5.3vw,82px)/1.04 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;max-width:1120px;margin:0 0 55px}.detail-contact{padding:85px 0;border-top:1px solid var(--line);margin:0 0 20px}.detail-contact-inner{display:flex;justify-content:space-between;align-items:center;gap:40px}.detail-contact h2{font:400 clamp(44px,4.6vw,70px) 'Instrument Serif',Georgia,serif;margin:0;max-width:680px}.micro-note{font-size:11px;color:#777;line-height:1.6;margin-top:18px}.detail-contact .button-outline{min-width:230px}.skip-link{position:absolute;transform:translateY(-250%);background:#fff;padding:12px;z-index:200}.skip-link:focus{transform:translateY(0)}
@media(max-width:1000px){.program-card{grid-template-columns:14% 38% 48%}.program-title{font-size:clamp(36px,5vw,53px)}.program-info{padding-left:12px}.hero-name{font-size:12vw}.nav{gap:17px}}
@media(max-width:720px){:root{--margin:22px}.topbar-inner{min-height:64px}.mobile-toggle{display:block}.nav{display:none;position:absolute;left:0;right:0;top:64px;padding:22px var(--margin) 28px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:14px}.nav.is-open{display:flex}.nav a{font-size:14px;padding:7px 0}.hero{padding-top:72px}.hero-meta .muted{display:none}.hero-name{font-size:12.25vw;letter-spacing:-.095em;margin-top:30px}.hero-labels span:last-child{display:none}.hero-art{margin-top:32px}.hero-bottom{grid-template-columns:1fr;gap:35px;padding-bottom:115px}.hero-statement{font-size:clamp(48px,10vw,73px)}.hero-lead>p{font-size:18px}.cta-row{flex-direction:column;align-items:stretch}.button-outline{justify-content:space-between}.section{padding:90px 0}.display-title{font-size:clamp(64px,13vw,95px);margin-bottom:25px}.section-intro{font-size:31px}.processual-intro{grid-template-columns:1fr;gap:0;margin-top:55px}.statement-break{font-size:clamp(50px,11vw,85px);margin:90px 0}.processual-after{grid-template-columns:1fr;gap:20px}.pillars{grid-template-columns:1fr;gap:35px;margin-top:90px}.pillar{max-width:none}.program-card{grid-template-columns:1fr;min-height:unset;padding:26px 0 25px}.program-number{padding-top:0;margin-bottom:26px}.program-title{font-size:clamp(49px,10vw,66px);max-width:400px;margin-bottom:20px}.program-info{padding:0;align-items:flex-start;min-height:0}.program-info p{font-size:15px;max-width:550px}.program-action{align-self:flex-end;margin-top:35px}.art-teaser-grid{grid-template-columns:1fr;gap:40px}.art-teaser-grid h2{font-size:clamp(90px,20vw,150px)}.steps{grid-template-columns:1fr 1fr;gap:34px;margin-top:45px}.perspective{grid-template-columns:55px 1fr;gap:0;padding-bottom:35px}.perspective p{grid-column:2;margin-top:13px}.contact-layout{grid-template-columns:1fr;gap:65px}.contact-layout h2{font-size:clamp(65px,13vw,95px)}.footer-inner{align-items:flex-start}.footer-right{max-width:140px}.page-hero{padding:90px 0 0}.page-title{font-size:clamp(78px,15vw,122px);margin-bottom:45px}.page-epigraph{font-size:clamp(43px,8vw,68px);margin-bottom:85px}.page-content{grid-template-columns:1fr;gap:28px}.work-area{grid-template-columns:40px 1fr;gap:10px 12px}.work-area p{grid-column:2}.detail-contact-inner{display:block}.detail-contact .button-outline{margin-top:35px;width:100%}.closing .closing-thought{font-size:clamp(47px,9vw,70px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.preview-view[hidden]{display:none!important}

/* PROCESSUAL — ajustes puntuales, conservando el sistema visual original */
#contacto .section-kicker{margin-bottom:clamp(50px,6.5vw,95px)}
.contact-channel{margin-top:29px}
.contact-channel-label{font-size:10px;letter-spacing:.145em;font-weight:600;color:#222;display:block;margin-bottom:7px}
.contact-channel a{font-size:clamp(14px,1.12vw,17px);overflow-wrap:anywhere}
.contact-form-heading{margin:5px 0 31px}
.contact-details{margin-top:51px}
/* El enlace para regresar es un botón editorial, distinto de las etiquetas de programa. */
.page-back{display:inline-flex;align-items:center;gap:12px;border:1px solid #343434;
 padding:13px 17px;color:#171717;background:#fff;font-size:12px;letter-spacing:.06em;
 font-weight:600;margin-bottom:clamp(56px,7.6vw,112px);text-transform:none;
 transition:background .2s,color .2s,border-color .2s}
.page-back:hover,.page-back:focus-visible{color:#fff;background:#171717;border-color:#171717}
.page-back:focus-visible{outline:2px solid #171717;outline-offset:4px}
@media(max-width:720px){.contact-channel{margin-top:23px}.page-back{font-size:12px;padding:12px 15px;margin-bottom:58px}}

/* ---------------------------------------------------------------
   Cambio 1 — La portada cabe en la primera pantalla (computadora y tableta).
   Logotipo, subtítulo y «Colágeno» se ven completos sin desplazarse; la frase
   principal y los botones quedan en la pantalla siguiente. Las medidas se
   adaptan también a la altura de la ventana (svh), no solo al ancho.
   En celular (720 px o menos) la portada no cambia.
   --------------------------------------------------------------- */
@media(min-width:721px){
  .hero{
    --p:min(clamp(70px,8vw,142px),5svh);      /* espacio bajo la barra */
    --lm:min(27px,2svh);                      /* espacio sobre el logotipo */
    --f:min(clamp(62px,12.9vw,216px),18svh);  /* tamaño del logotipo */
    padding-top:var(--p)
  }
  .hero-name{font-size:var(--f);margin-top:var(--lm)}

  /* Cambios 2 y 4 — Debajo del logotipo, los textos a la izquierda (subtítulo
     arriba, disciplinas en la esquina inferior). «Colágeno», ya sin fondo, flota
     a la derecha pegada al borde de la pantalla. app.js calcula su tamaño:
     la agranda todo lo posible sin que la escultura toque ninguna letra. */
  .hero{position:relative}
  .hero-labels{
    flex-direction:column;justify-content:space-between;align-items:flex-start;
    max-width:min(456px,32vw);padding-bottom:4px;
    /* llega hasta el pie de la primera pantalla */
    min-height:max(260px,calc(100svh - 75px - var(--p) - 17px - var(--lm) - var(--f) * .96 - 13px - 16px))
  }
  .hero-labels span:last-child{text-align:left}

  /* Prueba B — Portada según el esquema de la usuaria (08/11/2026):
     logotipo más chico (≈ 39 % del ancho), el bloque ubicación + logotipo +
     subtítulo con una sangría respecto del margen, las disciplinas sobre el
     margen en la esquina inferior izquierda, aire debajo de la portada
     (≈ 12 % de la pantalla) y «Colágeno» de hasta la mitad del ancho
     (el tope está en app.js). */
  .hero{
    --p:min(clamp(70px,8vw,142px),7svh);
    --f:min(7.35vw,13.5svh);
    --sangria:2.7vw
  }
  .hero-meta,.hero-name,.hero-labels span:first-child{margin-left:var(--sangria)}
  .hero-labels{
    max-width:min(560px,42vw);
    min-height:max(220px,calc(100svh - 75px - var(--p) - 17px - var(--lm) - var(--f) * .96 - 13px - 12svh))
  }
  /* el aire inferior queda en blanco: la frase principal empieza recién en la pantalla siguiente */
  .hero-bottom{margin-top:12svh}
  .hero-art{
    position:absolute;margin:0;pointer-events:none;
    /* posición inicial, antes de que app.js la ajuste */
    right:calc((100% - var(--av,100vw)) / 2);top:calc(var(--p) + 17px + var(--lm) + var(--f) * .96 + 13px);width:40vw
  }
  .hero-art img{width:100%;height:auto;mix-blend-mode:normal}
}
@media(min-width:721px) and (max-width:1000px){.hero{--f:min(12vw,18svh)}}

/* ---------------------------------------------------------------
   Cambio 3 — Las demás secciones y las páginas de programa también se
   adaptan a la altura de la pantalla en computadora: títulos y espacios se
   moderan en pantallas bajas para que cada apertura se vea completa.
   En celular (720 px o menos) no cambia nada.
   --------------------------------------------------------------- */
@media(min-width:721px){
  .section{padding:min(clamp(85px,9.5vw,155px),11svh) 0}
  .section-kicker{margin-bottom:min(clamp(38px,5vw,75px),5svh)}
  .display-title{font-size:min(clamp(62px,8.7vw,143px),15svh);margin-bottom:min(35px,3.5svh)}
  .section-intro{font-size:min(clamp(28px,3vw,47px),5.2svh)}
  .processual-intro{margin-top:min(70px,6svh)}
  .statement-break{font-size:min(clamp(45px,6vw,95px),11svh);margin:min(clamp(72px,10vw,165px),13svh) 0}
  .pillars{margin-top:min(clamp(80px,10vw,160px),12svh)}
  .programs-heading{padding-bottom:min(clamp(75px,7vw,112px),8svh)}
  .contact-layout h2{font-size:min(clamp(67px,7.6vw,116px),13svh)}
  #contacto .section-kicker{margin-bottom:min(clamp(50px,6.5vw,95px),6svh)}

  /* Páginas de programa: volver, etiqueta, título y frase en la primera pantalla */
  .page-hero{padding-top:min(clamp(78px,9vw,145px),7svh)}
  .page-back{margin-bottom:min(clamp(56px,7.6vw,112px),7svh)}
  .page-title{font-size:min(clamp(78px,10vw,169px),17svh);margin:min(25px,2.5svh) 0 min(60px,5svh)}
  .page-epigraph{font-size:min(clamp(39px,4.4vw,70px),7.5svh);margin-bottom:min(clamp(80px,11vw,165px),10svh)}
  .page-content{padding:min(clamp(55px,7vw,120px),9svh) 0}
  .closing{padding:min(clamp(85px,10vw,160px),12svh) 0}
  .closing .closing-thought{font-size:min(clamp(46px,5.3vw,82px),10svh)}
  .detail-contact{padding:min(85px,10svh) 0}
  .detail-contact h2{font-size:min(clamp(44px,4.6vw,70px),8svh)}
}

/* ---------------------------------------------------------------
   Cambio 5 — Menú de programas en escenas (inspirado en el video «Idea Menú»).
   Cada programa es una escena: número arriba a la izquierda, título grande al
   centro, obra a la izquierda, recuadro central, descripción a la derecha y el
   botón en la esquina inferior derecha. En computadora la escena queda fija
   mientras los recuadros suben a distintas velocidades y el texto cambia con
   un fundido (app.js activa ese modo con la clase .escenario-animado).
   En celular, tableta o con «reducir movimiento», las escenas se apilan.
   --------------------------------------------------------------- */

/* Base: escenas apiladas */
.escenario{border-top:1px solid #171717}
.escena{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;padding:34px 0 30px;border-bottom:1px solid var(--line)}
.escena-numero{grid-column:1/-1;margin:0;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#848484}
.escena-titulo{grid-column:1/-1;margin:0;font:400 clamp(44px,6vw,71px)/.94 'Instrument Serif',Georgia,serif;letter-spacing:-.024em}
.escena-obra{margin:0}
.escena-obra img{width:100%;height:auto}
.escena-obra.vacia{aspect-ratio:4/3;background:var(--soft);border:1px solid #e4e4e2}
.escena-centro{display:none}
.escena-descripcion p{margin:0;font-size:clamp(14px,1.2vw,16px);line-height:1.7;color:#545454}
.escena-boton{grid-column:1/-1;justify-self:end;display:inline-flex;align-items:center;gap:16px;font-size:10px;letter-spacing:.125em;text-transform:uppercase}
@media(max-width:720px){
  .escena{grid-template-columns:1fr}
  .escena-titulo{font-size:clamp(46px,11vw,66px)}
  .escena-obra.vacia{display:none}
}

/* Mira: recuadro con esquinas y una cruz, como en el video */
.escena-mira{
  position:relative;flex:none;width:46px;height:46px;
  --c:#171717;--l:11px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) top left/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/1px var(--l) no-repeat;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)
}
.escena-mira::before,.escena-mira::after{content:'';position:absolute;left:50%;top:50%;background:var(--c);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.escena-mira::before{width:17px;height:1px;transform:translate(-50%,-50%)}
.escena-mira::after{width:1px;height:17px;transform:translate(-50%,-50%)}
.escena-boton:hover .escena-mira,.escena-boton:focus-visible .escena-mira{transform:scale(.86)}
.escena-boton:hover .escena-mira::before,.escena-boton:focus-visible .escena-mira::before{transform:translate(-50%,-50%) rotate(90deg)}
.escena-boton:hover .escena-mira::after,.escena-boton:focus-visible .escena-mira::after{transform:translate(-50%,-50%) rotate(90deg)}
.escena-boton:hover>span:last-child{text-decoration:underline;text-underline-offset:5px}
.escena-titulo a:focus-visible,.escena-boton:focus-visible{outline:2px solid #171717;outline-offset:6px}

/* Computadora: escenario fijo con recuadros en movimiento */
.escenario-animado .escenario{
  --V:calc(100svh - 75px);
  position:relative;border-top:0;
  height:calc(var(--V) * (1 + (var(--escenas) - 1) * 1.5))
}
.escenario-animado .escenario-fijo{position:sticky;top:75px;height:var(--V);overflow:hidden}
.escenario-animado .escena{position:absolute;inset:0;display:block;padding:0;border:0;pointer-events:none}
.escenario-animado .escena.activa{pointer-events:auto}
.escenario-animado .escena-obra,
.escenario-animado .escena-centro,
.escenario-animado .escena-descripcion{position:absolute;top:50%;will-change:transform}
.escenario-animado .escena-obra{left:0;width:23%}
.escenario-animado .escena-obra.vacia{display:block}
.escenario-animado .escena-centro{
  display:block;left:29%;width:40%;aspect-ratio:6/5;max-height:70%;
  background:var(--soft);border:1px solid var(--line);transition:background-color .3s
}
.escenario-animado .escena-centro:hover{background:#efefec}
.escenario-animado .escena-descripcion{
  right:0;width:22%;aspect-ratio:1;
  display:flex;align-items:flex-end;padding:clamp(16px,1.6vw,26px);
  border:1px solid var(--line);background:#fff
}
.escenario-animado .escena-descripcion p{font-size:clamp(13px,1.05vw,15px);line-height:1.65}
.escenario-animado .escena-numero,
.escenario-animado .escena-titulo,
.escenario-animado .escena-boton{position:absolute;z-index:3}
.escenario-animado .escena-numero{left:0;top:9%}
.escenario-animado .escena-titulo{
  left:50%;top:47%;white-space:nowrap;
  font-size:min(clamp(56px,6.9vw,124px),14svh);line-height:.9;letter-spacing:-.035em;
  color:rgba(23,23,23,.9)
}
.escenario-animado .escena-boton{right:0;bottom:7%;flex-direction:column;align-items:flex-end;gap:14px}

/* ---------------------------------------------------------------
   Prueba C (08/11/2026) — Cada sección es una vista propia.
   Portada, 01 / Una perspectiva, 02 / Programas y 06 / Contacto se muestran
   de a una, solo al llegar desde su botón o desde el menú (app.js: VISTAS).
   --------------------------------------------------------------- */
/* Una sección sola ya no necesita la línea divisoria superior */
.preview-view > .section{border-top:0}
/* El menú marca la sección en la que se está */
.nav a[aria-current="page"]::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:currentColor}

/* 01 / Una perspectiva, compacta: el texto no cambia, solo su disposición.
   El título en una línea; debajo, los dos párrafos lado a lado; luego la frase
   central a la izquierda y «Investigar antes de proponer» a la derecha; y los
   tres ejes al final. */
@media(min-width:1001px){
  #processual{padding:min(52px,6.5svh) 0 min(64px,8svh)}
  #processual > .container{
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(24px,3vw,56px);align-items:start
  }
  #processual .section-kicker{grid-column:1/-1;margin-bottom:min(26px,3.5svh)}
  #processual .display-title{
    grid-column:1/-1;margin:0;max-width:none;
    font-size:min(clamp(40px,4.2vw,80px),9svh);line-height:.95
  }
  #processual .processual-intro{grid-column:1/-1;gap:clamp(24px,3vw,56px);margin-top:min(28px,3.5svh)}
  #processual .processual-intro .prose,
  #processual .processual-after .prose{font-size:clamp(14px,1.05vw,16px);line-height:1.65;max-width:none}
  #processual .statement-break{
    grid-column:1/span 6;margin:min(44px,6svh) 0 0;
    font-size:min(clamp(32px,3.4vw,56px),7.5svh);line-height:1.04
  }
  #processual .processual-after{grid-column:7/-1;grid-template-columns:1fr;gap:12px;margin-top:min(44px,6svh)}
  #processual .processual-after .overline{padding-top:0}
  #processual .processual-after .prose p{margin:0 0 10px}
  #processual .pillars{grid-column:1/-1;margin-top:min(40px,5svh)}
  #processual .pillar{padding-top:16px}
  #processual .pillar h3{margin-bottom:10px}
}

/* ---------------------------------------------------------------
   Prueba D (08/11/2026) — Ajustes pedidos sobre la Prueba C.
   --------------------------------------------------------------- */

/* Menú de programas: las cuatro obras en recuadros idénticos (4:3; las fotos ya
   vienen preparadas a esa proporción, con su fondo extendido) */
.escena-obra{aspect-ratio:4/3;overflow:hidden}
.escena-obra img{width:100%;height:100%;object-fit:cover}

@media(min-width:1001px){
  /* Recuadro central apenas más chico, centrado entre la obra y la descripción */
  .escenario-animado .escena-centro{left:32%;width:36%;max-height:64%}

  /* Portada: las disciplinas comienzan donde comienza el subtítulo */
  .hero-labels span:last-child{margin-left:var(--sangria)}

  /* Portada, segunda pantalla: frase y descripción más contenidas */
  .hero-statement{font-size:min(clamp(34px,3.6vw,60px),8svh);line-height:1.05}
  .hero-lead>p{font-size:clamp(15px,1.25vw,19px);line-height:1.6}
  .hero-bottom{padding-bottom:min(clamp(64px,8vw,120px),12svh)}

  /* 02 / Programas y 06 / Contacto: títulos e introducciones al tamaño de la sección 01 */
  #que-hacemos,#contacto{padding-top:min(52px,6.5svh)}
  #que-hacemos .section-kicker,#contacto .section-kicker{margin-bottom:min(26px,3.5svh)}
  #que-hacemos .display-title{font-size:min(clamp(40px,4.2vw,80px),9svh);line-height:.95;margin-bottom:min(18px,2.5svh)}
  #que-hacemos .section-intro{font-size:min(clamp(20px,1.9vw,30px),4.2svh);line-height:1.2;max-width:860px}
  #que-hacemos .programs-heading{padding-bottom:min(40px,5svh)}
  #contacto .contact-layout{margin-top:0}
  #contacto .contact-layout h2{font-size:min(clamp(40px,4.2vw,80px),9svh);line-height:.95;margin-bottom:min(24px,3svh)}
  #contacto .contact-copy{font-size:clamp(14px,1.05vw,16px);line-height:1.65;margin:0 0 10px}
  #contacto .contact-details{margin-top:min(32px,4svh)}
  #contacto .contact-channel{margin-top:16px}
  #contacto .form-row{margin-top:16px}
  #contacto .form-row label{margin-bottom:6px}
  #contacto .form-row textarea{min-height:96px;height:96px}
  #contacto .form-submit{margin-top:22px}

  /* Páginas de cada programa, con el mismo criterio que la sección 01 */
  .page-hero{padding-top:min(44px,5.5svh)}
  .page-back{margin-bottom:min(36px,4.5svh)}
  .page-hero .section-kicker{margin-bottom:min(20px,2.5svh)}
  .page-title{font-size:min(clamp(48px,5.2vw,90px),10svh);line-height:.92;margin:0 0 min(18px,2.5svh)}
  .page-epigraph{font-size:min(clamp(24px,2.5vw,40px),5.5svh);line-height:1.15;max-width:900px;margin-bottom:min(36px,4.5svh)}
  .page-content{padding:min(36px,4.5svh) 0;grid-template-columns:22% 1fr;gap:clamp(24px,4vw,72px)}
  .page-content .page-overline{padding-top:4px}
  /* el texto de cada programa en dos columnas, como en una publicación */
  .page-content .prose{max-width:none;columns:2;column-gap:clamp(28px,3vw,56px);font-size:clamp(14px,1.05vw,16px);line-height:1.65}
  .page-content .prose p{margin:0 0 12px;break-inside:avoid}
  /* Inteligencia para Galerías: las cinco áreas ocupan todo el ancho de la página, en tres columnas
     (01 02 03 / 04 05, se leen de izquierda a derecha) */
  .page-content > div:last-child{display:contents}
  .page-content .prose{grid-column:2}
  .work-areas{grid-column:1/-1;margin-top:min(12px,1.5svh);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3vw,56px);border-top:0}
  .work-area{grid-template-columns:36px minmax(0,1fr);gap:6px 14px;padding:min(16px,2.2svh) 0;border-top:1px solid var(--line);border-bottom:0}
  .work-area p{grid-column:2}
  .work-area h3{font-size:min(clamp(22px,2vw,32px),4.5svh)}
  .work-area p{font-size:14px;line-height:1.65;max-width:none}
  .closing{padding:min(44px,5.5svh) 0}
  .closing .closing-thought{font-size:min(clamp(30px,3.2vw,54px),7svh);margin:0}
  .detail-contact{padding:min(44px,5.5svh) 0}
  .detail-contact h2{font-size:min(clamp(30px,3vw,48px),6svh)}
}

/* ---------------------------------------------------------------
   Prueba E (08/11/2026) — Ajustes sobre la Prueba D.
   --------------------------------------------------------------- */

/* Descripciones del menú de programas justificadas (bordes rectos a ambos lados) */
.escena-descripcion p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* Portada: logotipo apenas más chico (la obra se limita al 42 % del ancho en app.js) */
@media(min-width:721px){
  .hero{--f:min(6.9vw,12.7svh)}
}

@media(min-width:1001px){
  /* 01 / Una perspectiva: los dos párrafos iniciales a la derecha, uno debajo del otro,
     en la misma columna que «Investigar antes de proponer» */
  #processual .processual-intro{grid-column:7/-1;grid-template-columns:1fr;gap:12px}

  /* 02 / Programas: título y frase un poco más grandes */
  #que-hacemos .display-title{font-size:min(clamp(46px,4.8vw,90px),10.5svh)}
  #que-hacemos .section-intro{font-size:min(clamp(22px,2.15vw,34px),4.7svh);max-width:940px}

  /* Páginas de programa */
  /* más aire entre la etiqueta («Programa 01 / …») y el título */
  .page-hero .section-kicker{margin-bottom:min(48px,6svh)}
  /* «Sobre el programa» a la izquierda y todo el texto a la derecha, en una sola
     columna de algo menos de la mitad de la pantalla */
  .page-content{grid-template-columns:minmax(0,1fr) min(45vw,780px)}
  .page-content .prose{columns:1}
  /* ArtCapsule: la frase final sin línea superior, como parte del mismo texto,
     y desplazada hacia la derecha */
  .closing{border-top:0;padding:min(12px,1.5svh) 0 min(56px,7svh)}
  .closing .closing-thought{margin-left:auto;max-width:min(54vw,920px)}
}

/* ---------------------------------------------------------------
   Prueba F (08/11/2026) — Ajustes sobre la Prueba E.
   ArtCapsule: la frase final en una sola línea, desde el margen izquierdo.
   El tamaño se calcula para que la línea entera quepa en el ancho de la página
   (23,5 ≈ largo de la frase medido en «letras» de Instrument Serif; deja un pequeño margen).
   --------------------------------------------------------------- */
@media(min-width:1001px){
  .closing .closing-thought{
    margin-left:0;max-width:none;white-space:nowrap;
    font-size:min(calc((100vw - 2 * var(--margin)) / 23.5), calc(var(--max) / 23.5), 7svh)
  }
}

/* ---------------------------------------------------------------
   Prueba G (08/11/2026) — primer prototipo.
   ArtCapsule: la frase final sigue en una sola línea, pero alineada a la derecha,
   terminando en el mismo borde que el texto de arriba (como en la imagen de referencia).
   --------------------------------------------------------------- */
@media(min-width:1001px){
  .closing .closing-thought{width:fit-content;margin-left:auto;margin-right:0;text-align:right}
}

/* ---------------------------------------------------------------
   Prueba H (09/11/2026) — Obra de fondo en 02 / Programas.
   Queda quieta dentro del escenario mientras las escenas pasan por delante.
   Ubicada de forma asimétrica (corrida a la derecha y hacia abajo), a un tamaño
   medio, y algo velada para que el título y las descripciones se lean bien.
   El blanco de la foto se funde con el fondo de la página (multiply).
   --------------------------------------------------------------- */
.escenario-fondo{display:none}
.escenario-animado .escenario-fondo{
  display:block;position:absolute;z-index:0;pointer-events:none;
  height:min(96%,58vw);aspect-ratio:1;
  left:55%;top:47%;transform:translate(-50%,-50%) rotate(-8deg);
  opacity:.42
}
.escenario-animado .escenario-fondo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
/* las escenas van por delante del fondo */
.escenario-animado .escena{z-index:1}
/* el recuadro central se vuelve apenas translúcido para que la obra de fondo se perciba detrás */
.escenario-animado .escena-centro{background:rgba(246,246,244,.7)}
.escenario-animado .escena-centro:hover{background:rgba(239,239,236,.8)}

/* ---------------------------------------------------------------
   Prueba I (09/11/2026) — Menú de programas simplificado.
   Sin recuadro de obra ni recuadro central: queda el título (con su movimiento),
   el número, la descripción a la derecha y el botón. La espiral de fondo es más
   grande y está centrada en el escenario.
   --------------------------------------------------------------- */
.escenario-animado .escenario-fondo{
  height:min(118%,72vw);
  left:50%;top:50%;transform:translate(-50%,-50%)
}
/* en tableta y celular (escenas apiladas) la descripción ocupa todo el ancho, ya que no hay obra a su lado */
.escena-descripcion{grid-column:1/-1;max-width:640px}

/* ---------------------------------------------------------------
   Prueba J (09/11/2026) — La espiral de fondo con su color completo, sin velar
   (en la Prueba I tenía 42 % de intensidad).
   --------------------------------------------------------------- */
.escenario-animado .escenario-fondo{opacity:1}

/* ---------------------------------------------------------------
   Prueba K (09/11/2026) — Letras blancas donde el título cruza las partes
   negras de la espiral. Capa con copias blancas de los títulos, recortada con
   una máscara de las zonas oscuras de la obra (app.js la arma y la ubica).
   --------------------------------------------------------------- */
.escenario-claro{display:none}
.escenario-animado .escenario-claro{
  display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat
}
.escena-claro{position:absolute;inset:0}
.escenario-claro .escena-titulo{color:#fff}

/* ---------------------------------------------------------------
   Prueba L (09/11/2026) — Cada título entra dentro del hueco del aro.
   app.js lo centra en el hueco y le da el ancho y tamaño justos; el título
   puede repartirse en dos líneas equilibradas, centradas.
   --------------------------------------------------------------- */
.escenario-animado .escena-titulo.en-aro{white-space:normal;text-align:center;text-wrap:balance;line-height:.95}

/* ---------------------------------------------------------------
   Prueba M (09/11/2026) — Versión para celular (pantalla de referencia 390 × 844).
   Mismo criterio que en computadora: títulos más contenidos, menos espacio vacío
   y páginas más cortas. Solo afecta a pantallas de 720 px o menos.
   --------------------------------------------------------------- */
@media(max-width:720px){
  /* Portada */
  .hero{padding-top:40px}
  .hero-name{margin-top:14px}
  .hero-art{margin-top:22px}
  .hero-bottom{padding:28px 0 64px;gap:22px}
  .hero-statement{font-size:clamp(30px,8.6vw,36px);line-height:1.06}
  .hero-lead>p{font-size:16px;line-height:1.6}
  .cta-row{margin-top:24px}

  /* Secciones 01, 02 y 06 */
  .section{padding:52px 0 60px}
  .section-kicker{margin-bottom:26px}
  .display-title{font-size:clamp(38px,11vw,46px);line-height:.96;margin-bottom:18px}
  .section-intro{font-size:clamp(19px,5.4vw,22px);line-height:1.3}
  .prose{font-size:15.5px;line-height:1.65}
  .prose p{margin-bottom:14px}
  .processual-intro{margin-top:24px}
  .statement-break{font-size:clamp(30px,8.4vw,36px);line-height:1.06;margin:40px 0}
  .processual-after{gap:14px}
  .pillars{margin-top:40px;gap:26px}
  .pillar{padding-top:14px}
  .pillar h3{margin-bottom:10px}
  .programs-heading{padding-bottom:36px}
  .contact-layout{gap:44px}
  .contact-layout h2{font-size:clamp(38px,11vw,46px);line-height:.96;margin-bottom:20px}
  .contact-copy{font-size:15.5px;line-height:1.65}
  .contact-details{margin-top:32px}
  .form-row{margin-top:18px}
  .form-row textarea{min-height:110px}

  /* Páginas de programa */
  .page-hero{padding:32px 0 0}
  .page-back{margin-bottom:36px}
  .page-hero .section-kicker{margin-bottom:26px}
  .page-title{font-size:clamp(40px,11.5vw,48px);line-height:.95;margin:0 0 18px}
  .page-epigraph{font-size:clamp(22px,6.2vw,26px);line-height:1.2;margin-bottom:36px}
  .page-content{padding:28px 0 32px;gap:14px}
  .work-areas{margin-top:20px}
  .work-area{padding:16px 0}
  .work-area h3{font-size:22px}
  .work-area p{font-size:14.5px;line-height:1.65}
  .closing{padding:8px 0 44px}
  .closing .closing-thought{font-size:clamp(28px,8vw,34px)}
  .detail-contact{padding:44px 0}
  .detail-contact h2{font-size:clamp(30px,8.4vw,36px)}
  .detail-contact .button-outline{margin-top:24px}

  /* 02 / Programas: descripciones sin justificar (en una columna angosta dejan huecos) */
  .escena{padding:26px 0 28px;gap:14px}
  .escena-descripcion p{text-align:left;font-size:15px}
}

/* 02 / Programas en celular y tableta: cada título dentro de la espiral, como en computadora.
   app.js mide el hueco del aro y fija el relleno exacto (este relleno es solo el inicial). */
body:not(.escenario-animado) .escenario[style*="fondo-escena"] .escena-titulo{
  justify-self:start;width:min(120vw,520px);margin-left:calc(50% - min(60vw,260px));aspect-ratio:1;
  display:grid;place-items:center;text-align:center;text-wrap:balance;
  padding:20% 19% 0 35%;
  background:var(--fondo-escena) center/contain no-repeat;
  font-size:clamp(22px,7.4vw,32px);line-height:1
}
/* la espiral es un poco más ancha que la pantalla: se recorta apenas en los bordes, sin desplazar la página */
body:not(.escenario-animado) #que-hacemos{overflow-x:clip}
body:not(.escenario-animado) .escena{grid-template-columns:minmax(0,1fr)}
/* menos blanco arriba y abajo de la espiral en el celular */
body:not(.escenario-animado) .escenario[style*="fondo-escena"] .escena-titulo{margin-block:calc(-1 * min(9vw,40px))}

/* ---------------------------------------------------------------
   Prueba N (09/11/2026) — Celular, segunda vuelta.
   1. Portada como réplica de la de computadora: PROCESSUAL más chico, ocupando
      algo más de la mitad del ancho; debajo, a la izquierda, el subtítulo; y
      «Colágeno» más chica, a la derecha, pegada al borde de la pantalla.
   2. Todas las letras un escalón más chicas, para que ningún texto compita con
      el logotipo (que ahora es más pequeño).
   3. 02 / Programas con el mismo movimiento que en computadora (ver más abajo).
   --------------------------------------------------------------- */
@media(max-width:720px){
  /* 1. Portada */
  .hero{
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:start;
    padding-top:34px
  }
  .hero-meta{display:none}
  .hero-cuerpo{display:contents}
  .hero-name{grid-column:1/-1;font-size:8.8vw;letter-spacing:-.095em;margin:0}
  .hero-labels{grid-column:1;grid-row:2;margin-top:10px;font-size:10.5px;line-height:1.45;letter-spacing:.01em}
  .hero-art{
    grid-column:2;grid-row:2;width:54vw;min-height:0;
    margin:8px calc(-1 * var(--margin)) 0 0
  }
  .hero-bottom{grid-column:1/-1;padding:40px 0 56px;gap:18px}
  .hero-statement{font-size:clamp(22px,6.2vw,26px);line-height:1.1;letter-spacing:-.02em}
  .hero-lead>p{font-size:14px;line-height:1.6}
  .cta-row{margin-top:20px}

  /* 2. Letras más chicas en todas las páginas */
  .section{padding:44px 0 52px}
  .section-kicker{margin-bottom:22px}
  .display-title,
  .contact-layout h2{font-size:clamp(28px,8vw,32px);line-height:1;margin-bottom:16px}
  .section-intro{font-size:clamp(16px,4.4vw,18px);line-height:1.35}
  .prose,.contact-copy{font-size:14px;line-height:1.65}
  .statement-break{font-size:clamp(22px,6.2vw,26px);line-height:1.1;margin:34px 0}
  .pillar h3{font-size:15px}
  .pillar p{font-size:13px;line-height:1.65}
  .contact-details{font-size:13px}
  .page-title{font-size:clamp(30px,8.6vw,34px);line-height:1;margin:0 0 14px}
  .page-epigraph{font-size:clamp(18px,4.9vw,20px);line-height:1.25;margin-bottom:30px}
  .work-area h3{font-size:18px}
  .work-area p{font-size:13.5px}
  .closing .closing-thought{font-size:clamp(22px,6.2vw,26px);line-height:1.1}
  .detail-contact h2{font-size:clamp(22px,6.2vw,26px);line-height:1.1}
  .escena-descripcion p{font-size:14px}
  .footer-inner{font-size:13px;flex-direction:column;align-items:flex-start;gap:12px}
  .footer-right{display:grid;gap:2px;text-align:left;width:auto}
  .footer-right [data-year]{display:inline}
}

/* 3. 02 / Programas en celular y tableta, con movimiento (como en computadora):
   la espiral queda quieta de fondo; el título (dentro del aro) se desliza y aparece
   con un fundido, y la descripción, en su recuadro, sube a medida que se baja.
   Con «reducir movimiento» activado en el teléfono se ven las escenas apiladas. */
@media(max-width:1000px){
  .escenario-animado .escenario-fondo{height:min(118vw,60%);top:41%}
  .escenario-animado .escena-numero{top:3%}
  .escenario-animado .escena-descripcion{
    top:78%;right:0;width:min(74%,360px);aspect-ratio:auto;padding:16px 18px
  }
  .escenario-animado .escena-descripcion p{font-size:13.5px;line-height:1.6;text-align:left}
  .escenario-animado .escena-boton{bottom:2.5%;flex-direction:row;align-items:center;gap:12px}
  .escenario-animado .escena-mira{width:40px;height:40px}
}
@media(max-width:720px){
  /* la barra superior del celular es más baja (65 px) */
  .escenario-animado .escenario{--V:calc(100svh - 65px)}
  .escenario-animado .escenario-fijo{top:65px}
}@media(max-width:720px){
  /* la espiral llega hasta los bordes de la pantalla (el texto conserva sus márgenes) */
  .escenario-animado .escenario-fijo{margin-inline:calc(-1 * var(--margin))}
  .escenario-animado .escena{left:var(--margin);right:var(--margin)}
  .escenario-animado .escena-claro{left:var(--margin);right:var(--margin)}
  /* títulos del aro acordes con la nueva escala del celular */
  .escenario-animado .escena-titulo{font-size:clamp(26px,8.6vw,36px)}
}
/* ---------------------------------------------------------------
   Prueba O (09/11/2026) — Entrada del sitio, inspirada en el video «Intro».
   Pantalla completa con la obra «Mirar de otro modo» de fondo (arriba, como una
   franja), debajo la frase «El arte como destino» y el botón «Descubrir» en un
   recuadro blanco y fino. El fondo se desliza muy despacio, de ida y vuelta.
   Todo aparece en orden y con calma: la obra, luego la frase y por último el botón.
   app.js calcula el tamaño y la posición de la foto (ubicarEntrada).
   --------------------------------------------------------------- */
.entrada{
  position:fixed;inset:0;z-index:200;overflow:hidden;
  background:#d9d8d6;
  transition:opacity 1.1s ease
}
.entrada[hidden]{display:none}
body.con-entrada{overflow:hidden}
.entrada.saliendo{opacity:0;pointer-events:none}

.entrada-fondo{position:absolute;inset:0;opacity:0;transition:opacity 2.4s ease}
.entrada-fondo img{
  position:absolute;max-width:none;
  animation:entrada-deriva 28s ease-in-out infinite alternate;will-change:transform
}
@keyframes entrada-deriva{
  from{transform:translate3d(-1.1%,.5%,0) scale(1)}
  to{transform:translate3d(1.1%,-.5%,0) scale(1.045)}
}

.entrada-texto{
  position:absolute;left:0;right:0;top:var(--obra-abajo,62%);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:min(13svh,120px) 24px 0
}
.entrada-frase{
  margin:0;color:#171717;
  font:300 clamp(30px,3.5vw,58px)/1.1 'DM Sans',Arial,sans-serif;letter-spacing:.015em;
  opacity:0;transform:translateY(16px);transition:opacity 1.8s ease 1.4s,transform 1.8s ease 1.4s
}
.entrada-boton{
  margin-top:min(7svh,58px);padding:15px 54px;
  border:1px solid #fff;background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#171717;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  opacity:0;transform:translateY(12px);
  transition:opacity 1.6s ease 2.6s,transform 1.6s ease 2.6s,background-color .4s ease
}
.entrada-boton:hover,.entrada-boton:focus-visible{background:#fff}
.entrada-boton:focus-visible{outline:2px solid #171717;outline-offset:4px}

.entrada.visible .entrada-fondo{opacity:1}
.entrada.visible .entrada-frase,
.entrada.visible .entrada-boton{opacity:1;transform:none}

@media(max-width:720px){
  .entrada-texto{padding-top:min(11svh,90px)}
  .entrada-frase{font-size:clamp(26px,7.4vw,32px)}
  .entrada-boton{padding:14px 44px}
}
@media(prefers-reduced-motion:reduce){
  .entrada-fondo img{animation:none}
  .entrada-fondo,.entrada-frase,.entrada-boton{transition-duration:.01s;transition-delay:0s}
}
/* ---------------------------------------------------------------
   Prueba P (09/11/2026) — Botón «Descubrir» más confiable.
   Aparece solo con un fundido, sin desplazarse (si se mueve mientras se lo
   presiona, el navegador puede no contar el clic), y un poco antes.
   --------------------------------------------------------------- */
.entrada-boton{transform:none;transition:opacity 1.4s ease 2.2s,background-color .4s ease}
.entrada.visible .entrada-boton{transform:none}@media(prefers-reduced-motion:reduce){.entrada-boton{transition-duration:.01s;transition-delay:0s}}

/* ---------------------------------------------------------------
   Prueba Q (09/11/2026) — Prueba de color: la frase «El arte como destino» en
   morado con algo de fucsia (más morado que rosado). Se lee bien sobre la pared clara
   (contraste de alrededor de 4,8 a 1).
   --------------------------------------------------------------- */
.entrada-frase{color:#8e2a86}
/* ---------------------------------------------------------------
   Prueba R (09/11/2026) — 02 / Programas dentro del inicio y una obra por programa.
   Cada programa muestra su propia obra de fondo, entera y quieta, centrada en el
   escenario; al bajar, se funde con la del programa siguiente (app.js). El título
   va centrado sobre la obra y sus letras se vuelven blancas donde la obra es oscura.
   --------------------------------------------------------------- */
.escenario-animado .escenario.con-obras .escenario-fondo{height:min(84%,58vw)}
.escenario-animado .escenario.con-obras .escenario-fondo img{position:absolute;inset:0;mix-blend-mode:normal;opacity:0}
.escenario-animado .escena-claro{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* la obra dentro de cada escena solo se usa cuando las escenas van apiladas (con «reducir movimiento») */
.escena-imagen{display:none;margin:0}
body:not(.escenario-animado) .escena-imagen{display:block}
.escena-imagen img{width:100%;height:auto}
@media(max-width:1000px){
  .escenario-animado .escenario.con-obras .escenario-fondo{height:min(100vw,56%);top:35%}
}/* Sobre obras tan cargadas, las letras mitad negras y mitad blancas se leían mal: el título
   va todo en blanco con una sombra suave (la capa de letras blancas parciales no se usa). */
.escenario-animado .escenario.con-obras .escena-titulo{
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.45),0 6px 34px rgba(0,0,0,.55)
}
.escenario-animado .escenario.con-obras .escenario-claro{display:none}
/* ---------------------------------------------------------------
   Prueba S (09/11/2026) — Descripciones nuevas (más largas) y botón visible.
   - El recuadro de la descripción se adapta al texto (ya no es cuadrado) y es algo
     más ancho; la primera frase va en negrita, como entrada.
   - «Consultar programa» es ahora un botón de verdad: un recuadro negro, justo debajo
     de la descripción, que sube junto con ella. Al pasar el mouse se invierte (fondo
     blanco, letras negras) y la flecha avanza; al presionarlo se hunde apenas.
   --------------------------------------------------------------- */
/* el bloque (recuadro + botón) se mueve entero; el recuadro es el párrafo */
.escenario-animado .escena-descripcion{
  width:min(27%,420px);aspect-ratio:auto;display:block;
  padding:0;border:0;background:none
}
.escena-descripcion p{
  border:1px solid var(--line);background:#fff;
  padding:clamp(18px,1.6vw,26px)
}
.escenario-animado .escena-descripcion p{font-size:clamp(13px,.98vw,14.5px);line-height:1.62}
.escena-descripcion p strong{display:block;margin-bottom:8px;font-weight:600;color:#171717;text-align:left}

/* el botón */
.escena-boton,
.escenario-animado .escena-boton{
  position:static;width:100%;margin-top:10px;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border:1px solid #171717;background:#171717;color:#fff;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease,transform .15s ease
}
.escena-boton .arrow{display:inline-block;font-size:15px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.escena-boton:hover,.escena-boton:focus-visible{background:#fff;color:#171717}
.escena-boton:hover .arrow,.escena-boton:focus-visible .arrow{transform:translate(4px,-4px)}
.escena-boton:active{transform:scale(.98)}
.escena-boton:hover>span:last-child{text-decoration:none}
.escena-boton:focus-visible{outline:2px solid #171717;outline-offset:3px}

/* celular y tableta: la obra un poco más chica y el bloque de texto a todo el ancho, debajo */
@media(max-width:1000px){
  .escenario-animado .escenario.con-obras .escenario-fondo{height:min(80vw,42%);top:27%}
  .escenario-animado .escena-descripcion{top:72%;width:100%;padding:0}
  .escenario-animado .escena-descripcion p{font-size:13px;line-height:1.58;padding:16px 18px}
  .escenario-animado .escena-boton{padding:14px 18px}
}
/* ---------------------------------------------------------------
   Prueba T (09/11/2026) — Una obra sin fondo en cada página de programa.
   Ocupa el espacio en blanco: en computadora, la columna de «Sobre el programa»
   (queda fija mientras se lee el texto) o, en Galerías, la celda vacía junto a las
   áreas 04 y 05. Cada obra va apenas girada y con una sombra suave, como un objeto
   apoyado sobre la página. En celular aparece al final del texto.
   --------------------------------------------------------------- */
.page-obra{margin:0;pointer-events:none}
.page-obra img{
  display:block;width:100%;height:auto;
  transform:rotate(var(--giro,0deg));
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.16)) drop-shadow(0 3px 5px rgba(0,0,0,.1))
}
.page-obra--lateral,.page-obra--celda{display:none}
@media(min-width:1001px){
  .page-obra--final{display:none}
  .page-content .page-overline{align-self:stretch}
  .page-obra--lateral{
    display:block;position:sticky;top:calc(75px + 7svh);
    width:min(82%,500px);margin-top:min(44px,5.5svh)
  }
  .page-obra--celda{display:flex;align-items:center;justify-content:center;padding:min(20px,2.6svh) 0}
  .page-obra--celda img{width:min(88%,420px)}
}
@media(max-width:1000px){
  .page-obra--final{display:block;width:min(84%,420px);margin:40px auto 12px}
}
/* ---------------------------------------------------------------
   Prueba V (09/11/2026) — Versión liviana (mismo aspecto, archivo mucho más chico).
   «Colágeno» y las obras de las páginas de programa pasaron de PNG sin fondo a JPG
   sobre blanco; las obras de programa traen la sombra ya dibujada (antes la ponía
   el navegador). «multiply» funde el blanco de la foto con el blanco de la página.
   --------------------------------------------------------------- */
.hero-art img{mix-blend-mode:multiply}
/* la foto de cada obra trae un margen blanco de 69 px por lado (de 760) para la sombra:
   se agranda y se corre para que la obra conserve el mismo tamaño y lugar que antes */
.page-obra img{
  filter:none;mix-blend-mode:multiply;
  width:118.16%;max-width:none;margin:-9.08%
}/* en la celda de Galerías la obra medía min(88%,420px): mismo cálculo con el margen de la sombra */
.page-obra--celda img{width:min(103.98%,496.3px);margin:calc(-1 * min(7.99%,38.1px))}

/* ---------------------------------------------------------------
   Prueba W (09/11/2026), copia del NUEVO ORIGINAL (Prueba V).
   1. La frase de la entrada en rosado vino (más rosado que vino).
   2. «Volver a los programas», en cada página de programa, con el mismo diseño que
      «Consultar programa»: recuadro negro con letras blancas; al pasar el mouse se
      invierte (blanco con letras negras) y la flecha retrocede; al presionarlo se hunde
      apenas. Así se ve claramente cómo salir para conocer los demás programas.
   --------------------------------------------------------------- */
.entrada-frase{color:#a6385f}

.page-back{
  display:inline-flex;align-items:center;gap:16px;
  padding:16px 22px;border:1px solid #171717;background:#171717;color:#fff;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .35s ease,color .35s ease,transform .15s ease
}
.page-back .arrow{display:inline-block;font-size:15px;line-height:1;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.page-back:hover,.page-back:focus-visible{background:#fff;color:#171717;border-color:#171717}
.page-back:hover .arrow,.page-back:focus-visible .arrow{transform:translateX(-5px)}
.page-back:active{transform:scale(.98)}
.page-back:focus-visible{outline:2px solid #171717;outline-offset:3px}
@media(max-width:720px){
  .page-back{padding:14px 18px}
}
@media(prefers-reduced-motion:reduce){.page-back,.page-back .arrow{transition:none}}
/* ---------------------------------------------------------------
   Prueba X (10/11/2026) — 01 / Una perspectiva con el aro TRAMPAS de fondo.
   El aro tiene su centro en el borde izquierdo de la pantalla: se ve solo su mitad,
   en el lado de la página que tiene más blanco, y gira muy despacio (una vuelta cada
   dos minutos). Va detrás de los textos; donde una letra lo cruza, un halo blanco
   suave la mantiene legible. En celular ocupa su propio espacio entre los párrafos.
   --------------------------------------------------------------- */
#processual{position:relative;overflow-x:clip}
.processual-aro{pointer-events:none;z-index:0}
.processual-aro img{
  display:block;width:100%;height:100%;max-width:none;
  mix-blend-mode:multiply;
  animation:aro-gira 120s linear infinite
}
@keyframes aro-gira{to{transform:rotate(360deg)}}
#processual .container > :not(.processual-aro){position:relative;z-index:1}
#processual .display-title,
#processual .statement-break,
#processual .pillar h3,
#processual .pillar p{
  text-shadow:0 0 4px #fff,0 0 10px #fff,0 0 18px #fff,0 0 26px #fff
}
@media(min-width:721px){
  .processual-aro{
    position:absolute;left:0;top:50%;
    width:min(600px,42vw,82svh);aspect-ratio:1;
    transform:translate(-50%,-50%)
  }
}
@media(max-width:720px){
  /* celular: la mitad del aro, a la izquierda, en un espacio propio entre los párrafos */
  .processual-aro{
    position:relative;height:min(68vw,300px);margin:28px 0 4px calc(-1 * var(--margin));
    width:calc(100% + var(--margin))
  }
  .processual-aro img{position:absolute;left:0;top:0;width:auto;height:100%;aspect-ratio:1;transform-origin:center;translate:-50% 0}
}
@media(prefers-reduced-motion:reduce){.processual-aro img{animation:none}}
/* ---------------------------------------------------------------
   Prueba Y (10/11/2026) — Encabezado con frase y 01 / Una perspectiva más amplia.
   --------------------------------------------------------------- */
/* PROCESSUAL acompañado de «Conexión con 150 colecciones» */
.marca-bloque{display:flex;align-items:baseline;gap:14px;min-width:0}
.marca-frase{font-size:11px;letter-spacing:.06em;color:#6b6b6b;white-space:nowrap}
@media(max-width:720px){
  .marca-bloque{flex-direction:column;align-items:flex-start;gap:2px}
  .marca-frase{font-size:10px;letter-spacing:.05em}
}

/* Computadora: la frase va en la columna del texto, entre los párrafos y «Investigar
   antes de proponer», y sobresale un poco hacia la izquierda. Los tres ejes bajan para
   dejar más lugar al aro, que app.js agranda según el blanco disponible. */
@media(min-width:1001px){
  #processual .statement-break{
    grid-column:7/-1;max-width:none;
    margin:min(46px,6svh) 0 0 calc(-1 * clamp(56px,6.5vw,130px))
  }
  #processual .processual-after{grid-column:7/-1;margin-top:min(40px,5.5svh)}
  #processual .pillars{margin-top:min(150px,20svh)}
  .processual-aro{top:50%}
}
/* tableta: como en celular, la mitad del aro en su propio espacio entre los párrafos */
@media(min-width:721px) and (max-width:1000px){
  .processual-aro{
    position:relative;left:auto;top:auto;transform:none;aspect-ratio:auto;
    height:min(44vw,340px);margin:32px 0 4px calc(-1 * var(--margin));width:calc(100% + var(--margin))
  }
  .processual-aro img{position:absolute;left:0;top:0;width:auto;height:100%;aspect-ratio:1;translate:-50% 0}
}
/* ---------------------------------------------------------------
   Prueba Z (10/11/2026) — El aro de 01 / Una perspectiva, un poco más visible:
   se ve algo más de la mitad (su centro entra un 12 % en la pantalla) y es un poco
   más grande (los tres ejes bajan un poco más para darle lugar).
   --------------------------------------------------------------- */
@media(min-width:1001px){
  .processual-aro{transform:translate(-38%,-50%)}
  #processual .pillars{margin-top:min(220px,28svh)}
}
@media(min-width:721px) and (max-width:1000px){
  .processual-aro{height:min(52vw,400px)}
  .processual-aro img{translate:-38% 0}
}
@media(max-width:720px){
  .processual-aro{height:min(78vw,340px)}
  .processual-aro img{translate:-38% 0}
}
/* ---------------------------------------------------------------
   Prueba AA (10/11/2026), copia de la Prueba Z.
   --------------------------------------------------------------- */
/* 1. «Toda posibilidad comienza con una conversación» más chica y en cursiva, para que no
      compita con el título ni con la bajada de cada página */
.detail-contact h2{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.005em}
@media(min-width:721px){ .detail-contact h2{font-size:min(clamp(22px,1.8vw,28px),4.4svh);line-height:1.2} }
@media(max-width:720px){ .detail-contact h2{font-size:clamp(18px,5vw,20px);line-height:1.25} }

/* 2. Las obras de las páginas de programa (JPG con su blanco): la mezcla se hace con toda la
      figura, así el blanco ya no tapa la línea de abajo (la figura fija formaba un grupo
      aparte y su blanco se pintaba encima) */
.page-obra{mix-blend-mode:multiply}
.page-obra img{mix-blend-mode:normal}

/* 3. Menú con un apartado más: en pantallas medianas la frase de la marca va debajo,
      para que entren todos los botones */
@media(min-width:721px) and (max-width:1180px){
  .marca-bloque{flex-direction:column;align-items:flex-start;gap:2px}
  .marca-frase{font-size:10px}
}

/* 4. Processual Transatlántico */
.transatlantico-ruta{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 min(36px,4.5svh);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#6b6b6b
}
.transatlantico-ruta span{color:#a8a8a4}
@media(min-width:1001px){
  .closing--larga .closing-thought{
    white-space:normal;width:auto;max-width:min(52vw,900px);margin-left:auto;text-align:left;
    font-size:min(clamp(24px,2.2vw,36px),5.4svh);line-height:1.18
  }
}
@media(max-width:720px){
  .closing--larga .closing-thought{font-size:clamp(20px,5.6vw,22px);line-height:1.2}
}
/* ---------------------------------------------------------------
   Prueba AB (10/11/2026), copia de la Prueba AA.
   --------------------------------------------------------------- */
/* «Toda posibilidad comienza con una conversación»: mismo tamaño chico, pero con la letra
   de antes (la serif del sitio, recta, sin cursiva) */
.detail-contact h2{font-style:normal;letter-spacing:normal}

/* Frase final de Processual Transatlántico: app.js le da el ancho justo para dos renglones */
.closing--larga .closing-thought{text-wrap:balance}

/* Inteligencia para Artistas: la obra sale desde el borde izquierdo de la pantalla, como si
   viniera de afuera (se corta apenas la punta), en vez de flotar en medio como una pegatina */
@media(min-width:1001px){
  .page-obra--lateral.page-obra--sangria{
    --borde:calc((var(--av, 100vw) - min(var(--av, 100vw) - 2 * var(--margin), var(--max))) / 2);
    width:calc(min(88%, 560px) + var(--borde));
    margin-left:calc(-1 * var(--borde) - 4%)
  }
}
@media(max-width:1000px){
  .page-obra--final.page-obra--sangria{
    width:calc(92% + var(--margin));
    margin:40px auto 12px calc(-1 * var(--margin) - 5vw)
  }
}
/* ---------------------------------------------------------------
   Prueba AD (10/11/2026), copia de la Prueba AC.
   06 / Contacto sin formulario: a la izquierda el título y el texto; a la derecha, grandes
   y directos, el correo institucional y el teléfono, con «Escribir / Llamar» y «Copiar».
   --------------------------------------------------------------- */
.contacto-directo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.contacto-identidad{margin:min(32px,4svh) 0 0;font-size:13px;line-height:1.6;color:#6b6b6b}
.contacto-identidad strong{color:#171717;letter-spacing:.04em}
.contacto-canales{display:grid;gap:0;padding-top:6px}
.contacto-canales > .overline{margin:0 0 14px}
.contacto-canal{display:grid;gap:10px;padding:min(26px,3.4svh) 0;border-top:1px solid var(--line)}
.contacto-canal:last-child{border-bottom:1px solid var(--line)}
.contacto-valor{
  font:400 clamp(28px,2.6vw,44px)/1.05 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;color:#171717;
  overflow-wrap:anywhere;text-decoration:none;justify-self:start
}
.contacto-valor:hover,.contacto-valor:focus-visible{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.contacto-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.contacto-accion{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#171717;display:inline-flex;gap:10px;align-items:center}
.contacto-accion .arrow{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.contacto-accion:hover .arrow,.contacto-accion:focus-visible .arrow{transform:translate(3px,-3px)}
.contacto-accion:hover > :first-child{text-decoration:underline}
.contacto-copiar{
  font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  padding:7px 12px;border:1px solid #171717;background:#fff;color:#171717;
  transition:background-color .3s ease,color .3s ease
}
.contacto-copiar:hover,.contacto-copiar:focus-visible{background:#171717;color:#fff}
.contacto-copiar:focus-visible,.contacto-valor:focus-visible,.contacto-accion:focus-visible{outline:2px solid #171717;outline-offset:3px}
@media(max-width:1000px){
  .contacto-directo{grid-template-columns:1fr;gap:36px}
}
@media(max-width:720px){
  .contacto-valor{font-size:clamp(24px,7vw,28px)}
}
/* ---------------------------------------------------------------
   Prueba AE (10/11/2026), copia de la Prueba AD.
   Contacto: sin el bloque de identidad ni los enlaces «Escribir / Llamar»; quedan el correo
   y el teléfono con su botón «Copiar». El correo y el número van en Cormorant Garamond
   liviana: una serif clásica de trazo fino, más elegante.
   --------------------------------------------------------------- */
.contacto-valor{
  margin:0;
  font-family:'Cormorant Garamond','Instrument Serif',Georgia,serif;font-weight:300;font-style:normal;
  font-size:clamp(32px,2.9vw,48px);line-height:1.1;letter-spacing:.015em;color:#171717;
  user-select:all
}
.contacto-canal{gap:14px}
@media(max-width:720px){
  .contacto-valor{font-size:clamp(28px,8vw,32px);letter-spacing:.01em}
}
/* ---------------------------------------------------------------
   Prueba AF (11/11/2026), copia de la Prueba AE.
   Contacto: texto nuevo y otra letra para el correo y el teléfono: Tenor Sans, sin serifa,
   espaciada y sobria (la Cormorant Garamond de la AE queda guardada en esa prueba).
   --------------------------------------------------------------- */
.contacto-valor{
  font-family:'Tenor Sans','DM Sans',Arial,sans-serif;font-weight:400;
  font-size:clamp(26px,2.3vw,38px);line-height:1.15;letter-spacing:.06em
}
@media(max-width:720px){
  .contacto-valor{font-size:clamp(20px,5.6vw,23px);letter-spacing:.04em}
}
/* ---------------------------------------------------------------
   Prueba AG (11/11/2026), copia de la Prueba AF.
   1. El correo y el teléfono vuelven a la letra de la primera versión (Instrument Serif,
      la serif de los títulos), pero más chica para que no compita con el título.
   2. Al lado del título queda todo en blanco: «Contacto directo» empieza más abajo, a la
      misma altura que el texto que está debajo del título.
   --------------------------------------------------------------- */
.contacto-valor{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(22px,1.75vw,28px);line-height:1.15;letter-spacing:0
}
@media(max-width:720px){
  .contacto-valor{font-size:clamp(21px,5.8vw,23px);letter-spacing:0}
}
@media(min-width:1001px){
  .contacto-directo{grid-template-rows:auto auto;row-gap:min(30px,4svh);align-items:start}
  .contacto-texto{display:contents}
  .contacto-directo .display-title{grid-column:1;grid-row:1;margin:0}
  .contacto-directo .contact-copy{grid-column:1;grid-row:2;margin:0}
  .contacto-canales{grid-column:2;grid-row:2;padding-top:0}
  .contacto-canales > .overline{margin-top:0}
}
/* ---------------------------------------------------------------
   Prueba AH (11/11/2026), copia de la Prueba AG.
   1. El correo y el teléfono vuelven a su tamaño grande (como en la Prueba AD): a ella
      le gustó más así, ahora que ya no están al lado del título.
   2. «Contacto directo» sube un poco: empieza a la altura del final del título (sin quedar
      al lado de él), en vez de a la altura del párrafo.
   --------------------------------------------------------------- */
.contacto-valor{font-size:clamp(28px,2.6vw,44px);line-height:1.05;letter-spacing:-.01em}
@media(max-width:720px){
  .contacto-valor{font-size:clamp(24px,7vw,28px)}
}
@media(min-width:1001px){
  .contacto-canales{margin-top:calc(-1 * min(56px, 7svh))}
}
/* ---------------------------------------------------------------
   Cambios de celular (11/11/2026, carpeta maestra). Solo pantallas de 720 px o menos.
   1. Portada: el subtítulo en un solo renglón y, debajo, «Colágeno» más grande. app.js
      (ubicarObraCelular) la agranda todo lo que deja la pantalla, sin que los dos botones
      queden afuera.
   2. 01 / Una perspectiva: «Processual trabaja precisamente en ese territorio» a la derecha
      del aro, a la altura de su centro, en dos renglones; el aro sale un poco más hacia la
      izquierda para dejarle lugar (se ve casi la mitad).
   3. 02 / Programas: descripción un poco más chica (la frase en negrita no cambia), sin
      guiones y con los renglones libres; «Programa 01…» más grande; guía 01–04 que muestra
      en qué programa se está y que hay más debajo.
   4. Transatlántico: los cuatro países en un solo renglón.
   (El párrafo de Contacto justificado se probó y se descartó: vuelve a como estaba.)
   --------------------------------------------------------------- */
@media(max-width:720px){
  /* 1. Portada */
  .hero{padding-top:24px}
  .hero-labels{grid-column:1/-1;grid-row:2;margin-top:8px;font-size:min(3.05vw,12px);white-space:nowrap}
  .hero-labels span:last-child{display:none}
  .hero-art{grid-column:1/-1;grid-row:3;justify-self:end;width:72vw;margin:12px calc(-1 * var(--margin)) 0 0}
  .hero-bottom{padding:18px 0 44px;gap:12px}
  .hero-lead>p{font-size:13.5px;line-height:1.55}
  .hero .cta-row{margin-top:14px}

  /* 2. 01 / Una perspectiva */
  #processual{--aro-h:min(78vw,340px)}
  .processual-aro{height:var(--aro-h);margin-bottom:0}
  .processual-aro img{translate:calc(42vw - 34px - .96 * var(--aro-h)) 0}
  #processual .statement-break{
    display:flex;align-items:center;min-height:var(--aro-h);
    margin:calc(-1 * var(--aro-h)) 0 30px;padding-left:calc(42vw - 2 * var(--margin));
    text-wrap:balance
  }

  /* 3. 02 / Programas */
  .escena-descripcion p,
  .escenario-animado .escena-descripcion p{font-size:12.5px;text-align:left;hyphens:none;-webkit-hyphens:none}
  .escena-descripcion p strong{font-size:13px}
  .escena-numero,
  .escenario-animado .escena-numero{font-size:12px;letter-spacing:.2em}
  /* «Programa 01» con más aire respecto de la obra: la obra baja un poco */
  .escenario-animado .escena-numero{top:14px}
  .escenario-animado .escenario.con-obras .escenario-fondo{top:calc(56px + min(40vw, 21%))}

  /* 4. Transatlántico */
  .transatlantico-ruta{flex-wrap:nowrap;white-space:nowrap;gap:0 min(9px,2.3vw);font-size:min(10.5px,2.7vw);letter-spacing:.12em}

}

/* Guía de los programas (solo en celular, con el escenario en movimiento): los números
   01–04 a la derecha de la obra; el del programa que se ve, en negro. La flecha que sube y
   baja avisa que hay más programas debajo (desaparece en el último). Tocar un número lleva
   a ese programa. */
.escenario-guia{display:none}
/* Tercera vuelta (11/11/2026): vuelve a ser vertical, a la derecha de la obra y a la altura
   de su centro (como la primera versión, que le gustó más), pero más adentro: ya no pegada
   al borde de la pantalla, en el blanco entre la obra y el borde. Números un poco más grandes. */
@media(max-width:720px){
  .escenario-animado .escenario-guia{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    position:absolute;right:14px;top:calc(56px + min(40vw, 21%));transform:translateY(-50%);z-index:4
  }
  .escenario-guia button{
    font:600 11px/1 'DM Sans',Arial,sans-serif;letter-spacing:.04em;color:#a5a4a0;
    background:none;border:0;padding:7px 1px;cursor:pointer;transition:color .3s ease
  }
  .escenario-guia button::after{
    content:'';display:block;width:1px;height:11px;margin:7px auto 0;background:#c9c8c4
  }
  .escenario-guia button:last-of-type::after{display:none}
  .escenario-guia button.activa{color:#171717}
  .escenario-guia button:focus-visible{outline:2px solid #171717;outline-offset:1px}
  .escenario-guia-flecha{
    font-size:16px;line-height:1;color:#171717;margin-top:6px;
    animation:guia-flecha 1.6s ease-in-out infinite;transition:opacity .4s ease
  }
  .escenario-guia.al-final .escenario-guia-flecha{opacity:0}
}
@keyframes guia-flecha{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.escenario-guia-flecha{animation:none}}

/* ---------------------------------------------------------------
   Celular, segunda vuelta (11/11/2026). Solo pantallas de 720 px o menos.
   1. Portada más armónica: PROCESSUAL y la frase un escalón más chicos, y «Colágeno» un
      escalón más chica que el máximo posible (app.js: ubicarObraCelular, 90 %).
   2. Contacto: «Contacto directo» en negrita.
   3. Páginas de programa: si «Programa 01 / …» no entra en un renglón, «Programa 01» queda
      arriba y la descripción debajo (app.js: partirCategorias).
   4. «Toda posibilidad comienza con una conversación» al pie de cada página, sobre un gris
      muy suave, para que se distinga como una sección aparte de la frase final.
   --------------------------------------------------------------- */
@media(max-width:720px){
  .hero-name{font-size:8.2vw}
  .hero-statement{font-size:clamp(21px,5.8vw,24px)}
  .hero-art{margin-top:16px}
  .hero-bottom{padding-top:22px}

  .contacto-canales > .overline{font-weight:700;color:#171717}

  .categoria.partida .categoria-sep{display:none}
  .categoria.partida .categoria-texto{display:block;margin-top:7px}
  .kicker-partido{align-items:flex-start}
  .kicker-partido::before{margin-top:.6em}

}
/* 11/11/2026 — El gris muy suave de «Toda posibilidad comienza con una conversación» también
   en computadora (antes solo en celular), para separarlo de la frase final de cada página. */
.detail-contact{background:#f6f6f4}
/* (11/11/2026, última vuelta) El gris anterior se veía apenas amarillento: ahora es un gris
   neutro y suave, con un degradé casi imperceptible de arriba hacia abajo (más claro arriba),
   para que se sienta envolvente y no plano. Y sin la franja blanca de abajo: la franja gris
   llega directo a la línea del pie de página. */
.detail-contact{
  background:linear-gradient(180deg,#f5f5f5 0%,#f0f0f1 100%);
  margin-bottom:0
}
/* ---------------------------------------------------------------
   11/11/2026 — Últimos detalles.
   1. Portada en computadora y tableta: «Descubrir más» al pie de la primera pantalla, con
      una línea fina por la que baja un trazo, para que se note que hay más debajo. Se
      desvanece al empezar a bajar (app.js). En celular no hace falta: entra todo.
   2. 02 / Programas: la obra de Inteligencia para Artistas (más angosta que las otras) se
      ensancha un poco: recuadro al 95 % del ancho de las demás, con un recorte mínimo arriba
      y abajo. Sigue siendo apenas más angosta, como se pidió.
   --------------------------------------------------------------- */
.portada-pista{display:none}
@media(min-width:721px){
  .portada-pista{
    display:flex;flex-direction:column;align-items:center;gap:12px;
    position:fixed;left:50%;bottom:clamp(14px,2.6svh,26px);transform:translateX(-50%);z-index:5;
    background:none;border:0;padding:6px 10px;cursor:pointer;
    font:500 10px/1 'DM Sans',Arial,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#6b6b6b;
    transition:opacity .5s ease,color .3s ease
  }
  .portada-pista:hover,.portada-pista:focus-visible{color:#171717}
  .portada-pista:focus-visible{outline:2px solid #171717;outline-offset:4px}
  .portada-pista i{position:relative;display:block;width:1px;height:38px;background:#d3d2ce;overflow:hidden}
  .portada-pista i::after{
    content:'';position:absolute;left:0;top:-14px;width:1px;height:14px;background:#171717;
    animation:pista-baja 2.2s cubic-bezier(.6,0,.4,1) infinite
  }
  body.portada-bajada .portada-pista,
  body.con-entrada .portada-pista{opacity:0;pointer-events:none}
}
@keyframes pista-baja{0%{top:-14px}70%,100%{top:38px}}
@media(prefers-reduced-motion:reduce){.portada-pista i::after{animation:none;top:12px}}

/* 3. 02 / Programas en computadora: «Programa 01…04» un poco más grande (de 10 a 12 px) */
@media(min-width:721px){
  .escenario-animado .escena-numero{font-size:12px;letter-spacing:.22em}
}

.escenario-animado .escenario.con-obras .escenario-fondo img[data-slug="artistas"]{
  top:0;left:2.5%;width:95%;height:100%;object-fit:cover
}
/* Pie de página en computadora: «© 2026 Processual» en un solo renglón (el año se partía
   en un renglón propio porque todos los span del pie eran bloques) */
.footer-inner [data-year]{display:inline}