/* Portada mínima de tualba.com: solo «muy pronto». La completa está en la
   etiqueta portada-completa-31oct del repo. */
@font-face { font-family: "Fraunces"; src: url("/fuentes/Fraunces-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fuentes/Geist-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --noche: #0A0C24;
  --noche-2: #1B2150;
  --malva: #5E4A6E;
  --terra: #C9785A;
  --oro: #E3B15B;
  --crema: #FBF4E4;
  --crema-suave: rgba(251, 244, 228, 0.72);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--noche) 0%, var(--noche-2) 45%, var(--malva) 72%, var(--terra) 88%, var(--oro) 100%) var(--noche);
  color: var(--crema);
  font-family: "Geist", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cielo {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 3rem 1.5rem 6rem;
  background: url("/web/estrellas.svg") center top / 900px auto repeat-x;
}

.sol {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -38vmin;
  width: 90vmin;
  height: 90vmin;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 222, 0.95) 0%, rgba(252, 226, 170, 0.55) 30%, rgba(252, 226, 170, 0) 68%);
  animation: amanece 3.2s ease-out both;
  pointer-events: none;
}

.centro {
  position: relative;
  z-index: 1;
  text-align: center;
  animation: aparece 1.6s ease-out both;
}

.icono {
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 1.1rem;
  box-shadow: 0 1rem 3rem rgba(227, 177, 91, 0.25);
}

.nombre {
  margin-top: 1.5rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(4.5rem, 18vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.frase {
  margin-top: 1rem;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  color: var(--crema);
}

.pronto {
  margin-top: 2rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--crema-suave);
}

.pie {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
  position: relative;
  z-index: 1;
  color: var(--noche);
  font-size: 0.875rem;
}

.pie a { color: var(--noche); text-underline-offset: 0.2em; }

/* Privacidad: la misma noche, en una columna de lectura. */
.sencilla .cielo { place-items: start center; }
.sencilla .texto { max-width: 34rem; text-align: left; line-height: 1.6; color: var(--crema-suave); }
.sencilla .texto h1 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 2.5rem; color: var(--crema); margin-bottom: 1.25rem; }
.sencilla .texto p + p { margin-top: 0.9rem; }
.sencilla .texto a { color: var(--crema); }

@keyframes aparece { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
@keyframes amanece { from { opacity: 0; transform: translate(-50%, 8vmin); } to { opacity: 1; transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .centro, .sol { animation: none; }
}

/* La página es de noche en los dos modos. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}