/* Encaje — deck web.
 *
 * Mismo sistema que el .pptx: papel crudo, negro, azul cobalto, lima y rojo;
 * condensada gigante en versales, etiquetas [01] en mono, trama de puntos,
 * papel rasgado y brochazos.
 *
 * La medida base es --u: 1/1280 del ancho de la diapositiva. Todo el diseno
 * esta escrito contra una caja de 1280x720, igual que el pptx (13.333x7.5 in a
 * 96 px/in), asi que las medidas se pueden pasar de uno al otro sin recalcular.
 */

:root{
  --papel:#F6F1E5;
  --negro:#101112;
  --azul:#0F3FC5;
  --lima:#BFDA36;
  --rojo:#E4483C;
  --gris:#666259;          /* texto secundario sobre papel */
  --gris-claro:#938F86;    /* texto secundario sobre negro */
  --filete:#D4CFC2;
  --filete-oscuro:#3A3A3E;

  --tit:"Anton","Haettenschweiler","Arial Narrow",Impact,sans-serif;
  --txt:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0}
body{
  background:#0A0A0B;
  color:var(--papel);
  font-family:var(--txt);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                     /* en escritorio manda el teclado */
  overscroll-behavior:none;
}

/* ------------------------------------------------------------------ escena */
.escena{
  --u:calc(min(100vw, 177.78vh) / 1280);
  --ancho:calc(var(--u) * 1280);
  --alto:calc(var(--u) * 720);
  --margen:calc(var(--u) * 83);

  position:relative;
  width:var(--ancho);
  height:var(--alto);
  margin:calc((100vh - var(--alto)) / 2) auto 0;
  overflow:hidden;
}

/* Corte seco entre diapositivas, sin fundido.
 *
 * Nada visible puede depender de una transicion: si el reloj de animacion no
 * avanza (pestana en segundo plano, compositor que no tickea) la diapositiva
 * se queda a medio camino y no se lee nada. Ademas el corte duro le queda
 * mejor a un deck de afiches. */
.dia{
  position:absolute;
  inset:0;
  overflow:hidden;
  visibility:hidden;
}
.dia.activa{visibility:visible}

.fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.deco{position:absolute;z-index:1;pointer-events:none}

.dia > .flecha{position:absolute;z-index:2}

/* La portada y el cierre no usan .cuerpo: son composiciones sueltas, asi que
   su cabecera y su pie se colocan a mano. */
.s-portada > header,
.s-cierre > header{
  position:absolute;
  z-index:2;
  top:calc(var(--u) * 50);
  left:var(--margen);
  display:flex;
  align-items:baseline;
  gap:calc(var(--u) * 18);
}
.s-portada > .pie,
.s-cierre > .pie{position:absolute;z-index:2;left:var(--margen);margin:0}

/* El cuerpo es UNA caja en flujo. Poner cabecera, titular, lista y pie cada
   uno en absoluto obligaba a saber a que altura termina el titular, que
   cambia con el idioma; asi la lista cae sola abajo del titular. */
.cuerpo{
  position:absolute;
  z-index:2;
  top:calc(var(--u) * 50);
  left:var(--margen);
  right:var(--margen);
  bottom:calc(var(--u) * 38);
  display:flex;
  flex-direction:column;
}

/* ------------------------------------------------------------- cabecera */
.cuerpo > header{
  display:flex;
  align-items:baseline;
  gap:calc(var(--u) * 18);
  flex:none;
}
.num{
  font-family:var(--mono);
  font-weight:700;
  font-size:calc(var(--u) * 14.5);
  letter-spacing:.16em;
  position:relative;
  color:var(--negro);
}
.num::after{                            /* el filete rojo debajo del [01] */
  content:"";
  position:absolute;
  left:.1em;
  top:calc(100% + .38em);
  width:2.1em;
  height:calc(var(--u) * 3.4);
  background:var(--rojo);
}
.kicker{
  font-family:var(--mono);
  font-weight:700;
  font-size:calc(var(--u) * 12.6);
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--rojo);
}

/* --------------------------------------------------------------- titular */
.titulo{
  margin:calc(var(--u) * 48) 0 0;
  flex:none;
  max-width:calc(var(--u) * 936);
  font-family:var(--tit);
  font-weight:400;
  text-transform:uppercase;
  line-height:.89;
  letter-spacing:-.005em;
  color:var(--negro);
  font-size:calc(var(--u) * var(--tam, 77));
}
.titulo .ac{color:var(--acento, var(--azul))}

/* el subrayado y el circulo a mano: los coloca el JS midiendo la ultima
   linea de verdad, porque donde corta depende del idioma */
