.texto{
  margin-top: clamp(18px, 2.8vh, 32px);
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.72;
  max-width: 58ch;
  text-wrap: pretty;
}
.texto + .texto{ margin-top: clamp(14px, 2vh, 22px); }
.seccion[data-escena="ink"] .texto{ color: var(--paper); }
.seccion[data-escena="orange"] .texto{ color: var(--ink); }

.e-hero__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}
.e-hero__texto{ grid-column: 1 / span 8; }
.e-hero__firma{
  grid-column: 10 / span 3;
  justify-self: end;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(14px, 2.2vh, 22px);
  text-align: right;
}
.e-hero__firma svg{
  width: clamp(64px, 8vw, 116px);
  height: auto;
  fill: var(--orange);
  display: block;
}
.e-hero__pie{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  line-height: 1.8;
  color: var(--mute-paper);
}
.e-hero__pie b{ font-weight: 400; color: var(--orange-sm); }

.trio{
  margin: clamp(32px, 5vh, 60px) 0 0;
  padding: 0;
  list-style: none;
}
.trio a{
  position: relative;
  display: grid;
  grid-template-columns: clamp(34px, 3.4vw, 52px) 1fr auto;
  align-items: baseline;
  gap: clamp(10px, 1.6vw, 22px);
  padding: clamp(16px, 2.4vh, 26px) 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.trio li:last-child a{ border-bottom: 1px solid var(--rule); }

.trio__n{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--mute-paper);
  transition: color .35s ease;
}
.trio__c{
  display: block;
  transition: transform .5s var(--ease);
}
.trio__c b{
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: 4px;
  transition: color .35s ease;
}
.trio__c i{
  display: block;
  font-style: normal;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.55;
  color: var(--mute-paper);
  max-width: 44ch;
}
.trio__m{
  width: clamp(16px, 1.8vw, 24px);
  height: auto;
  fill: var(--orange);
  opacity: 0;
  translate: -8px 0;
  transition: opacity .35s ease, translate .5s var(--ease);
}

.trio a::after{
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.trio a:hover::after,
.trio a:focus-visible::after{ transform: none; }
.trio a:hover .trio__c,
.trio a:focus-visible .trio__c{ transform: translateX(clamp(5px, .8vw, 14px)); }
.trio a:hover .trio__n,
.trio a:focus-visible .trio__n{ color: var(--orange-sm); }
.trio a:hover .trio__m,
.trio a:focus-visible .trio__m{ opacity: 1; translate: 0 0; }
.trio a:focus-visible{ outline: 2px solid var(--orange-sm); outline-offset: 4px; }

.conv{
  position: relative;
  height: clamp(200px, 27vh, 268px);
  margin-top: clamp(40px, 7vh, 78px);
}
.conv__trazos{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.conv__trazos path{
  fill: none;
  stroke: var(--mute-ink);
  stroke-width: 1;

  opacity: .55;
  vector-effect: non-scaling-stroke;

  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s var(--ease-soft) var(--d, 0s);
}
.conv__salida{ stroke: var(--orange) !important; stroke-width: 2; opacity: 1 !important; }
.conv.is-in .conv__trazos path{ stroke-dashoffset: 0; }

.conv__via,
.conv__final{
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: .8em;
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(10.5px, .85vw, 12px);
  letter-spacing: .12em;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--mute-ink);
}
.conv__via b,
.conv__final b{ font-weight: 400; color: var(--orange); }

.conv__via{ left: 0; top: var(--y); transform: translateY(-50%); }

.conv__final{
  right: 0; top: 50%;
  transform: translateY(calc(-50% - 14px));
  color: var(--paper);
}

.ramas{
  margin-top: clamp(30px, 5vh, 58px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 38px);
}
.rama{
  border-top: 1px solid var(--ink-3);
  padding-top: clamp(16px, 2.2vh, 24px);
}
.rama__n{
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--orange);
  margin-bottom: 10px;
}
.rama__t{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.rama__d{
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.6;
  color: var(--mute-ink);
  text-wrap: pretty;
}

.paralelo{ margin-top: clamp(38px, 6vh, 72px); }

.paralelo__cab{
  display: grid;
  grid-template-columns: clamp(34px, 3.4vw, 52px) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(10px, 1.6vw, 22px);
  padding-bottom: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--orange-sm);
}
.paralelo__cab span:first-child{ grid-column: 2; }

.par{
  display: grid;
  grid-template-columns: clamp(34px, 3.4vw, 52px) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(10px, 1.6vw, 22px);
  align-items: baseline;
  padding: clamp(15px, 2.2vh, 24px) 0;
  border-top: 1px solid var(--rule);
}
.paralelo .par:last-of-type{ border-bottom: 1px solid var(--rule); }

.par__n{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--mute-paper);
}
.par__a{
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  line-height: 1.22;
  text-wrap: pretty;
}
.par__b{
  position: relative;
  padding-left: 1.9em;
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--mute-paper);
  text-wrap: pretty;
}
.par__b::before{
  content: "→";
  position: absolute; left: 0; top: 0;
  font-family: var(--mono);
  color: var(--orange-sm);
}

