/* Página provisional · Extrema Dental · sistema de marca 2026 */

@font-face { font-family: "Outfit"; font-weight: 200; font-style: normal; font-display: swap; src: url("/fuentes/outfit-200.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fuentes/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fuentes/inter-500.woff2") format("woff2"); }

:root {
  --obsidiana: #0E1417;
  --porcelana: #F5F3EF;
  --esmalte: #5CC2CC;
  --grafito: #243036;
  --niebla: #A9B5B9;
  --margen: clamp(1rem, 6vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--obsidiana);
  color: var(--porcelana);
  font: 400 1rem/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  width: 100%;
  max-width: 46rem;
  padding: clamp(3rem, 10vh, 7rem) var(--margen) 4rem;
}

.logo { display: block; width: 176px; height: auto; margin-bottom: clamp(3rem, 8vh, 5rem); }

h1 {
  margin: 0 0 1.5rem;
  font: 200 clamp(2.4rem, 7vw, 4.25rem)/1.08 "Outfit", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
h1 span { display: block; color: var(--esmalte); }

.entradilla { margin: 0 0 1rem; max-width: 36rem; font-size: 1.125rem; }

.aviso { margin: 0 0 3rem; color: var(--niebla); }

.contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.75rem 2.5rem;
  margin: 0;
  padding-top: 2rem;
  border-top: 1px solid var(--grafito);
}
.contacto dt {
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--niebla);
}
.contacto dd { margin: 0; }

a {
  color: var(--porcelana);
  text-decoration: underline;
  text-decoration-color: var(--esmalte);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
a:hover { color: var(--esmalte); }
a:focus-visible { outline: 2px solid var(--esmalte); outline-offset: 3px; }

footer p {
  margin: 0;
  padding: 1.25rem var(--margen);
  font-size: 0.8125rem;
  color: var(--niebla);
}

/* Estratos: cuatro bandas horizontales, opacidad 32 · 54 · 77 · 100 % (orden fijo) */
.estratos span { display: block; height: 6px; background: var(--esmalte); }
.estratos span:nth-child(1) { opacity: 0.32; }
.estratos span:nth-child(2) { opacity: 0.54; }
.estratos span:nth-child(3) { opacity: 0.77; }
.estratos span:nth-child(4) { opacity: 1; }