/* escenas.css */
.escenario{

  --esc-alto: 100svh;
  --esc-paso: 64svh;
  --esc-cola: var(--esc-alto);

  --esc-mando: 2.75rem;

  display: grid;
  grid-template-columns: 100%;

  background-color: var(--fondo);
  color: var(--texto);
}

.escenario > *{ grid-area: 1 / 1; }

.escenario + .escenario{ margin-block-start: 0; border: 0; }

.escenario__plano{
  position: sticky;
  top: 0;
  z-index: 0;
  height: var(--esc-alto);
  overflow: clip;
}

.escenario__medio{ position: absolute; inset: 0; }

.escenario__medio picture{ display: contents; }

.escenario__foto,
.escenario__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--esc-foco, 50% 50%);
}

.escenario__video{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-fundido) var(--curva);
}
.escenario__video[data-activo]{ opacity: 1; }

.escenario__velo{
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    rgb(var(--esc-velo) / var(--esc-velo-a)),
    rgb(var(--esc-velo) / var(--esc-velo-b))
  );
}

.escenario[data-tono="oscuro"]    { --esc-velo: 11 9 8;      --esc-velo-a: .68; --esc-velo-b: .86; }
.escenario[data-tono="intermedio"]{ --esc-velo: 30 24 21;    --esc-velo-a: .62; --esc-velo-b: .80; }
.escenario[data-tono="claro"]     { --esc-velo: 250 249 247; --esc-velo-a: .62; --esc-velo-b: .80; }

.escenario__pista{
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  height: var(--filete-grosor);
  background-color: rgb(var(--esc-velo) / .35);
}

.escenario__pista > span{
  display: block;
  height: 100%;
  background-color: var(--filete-acento);
  transform-origin: left center;
}

.escenario__mandos{
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--esc-alto);
  pointer-events: none;
}

.escenario__pausa{
  position: absolute;
  inset-block-end: var(--e-5);
  inset-inline-end: var(--seccion-x);
  pointer-events: auto;

  display: grid;
  place-content: center;
  inline-size: var(--esc-mando);
  block-size: var(--esc-mando);
  padding: 0;

  color: var(--texto);
  background-color: rgb(var(--esc-velo) / .60);
  border: var(--filete-grosor) solid var(--filete-acento);
  border-radius: var(--radio);
  cursor: pointer;
}

.escenario__pausa::before{
  content: "";
  inline-size: .625rem;
  block-size: .875rem;
  border-inline: .1875rem solid currentColor;
}

.escenario__pausa[data-parado]::before{
  inline-size: 0;
  block-size: 0;
  border-inline: 0;
  border-block: .4375rem solid transparent;
  border-inline-start: .75rem solid currentColor;
  margin-inline-start: .1875rem;
}

.escenario__pausa:focus-visible{
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.escenario:has(.escenario__video) .escenario__paso{
  padding-inline-end: calc(var(--esc-mando) + var(--e-4));
}

.escenario__guion{

  --texto-suave: var(--texto);
  --texto-tenue: var(--texto);

  position: relative;
  z-index: 1;
  padding-inline: var(--seccion-x);

  padding-block: 12svh var(--esc-cola);
}

.escenario__paso{
  display: grid;
  align-content: center;
  min-height: var(--esc-paso);
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
}

@keyframes esc-paso{
  0%       { opacity: 0; transform: translateY(var(--desplaza)); }
  16%, 74% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(calc(var(--desplaza) * -1)); }
}

@keyframes esc-avanza{
  from{ transform: scale(1.07); }
  to  { transform: scale(1); }
}