.encuadre{
  position: relative;
  margin-top: clamp(38px, 6.5vh, 76px);
  aspect-ratio: 16 / 8;
  min-height: 260px;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.enc__f{
  position: absolute;
  transition: opacity .8s ease .55s;
}
.encuadre.is-in .enc__f{ opacity: .2; }

.enc__r{ height: 1px; background: var(--rule-2); }
.enc__r--1{ top: 17%; left: 6%; width: 17%; }
.enc__r--2{ top: 23%; left: 6%; width: 12%; }
.enc__r--3{ bottom: 19%; right: 6%; width: 19%; }
.enc__rot{
  top: 14%; right: 6%;
  font-family: var(--mono);
  font-size: clamp(9.5px, .78vw, 11.5px);
  letter-spacing: .14em;
  color: var(--mute-paper);
}

.enc__par{
  bottom: 16%; left: 6%;
  width: 14%; height: 20%;
  background: var(--rule-2);
  clip-path: polygon(17% 0, 100% 0, 83% 100%, 0 100%);
}

.enc__marca{
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: clamp(48px, 7vw, 92px);
}
.enc__marca svg{ width: 100%; height: auto; fill: var(--orange); display: block; }

.enc__esq{
  position: absolute;
  width: clamp(16px, 2.4vw, 28px);
  height: clamp(16px, 2.4vw, 28px);
  border: 0 solid var(--ink);
  transition: top .95s var(--ease) .1s, bottom .95s var(--ease) .1s,
              left .95s var(--ease) .1s, right .95s var(--ease) .1s;
}
.enc__esq--tl{ top: 4%;    left: 4%;  border-top-width: 1px; border-left-width: 1px; }
.enc__esq--tr{ top: 4%;    right: 4%; border-top-width: 1px; border-right-width: 1px; }
.enc__esq--bl{ bottom: 4%; left: 4%;  border-bottom-width: 1px; border-left-width: 1px; }
.enc__esq--br{ bottom: 4%; right: 4%; border-bottom-width: 1px; border-right-width: 1px; }

.encuadre.is-in .enc__esq--tl{ top: 25%;    left: 30%; }
.encuadre.is-in .enc__esq--tr{ top: 25%;    right: 30%; }
.encuadre.is-in .enc__esq--bl{ bottom: 25%; left: 30%; }
.encuadre.is-in .enc__esq--br{ bottom: 25%; right: 30%; }

.encuadre__pie{ margin-top: clamp(16px, 2.4vh, 24px); }

.compromisos{
  margin: clamp(36px, 6vh, 68px) 0 0;
  padding: 0;
  list-style: none;
}
.compromiso{
  display: grid;
  grid-template-columns: clamp(34px, 3.4vw, 52px) minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(10px, 1.6vw, 26px);
  align-items: baseline;
  padding: clamp(18px, 2.6vh, 28px) 0;
  border-top: 1px solid var(--ink-3);
}
.compromisos li:last-child .compromiso{ border-bottom: 1px solid var(--ink-3); }
.compromiso__n{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--orange);
}
.compromiso__t{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  margin: 0;
  text-wrap: pretty;
}
.compromiso__d{
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.62;
  color: var(--mute-ink);
  text-wrap: pretty;
}

@media (max-width: 1100px){
  .e-hero__texto{ grid-column: 1 / span 10; }
  .e-hero__firma{ display: none; }

  .ramas{ grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 32px) clamp(20px, 4vw, 40px); }
}

@media (max-width: 899px){
  .e-hero__grid{ grid-template-columns: 1fr; }
  .e-hero__texto{ grid-column: 1; }

  .conv{ display: none; }
  .ramas{ margin-top: 0; }

  .paralelo__cab{ display: none; }
  .par{ grid-template-columns: clamp(28px, 6vw, 40px) 1fr; row-gap: 10px; }
  .par__b{ grid-column: 2; }

  .encuadre{ aspect-ratio: 5 / 4; min-height: 0; }
  .encuadre.is-in .enc__esq--tl{ top: 22%;    left: 20%; }
  .encuadre.is-in .enc__esq--tr{ top: 22%;    right: 20%; }
  .encuadre.is-in .enc__esq--bl{ bottom: 22%; left: 20%; }
  .encuadre.is-in .enc__esq--br{ bottom: 22%; right: 20%; }

  .compromiso{ grid-template-columns: clamp(28px, 6vw, 40px) 1fr; row-gap: 10px; }
  .compromiso__d{ grid-column: 2; }
}

@media (max-width: 560px){
  .ramas{ grid-template-columns: 1fr; }
  .trio a{ grid-template-columns: clamp(28px, 6vw, 40px) 1fr; }
  .trio__m{ display: none; }
}

html[data-motion="reduced"] .conv__trazos path{
  stroke-dashoffset: 0 !important;
  transition: none !important;
}
html[data-motion="reduced"] .enc__esq{ transition: none !important; }
html[data-motion="reduced"] .enc__f{ opacity: .2; transition: none !important; }
html[data-motion="reduced"] .enc__esq--tl{ top: 25%;    left: 30%; }
html[data-motion="reduced"] .enc__esq--tr{ top: 25%;    right: 30%; }
html[data-motion="reduced"] .enc__esq--bl{ bottom: 25%; left: 30%; }
html[data-motion="reduced"] .enc__esq--br{ bottom: 25%; right: 30%; }
html[data-motion="reduced"] .trio a::after,
html[data-motion="reduced"] .trio__c,
html[data-motion="reduced"] .trio__m{ transition-duration: .001ms !important; }

html:not(.js) .conv__trazos path{ stroke-dashoffset: 0; }
html:not(.js) .enc__f{ opacity: .2; }
html:not(.js) .enc__esq--tl{ top: 25%;    left: 30%; }
html:not(.js) .enc__esq--tr{ top: 25%;    right: 30%; }
html:not(.js) .enc__esq--bl{ bottom: 25%; left: 30%; }
html:not(.js) .enc__esq--br{ bottom: 25%; right: 30%; }