/* La cara pública. Lo de fuera (paleta, tipografía, esqueletos) viene de
   /comun/estilos.css; el armazón de secciones, de /comun/armazon.css, y el
   calendario de /comun/calendario.css: los mismos que la app del comité.

   Ahora hay una barra fina arriba, y no la portada haciendo de cabecera como
   antes: con dos secciones hace falta un sitio fijo donde vivan las pestañas y
   la rueda. La sota grande sigue estando, dentro de la sección de inicio.

   La portada va A SANGRE dentro de su sección —el degradado tiene que llegar a
   los bordes—, así que la sección no lleva margen y el aire se lo pone lo que
   va debajo. */

body { background: var(--fondo); }

/* ------------------------------------------------------------------ portada */

.portada {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 34px 20px 30px;
  background: linear-gradient(150deg, var(--sup-baja) 0%, var(--sup-media) 58%, var(--sup-alta) 100%);
  color: #fff;
}
/* Un resplandor dorado detrás de la sota, muy suave: da profundidad sin hacerse
   notar. */
.portada::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -60px;
  width: 420px;
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(217, 165, 32, .22) 0%, transparent 62%);
  pointer-events: none;
}

.portada .sota {
  position: relative;
  height: 104px;
  width: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
}

.portada h1 {
  position: relative;
  margin: 14px 0 2px;
  font-family: Outfit, system-ui, sans-serif;
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 800;
  letter-spacing: -.5px;
}
.lema {
  position: relative;
  margin: 0;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--oro);
}

/* --------------------------------------------------------------- cuenta atrás */

.cuenta { position: relative; margin-top: 22px; }

.reloj {
  display: flex;
  justify-content: center;
  gap: 22px;
}
/* Sin caja ni contorno: cuatro recuadros seguidos pesaban más que las cifras
   que llevaban dentro, y lo que se viene a leer es el número. Los días siguen
   destacando por tamaño, que es lo que ya los separaba de verdad. */
.reloj .hueco {
  min-width: 52px;
  animation: hueco-entra 340ms var(--salida) backwards;
}
.reloj .hueco:nth-child(1) { animation-delay: 0ms; }
.reloj .hueco:nth-child(2) { animation-delay: 55ms; }
.reloj .hueco:nth-child(3) { animation-delay: 110ms; }
.reloj .hueco:nth-child(4) { animation-delay: 165ms; }