@keyframes esc-pista{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    .escenario{ view-timeline-name: --esc-pista; view-timeline-axis: block; }

    .escenario__medio{
      animation: esc-avanza linear both;
      animation-timeline: --esc-pista;
      animation-range: contain 0% contain 100%;
    }

    .escenario__paso{
      animation: esc-paso linear both;
      animation-timeline: view();
      animation-range: cover 6% cover 94%;
    }

    .escenario__pista > span{
      animation: esc-pista linear both;
      animation-timeline: --esc-pista;
      animation-range: contain 0% contain 100%;
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .escenario{ display: block; }

  .escenario__plano{
    position: static;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .escenario__medio{ position: relative; }
  .escenario__velo{ display: none; }
  .escenario__video{ display: none; }

  .escenario__pista{ display: none; }
  .escenario__mandos{ display: none; }

  .escenario__guion{ padding-block: var(--e-8); }
  .escenario__paso{ display: block; min-height: 0; }
  .escenario__paso + .escenario__paso{ margin-block-start: var(--e-6); }
}

@media (prefers-reduced-motion: reduce) and (min-width: 48rem){
  .escenario__plano{ aspect-ratio: 16 / 9; }
}

.avance-lectura{
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: 2px;
  background-color: var(--oro);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

@keyframes progreso-traza{ to{ transform: scaleX(1); } }

@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .avance-lectura{
      display: block;
      animation: progreso-traza linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* 02-lo-que-pasa-hoy.html */
.hoy{
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}


.hoy__diagnostico{ position: relative; }

.hoy__texto{
  padding-block: var(--seccion-y);
  padding-inline: var(--seccion-x);
}


.hoy__etiqueta{
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
  margin-right: calc(var(--tr-etiqueta) * -1);
  color: var(--etiqueta);
  max-width: none;
}


.hoy__titular{
  margin-top: var(--e-5);
  max-width: none;
}


.hoy__entrada{
  margin-top: var(--e-6);
  max-width: var(--medida-corta);
  font-size: var(--t-entrada);
  line-height: var(--lh-entrada);
}


.hoy__linea{
  margin-top: var(--e-6);
  max-width: var(--medida-corta);
  color: var(--texto-suave);
}




.hoy__asterisco{
  font-size: 0.72em;
  line-height: 0;
  position: relative;
  top: -0.42em;
  vertical-align: baseline;
  color: var(--acento);

  white-space: nowrap;
}

.hoy__fuente{
  margin-top: var(--e-4);
  max-width: var(--medida-corta);
  font-size: var(--t-menor);
  line-height: var(--lh-menor);
  color: var(--texto-tenue);
}


.hoy__figura{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--fondo-alt);

  border-bottom: var(--filete-grosor) solid var(--acento);
}

.hoy__foto{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 60%;

  filter: saturate(0.86);
}


.hoy__figura::after{
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--negro) 20%, transparent);
  pointer-events: none;
}

@media (min-width: 40rem){
  .hoy__figura{ aspect-ratio: 16 / 9; }
}

@media (min-width: 48rem){
  .hoy__titular{ max-width: var(--medida-titular); }
}


@media (min-width: 64rem){


  .hoy__diagnostico{
    display: grid;
    grid-template-columns: 1fr 46%;
    align-items: stretch;
  }
  .hoy__texto{
    grid-area: 1 / 1;

    padding-inline: max(var(--seccion-x), calc((100vw - var(--ancho)) / 2)) var(--e-8);
    min-height: clamp(30rem, 72svh, 44rem);
  }
  .hoy__figura{
    grid-area: 1 / 2;
    aspect-ratio: auto;

    border-bottom: 0;
    border-left: var(--filete-grosor) solid var(--acento);
  }

  .hoy__foto{ object-position: 38% 60%; }
}


.hoy__coda{
  padding-block: var(--seccion-y) calc(var(--seccion-y) + var(--e-6));
  padding-inline: var(--seccion-x);
  text-align: center;
}


.hoy__filete{
  width: var(--e-8);
  height: var(--filete-grosor);
  margin: 0 auto var(--e-8);
  background-color: var(--filete-acento);
  border: 0;
  opacity: 1;
}


.hoy__cierre{
  font-family: var(--serif);
  font-size: var(--t-display);
  font-weight: var(--peso-serif);
  line-height: var(--lh-titular);
  letter-spacing: calc(var(--tr-display) + 0.006em);
  max-width: 17ch;
  margin-inline: auto;
  text-wrap: balance;
}

@media (min-width: 48rem){
  .hoy__cierre{ line-height: var(--lh-display); }
}


.hoy__replica{
  max-width: var(--medida-corta);
  margin-inline: auto;
  margin-block-start: var(--e-7);
  color: var(--texto-suave);
  text-wrap: pretty;
}

.hoy__replica + .hoy__replica{ margin-block-start: var(--e-5); }


.hoy__diferencia{
  max-width: var(--medida-corta);
  margin-inline: auto;
  margin-block-start: clamp(var(--e-8), 9vw, var(--e-9));
  text-align: left;
  color: var(--texto-suave);
  text-wrap: pretty;
}

.hoy__diferencia p{ max-width: none; }
.hoy__diferencia p + p{ margin-block-start: var(--e-6); }


.hoy__dignidad{
  font-size: var(--t-entrada);
  line-height: var(--lh-entrada);
  color: var(--texto);

  margin-block-end: var(--e-7);
}


.hoy__corte{
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  --akhet-ancho: clamp(84px, 22vw, 132px);
}


@keyframes hoy-aparece{
  from{ opacity: 0; transform: translateY(var(--desplaza)); }
  to  { opacity: 1; transform: none; }
}
@keyframes hoy-funde{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference){
  .hoy__texto > *,
  .hoy__filete,
  .hoy__cierre,
  .hoy__replica,
  .hoy__diferencia > *{
    animation: hoy-aparece var(--t-fundido) var(--curva-larga) both;
  }

  .hoy__corte{
    animation: hoy-funde var(--t-fundido) var(--curva-larga) both;
  }

  .hoy__figura{
    animation: hoy-funde var(--t-fundido) var(--curva-larga) both;
  }

  .hoy__titular{ animation-delay: 110ms; }
  .hoy__entrada{ animation-delay: 220ms; }
  .hoy__linea{   animation-delay: 300ms; }
  .hoy__fuente{  animation-delay: 380ms; }
  .hoy__filete{  animation-delay:  60ms; }
  .hoy__cierre{  animation-delay: 140ms; }
  .hoy__corte{   animation-delay: 320ms; }

  .hoy__replica{                    animation-delay: 260ms; }
  .hoy__replica + .hoy__replica{    animation-delay: 340ms; }

  .hoy__diferencia > *{            animation-delay: 420ms; }



  @supports (animation-timeline: view()){
    .hoy__texto > *,
    .hoy__figura,
    .hoy__filete,
    .hoy__cierre,
    .hoy__replica,
    .hoy__diferencia > *{
      animation-timeline: view();
      animation-duration: auto;
      animation-delay: 0s;
      animation-range: cover 8% cover 38%;
    }

    .hoy__figura{ animation-range: cover 0% cover 12%; }
    .hoy__titular{ animation-range: cover 11% cover 41%; }
    .hoy__entrada{ animation-range: cover 13% cover 43%; }
    .hoy__cierre{  animation-range: cover 10% cover 42%; }

    .hoy__replica{                 animation-range: cover 14% cover 46%; }
    .hoy__replica + .hoy__replica{ animation-range: cover 17% cover 49%; }

    .hoy__diferencia > *{          animation-range: cover 20% cover 52%; }
  }
}

/* 03-por-que-lo-hacemos.html */
.pqh{

  --pqh-aire:       clamp(var(--e-8), 10vw,  var(--e-10));
  --pqh-aire-corto: clamp(var(--e-7), 6.5vw, var(--e-9));


  padding-block: calc(var(--seccion-y) + var(--e-7));
  padding-inline: var(--seccion-x);
  background-color: var(--fondo);
  color: var(--texto);

  text-align: center;
}


.pqh__filete{
  width: var(--e-7);
  height: var(--filete-grosor);
  border: 0;
  background-color: var(--filete-acento);

  transform-origin: left center;

  margin: 0 auto var(--e-5);
  opacity: 1;
}


.pqh__etiqueta{
  max-width: max-content;
  margin-inline: auto;
  padding-inline-start: var(--tr-etiqueta);
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
  color: var(--etiqueta);
}


.pqh__tesis{
  max-width: var(--ancho);
  margin-inline: auto;
  margin-block: var(--pqh-aire);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--texto);
}


.pqh__tesis.linea-tierra::after{
  left: 50%;
  transform: translateX(-50%);
}


.pqh__tesis > span{
  display: block;
  text-wrap: balance;
}