.adorno{position:absolute;z-index:1;pointer-events:none}
.adorno.encima{z-index:3}

/* ---------------------------------------------------------------- lista */
/* La lista se estira para llenar lo que sobra entre el titular y el pie. Es
   el equivalente del reparto que hago a mano en el .pptx. */
.lista{
  margin:calc(var(--u) * 30) 0 0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.lista .fila{
  display:grid;
  grid-template-columns:calc(var(--u) * var(--lead, 322)) 1fr;
  gap:calc(var(--u) * 30);
  align-content:start;
  border-top:1px solid var(--filete);
  padding:calc(var(--u) * 15) 0 calc(var(--u) * 9);
  flex:0 1 auto;
  margin-bottom:calc(var(--u) * 22);
}
.lista .fila:last-child{margin-bottom:0}
.lista dt{
  margin:0;
  font-weight:700;
  font-size:calc(var(--u) * 20);
  line-height:1.2;
  color:var(--negro);
}
.lista dd{
  margin:0;
  font-size:calc(var(--u) * 17.5);
  line-height:1.35;
  color:var(--gris);
}
.lista .fila.marcada dt{color:var(--rojo)}

/* los pasos numerados de la 04 */
.lista.pasos .fila{grid-template-columns:calc(var(--u) * 98) calc(var(--u) * 290) 1fr}
.lista .paso{
  font-family:var(--tit);
  font-size:calc(var(--u) * 40);
  line-height:1;
  color:var(--negro);
}
.lista .fila:nth-child(odd) .paso{color:var(--azul)}

/* ------------------------------------------------------------------ pie */
.pie{
  margin:calc(var(--u) * 18) 0 0;
  flex:none;
  max-width:calc(var(--u) * 980);
  font-size:calc(var(--u) * 15);
  line-height:1.35;
  color:var(--gris);
}
.flecha{
  right:var(--margen);
  bottom:calc(var(--u) * 40);
  width:calc(var(--u) * 60);
  height:auto;
}

/* --------------------------------------------------------- sobre negro */
.dia.oscura .num{color:var(--papel)}
.dia.oscura .titulo{color:var(--papel)}
.dia.oscura .lista .fila{border-top-color:var(--filete-oscuro)}
.dia.oscura .lista dt{color:var(--papel)}
.dia.oscura .lista dd{color:var(--gris-claro)}
.dia.oscura .pie{color:var(--gris-claro)}

/* ------------------------------------------------------------- recetas */
/* foto a sangre a la derecha, con el corte rasgado pegado al canto */
.s-foto .foto{position:absolute;top:0;right:0;width:calc(var(--u) * 453);height:100%;
  object-fit:cover;z-index:1}
.s-foto .corte{position:absolute;top:0;left:calc(var(--u) * 827);width:calc(var(--u) * 48);
  height:100%;z-index:2}
.s-foto .cuerpo{right:calc(var(--u) * 500)}
.s-foto .titulo{font-size:calc(var(--u) * var(--tam, 66))}
.s-foto .lista .fila{--lead:245}
.s-foto .flecha{right:auto;left:calc(var(--u) * 725)}

.s-pasos .foto{width:calc(var(--u) * 373)}
.s-pasos .corte{left:calc(var(--u) * 907)}
.s-pasos .cuerpo{right:calc(var(--u) * 420)}

/* panel azul a la izquierda, lista sobre papel a la derecha */
.s-azul .panel{position:absolute;top:0;left:0;width:calc(var(--u) * 514);height:100%;
  object-fit:cover;z-index:1}
.s-azul .corte{position:absolute;top:0;left:calc(var(--u) * 514);width:calc(var(--u) * 48);
  height:100%;z-index:2}
/* Esta receta va en dos columnas: el titular sobre el azul y la lista sobre
   el papel. Son dos cuerpos, no uno. */
.s-azul .cuerpo{left:calc(var(--u) * 69);right:calc(var(--u) * 800)}
.s-azul .num{color:var(--papel)}
.s-azul .titulo{color:var(--papel);font-size:calc(var(--u) * var(--tam, 60))}
.s-azul .cuerpo.derecha{left:calc(var(--u) * 610);right:var(--margen);
  top:calc(var(--u) * 118)}
.s-azul .lista .fila{--lead:210}
.s-azul .flecha{right:auto;left:calc(var(--u) * 69)}

/* ------------------------------------------------------------- portada */
.s-portada .marca{
  position:absolute;
  z-index:2;
  left:calc(var(--u) * 74);
  top:calc(var(--u) * 86);
  margin:0;
  font-family:var(--tit);
  font-weight:400;
  font-size:calc(var(--u) * var(--tam, 252));
  line-height:.84;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--azul);
}
.s-portada .foto{position:absolute;top:0;right:0;width:calc(var(--u) * 613);height:100%;
  object-fit:cover;z-index:1}