@keyframes hueco-entra {
  from { opacity: 0; transform: translateY(7px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.reloj .cifra {
  display: flex;
  justify-content: center;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: #e6ecff;
  font-variant-numeric: tabular-nums;
}
/* Los días son la cifra que importa; las demás acompañan. Al quitar las cajas se
   fue con ellas el recuadro dorado que los separaba, así que la jerarquía la
   lleva ahora sobre todo el COLOR: los días en oro y el resto en blanco roto.
   Por eso el salto de cuerpo puede ser corto —37 contra 34— sin que se deje de
   ver cuál manda; cuando los cuatro números eran dorados hacía falta el doble
   de diferencia, y las horas quedaban encogidas para lo grande que es esto. */
.reloj .hueco.dias .cifra { font-size: 37px; color: var(--oro); }
.reloj .hueco.dias .unidad { color: #e2c977; }

/* Cada dígito es una ventanilla del alto de una línea: dentro caben la cara que
   se va y la que llega, y por eso el número rueda en vez de saltar. */
.reloj .digito {
  position: relative;
  display: block;
  width: .62em;
  /* max(1.1em, 1lh): la ventanilla crece con el interlineado. Con el texto
     espaciado (interlineado 1,5, lo que pone quien lee con dislexia) la cifra
     se salía de sus 1.1em y se recortaba. */
  height: max(1.1em, 1lh);
  overflow: hidden;
}
.reloj .digito-cara {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}

.reloj .unidad {
  display: block;
  margin-top: 2px;
  font-size: 12px;     /* 11 se leía mal en el móvil: 12 es el mínimo legible */
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #b9c4f5;
}
.cuenta-pie { margin: 10px 0 0; font-size: 13px; color: #ccd6fb; }

.cuenta.llegado .reloj { display: none; }
.cuenta.llegado .cuenta-pie {
  font-family: Outfit, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--oro);
}

@media (prefers-reduced-motion: reduce) {
  .reloj .hueco.segundos { display: none; }
  .reloj .hueco { animation: none; }
}
@media (max-width: 520px) {
  .reloj { gap: 12px; }
  .reloj .hueco { flex: 1; min-width: 0; }
  .reloj .cifra { font-size: 27px; }
  .reloj .hueco.dias .cifra { font-size: 31px; }
}

/* ----------------------------------------------------------------- tarjetas */

/* El margen lo ponen las secciones, no main: en el móvil cada una scrollea por
   su cuenta y el aire tiene que ir dentro. */
main { max-width: none; padding: 0; }

#view-inicio { padding: 0; }        /* la portada, a sangre */
.portada-cuerpo { padding: 22px 16px 40px; }

@media (min-width: 861px) {
  /* Con el carrusel deshecho (display: contents) las dos secciones cuelgan de
     main, así que el tope de ancho y el aire se los ponen ellas. El del
     calendario lo pone /comun/calendario.css, que es donde vive. */
  .portada-cuerpo { max-width: 1100px; margin-inline: auto; }
  #view-calendario { padding: 22px 16px 60px; }
}

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

/* DE DOS EN DOS EN EL MÓVIL, si se pide desde los ajustes.
   Sólo aquí abajo: en un ordenador caben las que quepan y lo decide el ancho,
   así que este ajuste ni se ofrece allí (ver FILAS en comun/ajustes.js). Con
   250px de mínimo nunca entrarían dos en un teléfono, de ahí el minmax(0,1fr):
   se reparten el hueco que haya.

   Media tarjeta es media tarjeta, así que todo lo de dentro encoge: menos aire,
   la sota más pequeña, y la descripción cortada a dos líneas para que todas
   midan lo mismo. Es la pantalla donde van una al lado de otra y se comparan de
   un vistazo: que una sea más alta que su vecina por tener el texto más largo
   canta mucho más que en una lista. */
@media (max-width: 40rem) {
  :root[data-columnas="2"] .tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Todas las filas de la misma altura, no sólo las tarjetas de una misma
       fila: si no, la de "Concursos" con su descripción de una línea queda más
       baja que la de arriba y la rejilla sale a escalones. */
    grid-auto-rows: 1fr;
    gap: 10px;
  }
  :root[data-columnas="2"] .tarjeta { padding: 14px; }
  :root[data-columnas="2"] .tarjeta::after {
    width: 54px; height: 78px; background-position: 13px 0; background-size: auto 96px;
  }
  :root[data-columnas="2"] .tarjeta .icono { margin-bottom: 9px; }
  :root[data-columnas="2"] .tarjeta .icono svg { width: 24px; height: 24px; }
  :root[data-columnas="2"] .tarjeta .nombre { font-size: 16px; }
  /* Sin recortar a dos líneas: con el texto espaciado (lo que pone quien lee
     con dislexia) la descripción se cortaba por la mitad. Las tarjetas de la
     misma fila se estiran juntas, así que siguen parejas. */
  :root[data-columnas="2"] .tarjeta .desc { font-size: 12.5px; }
}

/* La tarjeta ENTERA es el enlace: no hay botón que buscar. */
.tarjeta {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 20px;
  min-height: 108px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--tinta);
  text-decoration: none;
  transition: transform 140ms var(--salida), box-shadow 140ms var(--salida),
              border-color 140ms var(--salida);
  animation: tarjeta-entra 320ms var(--salida) backwards;
}
.tarjeta:nth-child(1) { animation-delay: 0ms; }
.tarjeta:nth-child(2) { animation-delay: 45ms; }
.tarjeta:nth-child(3) { animation-delay: 90ms; }
.tarjeta:nth-child(4) { animation-delay: 135ms; }
.tarjeta:nth-child(5) { animation-delay: 180ms; }
.tarjeta:nth-child(n+6) { animation-delay: 225ms; }

@keyframes tarjeta-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* La sota de marca de agua, como en la app del comité. */
/* La caja dentro de la tarjeta y la imagen asomando por background-position
   (ver .module::after en la app del comité): un pseudo que cuelga por fuera
   cuenta como desbordamiento y las auditorías lo toman por texto recortado. */
.tarjeta::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 74px;
  height: 106px;
  background: url('/icons/sota-chica.png') no-repeat 18.5px 0 / auto 132px;
  opacity: .06;
  pointer-events: none;
  transition: opacity 140ms var(--salida);
}

@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover {
    transform: translateY(-2px);
    border-color: var(--azul);
    box-shadow: 0 8px 22px rgba(18, 39, 156, .16);
  }
  .tarjeta:hover::after { opacity: .1; }
}
/* Que se note que se ha pulsado, sobre todo con el dedo. */
.tarjeta:active { transform: scale(.985); }