.pqh__cuerpo{
  max-width: var(--medida-corta);
  margin-inline: auto;
  font-size: var(--t-entrada);
  line-height: var(--lh-entrada);
  color: var(--texto-suave);
}

.pqh__cuerpo p{
  max-width: none;
  font-size: inherit;
  line-height: inherit;

  text-wrap: pretty;
}

.pqh__cuerpo p + p{ margin-block-start: var(--e-6); }




.pqh__cierre{
  max-width: var(--medida-titular);
  margin-inline: auto;
  margin-block-start: var(--pqh-aire-corto);
  font-family: var(--serif);
  font-size: var(--t-t1);
  font-weight: var(--peso-serif);
  font-optical-sizing: auto;
  line-height: var(--lh-titular);
  letter-spacing: var(--tr-titular);
  color: var(--texto);
  text-wrap: balance;
}


@keyframes pqh-surge{
  from{ opacity: 0; transform: translateY(var(--desplaza)); }
  to  { opacity: 1; transform: none; }
}
@keyframes pqh-funde{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

@keyframes pqh-traza{ to{ transform: scaleX(1); } }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pqh__rotulo,
    .pqh__cuerpo{
      animation-name: pqh-surge;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--curva-larga);
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
    }


    .pqh__tesis > span,
    .pqh__cierre{
      animation-name: pqh-funde;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--curva-larga);
      animation-timeline: view();
      animation-range: cover 8% cover 30%;
    }
    .pqh__tesis > span + span{ animation-range: cover 12% cover 34%; }
    .pqh__cierre            { animation-range: cover 16% cover 38%; }


    .pqh__filete{
      transform: scaleX(0);
      animation: pqh-traza linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 22%;
    }
  }
}

/* 04-pilares.html */
.pilares{
  padding-block: var(--seccion-y);

  background-color: var(--fondo-alt);
  color: var(--texto);

  container-type: inline-size;
}


.pilares__cabecera,
.pilar,
.pilar__banda,
.pilares__salida{
  max-width: calc(var(--ancho) + var(--seccion-x) * 2);
  margin-inline: auto;
  padding-inline: var(--seccion-x);
}

.pilares__lista{
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}


.pilares__cabecera{

  margin-bottom: var(--seccion-y);
}


.pilares__rubrica{
  display: flex;
  align-items: center;
  gap: var(--e-5);
  margin-bottom: var(--e-6);
}
.pilares__filete{
  flex: 1 1 auto;
  margin: 0;
  min-width: var(--e-8);
}

.pilares__rubrica .pilares__etiqueta{
  flex: 0 0 auto;
  margin-bottom: 0;
}

.pilares__etiqueta{
  max-width: none;
  margin-bottom: var(--e-5);
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  letter-spacing: var(--tr-etiqueta);

  margin-right: calc(var(--tr-etiqueta) * -1);
  text-transform: uppercase;

  color: var(--etiqueta);
}

.pilares__titular{

  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  max-width: var(--medida-titular);
}


.pilares__entrada{
  max-width: var(--medida-corta);
  margin-top: var(--e-5);
  font-family: var(--sans);
  font-size: var(--t-entrada);
  line-height: var(--lh-entrada);
  color: var(--texto-suave);
  text-wrap: pretty;
}


.pilar + .pilar{

  margin-top: calc(var(--seccion-y) + var(--e-7));
}

.pilar__media img{
  display: block;
  width: 100%;
  height: auto;

  filter: var(--foto-claro);

  outline: var(--filete-grosor) solid var(--nube);
  outline-offset: calc(var(--filete-grosor) * -1);
}


.pilar--remate .pilar__media img{ outline: 0; }

.pilar__texto{
  margin-top: var(--e-6);
}


.pilar__sello{
  max-width: none;
  margin-bottom: var(--e-5);
  line-height: 0;
}
.pilar__sello .cartucho{ line-height: var(--lh-cuerpo); }

.pilar__rotulo{
  max-width: none;
  margin-bottom: var(--e-4);
  font-family: var(--sans);
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  letter-spacing: var(--tr-etiqueta);
  margin-right: calc(var(--tr-etiqueta) * -1);
  text-transform: uppercase;
  color: var(--texto);
}

.pilar__frase{

  max-width: none;
  font-family: var(--serif);
  font-size: var(--t-t2);
  font-weight: var(--peso-serif);
  font-optical-sizing: auto;
  line-height: var(--lh-titular);
  letter-spacing: var(--tr-titular);
  color: var(--texto);

  text-wrap: pretty;
  text-wrap: balance;
}


.pilar__apoyo{
  max-width: none;
  margin-top: var(--e-5);
  line-height: var(--lh-cuerpo);
  color: var(--texto-suave);

  text-wrap: pretty;
}


.pilares__salida{
  max-width: none;

  margin-top: var(--seccion-y);
}
.pilares__enlace{
  display: inline-flex;
  align-items: center;

  min-height: 44px;
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-medio);

  text-underline-offset: 0.26em;
}


.pilar--noche{

  max-width: none;
  padding-inline: 0;

  position: relative;

  padding-block: var(--seccion-y) calc(var(--seccion-y) + var(--e-6));


  --orn-oro: var(--oro);


  --hilo: color-mix(in srgb, var(--marfil) 20%, transparent);
}


.pilar + .pilar--noche{ margin-top: var(--seccion-y); }
.pilar--noche + .pilar{ margin-top: var(--seccion-y); }


.pilar__banda{ max-width: calc(var(--ancho) + var(--seccion-x) * 2); }


.pilar--noche .pilar__media img{
  filter: brightness(0.62) contrast(1.32) saturate(0.86);

  outline-color: var(--hilo);
}


.pilar--noche .pilar__rotulo{ color: var(--etiqueta); }


.pilar--noche .pilar__frase{
  letter-spacing: calc(var(--tr-titular) + 0.006em);
}


.pilar__corte{
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  --akhet-ancho: clamp(84px, 22vw, 132px);
}


.pilar--remate .pilar__media{

  overflow: hidden;
  width: auto;
  margin-inline: calc(-1 * var(--seccion-x));
}

.pilar--remate .pilar__media img{

  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 46%;
}


