/* cafecuantico/css/estilo.css
   Portada provisional. Mobile first, medido a 390px: ningun ancho fijo y ninguna
   dependencia externa --ni fuentes ni iconos--, asi que la pagina no depende de que
   un tercero conteste. */

:root {
  --fondo:      #14100e;
  --fondo-alto: #1e1815;
  --tinta:      #f2e8dc;
  --tinta-baja: #b9a996;
  --cobre:      #c9894b;
  --cuantico:   #8f7ab8;
  --borde:      rgba(242, 232, 220, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--fondo);
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(143, 122, 184, 0.18), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 115%, rgba(201, 137, 75, 0.10), transparent 70%);
  color: var(--tinta);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portada {
  width: 100%;
  max-width: 34rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

/* --- la marca ----------------------------------------------------------- */

.marca h1 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(2.3rem, 11vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0 0 0.6rem;
}

/* El sello de proximamente. Es lo que la pagina viene a decir, asi que va arriba de la
   bajada y no escondido en una tarjeta mas abajo. */
.sello {
  display: inline-block;
  margin: 0.2rem 0 1.1rem;
  padding: 0.38rem 1.05rem;
  border: 1px solid rgba(201, 137, 75, 0.55);
  border-radius: 999px;
  color: var(--cobre);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.bajada {
  color: var(--tinta-baja);
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 24rem;
}

/* El planeta con su orbita. Decorativo y hecho con dos pseudoelementos: sin imagen
   que pedir y sin archivo que desplegar. */
.orbita {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 1.6rem;
}

.orbita::before {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #e8b57e, var(--cobre) 62%, #8c5727);
  box-shadow: 0 0 22px rgba(201, 137, 75, 0.45);
}

.orbita::after {
  content: "";
  position: absolute;
  inset: 12px -6px;
  border: 1px solid var(--cuantico);
  border-radius: 50%;
  transform: rotate(-24deg);
  opacity: 0.75;
}

/* --- el aviso de agenda -------------------------------------------------- */

.agenda {
  margin-top: 2.75rem;
  padding: 1.75rem 1.5rem;
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  border-radius: 14px;
  text-align: left;
}

.agenda h2 {
  color: var(--cobre);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
}

.agenda p {
  color: var(--tinta-baja);
  margin: 0;
}

.agenda strong {
  color: var(--tinta);
  font-weight: 500;
}

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

.pie {
  margin-top: 2.5rem;
  color: var(--tinta-baja);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.pie p { margin: 0; }

/* --- de 600px para arriba ------------------------------------------------ */

@media (min-width: 600px) {
  .portada { padding: 4rem 2rem; }
  .agenda  { padding: 2rem; text-align: center; }
}