/* Hoja aparte de la del sitio. Las paginas de prensa son un documento que se hojea, no la pagina
   de un perfil compartido, y mezclarlas obligaria a que cada regla de una tuviera que preguntarse
   si rompe la otra.

   Los cuatro colores no estan elegidos: son las cuatro esquinas del icono de la app, muestreadas
   del PNG. Si el icono cambia, se vuelven a muestrear y esto sigue cuadrando. */
:root {
  color-scheme: light;
  --blue:  #27a5da;
  --mauve: #b377ac;
  --pink:  #cd8394;
  --coral: #f35d7a;

  --ink:   #17151a;
  --muted: #6d6572;
  --line:  rgba(23,21,26,.12);
  --paper: #fbf9fa;
  --card:  #fff;

  /* La medida de una linea de texto, en pixeles y no en em a proposito: em se mide contra el
     tamano de letra del propio elemento, asi que 42em en un parrafo de 17px son 714 y en una cita
     de 20px son 840, y las dos cosas acaban en sitios distintos aunque pongan lo mismo. Esto son
     los 42em del cuerpo, ya resueltos, para que todo termine en la misma vertical. */
  --measure: 714px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* Cabecera. El mismo degradado del icono y en la misma diagonal, para que la pagina y la app se
   reconozcan como la misma cosa antes de leer una palabra. */
.hero {
  background: linear-gradient(135deg, var(--blue) 0%, var(--mauve) 46%, var(--coral) 100%);
  color: #fff;
  padding: 44px 24px 52px;
}
.hero-in { max-width: 940px; margin: 0 auto; }
.lang { font-size: 14px; margin: 0 0 28px; }
.lang a { color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
.lang a:hover { color: #fff; }
.mark { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mark img {
  width: 104px; height: 104px; border-radius: 23px; display: block;
  box-shadow: 0 8px 30px rgba(23,21,26,.22);
}
.hero h1 { font-size: 38px; line-height: 1.1; margin: 0 0 6px; letter-spacing: -.025em; }
.hero .kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
                color: rgba(255,255,255,.8); margin: 0 0 10px; }
/* La frase cabe en una linea en un escritorio y es asi como tiene que quedarse: el ancho maximo
   estaba estrechando la columna y partiendola sin necesidad. Cuando la pantalla no da para una
   linea, `balance` reparte lo que quede en renglones parejos, y la fecha no se parte nunca por la
   mitad porque va en un `nb`. Un "6 de septiembre" arriba y un "de 2026" abajo se lee fatal. */
.hero .tag { font-size: 19px; margin: 0; color: rgba(255,255,255,.95); text-wrap: balance; }
.nb { white-space: nowrap; }

/* Navegacion por anclas, como en cualquier kit de prensa: el periodista viene a por las imagenes
   y tiene que poder saltar ahi sin leer nada. */
nav {
  position: sticky; top: 0; z-index: 5;
  background: rgba(251,249,250,.92);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
nav ul { max-width: 940px; margin: 0 auto; padding: 0 24px; list-style: none;
         display: flex; gap: 22px; overflow-x: auto; }
nav a { display: block; padding: 15px 0; font-size: 14px; text-decoration: none;
        color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; }
nav a:hover { color: var(--ink); border-bottom-color: var(--coral); }

main { max-width: 940px; margin: 0 auto; padding: 8px 24px 72px; }
section { padding-top: 44px; scroll-margin-top: 60px; }
h2 { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
     color: var(--muted); margin: 0 0 18px; }
h3 { font-size: 20px; margin: 28px 0 8px; letter-spacing: -.01em; }
p { margin: 0 0 16px; max-width: var(--measure); }
.lead { font-size: 20px; line-height: 1.5; }
.note { font-size: 15px; color: var(--muted); }

blockquote {
  /* La misma medida que los parrafos. Sin esto la cita se estiraba hasta el borde del contenedor y
     sobresalia por la derecha del texto que la rodea, que parece una decision y no lo era. */
  max-width: var(--measure);
  margin: 0 0 22px; padding: 20px 24px; border-radius: 14px;
  background: var(--card); border-left: 3px solid var(--coral);
  box-shadow: 0 1px 2px rgba(23,21,26,.05);
  font-size: 20px; line-height: 1.45;
}

/* Botonera. Es un degradado y no un color plano porque el degradado es la marca. */
.cta {
  display: inline-block; text-decoration: none; color: #fff; font-weight: 600;
  background: linear-gradient(120deg, var(--blue), var(--coral));
  padding: 15px 26px; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(243,93,122,.28);
}
.cta:hover { filter: brightness(1.06); }
.cta.ghost { background: none; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }

/* Ficha tecnica en dos columnas, que es como se lee de un vistazo y como se copia y pega. */
.facts { display: grid; grid-template-columns: 190px 1fr; gap: 0; margin: 0 0 8px;
         border-top: 1px solid var(--line); }
.facts dt { padding: 11px 16px 11px 0; color: var(--muted); border-bottom: 1px solid var(--line);
            font-size: 15px; }
.facts dd { padding: 11px 0; margin: 0; border-bottom: 1px solid var(--line); }

/* Rejilla de imagenes. Miniaturas en JPEG de 560 px: el original de cada captura son megas, y una
   pagina de prensa que tarda en cargar es una pagina que se cierra. Se pincha para el PNG entero. */
/* Todo esto es de la rejilla y solo de la rejilla. Sin el `.grid` delante alcanzaba a cualquier
   figure de la pagina, y el dia que los videos pasaron a ser figures, el enlace de descarga de su
   pie salio convertido en una tarjeta con borde de punta a punta. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 22px; }
/* Las apaisadas necesitan mas ancho que las capturas de movil. Con la rejilla de 196 px salian a
   205 de ancho y por 115 de alto, y a ese tamano no se distingue el lado normal del simulado, que
   es exactamente lo unico que tienen que ensenar. */
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
figure { margin: 0; }
.grid figure a { display: block; border-radius: 12px; overflow: hidden; background: var(--card);
                 border: 1px solid var(--line); }
.grid figure img { display: block; width: 100%; height: auto; }
.grid figure a:hover { border-color: var(--coral); }
.grid figcaption { font-size: 14px; line-height: 1.45; color: var(--muted); padding-top: 9px; }
.grid figcaption b { display: block; color: var(--ink); font-weight: 600; }
.grid figcaption em { font-style: normal; color: var(--pink); }

video { width: 100%; max-width: 270px; border-radius: 14px; display: block; border: 1px solid var(--line); }

/* Los dos bucles de la pagina. Van en un figure con su pie debajo y no sueltos, porque el sitio
   donde alguien busca que es lo que esta viendo es justo debajo de lo que esta viendo, no en la
   columna de al lado tres parrafos mas abajo.

   Y el texto los rodea en vez de quedarse en una columna a su lado. Una captura de movil mide el
   doble de alto que de ancho y ningun parrafo razonable llega a esa altura, asi que con dos
   columnas siempre sobraba medio metro de blanco a la derecha del video. Flotandolo, el texto baja
   por el hueco cuando se acaba, que es lo que hace cualquier revista y no cuesta ni una palabra. */
.media::after { content: ""; display: block; clear: both; }
.clip { float: left; margin: 0 28px 20px 0; max-width: 220px; }
.clip video, .clip img { display: block; width: 100%; max-width: none; border: 0;
              border-radius: 14px; box-shadow: 0 10px 34px rgba(23,21,26,.18); }
.clip figcaption { font-size: 14px; line-height: 1.5; color: var(--muted); padding-top: 12px; }
.clip figcaption a { color: var(--ink); }
/* El peso y la duracion del fichero, en su propia linea y en gris. En un movil el pie va justo
   detras del video y por delante del texto que cuenta de que va esto, asi que un "H.264, 23 MB"
   metido en la misma frase se lee antes que la historia. Lo que hace falta antes de pulsar una
   descarga son dos datos, no la ficha tecnica entera. */
.clip .dl { display: block; margin-top: 4px; font-size: 13px; }
/* El de ajustar ilustra un parrafo en vez de abrir la pagina, asi que pesa menos. */
.clip.tight { max-width: 200px; }
.row blockquote { max-width: none; }

/* Una captura de movil es el doble de alta que ancha, asi que si el texto de al lado se envuelve
   debajo deja media pantalla en blanco al lado del video. La pieza de la izquierda se queda con su
   tamano y la de la derecha es la que encoge, que es al reves de lo que hace flex por su cuenta:
   el parrafo pide su medida entera, no cabe, y se baja. */
.row { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.row > :first-child { flex: 0 0 auto; }
.row > :last-child { flex: 1 1 260px; }
.row p { max-width: none; }
.iconbox { text-align: center; }
.iconbox img { width: 132px; height: 132px; border-radius: 29px; display: block;
               box-shadow: 0 6px 22px rgba(23,21,26,.14); }

ul.plain { padding-left: 20px; }
ul.plain li { margin-bottom: 12px; max-width: var(--measure); }

footer { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 22px;
         font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); }

@media (max-width: 620px) {
  .hero h1 { font-size: 30px; }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: none; }
  .facts dd { padding-top: 2px; }
  /* En un movil el video no cabe al lado del texto, se pone encima, y una captura de movil a 300 px
     mide 650 de alto: la frase que explica de que va esto se iba a dos pantallas de scroll. Mas
     pequeno se sigue entendiendo lo que pasa en el, que es lo unico que tiene que hacer aqui. */
  /* En un movil no hay hueco al lado de nada: el video ocupa su linea y el texto va debajo. */
  .clip { float: none; margin: 0 0 20px; max-width: 240px; }
}