@media (min-width: 52rem){

  .pilar:not(.pilar--noche),
  .pilar__banda{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--e-6);

    align-items: start;
  }


  .pilar__media,
  .pilar__texto{ grid-row: 1; }


  .pilar__texto{
    margin-top: 0;

    max-width: 32ch;
    align-self: center;
    padding-bottom: var(--e-7);
  }


  @media (prefers-reduced-motion: no-preference){
    .pilar__texto{ position: sticky; top: calc(50vh - 6rem); }
  }




  .pilar:nth-child(odd):not(.pilar--remate) .pilar__media{ grid-column: 1 / span 6; }
  .pilar:nth-child(odd):not(.pilar--remate) .pilar__texto{ grid-column: 8 / span 5; }


  .pilar:nth-child(even):not(.pilar--remate) .pilar__media{ grid-column: 7 / span 6; }
  .pilar:nth-child(even):not(.pilar--remate) .pilar__texto{
    grid-column: 1 / span 5;

    justify-self: end;
  }


  .pilar--remate .pilar__media{
    width: auto;
    grid-column: 6 / -1;
    margin-inline: 0 calc(-1 * max(var(--seccion-x), (100cqw - var(--ancho)) / 2));
  }
  .pilar--remate .pilar__texto{
    grid-column: 1 / span 4;
    justify-self: end;
  }
}


@keyframes pilar-entra{
  from{ opacity: 0; transform: translateY(var(--desplaza)); }
  to  { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pilares__cabecera,
    .pilar__media,
    .pilar__texto{
      animation: pilar-entra linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 60%;
    }

    .pilar__texto{ animation-range: entry 18% entry 74%; }
  }
}

/* 05-donde-estas-tu.html */
.donde{ background-color: var(--fondo); }



.donde__portada{
  padding-block: var(--seccion-y) var(--e-7);
  padding-inline: var(--seccion-x);
}

.donde__envoltura{ max-width: var(--ancho); margin-inline: auto; }

.donde__etiqueta{
  max-width: none;
  margin-bottom: var(--e-5);
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  letter-spacing: var(--tr-etiqueta);
  margin-right: calc(var(--tr-etiqueta) * -1);
  text-transform: uppercase;

  color: var(--etiqueta);
}

.donde__titular{
  font-size: var(--t-display);
  line-height: var(--lh-display);
  max-width: var(--medida-titular);

  letter-spacing: calc(var(--tr-display) + 0.006em);
}


.donde__entrada{
  margin-top: var(--e-6);
  max-width: 36ch;
  font-size: var(--t-entrada);
  line-height: var(--lh-entrada);
  color: var(--texto-suave);
}


.espejo{

  --camino-x: var(--e-3);
  padding-inline: var(--seccion-x);


  padding-block: var(--e-6) var(--seccion-y);
}


.espejo__lista{
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  gap: var(--e-6);

  position: relative;
}




.espejo__lista::before{
  content: "";
  position: absolute;
  inset-block: calc(-1 * var(--e-6)) 0;
  left: calc(-1 * var(--camino-x));
  width: var(--filete-grosor);

  background-image: linear-gradient(
    to bottom,
    transparent 0,
    var(--filete-acento) var(--e-6),
    var(--filete-acento) calc(100% - 2.5rem),
    transparent 100%
  );
  transform: scaleY(0);
  transform-origin: top center;
}

.espejo__punto{
  margin-top: 0;

  padding-block-start: var(--e-4);
  position: relative;
}


.espejo__punto::before{
  content: "";
  position: absolute;
  inset-block-start: 0;
  left: calc(-1 * var(--camino-x));
  right: 0;
  height: var(--filete-grosor);
  background-color: var(--filete-acento);
  transform: scaleX(0);
  transform-origin: left center;
}


.espejo__punto::after{
  content: "";
  position: absolute;
  inset-block-start: 0;
  left: calc(0.5px - var(--camino-x));
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--filete-acento);
  transform: translate(-50%, -50%);
  opacity: 0;
}

@keyframes camino-traza{ to{ transform: scaleY(1); } }
@keyframes camino-ramal{ to{ transform: scaleX(1); } }
@keyframes camino-parada{ to{ opacity: 1; } }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    .espejo__lista::before{
      animation: camino-traza linear both;
      animation-timeline: view();
      animation-range: cover 4% cover 72%;
    }


    .espejo__punto::before{
      animation: camino-ramal var(--curva-larga) both;
      animation-timeline: view();
      animation-range: cover 6% cover 26%;
    }
    .espejo__punto::after{
      animation: camino-parada linear both;
      animation-timeline: view();
      animation-range: cover 18% cover 30%;
    }
  }
}


.espejo__rotulo{
  font-size: var(--t-t2);
  max-width: 24ch;
}


.espejo__linea{
  margin-top: var(--e-3);
  max-width: 48ch;
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--texto-suave);
}


.espejo__junto{ white-space: nowrap; }


.donde__puente{
  max-width: var(--ancho);
  margin-inline: auto;
  margin-top: var(--e-7);
  font-size: var(--t-entrada);
  line-height: var(--lh-entrada);
}


.arco{ background-color: var(--negro); }

.arco::after{
  content: "";
  display: block;
  height: 26svh;
}


.arco__plano{
  position: sticky;
  top: 0;
  height: var(--esc-alto);
  isolation: isolate;
}


.arco .escenario__medio{ animation: none; }


.arco__texto{
  position: relative;
  z-index: 1;
  align-self: start;
  width: 100%;
  max-width: calc(var(--ancho) + var(--seccion-x) * 2);
  margin-inline: auto;
  padding-block-start: 16svh;
  padding-inline: var(--seccion-x);
  --texto-suave: var(--texto);
  --texto-tenue: var(--texto);
}


.arco__linea{
  font-family: var(--serif);
  font-size: var(--t-t1);
  line-height: var(--lh-titular);
  letter-spacing: var(--tr-titular);
  max-width: 20ch;
}


.arco__plano[data-superficie="negro"] .arco__linea{
  letter-spacing: calc(var(--tr-titular) + 0.006em);
}


.arco .escenario[data-tono="oscuro"]    { --esc-velo-a: .62; --esc-velo-b: .70; }
.arco .escenario[data-tono="intermedio"]{ --esc-velo-a: .64; --esc-velo-b: .72; }
.arco .escenario[data-tono="claro"]     { --esc-velo-a: .55; --esc-velo-b: .66; }