.tarjeta .icono {
  display: block;
  margin-bottom: 12px;
  color: var(--azul);
}
.tarjeta .icono svg { width: 28px; height: 28px; display: block; }
.tarjeta .nombre {
  position: relative;
  display: block;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--titulo);
  margin-bottom: 3px;
}
.tarjeta .desc {
  position: relative;
  display: block;
  color: var(--tinta-suave);
  font-size: 14px;
}
/* Flechita que se asoma al pasar por encima. */
.tarjeta .flecha {
  position: absolute;
  right: 16px;
  top: 20px;
  color: var(--azul);
  font-size: 19px;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 140ms var(--salida), transform 140ms var(--salida);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover .flecha { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta { animation: none; transition: none; }
  .tarjeta:hover { transform: none; }
}

/* ---------------------------------------------------------------------- pie */

/* El pie, con la rueda de ajustes al lado del rótulo y no debajo: centrada en
   su propia línea parecía un botón importante, y no lo es. */
.pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 16px 40px;
  color: var(--tinta-suave);
  font-size: 13px;
}
.pie p { margin: 0; }

/* ------------------------------------------------------------- instalar */
/* Una fila discreta al final de la portada, no un globo que se cruza por
   delante: quien entra viene a mirar algo. Del mismo material que las
   tarjetas —tarjeta, borde, radio— con un acento de oro en el icono, que es
   lo único que la distingue del resto. */
.instalar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--borde);
  border-radius: 16px;
  background: var(--tarjeta);
  box-shadow: var(--sombra);
  /* Entra sola cuando app.js la destapa: aparecer de golpe a media lectura se
     nota más que aparecer subiendo un poco. */
  animation: instalar-entra 320ms cubic-bezier(.23, 1, .32, 1) backwards;
}
@keyframes instalar-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .instalar { animation: none; }
}
html[data-movimiento="poco"] .instalar { animation: none; }

.instalar-icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--oro-fondo);
  color: var(--oro-tinta);
}
.instalar-icono svg { width: 21px; height: 21px; }

.instalar-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.instalar-texto strong {
  font-family: Outfit, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--titulo);
}
.instalar-sub { font-size: 13px; color: var(--tinta-suave); }

.instalar-si {
  flex: none;
  padding: 9px 15px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sup-media), var(--sup-alta));
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(29, 63, 232, .28);
  transition: filter 160ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.instalar-si:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .instalar-si:hover { filter: brightness(1.08); }
}

/* La equis, a media tinta: cerrar esto tiene que poderse, pero no compite con
   el botón de al lado. flex: none o el SVG se encoge hasta ser un punto. */
.instalar-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.instalar-no svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .instalar-no:hover { background: var(--fondo); color: var(--tinta); }
}

/* En un iPhone no hay botón que valga: Safari no deja instalar desde la
   página, hay que pasar por Compartir. Ahí esto es una explicación, así que el
   texto manda y se le deja el ancho entero. */
.instalar.a-mano .instalar-si { display: none; }
.instalar.a-mano .instalar-sub { color: var(--titulo-2); font-weight: 600; }

/* Estrecho: el botón se baja a su propia línea antes que apretar el texto. */
@media (max-width: 420px) {
  .instalar { flex-wrap: wrap; }
  .instalar-texto { flex: 1 1 auto; }
  .instalar-si { order: 3; flex: 1 1 auto; margin-left: 52px; }
  .instalar-no { order: 2; }
}