.s-portada .corte{position:absolute;top:0;left:calc(var(--u) * 667);width:calc(var(--u) * 48);
  height:100%;z-index:2}
.s-portada .num{color:var(--papel)}

.linea{
  position:absolute;z-index:2;margin:0;left:var(--margen);
  font-family:var(--mono);font-weight:700;
  font-size:calc(var(--u) * 14.6);
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1.5;
  width:calc(var(--u) * 520);
}
/* Sin un top propio las tres se apilan arriba, una encima de la otra. */
.linea.uno{color:var(--papel);top:calc(var(--u) * 386)}
.linea.dos{
  color:var(--lima);
  top:calc(var(--u) * 436);
  /* El subrayado va como fondo del propio texto: se estira solo al largo de
     la frase en cada idioma, sin que nadie tenga que medirlo. */
  width:max-content;
  max-width:calc(var(--u) * 540);
  padding-bottom:calc(var(--u) * 20);
  background:url(arte/subrayado-lima.webp) left bottom / 100% calc(var(--u) * 15) no-repeat;
}

.s-portada .pie{color:var(--gris-claro);width:calc(var(--u) * 512);
  top:calc(var(--u) * 520);bottom:auto}
.s-portada .flecha{right:auto;left:var(--margen);bottom:calc(var(--u) * 58)}

/* --------------------------------------------------------------- cierre */
.s-cierre .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.s-cierre .banda{position:absolute;left:0;width:100%;z-index:1}
.s-cierre .banda.cuerpo{background:var(--negro);top:calc(var(--u) * 182);
  height:calc(var(--u) * 317)}
.s-cierre .banda.arriba{top:calc(var(--u) * 128);height:calc(var(--u) * 60)}
.s-cierre .banda.abajo{top:calc(var(--u) * 495);height:calc(var(--u) * 60)}
.s-cierre .num{color:var(--papel)}
.s-cierre .linea{top:calc(var(--u) * 566)}
.s-cierre .remate{
  position:absolute;z-index:2;margin:0;left:var(--margen);
  top:calc(var(--u) * 212);
  width:calc(var(--u) * 1000);
  font-family:var(--tit);font-weight:400;text-transform:uppercase;
  line-height:.95;letter-spacing:-.005em;
  font-size:calc(var(--u) * var(--tam, 64));
  color:var(--papel);
}
/* las dos frases del cierre van una debajo de la otra, no seguidas */
.s-cierre .remate span{display:block;width:max-content;max-width:100%}
.s-cierre .remate .ac{color:var(--lima);
  padding-bottom:calc(var(--u) * 20);
  background:url(arte/subrayado-papel.webp) left bottom / 100% calc(var(--u) * 14) no-repeat}
.s-cierre .linea{color:var(--papel);width:calc(var(--u) * 800)}
.s-cierre .flecha{right:auto;left:var(--margen);bottom:calc(var(--u) * 52)}

/* --------------------------------------------------------------- barra */
.barra{
  position:fixed;
  left:0;right:0;bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background:linear-gradient(to top, rgba(10,10,11,.94), rgba(10,10,11,0));
  z-index:20;
}
.idiomas,.pasos{display:flex;align-items:center;gap:6px}
.barra button{
  font-family:var(--mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--papel);
  background:transparent;
  border:1px solid rgba(246,241,229,.28);
  padding:7px 11px;
  cursor:pointer;
  border-radius:0;                       /* nada redondeado, como el resto */
  transition:background .15s, border-color .15s, color .15s;
}
.barra button:hover{border-color:var(--papel)}
.barra button:focus-visible{outline:2px solid var(--lima);outline-offset:2px}
.barra button[aria-pressed="true"]{background:var(--azul);border-color:var(--azul)}
.barra button[disabled]{opacity:.3;cursor:default}
.cuenta{
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;
  color:var(--gris-claro);min-width:70px;text-align:center;
}

.progreso{position:fixed;left:0;right:0;bottom:0;height:2px;background:rgba(246,241,229,.14);z-index:21}
.progreso span{display:block;height:100%;width:0;background:var(--rojo);transition:width .22s ease}

.sin-js{position:fixed;inset:0;display:grid;place-content:center;padding:24px;text-align:center}