.arco .escenario[data-tono="oscuro"] .escenario__foto{
  filter: brightness(1.45) contrast(1.04);
}
.arco .escenario[data-tono="oscuro"] .escenario__video{
  filter: brightness(2.6) contrast(0.57);
}
.arco .escenario[data-tono="intermedio"] .escenario__foto{
  filter: brightness(1.22) contrast(1.03);
}



.arco__corte{
  position: absolute;
  z-index: 2;
  bottom: 100%;
  left: 0;
  right: 0;
  --akhet-ancho: clamp(84px, 22vw, 132px);
}


@media (min-width: 48rem){

  .espejo{ --camino-x: var(--e-5); }
  .espejo__punto{
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--e-8);
    align-items: start;
  }
  .espejo__rotulo{ max-width: 20ch; }
  .espejo__linea{ margin-top: 0; max-width: 46ch; }
  .donde__remate{ max-width: 34ch; }
}


.donde__cierre{
  padding-inline: var(--seccion-x);
  padding-block: var(--e-8) var(--seccion-y);
}

.donde__remate{
  font-family: var(--serif);
  font-size: var(--t-t2);
  line-height: var(--lh-titular);
  letter-spacing: var(--tr-titular);
  max-width: 28ch;
}


@media (prefers-reduced-motion: reduce){

  .arco::after{ display: none; }
  .arco__plano{ position: relative; height: auto; }
  .arco .escenario__medio{ position: relative; aspect-ratio: 4 / 5; }
  .arco__texto{ padding-block: var(--e-7); }
  .arco__plano--vispera .arco__texto{
    padding-block-end: calc(var(--e-7) + var(--e-6));
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 48rem){
  .arco .escenario__medio{ aspect-ratio: 16 / 9; }
}

/* 06-el-club.html */
.clb{
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--seccion-y) calc(var(--seccion-y) + var(--e-7));
  padding-inline: var(--seccion-x);
}


.clb__envoltura{
  max-width: var(--ancho);
  margin-inline: auto;
}




.clb__etiqueta{
  font-family: var(--sans);
  font-size: var(--t-t3);
  letter-spacing: 0.06em;
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  text-transform: uppercase;
  color: var(--etiqueta);
  max-width: none;
}


.clb__reja{
  margin-top: var(--e-7);
  display: grid;
  gap: var(--e-7);
}

@media (min-width: 60rem){
  .clb__reja{
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--e-9);
    align-items: center;
  }
}


.clb__titular{
  margin-top: var(--e-5);
  max-width: 26ch;
  text-wrap: balance;
}


.clb__media{
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.clb__foto{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.clb__texto{ max-width: var(--medida-corta); }

.clb__texto p{
  max-width: none;
  color: var(--texto-suave);
  text-wrap: pretty;
}
.clb__texto p + p{ margin-block-start: var(--e-5); }


.clb__entrada{
  font-size: var(--t-entrada);
  line-height: var(--lh-entrada);
  color: var(--texto) !important;
}


.clb__hechos{
  list-style: none;
  margin: var(--e-7) 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: var(--e-5);
}
.clb__hecho{
  margin: 0;
  max-width: none;
  border-block-start: var(--filete-grosor) solid var(--filete-acento);
  padding-block-start: var(--e-3);
}
.clb__hecho b{
  display: block;
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
  color: var(--etiqueta);
  margin-bottom: var(--e-2);
}
.clb__hecho span{
  display: block;
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--texto-suave);
}

@media (min-width: 40rem){
  .clb__hechos{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); }
}


.clb__cta{ margin-top: var(--e-7); max-width: none; }

.clb__boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--e-3) var(--e-6);
  background-color: var(--inverso-fondo);
  color: var(--inverso-texto);
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
  text-decoration: none;
  border: var(--filete-grosor) solid var(--inverso-fondo);
}
.clb__boton:hover,
.clb__boton:focus-visible{
  background-color: transparent;
  color: var(--inverso-fondo);
}

.clb__nota{
  margin-top: var(--e-4);
  max-width: var(--medida-corta);
  font-size: var(--t-menor);
  line-height: var(--lh-menor);
  color: var(--texto-tenue);
}


.clb__corte{
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  --akhet-ancho: clamp(84px, 22vw, 132px);
}


@keyframes clb-surge{
  from{ opacity: 0; transform: translateY(var(--desplaza)); }
  to  { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .clb__cabeza,
    .clb__media,
    .clb__texto,
    .clb__hechos{
      animation-name: clb-surge;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--curva-larga);
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* 07-lo-que-se-cuenta.html */
.voz{
  padding-block: var(--seccion-y);
  padding-inline: var(--seccion-x);
  background-color: var(--nube);
  color: var(--texto);
}

.voz__envoltura{
  max-width: var(--ancho);
  margin-inline: auto;
}


.voz__etiqueta{
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
  margin-right: calc(var(--tr-etiqueta) * -1);
  color: var(--etiqueta);
  max-width: none;
}

.voz__titular{
  margin-top: var(--e-5);
  max-width: 24ch;
  text-wrap: balance;
}


.voz__estrellas{
  display: flex;
  gap: 0.28rem;
  margin-top: var(--e-4);
  max-width: none;
}
.voz__estrellas svg{
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--oro-hondo);
  flex: 0 0 auto;
}





.voz__prueba{
  display: block;
  margin-top: var(--e-2);
  text-decoration: none;
  color: inherit;
}


.voz__prueba img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 8rem;
  object-fit: cover;
  object-position: top;
  border: var(--filete-grosor) solid var(--nube);
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
}


.voz__prueba[data-entera] img{
  max-height: none;
  -webkit-mask-image: none;
          mask-image: none;
}


.voz__ampliar{
  display: block;
  margin-top: var(--e-3);
  font-family: var(--sans);
  font-size: var(--t-menor);
  line-height: var(--lh-menor);
  color: var(--texto-suave);
  text-decoration: underline;
  text-decoration-color: var(--oro-hondo);
  text-decoration-thickness: var(--filete-grosor);
  text-underline-offset: 0.24em;
}
.voz__prueba:hover .voz__ampliar,
.voz__prueba:focus-visible .voz__ampliar{ text-decoration-color: var(--texto); }



