/* La pagina de «sitio en construccion», que vive sola.
 *
 * Hoja propia y no una pieza de `base.css`: esta pagina se publica SOLA en el
 * dominio, sin el resto del sitio, y arrastrar las seis hojas del sitio entero
 * para una pantalla con dos logotipos es pedirle a una mama que descargue un
 * sitio que todavia no existe.
 *
 * Las dos marcas convivem sin mezclarse: el fondo y los acentos calidos son de
 * Los Peques; la franja de abajo, donde firma quien lo esta haciendo, es navy de
 * SkopedLabs. Mezclar las paletas en el mismo bloque habria ensuciado las dos. */
:root {
  --crema: #FFF9F0;
  --naranja: #F0862F;
  --verde: #26705F;
  --tinta: #2E2A25;
  --tinta-2: #5A5248;
  --navy: #0D1830;
  --oro: #E0B23A;
  --acero: #6F93C4;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--crema);
  color: var(--tinta);
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  line-height: 1.55;
}
.env { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }

main { flex: 1; display: grid; place-items: center; padding-block: clamp(1.8rem, 5vw, 2.6rem); text-align: center; }
/* El tope de 170px no es estetico: con 210 la franja de SkopedLabs caia debajo
   del pliegue en una pantalla de 1280x760, que es un portatil cualquiera. Una
   pantalla de espera que obliga a desplazar para ver quien la hizo no la ve
   nadie. */
.logo { width: clamp(140px, 30vw, 170px); height: auto; margin-bottom: 1.3rem; }
h1 { font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif; font-weight: 600;
     font-size: clamp(1.8rem, 5.2vw, 2.5rem); line-height: 1.08; }
.lema { color: var(--verde); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
        font-size: .78rem; margin-bottom: 1rem; }
.bajada { color: var(--tinta-2); font-size: clamp(1.02rem, 2.4vw, 1.15rem); margin-top: 1rem;
          max-width: 34rem; margin-inline: auto; }

.contactos { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.8rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: 0 1.4rem; border-radius: 999px;
  /* Verde y no naranja, igual que el boton del sitio. El naranja de la marca es
     para acentos pequenos —la raya del rotulo, la pildora de «tu sede»—: blanco
     sobre el da 2,57 de contraste contra los 4,5 que pide la pauta, y el arnes lo
     cazo en las cinco anchuras. Sobre el verde da 5,87. */
  background: var(--verde); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(38,112,95,.75);
}
.btn.fino { background: transparent; color: var(--tinta); border: 1.5px solid rgba(46,42,37,.22); box-shadow: none; }
.btn:hover { filter: brightness(1.05); }
.sedes { margin-top: 1.6rem; color: var(--tinta-2); font-size: .95rem; }
.sedes b { color: var(--tinta); }

/* La firma, en la base oscura de SkopedLabs. */
.firma { background: var(--navy); color: #C7D0E0; padding-block: 1.3rem; }
.firma .env { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; font-size: .88rem; }
.firma a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: #fff; text-decoration: none; font-weight: 600; }
.firma a:hover { text-decoration: underline; }
.firma img { display: block; width: 22px; height: 22px; }
.firma .labs { color: var(--acero); }
.firma .punto { color: var(--oro); }