/* Página de presentación de Nidia (nidia.cl). Mismos colores y letras que el tablero
   (frontend/src/index.css); las fuentes se sirven desde aquí, sin pedir nada a terceros. */

@font-face {
  font-family: "Fraunces";
  src: url("/fuentes/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fuentes/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --fondo: #f4f1ea;
  --superficie: #ffffff;
  --borde: #e4dfd4;
  --tinta: #1c211f;
  --tenue: #5b625e;
  --marca: #0f7d47;
  --marca-suave: #e1f3e8;
  --nombre: #12a15f;
  --ia: #d9661a;
  --lema: #3f6650;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121513;
    --superficie: #1b1f1d;
    --borde: #2b312e;
    --tinta: #eceae4;
    --tenue: #a3aaa5;
    --marca: #45cc85;
    --marca-suave: #173a28;
    --nombre: #45cc85;
    --ia: #f5a65b;
    --lema: #a3b8ad;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { background: var(--fondo); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 17px/1.6 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marca); }

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; text-wrap: balance; }

/* Barra superior */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1rem 1rem 0;
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.entrar {
  flex-shrink: 0;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: #0f7d47;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.entrar:hover { background: #0b6338; }

/* El nombre: "ia" en naranja y una chispa en lugar del punto de la i (como Marca.tsx). */
.nombre {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--nombre);
}
.nombre .ia { color: var(--ia); }
.nombre .i { position: relative; display: inline-block; line-height: 1; }
.nombre .i svg {
  position: absolute;
  top: .07em;
  left: 50%;
  width: .34em;
  height: .34em;
  transform: translateX(-50%);
  fill: currentColor;
}

/* Portada */
main { max-width: 68rem; margin: 0 auto; padding: 0 1rem; }

.portada {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  padding: 2.5rem 0 1rem;
  text-align: center;
}
.portada-simbolo { width: 168px; height: 168px; }
.lema { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; color: var(--lema); text-wrap: balance; }
.lema strong { color: var(--ia); font-weight: 600; }
h1 { margin: .5rem 0 1rem; font-size: clamp(2.1rem, 7vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; }
.bajada { margin: 0 auto .8rem; max-width: 36rem; color: var(--tenue); font-size: 1.1rem; }

@media (min-width: 52rem) {
  .portada {
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: start;
    gap: 3rem;
    padding: 4rem 0 2rem;
    text-align: left;
  }
  .portada-simbolo { order: 2; width: 280px; height: 280px; }
  .bajada { margin-left: 0; }
}

/* Secciones */
.bloque { padding: 2rem 0; }
.bloque h2 { margin: 0 0 1.2rem; font-size: clamp(1.6rem, 4.5vw, 2.1rem); line-height: 1.15; }
.bloque > p { max-width: 40rem; margin: 0; }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 52rem) { .pasos { grid-template-columns: repeat(3, 1fr); } }
.pasos li {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1.1rem;
  padding: 1.3rem 1.3rem 1.1rem;
}
.num {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--marca-suave);
  color: var(--marca);
  font-weight: 700;
}
.pasos h3 { margin: .8rem 0 .4rem; font-size: 1.25rem; line-height: 1.25; }
.pasos p { margin: 0; color: var(--tenue); }

.lista { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; max-width: 44rem; }
.lista li { position: relative; padding-left: 1.6rem; }
.lista li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .55em;
  width: .6rem;
  height: .6rem;
  border-radius: 999px;
  background: var(--ia);
}

.tarjeta {
  margin: 1rem 0;
  padding: 1.6rem 1.4rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 1.1rem;
}
.tarjeta h2 { margin-bottom: .4rem; }
.telefono { margin: 0 0 .6rem !important; font-size: 1.6rem; font-weight: 700; letter-spacing: .01em; }
.telefono a { text-decoration: none; }

.aviso {
  margin: 1.5rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--borde);
  color: var(--tenue);
  font-size: .95rem;
}

/* Pie */
.pie {
  max-width: 68rem;
  margin: 2rem auto 0;
  padding: 1.5rem 1rem 2.5rem;
  color: var(--tenue);
  font-size: .9rem;
}
.pie p { margin: .3rem 0; }