.voz__muro{
  list-style: none;
  margin: var(--e-7) 0 0;
  padding: 0;
  max-width: none;
  columns: 1;
  column-gap: var(--e-5);
}

@media (min-width: 48rem){ .voz__muro{ columns: 2; } }
@media (min-width: 75rem){ .voz__muro{ columns: 3; column-gap: var(--e-6); } }




.voz__burbuja{
  break-inside: avoid;
  margin: 0 0 var(--e-4);
  padding: var(--e-5);
  background-color: var(--fondo);
  border: var(--filete-grosor) solid var(--nube);
  border-radius: var(--e-3);

  box-shadow: 0 1px 2px rgba(11, 9, 8, .04), 0 8px 24px -12px rgba(11, 9, 8, .10);
  max-width: none;
}

@media (min-width: 48rem){
  .voz__burbuja{ margin-bottom: var(--e-5); padding: var(--e-6); }
}
@media (min-width: 75rem){
  .voz__burbuja{ margin-bottom: var(--e-6); }
}

.voz__cita{
  margin: 0;
  max-width: none;
}


.voz__cita p{
  margin: 0;
  max-width: none;
  font-family: var(--sans);
  font-size: var(--t-entrada);
  line-height: 1.62;
  color: var(--texto);
  text-wrap: pretty;
}
.voz__cita p + p{ margin-block-start: var(--e-4); }




.voz__firma{
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-5);
  font-family: var(--sans);
  font-style: normal;
}
.voz__avatar{
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: var(--filete-grosor) solid var(--oro-hondo);
  font-size: var(--t-menor);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  color: var(--oro-hondo);

}

.voz__avatar--anonima{ border-style: dashed; }

.voz__quien{ display: block; min-width: 0; }
.voz__quien b{
  display: block;
  font-size: var(--t-cuerpo);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
  color: var(--texto);
}

.voz__cuando{
  display: block;
  margin-top: 0.1rem;
  font-size: var(--t-menor);
  line-height: var(--lh-menor);
  color: var(--texto-tenue);
}


.voz__rotulo-prueba{

  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: var(--filete-grosor) solid var(--nube);
  max-width: none;
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.voz__firma b{
  font-weight: var(--peso-fuerte);
  color: var(--texto-suave);
}



@keyframes voz-surge{
  from{ opacity: 0; transform: translateY(var(--desplaza)); }
  to  { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .voz__cabeza{
      animation-name: voz-surge;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--curva-larga);
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* 08-las-formaciones.html */
.fmc{
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: var(--seccion-y) calc(var(--seccion-y) + var(--e-7));
  padding-inline: var(--seccion-x);
}

.fmc__envoltura{
  max-width: var(--ancho);
  margin-inline: auto;
}




.fmc__etiqueta{
  font-family: var(--sans);
  font-size: var(--t-t3);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--etiqueta);
  max-width: none;
}

.fmc__titular{
  margin-top: var(--e-5);
  max-width: 28ch;
  text-wrap: balance;
}

.fmc__entrada{
  margin-top: var(--e-5);
  max-width: var(--medida-corta);
  font-size: var(--t-entrada);
  line-height: var(--lh-entrada);
  color: var(--texto-suave);
  text-wrap: pretty;
}


.fmc__lista{
  list-style: none;
  margin: var(--e-7) 0 0;
  padding: 0;
  max-width: none;
  display: grid;
  gap: var(--e-6);
}

@media (min-width: 48rem){
  .fmc__lista{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-7); }
}
@media (min-width: 64rem){
  .fmc__lista{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-7); }
}

.fmc__curso{
  margin: 0;
  max-width: none;

  border-block-start: var(--filete-grosor) solid var(--filete);
  padding-block-start: var(--e-5);
}
@media (min-width: 48rem){
  .fmc__curso{ border-block-start: 0; padding-block-start: 0; }
}


.fmc__enlace{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: var(--e-5);
  align-items: start;
  text-decoration: none;
  color: inherit;
}
@media (min-width: 48rem){
  .fmc__enlace{ display: block; }
  .fmc__nombre{ margin-top: var(--e-5); }
}


.fmc__media{
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--fondo);
}
.fmc__foto{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform var(--dur-media, 420ms) var(--curva-larga);
}
@media (prefers-reduced-motion: no-preference){
  .fmc__enlace:hover .fmc__foto,
  .fmc__enlace:focus-visible .fmc__foto{ transform: scale(1.015); }
}

.fmc__nombre{
  margin-top: 0;
  max-width: 24ch;
  font-size: var(--t-t3);
  text-wrap: balance;

  text-decoration: underline;
  text-decoration-color: var(--filete-acento);
  text-decoration-thickness: var(--filete-grosor);
  text-underline-offset: 0.22em;
}
.fmc__enlace:hover .fmc__nombre,
.fmc__enlace:focus-visible .fmc__nombre{ text-decoration-color: var(--texto); }


.fmc__resuelve{
  margin-top: var(--e-3);
  max-width: 30ch;
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--texto-suave);
  text-wrap: pretty;
}


.fmc__medida{
  margin-top: var(--e-2);
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
  max-width: none;
}


.fmc__coda{
  margin-top: var(--e-7);
  max-width: var(--medida-corta);
}

.fmc__accion{ margin-top: var(--e-5); max-width: none; }
.fmc__ir{
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--filete-acento);
  text-decoration-thickness: var(--filete-grosor);
  text-underline-offset: 0.28em;
}
.fmc__ir:hover, .fmc__ir:focus-visible{ text-decoration-color: var(--texto); }


.fmc__corte{
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  --akhet-ancho: clamp(84px, 22vw, 132px);
}


