html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

a { background-color: transparent; }

a:active, a:hover { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: 0.67em 0; }

mark { background: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 1em 40px; }

hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

pre { overflow: auto; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

textarea { overflow: auto; }

optgroup { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

html { color: #222; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

fieldset { border: 0; margin: 0; padding: 0; }

textarea { resize: vertical; }

.hidden { display: none !important; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/*
@include keyframes(fade-in) { 0%   { opacity: 0; } 100% { opacity: 1; }
}
*/
/* El woff2 va primero: pesa la mitad que el otf y es el que se descarga en
   cualquier navegador de este siglo. El resto se queda de reserva.
   `font-display: block` es lo que quita el salto al entrar en una seccion: sin
   el, el navegador pinta con una tipografia de sistema y cambia a esta cuando
   llega, y ese cambio recoloca todo el texto a media animacion de entrada.
   Con `block` la letra no se ve hasta que la tiene, y ya no se recoloca nada. */
@font-face { font-family: 'Tilda Petite'; src: url("Tilda-Petite.woff2") format("woff2"), url("Tilda-Petite.eot?#iefix") format("embedded-opentype"), url("Tilda-Petite.otf") format("opentype"), url("Tilda-Petite.woff") format("woff"), url("Tilda-Petite.ttf") format("truetype"), url("Tilda-Petite.svg#Tilda-Petite") format("svg"); font-weight: normal; font-style: normal; font-display: block; }
/*
*, *:before, *:after {
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}
*/
*::selection { background: rgba(187, 147, 105, 0.11); }

html { -ms-overflow-x: hidden; height: 100%; margin: 0; }

body { margin: 0; font-family: "Tilda Petite"; font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 34px; color: #ffa901; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); width: 100%; height: 100%; min-width: 320px; background-color: #fff; overflow-x: hidden; -webkit-print-color-adjust: exact; -moz-hyphens: none; -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; line-height: 1.2; }
@media screen and (max-width: 523px) { body { font-size: 30px; line-height: 1.2; } }
@media screen and (min-width: 524px) and (max-width: 768px) { body { font-size: 33px; line-height: 1.2; } }

a { text-decoration: none; color: inherit; }

h1 { font-family: "Tilda Petite"; font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 300px; line-height: 100%; margin: 16px auto; }

h2 { font-family: "Tilda Petite"; font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 120px; line-height: 100%; margin: 16px auto; }

p { color: #b06f33; padding: 0; margin: 0 0 1.5em 0; text-align: justify; -moz-text-align-last: center; text-align-last: center; padding: 0 8px; }
/* En pantalla estrecha el justificado abre calles enormes entre palabras: con
   lineas cortas y una inglesa queda peor que desalineado. Y el aire lateral
   se recorta, que en 375 px sobraban 64. */
@media screen and (max-width: 768px) {
  p { text-align: center; text-align-last: center; padding: 0; }
}
/* Contra las viudas. `pretty` rehace los cortes del parrafo para no dejar una
   palabra sola en la ultima linea; `balance` iguala el largo de las lineas y
   va bien en frases de dos o tres. Donde no se entienda, se ignora. */
p, .cierre { text-wrap: pretty; }
main .subtitle, main h1, main h2, .gallery-image-info__wrapper h3,
.gallery-image-info__wrapper .body-text { text-wrap: pretty; }

html.no-textalignlast p { text-align: center; }
p:last-child { margin: 0; }

ul { list-style-type: none; margin: 0; padding: 0; }

img.scale { width: 100%; height: auto; }

input, button { font-family: "Tilda Petite"; font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; margin: 16px auto; outline: none; background-color: #d8a57a; border: none; border-radius: 20px; height: 40px; min-width: 120px; color: #fff; line-height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

input { background-color: transparent; border: 2px solid; border-color: #d8a57a; color: #d8a57a; text-align: center; transition: border-color 150ms linear; }
input:focus { border-color: #ffa901; color: #ffa901; }
input.error { border-color: #7ccbfd; color: #7ccbfd; }

button { transition: background-color 150ms linear; }
html.desktop button:hover { background-color: #ffa901; }

blockquote { margin: 0; }

.cf:after { content: ""; display: table; clear: both; }

::-webkit-input-placeholder { color: #d8a57a; line-height: 100%; }

:-moz-placeholder { /* Firefox 18- */ color: #d8a57a; line-height: 100%; }

::-moz-placeholder { /* Firefox 19+ */ color: #d8a57a; line-height: 100%; }

:-ms-input-placeholder { color: #d8a57a; line-height: 100%; }

main { position: relative; margin: auto; margin-bottom: 200px; display: block; width: auto; max-width: 750px; visibility: hidden; text-align: center; padding: 0 32px; overflow: hidden; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
/* Va aqui y no arriba a proposito: la regla general de `main` esta unas lineas
   mas abajo con la misma especificidad, asi que si esto fuera antes ganaria
   ella y los 32 px no bajarian nunca. El 4 % es el mismo aire que deja el
   panel azul, que es el que se lee bien en el telefono. */
@media screen and (max-width: 768px) { main { padding: 0 4%; } }
/* El aire lateral que se recorto era para el TEXTO. El titulo de Now llegaba
   casi de borde a borde y se le da el mismo margen que al de Your time, que va
   al 80 %. SOLO el de Now: la regla general descolocaba los de Books, The
   intention, The symbolism y The artwork. */
@media screen and (max-width: 768px) {
  main.now-page > .gradient-element.svg-gradient:first-child {
    max-width: 80%; margin-left: auto; margin-right: auto; }
}

main h1 { line-height: 75%; padding: 32px 16px; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
main h1:first-child { margin-top: 64px; }
main h2 { line-height: 75%; padding: 32px 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
main img { display: block; width: 65%; margin: auto; }

/* El destello cuadrado al tocar un boton en movil es el resaltado del
   sistema. Aqui estorba: los botones son circulos. */
html { -webkit-tap-highlight-color: rgba(0,0,0,0); }
button, a, .dot, .arrow { -webkit-tap-highlight-color: rgba(0,0,0,0); }

nav { display: block; position: fixed; bottom: 0; width: 100%; height: auto; background: #d8a57a; overflow: hidden; visibility: visible; opacity: 1; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* El margen tiene que ser al menos el alto de la barra cerrada (56). Con 37,5
   asomaban los primeros pixeles de "Gallery" por debajo del triangulo. */
nav ul { display: block; margin: 56px auto; text-align: center; }
/* El menu no tenia tamano propio: heredaba el del cuerpo y se quedaba
   pequeno, sobre todo en movil. Ahora tiene el suyo, y el triangulo
   crece en la misma proporcion. */
nav ul li { font-size: 42px; line-height: 1.3; }
@media screen and (max-width: 768px) { nav ul li { font-size: 36px; } }
@media screen and (max-width: 523px) { nav ul li { font-size: 33px; } }
nav ul li { color: #fff; }
nav .nacho-icon { display: block; position: absolute; width: 27px; height: 25px; left: calc(50% - 13.5px); }
/* Centrado en la barra cerrada: (56 - 25) / 2. Antes, con 37,5 px de barra y
   18 px de margen en movil, el triangulo se salia por abajo y se veia
   cortado. */
nav .nacho-icon.top { top: 15px; }
@media screen and (max-width: 768px) {
  nav ul { margin: 56px auto; }
}
nav .nacho-icon.list { position: relative; margin-top: 8px; }
/* Debajo del triangulo y separado, para que no se lea como una seccion mas. */
nav li.idioma { margin-top: 10px; }
nav li.idioma a:before, nav li.idioma a:after { display: none; }
nav a:before, nav a:after { content: ''; position: relative; width: 8px; height: 8px; display: inline-block; background-color: #fff; border-radius: 4px; overflow: hidden; margin-bottom: 2px; opacity: 0; transition: transform 500ms ease, opacity 500ms linear, background-color 500ms linear; }
nav a:before { transform: translateX(-24px); }
nav a:after { transform: translateX(24px); }
nav a:hover { text-decoration: none !important; }
nav a:hover:before { transform: translateX(-12px); opacity: 1; }
nav a:hover:after { transform: translateX(12px); opacity: 1; }
nav a.selected:before, nav a.selected:after { background-color: #ffa901; }
nav a.selected:before { transform: translateX(-12px); opacity: 1; }
nav a.selected:after { transform: translateX(12px); opacity: 1; }

.menu-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #7ccbfd; opacity: 0; visibility: hidden; }

body.gallery-page { overflow: hidden; position: fixed; left: 0; top: 0; display: block; width: 100%; }
body.gallery-page main { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 56px); max-width: none; margin: auto; padding: 0; }
body.gallery-page main .image-carousel { height: 100%; margin: 0; }
body.gallery-page main .image-carousel .carousel-wrapper { position: relative; display: block; width: 100%; height: 100%; }
body.gallery-page main .image-carousel .carousel-wrapper:after { content: ""; display: block; padding-bottom: 50%; }
/* Puntos de navegacion de la galeria.
   La obra ocupa todo el hueco hasta la barra del menu y los puntos van
   encima de ella, en el azul del sitio. Son 31 obras, asi que no se ensena
   la fila entera: se ve una ventana de doce con el actual en el medio, y
   los dos de cada extremo encogidos, que es lo que dice "hay mas por ahi".
   El resto se pliegan a cero. Mismo tamano en escritorio, tableta y movil. */
body.gallery-page main .image-carousel { height: 100%; }
body.gallery-page main .image-carousel .dots { display: block; position: absolute;
  bottom: 58px; left: 0; width: 100%; z-index: 5; text-align: center;
  line-height: 0; white-space: nowrap; pointer-events: none;
  /* El retraso de `visibility` va SOLO en la regla que los esconde, no aqui.
     Estando aqui se aplicaba tambien a la vuelta: al cerrar el texto la
     opacidad subia de 0 a 1 durante 300 ms con el elemento todavia
     `hidden` —o sea, sin verse—, y a los 300 ms aparecia de golpe ya opaco.
     Se iban suaves y volvian de golpe. Medido antes y despues en un banco
     aparte: antes la fila era 0,0,0,0,1; ahora es 0, 0,28, 0,5, 0,78, 1. */
  transition: opacity 300ms linear, visibility 0s linear 0s; }
/* La primera vez la fila se pinta con las transiciones apagadas, para que
   los que sobran no se plieguen a cero animandose: lo unico que se ve es el
   fundido de toda la fila. */
body.gallery-page main .image-carousel .dots.naciendo { opacity: 0; }
/* El fundido de estreno es mas largo que el del menu: no es lo mismo aparecer
   por primera vez que esconderse. */
body.gallery-page main .image-carousel .dots.estrenando { transition: opacity 750ms linear; }
body.gallery-page main .image-carousel .dots.sin-animar,
body.gallery-page main .image-carousel .dots.sin-animar .dot,
body.gallery-page main .image-carousel .dots.sin-animar .dot .inner-circle {
  transition: none; }

/* Con el menu desplegado, los puntos se van con todo lo demas. */
body.gallery-page main .image-carousel.menu-abierto .dots,
body.gallery-page main .image-carousel.menu-abierto .arrow,
body.gallery-page main .image-carousel.texto-abierto .dots,
body.gallery-page main .image-carousel.texto-abierto .arrow { opacity: 0;
  visibility: hidden; pointer-events: none; }
/* Aqui si: al esconderse, `visibility` tiene que esperar a que termine el
   fundido, o lo corta a la mitad. Cada uno con su duracion. */
body.gallery-page main .image-carousel.menu-abierto .dots,
body.gallery-page main .image-carousel.texto-abierto .dots {
  transition: opacity 300ms linear, visibility 0s linear 300ms; }
body.gallery-page main .image-carousel.menu-abierto .arrow,
body.gallery-page main .image-carousel.texto-abierto .arrow {
  transition: opacity 250ms linear, visibility 0s linear 250ms; }
/* Con el texto abierto las flechas no solo se esconden: se apagan. Antes se
   podian pulsar a traves del panel y pasabas de obra mientras leias el texto
   de la anterior, con lo que el texto dejaba de corresponder a la imagen. */
/* Las flechas tenian el mismo problema que los puntos pero en el otro
   sentido: sin `visibility` en la transicion, se apagaban de golpe en las dos
   direcciones. Van con los puntos porque comparten regla y verlas saltar al
   lado de unos puntos que se funden canta mas que arreglarlas. */
body.gallery-page main .image-carousel .arrow {
  transition: opacity 250ms linear, visibility 0s linear 0s; }

body.gallery-page main .image-carousel .dots .dot { position: relative;
  display: inline-block; cursor: pointer; vertical-align: middle;
  pointer-events: auto;
  width: 10px; height: 10px; margin: 0 6px; border: 2px solid #7ccafc;
  border-radius: 50%; background-color: transparent; opacity: 1;
  transition: width 420ms ease, height 420ms ease, margin 420ms ease,
              border-width 420ms ease, opacity 420ms linear; }
body.gallery-page main .image-carousel .dots .dot .inner-circle { position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; display: block; background-color: transparent;
  border-radius: 50%; transition: background-color 150ms linear; }
body.gallery-page main .image-carousel .dots .dot.selected .inner-circle { background-color: #7ccafc; }

body.gallery-page main .image-carousel .dots .dot.medio { width: 7px; height: 7px;
  margin: 0 5px; border-width: 1.5px; opacity: .7; }
body.gallery-page main .image-carousel .dots .dot.pequeno { width: 5px; height: 5px;
  margin: 0 4px; border-width: 1px; opacity: .45; }
body.gallery-page main .image-carousel .dots .dot.fuera { width: 0; height: 0;
  margin: 0; border-width: 0; opacity: 0; cursor: default; pointer-events: none; }
/* Lo que se ve mide diez pixeles; lo que se pulsa, cuarenta y cuatro. Entre
   punto y punto habia hueco de verdad y por ahi el clic se colaba a la obra:
   apuntabas a un punto y se abria el texto. */
body.gallery-page main .image-carousel .dots .dot:before { content: '';
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  transform: translate(-50%, -50%); }
body.gallery-page main .image-carousel .dots .dot.fuera:before { display: none; }

@media screen and (max-width: 768px) {
  body.gallery-page main .image-carousel .dots { bottom: 42px; }
  /* Con seis puntos y 22 px de paso, las zonas de toque —44— se solapaban de
     dos en dos: por eso costaba acertar aunque el area fuera grande. A 34 de
     paso ya casi no se pisan, y seis siguen cabiendo de sobra. */
  body.gallery-page main .image-carousel .dots .dot { margin: 0 12px; }
  body.gallery-page main .image-carousel .dots .dot.medio { margin: 0 11px; }
  body.gallery-page main .image-carousel .dots .dot.pequeno { margin: 0 10px; }
  body.gallery-page main .image-carousel .dots .dot.fuera { margin: 0; }
}

main.book-page input { max-width: 300px; width: 100%; min-width: initial; }
main.book-page img { width: 65%; }
main.book-page button.disabled { pointer-events: none; }
main.book-page .title { margin-bottom: 0; }
/* Las dos primeras frases iban pegadas al texto largo. */
/* El aire entre el titulo y el texto. Aqui habia un `margin: 0` justo despues
   que se lo comia: misma especificidad y va detras, asi que ganaba el. */
main.book-page .subtitle { margin: 0 0 56px; }
@media screen and (max-width: 768px) { main.book-page .subtitle { margin: 0 0 44px; } }
main.book-page .simple-image-carousel > .dots { display: none; }
main.book-page .small-dot__1 { margin-top: 60px; }
main.book-page .small-dot__2 { margin-top: 60px; }
main.book-page .small-dot__3 { margin-top: 60px; }
main.book-page .small-dot__4 { margin-top: 60px; }
main.book-page button.download-book { margin-top: 32px; width: 280px; height: 50px;
  border-radius: 25px; padding: 0 24px; }
/* ---- Las portadas de los libros --------------------------------------
   Antes cada libro se ensenaba abierto dentro de un marco tipo tableta
   (`children-book-ipad`, las `ChildrenBookIpad_*.webp`). Fuera: ahora se ve
   la portada de verdad, que es lo que la gente reconoce.
   Los archivos viejos siguen en el servidor sin que nadie los use; no se han
   borrado. */
main.book-page img.portada-libro,
main.book-page .portada-libro { width: 100%; display: block; }
/* Una linea en blanco de mas entre la ultima frase y el primer libro. */
main.book-page .gradient-element + img.portada-libro,
main.book-page .gradient-element + .portada-libro { margin-top: 44px; }

/* El cuadrado ensena sus dos caras, portada y contraportada, alternandose
   cada 3 segundos. Se hace con dos imagenes apiladas y una animacion, sin
   JavaScript: `SimpleImageCarousel` —lo que mueve el carrusel del libro
   impreso de mas abajo— no tiene paso automatico, asi que habria que
   escribirlo; para dos imagenes que solo se turnan, no compensa.
   La de delante manda en la altura y va en el flujo; la de detras se apila
   encima en absoluto y se funde. El ciclo es de 6 s: 3 s cada cara, con
   medio segundo de fundido en cada relevo —nada aparece de golpe—. */
main.book-page .portada-dos-caras { position: relative; }
main.book-page .portada-dos-caras img { display: block; width: 100%; }
main.book-page .portada-dos-caras .cara-b { position: absolute; top: 0; left: 0;
  opacity: 0; animation: cambia-de-cara 6s linear infinite; }
@keyframes cambia-de-cara {
  0%, 41.67% { opacity: 0; }
  50%, 91.67% { opacity: 1; }
  100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  main.book-page .portada-dos-caras .cara-b { display: none; } }
main.book-page img.devices { width: 220px; }
@media screen and (max-width: 523px) { main.book-page img.devices { width: 200px; } }
main.book-page .keep-you-posted { margin: 16px 16px; }
@media screen and (max-width: 523px) { main.book-page .keep-you-posted { margin: 16px 0; } }
main.book-page .printed-book-title { margin: 16px 6px; }
@media screen and (max-width: 523px) { main.book-page .printed-book-title { margin: 16px 0; } }

/* El cierre de cada sección quedaba pegado al borde inferior.
   Con esto el último elemento se queda a media pantalla.
   Y ojo: esta regla pone el `margin-bottom` de `main` a cero en estas tres
   paginas, asi que el blanco del final NO sale de ahi sino de este
   `padding-bottom`. En un telefono 45vh son casi cuatrocientos pixeles de
   nada, un scroll entero: alli va la mitad. */
main.now-page, main.book-page, main.about-page {
  margin-bottom: 0; padding-bottom: 45vh; }
@media screen and (max-width: 768px) {
  main.now-page, main.book-page, main.about-page { padding-bottom: 22vh; }
}
main.now-page div.svg-gradient { margin-bottom: 32px; }
/* Solo el muneco, que cuelga directo de `main`. Sin el `>` esto alcanzaba
   tambien al `img.preload` de dentro del titulo, y su margen de 64 se
   fundia con el del bloque: por eso el titulo de Now empezaba 32 px mas
   abajo que el de las demas secciones. */
main.now-page > img { margin-top: 64px; width: 45%; }
@media screen and (max-width: 768px) { main.now-page img { width: 72%; } }

main.about-page button { margin-top: 32px; width: 250px; }
main.about-page div.svg-gradient { margin-bottom: 32px; }
main.about-page div.svg-gradient.symbolism { margin-bottom: 16px; }
/* El margen va con los cuatro valores a proposito. Estos puntos se centran
   con `left: 50%` mas `margin-left: -5px` —medio punto hacia atras—, y un
   `margin` de dos valores pone el izquierdo a cero y se lleva los -5 por
   delante: el punto se queda 5 px a la derecha del centro, y ahi ya no cae
   encima de la columna de gotas. */
main.about-page .small-dot { margin: 60px 0 60px -5px; }
/* Estos dos puntos separan los creditos del dibujo y el dibujo del
   copyright. Con 16 px no separaban nada: quedaban pegados a las dos cosas.
   El resto de esa pagina respira a esta escala. */
main.about-page .small-dot__4 { margin: 40px 0 40px -5px; }
@media screen and (max-width: 768px) {
  main.about-page .small-dot__4 { margin: 32px 0 32px -5px; }
}
main.about-page .simple-image-carousel { margin-top: 64px; }
main.about-page .credits img { width: 50% !important; }

#intro { overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
#intro h1 { text-align: center; line-height: 75%; padding: 32px 16px; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; }
#intro p { text-align: center; }
#intro .wrapper { position: relative; max-width: 750px; padding: 0 32px; margin: auto; box-sizing: content-box; }
#intro .cover { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #d8a57a; }
#intro .gradient-element { position: relative; display: block; margin: 1px auto; }
/* ---- La arena de la entrada ------------------------------------------
   Aqui hubo un muñeco detras del titulo. Fuera: con el titulo delante y el
   dibujo detras habia dos cosas a la vez y no sabias a cual mirar.
   Lo que cae ahora es la arena de colores que ya usa el resto del sitio
   —`.color-drip` / `.color-drop`, el mismo modulo que se enciende al abrir
   el menu—, sin tocarle el movimiento. La entrada solo la enciende y la
   apaga; el como cae no se toca.
   `.color-drip` esta en el `body`, ANTES de `#intro` en el HTML, asi que la
   arena queda por debajo de la entrada. Se ve igual porque `#intro` no tiene
   fondo, y desaparece bajo la tapa marron —`.cover`— que si lo tiene: es
   exactamente lo que se pedia, que se meta debajo del marron de abajo. */
/* Antes esto era un SVG de 420x350 con las seis lineas trazadas dentro, y por
   eso solo podia aparecer entero. Ahora es texto, y cada linea entra sola.
   El tamano sale de medir el SVG: la linea larga ocupaba los 420 px de ancho
   y las lineas iban cada 60,3 px. Con Tilda Petite eso son 50 px de cuerpo y
   1,206 de interlineado. Y crece y encoge igual que crecia la imagen: en
   proporcion al ancho que le deje el envoltorio. */
#intro .blue-copy { width: 100%; max-width: 420px; display: block; position: relative;
  visibility: hidden; opacity: 0; margin: auto;
  color: #ffa901; text-align: center;
  font-size: min(50px, calc((min(750px, 100vw) - 64px) * 0.11905));
  line-height: 1.206; }
/* Sin partir: la linea larga ocupaba justo los 420 px del SVG, y con las
   cornisas del tipo se pasa por tres pixeles de cada lado. Partirla seria
   peor que asomar. */
#intro .blue-copy .linea { display: block; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  #intro .blue-copy .linea { opacity: 1 !important; transform: none !important; }
}

.gradient-element { background-color: white; color: #ffa901; display: block; }
/* El degradado se recorta con la forma de las letras, pero solo pinta dentro
   de la caja del bloque. Esta inglesa saca rabos y trazos fuera de ella —la
   `i` de "illustrations", por ejemplo— y todo lo que asoma se queda sin fondo,
   o sea, invisible. Se le da aire a la caja y se compensa con margen negativo,
   asi el fondo cubre tambien los rabos y nada se mueve de sitio. */
.gradient-element:not(.svg-gradient) { padding: 0.14em 0.34em; margin: -0.14em -0.34em; }
/* El recorte de la letra lo hace una mascara SVG. Hasta que esa mascara no
   esta descargada no hay recorte, y lo que se ve es el rectangulo entero: en
   la entrada, un bloque amarillo. Nace invisible y lo enciende el JS cuando
   la mascara ya esta. */
.gradient-element.svg-gradient:not(.mascara-lista) { visibility: hidden; }
html.no-gradients .gradient-element.svg-gradient { visibility: visible; }
/* Cinturon y tirantes: si por lo que sea nadie pusiera la clase, a los cuatro
   segundos se ven igual. Mas vale un parpadeo que un hueco en blanco. */
html.mascaras-fuera .gradient-element.svg-gradient { visibility: visible; }

.svg-gradient { margin: 64px 6px; }
@media screen and (max-width: 523px) { .svg-gradient { margin: 64px 0px; } }

html.gradients .svg-gradient { mask-repeat: no-repeat; mask-size: contain; mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; -webkit-mask-position: center; }
html.gradients .svg-gradient img { width: 100%; opacity: 0; }

html.no-gradients .svg-gradient { mask-repeat: initial !important; mask-size: initial !important; mask-position: initial !important; -webkit-mask-repeat: initial !important; -webkit-mask-size: initial !important; -webkit-mask-position: initial !important; -webkit-mask-image: none !important; }
html.no-gradients .svg-gradient img { width: 100%; }

.quick-fit { display: inline-block; overflow: hidden; box-sizing: border-box; }

.image-carousel { position: relative; background-color: #fff; width: 100%; margin-bottom: 64px; }
.image-carousel .carousel-wrapper { position: relative; display: block; width: 100%; overflow: hidden; }
.image-carousel .carousel-wrapper:after { content: ""; display: block; padding-bottom: 50%; }
.image-carousel .image-wrapper { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.image-carousel .image-container { background-color: #fff; position: absolute; display: block; width: 100%; height: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.image-carousel .image-container.cursor { cursor: pointer; }
.image-carousel .image-container a { display: none; }
.image-carousel .image-container.cover { background-size: cover; }
.image-carousel .image-container.right { background-position: right center; }
.image-carousel .image-container.right.bottom { background-position: right bottom; }
.image-carousel .image-container.right.top { background-position: right top; }
.image-carousel .image-container.left { background-position: left center; }
.image-carousel .image-container.left.bottom { background-position: left bottom; }
.image-carousel .image-container.left.top { background-position: left top; }
/* Las flechas ya no van a media altura sobre la obra —ahi tapaban parte de la
   imagen y en movil eran diminutas—: bajan a la fila de los puntos, una a cada
   lado. La obra se queda limpia y ellas ganan sitio. */
/* Las flechas van a los lados, en la fila de los puntos. Ancladas al borde con
   el mismo numero las dos: asi la simetria no depende de ninguna cuenta.
   Y se encoge la flecha entera, no el canvas de dentro: el canvas mide 91 px
   y la caja menos, asi que al escalarlo se escalaba respecto a su centro y el
   dibujo se iba once pixeles a la derecha en las dos, con lo que la izquierda
   parecia mas metida y la derecha mas pegada al borde. */
/* De tableta para arriba se quedan donde siempre: a media altura, a los lados
   de la obra. Bajarlas a la fila de los puntos era para el telefono, donde
   eran diminutas y estorbaban. */
.image-carousel .arrow { position: fixed; display: block; width: 91px; height: 92px;
  cursor: pointer; top: calc(50% - 64px); z-index: 6; transform-origin: 50% 50%; }
.image-carousel .arrow.left { left: 32px; right: auto; background-size: contain; }
.image-carousel .arrow.right { right: 32px; left: auto; background-size: contain; }
/* Antes desaparecia de golpe con display:none. */
.image-carousel .arrow { opacity: 1; transition: opacity 450ms linear; }
.image-carousel .arrow.disabled { opacity: 0; pointer-events: none; }
.image-carousel .arrow canvas { cursor: pointer; }
@media screen and (max-width: 768px) {
  /* En el telefono bajan a la fila de los puntos. Se escala la flecha entera
     y no el canvas de dentro: el canvas mide 91 y la caja menos, asi que al
     escalarlo se iba once pixeles a la derecha en las dos y la izquierda
     parecia mas metida que la derecha. */
  .image-carousel .arrow { position: absolute; width: 91px; height: 92px;
    top: auto; bottom: 3px; transform: scale(0.62); }
  .image-carousel .arrow.left { left: -8px; right: auto; }
  .image-carousel .arrow.right { right: -8px; left: auto; }
}
/* `pointer-events: none`: la tapa no atrapa el dedo. Cuando una descarga
   fallaba, la tapa se quedaba puesta para siempre y, como cubre el 100 % por
   encima de `.image-wrapper` —que es donde escucha Hammer—, el swipe dejaba de
   funcionar y la galeria se quedaba muerta. Ahora, aunque algo la deje puesta,
   el dedo sigue llegando. Es el cinturon; el tirante es `handleFileError`. */
.image-carousel .cover-overlay { position: absolute; background-color: #fff; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.image-carousel .loading-animation { position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; }

.simple-image-carousel { position: relative; background-color: #fff; width: 100%; margin-bottom: 110px; }
.simple-image-carousel .carousel-wrapper { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.simple-image-carousel .carousel-wrapper:after { content: ""; display: block; padding-bottom: 50%; }
.simple-image-carousel .image-wrapper { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.simple-image-carousel .image-container { background-color: #fff; position: absolute; display: block; width: 100%; height: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; }
.simple-image-carousel .image-container a { display: none; }
.simple-image-carousel .image-container.cover { background-size: cover; }
.simple-image-carousel .image-container.right { background-position: right center; }
.simple-image-carousel .image-container.right.bottom { background-position: right bottom; }
.simple-image-carousel .image-container.right.top { background-position: right top; }
.simple-image-carousel .image-container.left { background-position: left center; }
.simple-image-carousel .image-container.left.bottom { background-position: left bottom; }
.simple-image-carousel .image-container.left.top { background-position: left top; }
.simple-image-carousel .arrow { position: absolute; display: block; width: 50px; height: 50px; cursor: pointer; top: calc(50% - 25px); }
.simple-image-carousel .arrow.left { left: 26px; background: transparent url("../img/arrow_left.png") no-repeat; background-size: contain; }
.simple-image-carousel .arrow.right { right: 2px; background: transparent url("../img/arrow_right.png") no-repeat; background-size: contain; }
.simple-image-carousel .arrow.disabled { display: none; }
.simple-image-carousel .arrow canvas { cursor: pointer; }
@media screen and (max-width: 768px) {
  .simple-image-carousel .arrow { width: 25px; height: 25px; top: calc(50% - 12.5px); }
  .simple-image-carousel .arrow.left { left: 8px; }
  .simple-image-carousel .arrow.right { right: 8px; }
}
/* Misma navegacion que la galeria —ventana de doce, los de los extremos
   encogidos— pero en el arena de esta seccion, no en el azul. */
.simple-image-carousel .dots { position: absolute; bottom: -52px; margin: 0; text-align: center;
  vertical-align: middle; height: 28px; width: auto; left: 50%; transform: translateX(-50%);
  white-space: nowrap; line-height: 0;
  /* Los puntos van uno por linea en el HTML, y esos saltos son espacios que
     ensanchaban la fila casi el doble. A cero, desaparecen. */
  font-size: 0; }
.simple-image-carousel .dots .dot { position: relative; display: inline-block; cursor: pointer;
  vertical-align: middle; overflow: hidden;
  width: 10px; height: 10px; margin: 0 6px; border: 2px solid #7ccafc;
  border-radius: 50%; background-color: transparent; opacity: 1;
  transition: width 420ms ease, height 420ms ease, margin 420ms ease,
              border-width 420ms ease, opacity 420ms linear; }
.simple-image-carousel .dots .dot .inner-circle { position: absolute; display: block;
  top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto;
  background-color: transparent; border-radius: 50%; transition: background-color 150ms linear; }
.simple-image-carousel .dots .dot.selected .inner-circle { background-color: #7ccafc; }
.simple-image-carousel .dots .dot.medio { width: 7px; height: 7px; margin: 0 5px; border-width: 1.5px; opacity: .7; }
.simple-image-carousel .dots .dot.pequeno { width: 5px; height: 5px; margin: 0 4px; border-width: 1px; opacity: .45; }
.simple-image-carousel .dots .dot.fuera { width: 0; height: 0; margin: 0; border-width: 0; opacity: 0;
  cursor: default; pointer-events: none; }
.simple-image-carousel .cover-overlay { position: absolute; background-color: #fff; top: 0; left: 0; width: 100%; height: 100%; }
.simple-image-carousel .loading-animation { position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; }

.color-drip { position: fixed; top: 0; left: 50%; pointer-events: none; width: 10px; height: 100%; }
.color-drip .gradient-strip { display: none; }

.color-drop { position: absolute; display: block; width: 10px; height: 10px; background-color: #f00; border-radius: 5px; overflow: hidden; margin-left: -5px; }

.hourglass-animation { background-color: #fff; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

.gallery-image-info { position: fixed; background-color: rgba(74, 160, 220, 0.95); top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; }

/* El cuerpo crece con la ventana pero mira tambien el alto: los textos largos
   tienen catorce lineas y en una pantalla baja se saldrian del panel. El ancho
   sube a 960 px porque a 40 px la cita larga ya no cabe en 750. */
/* 40 px y el ancho a 960: a 34 px la letra se quedaba pequena para lo vacio
   que esta el panel, y a 40 la cita larga ya no cabia en 750. Los textos mas
   largos son de catorce lineas y en una ventana baja no caben ni a 34; de eso
   se encarga el JS, que mide el bloque al abrirlo y solo encoge el que no
   quepa, en vez de encogerlos todos por si acaso. */
/* El panel centra su texto con `margin:auto` dentro de un flex, no con un
   translate: asi, cuando el texto no cabe, no se corta por arriba —se puede
   arrastrar con el dedo—. Los textos largos son de catorce lineas y en un
   telefono no caben ni encogiendo. */
/* border-box a proposito: sin el, el relleno se suma al 100 % de alto y el
   panel sale mas largo que la pantalla —con lo que el texto se centra en un
   sitio que no se ve entero y queda caido hacia abajo—. */
.gallery-image-info { display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch;
  box-sizing: border-box; padding: 24px 0 80px; }
.gallery-image-info::-webkit-scrollbar { width: 0; height: 0; }
.gallery-image-info__wrapper { position: relative; transform: none; top: auto;
  margin: auto; color: #fff;
  max-width: min(960px, 92vw); width: 100%;
  font-size: 40px; line-height: 1.2; }
.gallery-image-info__wrapper h3 { font-size: 64px; line-height: 100%; font-weight: normal; margin: 0; }
.gallery-image-info__wrapper .body-text .big { display: block; font-size: 64px; line-height: 100%; font-weight: normal; margin: 0; margin-top: 24px; }
/* En el telefono el panel tapa tambien la barra del menu: esos 56 px son
   sitio de leer. Y al ocupar la pantalla entera, el texto se centra en el
   panel y no en "la pantalla menos la barra", que es lo que lo dejaba caido
   hacia abajo. */
@media screen and (max-width: 768px) {
  .gallery-image-info { z-index: 30; padding: 24px 0; }
}
@media screen and (max-width: 768px) { .gallery-image-info__wrapper { font-size: 32px; line-height: 1.2; }
  .gallery-image-info__wrapper h3 { font-size: 52px; margin-bottom: 8px; }
  .gallery-image-info__wrapper .body-text .big { margin-top: 16px; font-size: 44px; }
  .gallery-image-info__wrapper .small-dot.white { margin-top: 16px; margin-bottom: 16px; } }

.gallery-image-info__close { width: 50px; height: 50px; background-image: url('data:image/svg+xml;charset=UTF-8, <svg class="back-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.22 104.22"><defs><style>.cls-1 {fill: none;stroke: #fff;stroke-linecap: round;stroke-linejoin: round;stroke-width: 5px;}</style></defs><title>Close</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="2.5" y1="2.5" x2="101.72" y2="101.72"></line><line class="cls-1" x1="101.72" y1="2.5" x2="2.5" y2="101.72"></line></g></g></svg>'); background-size: contain; margin: auto; cursor: pointer; }
@media screen and (max-width: 768px) { .gallery-image-info__close { width: 25px; height: 25px; } }

/* Del mismo tamano que las gotas que caen: diez. Antes eran cuatro y no
   parecian lo mismo. */
div.small-dot { position: relative; display: block; background-color: #ffa901; width: 10px; height: 10px; border-radius: 5px; overflow: hidden; left: 50%; margin: 16px; margin-left: -5px; }
/* Se sigue llamando `.white` porque asi esta escrito en las treinta obras,
   pero ya no es blanco: es el arena del sitio, el mismo del boton de cerrar.
   Y del tamano del punto que separa los bloques en Your time —9 px—, que a
   4 px casi no se veia. */
div.small-dot.white { background-color: #d8a57a; width: 10px; height: 10px;
  border-radius: 5px; margin-left: -5px; margin-top: 32px; margin-bottom: 32px; }
html.tablet div.small-dot.white, html.mobile div.small-dot.white { margin-top: 16px; margin-bottom: 16px; }

/* ---- El "next" de la portada ----------------------------------------
   Solo lo lleva la primera diapositiva. Es la misma pastilla blanca que el
   boton de *Your time*: mismo radio, mismo alto, mismo hover al reves. Lo que
   cambia es el color de la letra, que aqui es el azul del panel.            */
/* Sin `margin-top`: entre el texto y el boton va ahora un punto marron, y
   ese punto ya trae su propio aire (16 px arriba y abajo). */
.siguiente-obra { display: block; margin-top: 0; }
/* `font-size: 1em` y no un numero: asi la letra del boton es exactamente la
   del texto de la obra, y sigue siendolo cuando `ajusta()` encoge el bloque
   entero para que quepa en una pantalla baja. Y por eso el alto va en `em`
   tambien, para que la pastilla crezca con la letra en vez de recortarla. */
.gallery-image-info .boton-siguiente { font-family: inherit; font-size: 1em;
  display: block; width: auto; min-width: 0; margin: 0 auto; border: 2px solid #fff;
  border-radius: .85em; background: #fff; color: #4aa0dc; height: 1.55em; padding: 0 .8em;
  cursor: pointer; -webkit-appearance: none; appearance: none; line-height: 1;
  transition: background-color 150ms linear, color 150ms linear; }
html.desktop .gallery-image-info .boton-siguiente:hover { background: transparent; color: #fff; }
@media screen and (max-width: 768px) { .siguiente-obra { margin-top: 0; } }

/* ---- Botón "aquí hay texto" de la galería ----------------------------
   Es el gallery-info-button.svg original de 2016: el círculo azul con las
   comillas recortadas. Abre y cierra el texto de la obra que estés viendo,
   y hace lo mismo que tocar la obra, así que también vale en móvil.      */
/* Por encima del panel azul, que en movil sube a 30. Es el boton que lo
   cierra: no puede quedar debajo de lo que cierra. */
/* `position: fixed` y no `absolute`: el boton se cuelga del `body`, igual que
   el panel azul. Estaba dentro de `main`, y en cuanto algo le pone un
   `transform` a `main` —la entrada de PageView se lo pone— `main` se vuelve un
   contexto de apilamiento y todo lo que lleva dentro se hunde por debajo del
   panel, que cuelga del body. Por eso el aspa aparecia a veces detras del azul
   aunque tuviera z-index 40 contra 30: los dos numeros no se estaban
   comparando entre si. Colgando los dos del body, si se comparan. */
.gallery-info-button { position: fixed; top: 16px; right: 16px; z-index: 40;
  display: block; width: 54px; height: 54px; min-width: 0; margin: 0; padding: 0;
  border: none; border-radius: 0; background-color: transparent;
  color: #7ccafc; cursor: pointer; -webkit-appearance: none; appearance: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: color 150ms linear, opacity 600ms linear, visibility 0s linear 600ms; }
.gallery-info-button.a-la-vista { opacity: 1; visibility: visible;
  pointer-events: auto; transition: color 150ms linear, opacity 600ms linear; }
.gallery-info-button svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* Con el texto abierto, las comillas pasan a ser un aspa de cerrar, en el
   marron claro de la barra del menu. Es el mismo boton: cierra lo que abrio. */
.gallery-info-button .aspa { display: none; }
.gallery-info-button.cerrar .comillas { display: none; }
.gallery-info-button.cerrar .aspa { display: block; }
.gallery-info-button.cerrar { color: #d8a57a; }
/* Al aparecer, el aspa entra girando un cuarto de vuelta. Gira el trazo dentro
   del SVG y no el SVG: como cursor, el propio SVG ya lleva su `transform` de
   escala, y una animacion sobre el mismo elemento se la comeria. */
.gallery-info-button.cerrar .aspa path { animation: gira-aspa 450ms cubic-bezier(.2, .8, .3, 1);
  transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes gira-aspa { from { transform: rotate(-90deg); } to { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .gallery-info-button.cerrar .aspa path { animation: none; } }
html.desktop .gallery-info-button.cerrar:hover { color: #b06f33; }
html.desktop .gallery-info-button:hover { background-color: transparent; color: #d8a57a; }

/* Dos parpadeos al llegar a cada obra, para que se vea que esta ahi y que se
   puede pulsar. No lleva retardo: lo pone el JS, que espera a que el boton haya
   acabado de fundirse antes de poner la clase. Si el retardo estuviera aqui, la
   animacion ya estaria corriendo durante el fundido y le pisaria la opacidad.
   Con las tres clases a proposito: la regla que lo enciende es
   `.gallery-info-button.a-la-vista.estreno`, y con dos no le ganaba. */
.gallery-info-button.a-la-vista.estreno   { animation: guino 1400ms ease-in-out 2; }
.gallery-info-button.a-la-vista.guino-uno { animation: guino 1400ms ease-in-out 1; }
@keyframes guino { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) {
  .gallery-info-button.estreno, .gallery-info-button.guino-uno { animation: none; } }

@media screen and (max-width: 768px) {
  .gallery-info-button { top: 20px; right: 20px; width: 46px; height: 46px; }
}

/* Texto de las obras: está en la página para Google y para los lectores de
   pantalla, pero no se ve. Antes iba con display:none y no lo leía nadie. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; }

/* ---- Lo que se veía antes de tiempo -----------------------------------
   El menú viene abierto en el HTML y lo cierra el JavaScript. Hasta que el
   JavaScript cargaba, el navegador lo pintaba entero, abierto y a pantalla
   completa. Aquí ya nace cerrado y sin ver; el JavaScript lo trae luego.  */
nav.start-open { height: 56px; visibility: hidden; opacity: 0; }

/* El titulo de la entrada queda fuera del degradado: amarillo liso.
   `IntroAnimation` ya no le monta un `GradientElement`, asi que no hay
   ningun `style` en el elemento que le gane a esto. */
/* La entrada deja de usar mascara. El titulo se ve tal cual, con el amarillo
   que ya trae dentro el propio SVG: si no hay nada que recortar, no hay
   rectangulo amarillo esperando al recorte. Se acabo el problema de raiz. */
#intro .gradient-element {
  background: none !important;
  mask-image: none !important; -webkit-mask-image: none !important;
  visibility: visible !important; }
#intro .gradient-element img { opacity: 1 !important; width: 100%; }

/* Las imágenes de los carruseles de Books y About las coloca el JavaScript,
   una al lado de otra. Antes de colocarlas estaban todas apiladas en el
   mismo sitio, así que asomaba la última. No se enseñan hasta que están. */
.simple-image-carousel .image-container { visibility: hidden; }
.simple-image-carousel .image-container.loaded { visibility: visible; }

/* ---- Your time: los controles no heredan del tema --------------------
   El tema pone `input, button { min-width: 120px; height: 40px; ... }` y
   `html.desktop button:hover { background-color: #ffa901 }`. Eso ensanchaba
   el campo de la fecha y volvía ilegible el botón de compartir (naranja
   sobre naranja). Aquí se anula y manda el CSS propio de la página.     */
:where(main.lifetime-calculator-page) input,
:where(main.lifetime-calculator-page) button {
  min-width: 0; width: auto; height: auto; margin: 0;
  border-radius: 0; background-color: transparent; }
html.desktop :where(main.lifetime-calculator-page) button:hover { background-color: transparent; }

/* ---- Las comillas como cursor (solo escritorio) ----------------------
   Sobre la obra, el puntero desaparece y las comillas lo siguen con algo
   de retraso. Al salir se encogen y vuelve el puntero. En movil no: alli
   se queda el boton de la esquina.                                      */
html.desktop .gallery-info-button.modo-cursor { position: fixed; top: 0; left: 0;
  margin: 0; z-index: 40; pointer-events: none; will-change: transform;
  transform: translate3d(-100px, -100px, 0) scale(0.2);
  opacity: 0; visibility: hidden;
  transition: opacity 260ms linear, visibility 0s linear 260ms; }
html.desktop .gallery-info-button.modo-cursor.a-la-vista { opacity: 1; visibility: visible;
  transition: opacity 260ms linear; }
html.desktop .gallery-info-button.modo-cursor svg { transition: transform 260ms cubic-bezier(.2,.8,.3,1); transform: scale(0.35); }
html.desktop .gallery-info-button.modo-cursor.encima svg { transform: scale(1); }
html.desktop .gallery-info-button.modo-cursor.estreno { animation: none; }
html.desktop body.gallery-page .image-carousel.oculta-cursor .image-wrapper,
html.desktop body.gallery-page .image-carousel.oculta-cursor .image-container { cursor: none; }
/* Con el texto abierto el aspa hace de puntero tambien sobre el panel azul. */
html.desktop body.raton-comillas .gallery-image-info { cursor: none; }


/* ---------------------------------------------------------------------------
   Telefono en apaisado. La obra ocupa toda la altura y girado no queda nada
   que ver, asi que no se pelea: se pide que lo giren. Solo telefono: la
   condicion de alto deja fuera a las tabletas. */
.gira-el-movil { display: none; }
@media screen and (orientation: landscape) and (max-height: 500px) {
  .gira-el-movil { display: flex; position: fixed; z-index: 9999; top: 0; left: 0;
    width: 100%; height: 100%; background-color: #d8a57a;
    align-items: center; justify-content: center; }
  .gira-el-movil p { color: #fff; text-align: center; text-align-last: center;
    font-size: 34px; line-height: 1.3; margin: 0; padding: 0 32px; max-width: 620px; }
}

/* ---- El muneco de About, con la arena cayendole por el cuello -----------
   Debajo va el mismo dibujo de siempre pero sin granos, y encima una tira
   de diez fotogramas que salta de uno a otro. No hay JavaScript ninguno:
   las medidas son proporciones sobre el lienzo de 1500 x 1500 del dibujo,
   asi que la arena sigue a la imagen cuando esta cambia de tamano.
   El grano numero diez enlaza con el primero, de modo que el ciclo no tiene
   costura: se ve caer arena, no una animacion que vuelve a empezar. */
main .dude { position: relative; display: block; width: 65%; margin: auto; }
main .dude img { width: 100%; margin: 0; }
main .dude-arena { position: absolute; overflow: hidden; pointer-events: none;
  left: 28.8667%; top: 38.8667%; width: 4.4667%; height: 29.7333%; }
main .dude-arena > span { display: block; width: 1000%; height: 100%;
  background: transparent url("../img/about_arena.webp") 0 0 no-repeat;
  background-size: 100% 100%;
  animation: cae-la-arena 0.3s steps(10) infinite; }
@keyframes cae-la-arena {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
/* A quien le molesta el movimiento se le queda el primer fotograma, que ya
   ensena granos en el aire: la imagen no pierde nada. */
@media (prefers-reduced-motion: reduce) {
  main .dude-arena > span { animation: none; }
}


/* ---- El cursor dice la verdad (galeria, escritorio) ---------------------
   La mano la ponia la obra entera, y las zonas las decide el JavaScript: en
   el blanco de los lados y en la franja de abajo salia mano y al pulsar no
   pasaba nada. Ahora la clase `mano` la enciende el carrusel solo cuando el
   raton esta donde algo ocurre: encima de la obra o en una columna.
   El `:not(.oculta-cursor)` es para no pisar el `cursor:none` de cuando se
   ensena el simbolo de las comillas. */
html.desktop body.gallery-page .image-carousel .image-container.cursor,
html.desktop body.gallery-page .image-carousel .image-wrapper { cursor: default; }
html.desktop body.gallery-page .image-carousel.mano:not(.oculta-cursor) .image-container.cursor,
html.desktop body.gallery-page .image-carousel.mano:not(.oculta-cursor) .image-wrapper { cursor: pointer; }

/* ---- El azul tapa tambien el menu ---------------------------------------
   Estaba solo en la media query del telefono. En escritorio el panel llegaba
   hasta la barra de arena y el aspa de cerrar quedaba partida entre los dos
   colores. */
/* El centrado se lo daba `main` por herencia. Desde que el panel cuelga del
   `body` para poder tapar el menu, se lo tiene que dar el. */
.gallery-image-info { z-index: 30; text-align: center; }


/* ---- Las obras apaisadas en un telefono de pie -------------------------
   Con `contain` una obra apaisada se queda en una franja pequena en medio de
   la pantalla. En movil pasa a llenar el alto y se sale por los lados: lo que
   sobra se recorre con el dedo, y el JavaScript mueve la posicion del fondo.
   Solo se marcan asi las que de verdad no caben. */
@media screen and (max-width: 768px) {
  body.gallery-page main .image-carousel .image-container.apaisada {
    background-size: auto 100%; }
}

/* ---- La obra que se puede pellizcar -----------------------------------
   Mientras esta puesta, el envoltorio se queda los gestos: si no, Safari se
   lleva los dos dedos a su propio zoom de pagina —ignora `user-scalable=no`
   desde iOS 10—. Solo mientras esa obra esta a la vista; en el resto de la
   galeria el navegador sigue mandando. */
@media screen and (max-width: 768px) {
  body.gallery-page main .image-carousel.pellizcable .image-wrapper { touch-action: none; }
}


/* ---- El aire de arriba, igual en todas las secciones -------------------
   El titulo de cada seccion arranca a 64 px del borde —lo pone
   `.svg-gradient { margin: 64px 6px }`— y *Your time*, que no usa
   `.svg-gradient` sino su propio bloque, se apana igual desde su CSS.
   En el telefono los 64 se quedaban en demasiado blanco antes de empezar:
   alli son 32 en todas. Un solo numero por pantalla, no uno por pagina. */
@media screen and (max-width: 768px) {
  main > .gradient-element.svg-gradient:first-child { margin-top: 32px; }
}


/* En el telefono, la mitad de blanco al final de la seccion. Los 200 px estan
   bien en un monitor; en una pantalla de mano son un scroll entero de nada.
   La galeria no lo usa: tiene su propio alto. */
@media screen and (max-width: 768px) {
  main { margin-bottom: 100px; }
}


/* El carrusel del libro impreso es lo ultimo de *Digital Books*, y sus 110 px
   se suman a los 100 de `main`: doscientos diez de blanco detras de la ultima
   imagen, que en un telefono es un scroll entero de nada. Solo ahi: en About
   este mismo carrusel tiene texto debajo y ese aire hace falta. */
@media screen and (max-width: 768px) {
  main.book-page .simple-image-carousel { margin-bottom: 40px; }
}