/* ------------------------------------------------------------- telefono */
/* En vertical la caja de 16:9 deja la letra ilegible: 1280 px de diseno
 * metidos en 375 de pantalla. Aca el deck deja de ser una caja fija y pasa a
 * ser una lectura: cada diapositiva ocupa la pantalla completa, el texto va a
 * tamano real y las listas se apilan en vez de ir en dos columnas.
 *
 * Todo lo de escritorio que posiciona en absoluto se anula: si queda algo
 * absoluto adentro, la diapositiva no tiene alto propio y se corta. */
@media (max-width:820px) and (orientation:portrait){
  body{overflow:auto}

  .escena{
    --u:1px;
    --margen:20px;
    width:100%;
    height:auto;
    margin:0;
    overflow:visible;
  }

  .dia{
    position:relative;
    inset:auto;
    visibility:visible;
    display:none;
    min-height:100svh;
    padding-bottom:86px;                 /* la barra de abajo es fija */
  }
  .dia.activa{display:block}

  /* el cuerpo vuelve al flujo, y con el las recetas pierden sus insets */
  .cuerpo,
  .s-foto .cuerpo,
  .s-pasos .cuerpo,
  .s-azul .cuerpo,
  .s-azul .cuerpo.derecha{
    position:relative;
    z-index:2;
    inset:auto;
    display:block;
    padding:26px var(--margen) 0;
  }
  .s-azul .cuerpo.derecha{padding-top:14px}

  .s-portada > header,
  .s-cierre > header{position:relative;top:auto;left:auto;padding:26px var(--margen) 0}
  .s-portada > .pie,
  .s-cierre > .pie{position:relative;left:auto;top:auto;padding:0 var(--margen)}

  .titulo,
  .s-foto .titulo,
  .s-azul .titulo,
  .s-cierre .remate{
    max-width:none;
    width:auto;
    font-size:clamp(30px, 8.6vw, 42px);
    line-height:.95;
    margin:20px 0 0;
  }

  .lista{margin-top:20px;display:block}
  .lista .fila,
  .lista.pasos .fila{
    grid-template-columns:1fr;
    gap:4px;
    padding:12px 0 4px;
    margin-bottom:10px;
  }
  .lista dt{font-size:16px}
  .lista dd{font-size:14.5px}
  .lista.pasos .fila{padding-left:44px;position:relative}
  .lista .paso{position:absolute;left:0;top:12px;font-size:26px}

  .pie{font-size:13px;margin-top:20px;padding-bottom:18px;max-width:none}
  .flecha{display:none}

  /* las fotos pasan a ser una franja arriba en vez de una columna lateral */
  .s-foto .foto,
  .s-pasos .foto,
  .s-portada .foto{
    position:relative;
    top:auto;right:auto;
    width:100%;
    height:32vh;
    min-height:190px;
    /* recortada al centro la franja cae en el cielo y queda un bloque casi
       blanco; un poco mas abajo agarra la parte con contraste */
    object-position:50% 62%;
  }
  .corte{display:none}
  /* las tramas y brochazos estan medidos contra la caja de 1280: en 375 tapan
     el texto */
  .deco{display:none}
  .s-azul .panel{position:absolute;inset:0;width:100%;height:100%}

  /* sobre el panel azul el texto va en claro */
  .s-azul .lista dt{color:var(--papel)}
  .s-azul .lista dd{color:rgba(246,241,229,.74)}
  .s-azul .lista .fila{border-top-color:rgba(246,241,229,.3)}
  .s-azul .pie{color:rgba(246,241,229,.74)}

  .s-portada .marca{
    position:relative;
    left:auto;top:auto;
    padding:0 var(--margen);
    font-size:clamp(64px, 21vw, 108px);
    margin:10px 0 0;
  }
  .linea{position:relative;left:auto;top:auto;width:auto;padding:0 var(--margen);
    margin-top:18px;font-size:12.5px}
  .s-portada .pie{margin-top:22px}

  .s-cierre{background:var(--negro)}
  .s-cierre .foto{position:absolute;inset:0;height:100%;opacity:.45}
  .s-cierre .banda{display:none}
  .s-cierre .remate{position:relative;left:auto;top:auto;z-index:2;
    padding:0 var(--margen)}
  /* la regla de escritorio la baja 566 px; en flujo eso la manda abajo de
     la barra fija */
  .s-cierre .linea{top:auto;margin-top:26px;margin-bottom:26px}

  /* el trazo a mano se calcula sobre la caja fija de escritorio */
  .adorno{display:none}
}

/* En horizontal en el telefono vale la caja de 16:9: entra entera. */
@media (max-height:520px) and (orientation:landscape){
  .barra{padding-top:6px;padding-bottom:6px}
  .barra button{padding:5px 8px;font-size:11px}
}