@keyframes fmc-surge{
  from{ opacity: 0; transform: translateY(var(--desplaza)); }
  to  { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .fmc__cabeza,
    .fmc__curso,
    .fmc__coda{
      animation-name: fmc-surge;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--curva-larga);
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* 09-el-master.html */
.mst{
  padding-block: var(--seccion-y);
  padding-inline: var(--seccion-x);
  background-color: var(--fondo);
  color: var(--texto);
}


.mst__envoltura{
  max-width: var(--ancho);
  margin-inline: auto;
}


.mst__marca{
  display: flex;
  align-items: center;
  gap: var(--e-5);
}
.mst__filete{
  flex: 1 1 auto;
  margin: 0;
  min-width: var(--e-8);
}




.mst__etiqueta{
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: var(--t-t3);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--etiqueta);
  max-width: none;
}


.mst__reja{
  margin-top: var(--e-7);
  display: grid;
  gap: var(--e-6);
}
@media (min-width: 60rem){
  .mst__reja{
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--e-9);
    align-items: start;
  }
}

.mst__titular{
  max-width: 20ch;
  text-wrap: balance;
}

.mst__cuerpo{ max-width: var(--medida-corta); }
.mst__cuerpo p{
  max-width: none;
  color: var(--texto-suave);
  text-wrap: pretty;
}
.mst__cuerpo p + p{ margin-block-start: var(--e-5); }


.mst__entrada{
  font-size: var(--t-entrada);
  line-height: var(--lh-entrada);
  color: var(--texto) !important;
}


.mst__estado{
  margin-top: var(--e-7);
  padding-block-start: var(--e-4);
  border-block-start: var(--filete-grosor) solid var(--filete-acento);
  max-width: var(--medida-corta);
}
.mst__estado p{
  max-width: none;
  color: var(--texto);
  text-wrap: pretty;
}
.mst__estado p + p{
  margin-block-start: var(--e-3);
  font-size: var(--t-menor);
  line-height: var(--lh-menor);
  color: var(--texto-tenue);
}


.mst__espera{ margin-top: var(--e-5); max-width: none; }
.mst__ir{
  display: inline-block;
  padding-block: var(--e-3);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--filete-acento);
  text-decoration-thickness: var(--filete-grosor);
  text-underline-offset: 0.28em;
}
.mst__ir:hover, .mst__ir:focus-visible{ text-decoration-color: var(--texto); }


@keyframes mst-surge{
  from{ opacity: 0; transform: translateY(var(--desplaza)); }
  to  { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .mst__marca,
    .mst__titular,
    .mst__cuerpo,
    .mst__estado{
      animation-name: mst-surge;
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--curva-larga);
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* 10-quien-esta-detras.html */
.qd{
  --qd-margen: var(--seccion-x);
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);

  padding-block-end: calc(var(--seccion-y) + var(--e-6));
}


.qd__escena{ position: relative; }

.qd__marco{
  position: relative;
  overflow: hidden;
  margin: 0;
  width: 100%;

  aspect-ratio: 1 / 1;
  background-color: var(--fondo);
}

.qd__foto{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  object-position: 91% 50%;
}


.qd__marco::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to top, var(--fondo) 0%, transparent 26%);
}


@media (min-width: 36rem){
  .qd__marco{ aspect-ratio: 4 / 3; }
  .qd__foto{ object-position: 100% 50%; }
}
@media (min-width: 48rem){
  .qd__marco{ aspect-ratio: 3 / 2; }
}


.qd__hueco{
  position: relative;
  z-index: 1;
  padding-inline: var(--qd-margen);
  padding-block-start: var(--e-7);
}


.qd__etiqueta{
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  letter-spacing: var(--tr-etiqueta);
  margin-right: calc(var(--tr-etiqueta) * -1);
  text-transform: uppercase;
  color: var(--etiqueta);
}

.qd__socios{ margin-top: var(--e-6); }
.qd__socio + .qd__socio{ margin-top: var(--e-7); }

.qd__nombre{ font-size: var(--t-t2); }


.qd__aporta{
  margin-top: var(--e-3);
  max-width: var(--medida-corta);
  color: var(--texto-suave);
}


@media (min-width: 48rem){
  .qd__socios{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(var(--e-6), 4vw, var(--e-8));
  }
  .qd__socio + .qd__socio{ margin-top: 0; }
}












.qd__corte{
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  --akhet-ancho: clamp(84px, 22vw, 132px);
}

@media (min-width: 48rem){
  .qd__coda{ margin-top: var(--e-9); }
}


@media (min-width: 64rem){
  .qd{ --qd-margen: max(var(--seccion-x), calc((100vw - var(--ancho)) / 2)); }


  .qd__escena{
    display: grid;
    align-content: center;
    min-height: 42.857vw;
  }

  .qd__marco{
    position: absolute;
    inset: 0 0 auto 0;
    aspect-ratio: 3024 / 1296;
  }


  .qd__marco::after{
    background-image:
      linear-gradient(to top,   var(--fondo) 0%, transparent 26%),
      linear-gradient(to right, var(--fondo) 0%, var(--fondo) 24%, transparent 50%);
  }


  .qd__hueco{
    padding-inline: var(--qd-margen) 56%;
    padding-block: var(--seccion-y);
  }


  .qd__socios{ grid-template-columns: minmax(0, 1fr); }
  .qd__socio + .qd__socio{ margin-top: var(--e-7); }

  .qd__coda{ margin-top: var(--seccion-y); }
}


@keyframes qd-entra{
  from{ opacity: 0; transform: translateY(var(--desplaza)); }
  to  { opacity: 1; transform: none; }
}
@keyframes qd-funde{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

@keyframes qd-deriva{
  from{ transform: translateY(-6%); }
  to  { transform: none; }
}




@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    .qd__marco{
      animation: qd-funde linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 12%;

      view-timeline-name: --qd-marco;
      view-timeline-axis: block;
    }


    @media (max-width: 63.99rem){
      .qd__foto{
        height: 112%;
        animation: qd-deriva linear both;
        animation-timeline: --qd-marco;
        animation-range: cover 0% cover 100%;
      }
    }

    .qd__etiqueta,
    .qd__socio,
    .qd__socios{
      animation: qd-entra var(--curva-larga) both;
      animation-timeline: view();
      animation-range: cover 3% cover 23%;
    }


    .qd__socio:first-child   { animation-range: cover 5% cover 25%; }
    .qd__socio + .qd__socio  { animation-range: cover 7% cover 27%; }

  }
}

/* 11-articulos.html */
.art{

  --art-calle: clamp(var(--e-7), 6vw, var(--e-9));

  position: relative;

  background-color: var(--fondo-alt);
  color: var(--texto);

  padding-block: max(var(--e-8), calc(var(--seccion-y) * 0.78));
}

.art__ancho{
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--seccion-x);
}


.art__marca{
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.art__etiqueta{
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: var(--lh-etiqueta);
  letter-spacing: var(--tr-etiqueta);

  margin-right: calc(var(--tr-etiqueta) * -1);
  text-transform: uppercase;

  color: var(--etiqueta);
  max-width: none;
}

.art__filete{
  flex: 1 1 auto;
  min-width: 0;

  margin-block: 0;
}


.art__rejilla{
  display: grid;
  grid-template-columns: minmax(0, 1fr);

  row-gap: var(--e-7);
  margin-top: var(--e-6);
}

.art__titular{
  font-size: var(--t-t2);

  max-width: var(--medida-titular);
}


.art__entrada{
  margin-top: var(--e-4);
  max-width: var(--medida-corta);
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--texto-suave);
  text-wrap: pretty;
}


.art__enlace{
  display: block;
  min-height: 2.75rem;
  text-decoration: none;
}

.art__pieza-titulo{
  margin-top: var(--e-2);
  font-size: var(--t-t3);

  max-width: var(--medida-corta);
}


.art__resuelve{
  margin-top: var(--e-3);
  max-width: var(--medida-corta);
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  color: var(--texto-suave);
}


.art__enlace .art__pieza-titulo{
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: var(--filete-grosor);
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--t-medio) var(--curva);
}

.art__enlace:hover .art__pieza-titulo{ text-decoration-color: var(--texto); }


.art__fecha{
  display: block;
  font-family: var(--sans);
  font-size: var(--t-menor);
  font-weight: var(--peso-cuerpo);
  line-height: var(--lh-menor);
  letter-spacing: 0.02em;
  color: var(--texto-tenue);
}


.art__cierre{
  margin-block: var(--e-5) 0;
}


.art__todos{
  display: inline-flex;
  align-items: center;
  min-height: var(--control-alto);
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
}


.art__todos{
  display: inline-flex;
  align-items: center;
  min-height: var(--control-alto);
  font-size: var(--t-menor);
  font-weight: var(--peso-medio);
}


@media (min-width: 52rem){
  .art__rejilla{
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--art-calle);
    align-items: start;
    margin-top: var(--e-7);
  }
}


@keyframes art-entra{
  from{ opacity: 0; transform: translateY(var(--desplaza)); }
  to  { opacity: 1; transform: none; }
}
@keyframes art-aparece{
  from{ opacity: 0; }
  to  { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .art__marca{
      animation: art-aparece linear both;
      animation-timeline: view();
      animation-range: cover 2% cover 22%;
    }
    .art__cabecera,
    .art__pieza,
    .art__pie{
      animation: art-entra var(--curva-larga) both;
      animation-timeline: view();
    }

    .art__cabecera{ animation-range: cover  6% cover 26%; }
    .art__pieza   { animation-range: cover  9% cover 29%; }
    .art__pie     { animation-range: cover 12% cover 32%; }
  }
}

/* 12-cierre.html */
.fin{

  background-color: var(--fondo);
  color: var(--texto);
}


.fin__caja{
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--seccion-x);
}



.fin__cierre{
  padding-block: clamp(var(--e-9), calc(var(--e-8) + 8vw), calc(var(--e-10) + var(--e-7)));
  text-align: center;
}


.fin__titular{
  max-width: none;

  margin-top: clamp(var(--e-6), 4vw, var(--e-8));
}


.fin__titular .cartucho{
  min-width: min(100%, 11.5em);
}


.fin__cierre .fin__caja{
  padding-inline: calc(var(--seccion-x) + 1.0625rem);
}


.fin__respuesta{
  max-width: var(--medida-corta);
  margin-inline: auto;
  font-size: var(--t-entrada);
  line-height: var(--lh-entrada);
  color: var(--texto-suave);
}

.fin__respuesta span{ display: inline-block; text-wrap: balance; }


.fin__cta{
  max-width: none;

  margin-top: clamp(var(--e-7), 5vw, var(--e-8));
}

.fin__boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-alto);
  padding-inline: var(--control-x);
  border: var(--filete-grosor) solid var(--inverso-fondo);
  border-radius: var(--radio);
  background-color: var(--inverso-fondo);
  color: var(--inverso-texto);
  font-family: var(--sans);
  font-size: var(--t-menor);
  font-weight: var(--peso-fuerte);
  font-stretch: var(--ancho-etiqueta);
  line-height: 1;
  letter-spacing: var(--tr-etiqueta);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--t-medio) var(--curva),
              border-color var(--t-medio) var(--curva);
}
.fin__boton:hover{
  background-color: var(--texto-suave);
  border-color: var(--texto-suave);
}



.fin__pie{
  background-color: var(--fondo-alt);
  border-top: var(--filete-grosor) solid var(--filete-acento);
  padding-block: var(--e-7) var(--e-8);
  text-align: center;
}


.fin__logo{
  width: clamp(6.5rem, 27vw, 7.5rem);
  height: auto;
  margin-inline: auto;
  margin-bottom: var(--e-6);
}


.fin__enlaces{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: none;
  padding: 0;
  font-size: var(--t-menor);
  line-height: var(--lh-menor);
}
.fin__enlaces li{ margin: 0; }


.fin__enlaces a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


@media (min-width: 34rem){
  .fin__enlaces{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--e-3) var(--e-4);
  }
  .fin__enlaces li + li::before{
    content: "\00B7";
    margin-right: var(--e-4);
    color: var(--texto-tenue);
  }
}


.fin__legal{
  max-width: none;
  margin-top: var(--e-5);
  font-size: var(--t-etiqueta);
  line-height: var(--lh-menor);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.fin__legal .fin__sep{ margin-inline: var(--e-2); }



@keyframes fin-entra{
  from{ opacity: 0; transform: translateY(var(--desplaza)); }
  to  { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .fin__titular,
    .fin__respuesta,
    .fin__cta{
      animation: fin-entra linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 34%;
    }

    .fin__titular{ animation-range: entry 8%  entry 38%; }
    .fin__cta    { animation-range: entry 12% entry 42%; }
  }
}