/* Vainastech: paleta de marca turquesa #14b8a6 + pizarra #64748b sobre neutros
   azulados. El turquesa puro no alcanza contraste de texto sobre blanco, así que
   en modo claro el texto de acento usa una variante más oscura. Tipografía del
   sistema, sin fuentes externas. */

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #0f766e;
  --accent-fill: #14b8a6;
  --on-accent: #04312d;
  --border: rgba(100, 116, 139, 0.22);
  --shot-border: rgba(100, 116, 139, 0.3);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --radius: 12px;
  --gutter: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --surface: #121a2e;
    --text: #e8eef7;
    --muted: #94a3b8;
    --accent: #2dd4bf;
    --accent-fill: #14b8a6;
    --on-accent: #04312d;
    --border: rgba(100, 116, 139, 0.32);
    --shot-border: rgba(100, 116, 139, 0.4);
    color-scheme: dark;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

::selection {
  background: var(--accent-fill);
  color: var(--on-accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: 10;
}

.skip-link:focus {
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Cabecera */
.site-header {
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wordmark img {
  width: 28px;
  height: 28px;
}

.site-nav {
  display: flex;
  gap: 20px;
  font-size: 0.9375rem;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
}

/* Presentación */
.hero {
  padding-block: clamp(56px, 10vw, 112px) clamp(40px, 7vw, 72px);
}

.hero h1 {
  font-size: clamp(2.125rem, 6vw, 3.75rem);
  font-weight: 700;
  max-width: 18ch;
}

.hero p {
  margin-top: 20px;
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
}

/* Secciones con etiqueta en el margen izquierdo */
.section {
  border-top: 1px solid var(--border);
  padding-block: clamp(40px, 7vw, 72px);
}

.section-label {
  margin: 0 0 24px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 860px) {
  .section .wrap {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
  }
}

/* Tarjeta de proyecto */
.project {
  display: grid;
  gap: 32px;
  padding: clamp(20px, 4vw, 36px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

@media (min-width: 720px) {
  .project {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
  }
}

.project-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.project-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}

.project h3 {
  font-size: 1.75rem;
}

.project-desc {
  margin-top: 16px;
  color: var(--muted);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.badges li {
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.button:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background: #5b21b6;
  }
}

.button:focus-visible {
  border-radius: 999px;
}

/* Capturas: escritorio detrás, móvil delante */
.shots {
  position: relative;
  margin: 0;
  padding-bottom: 8%;
  padding-right: 12%;
}

.shots img {
  border: 1px solid var(--shot-border);
  border-radius: 8px;
}

.shots .shot-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26%;
  border-radius: 12px;
}

/* Video de recorrido bajo las capturas */
.preview {
  position: relative;
  grid-column: 1 / -1;
  margin: 0;
}

.preview video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--shot-border);
  border-radius: 8px;
  background: var(--surface);
}

.preview-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.875rem;
  color: #fff;
  background: rgba(11, 17, 32, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  cursor: pointer;
}

/* Contacto y pie */
.contact p {
  max-width: 56ch;
  color: var(--muted);
}

.contact a {
  font-weight: 600;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 28px;
  color: var(--muted);
  font-size: 0.9375rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

/* Página 404 */
.not-found {
  padding-block: clamp(72px, 14vw, 160px);
}

.not-found h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

.not-found p {
  margin-top: 16px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .button:active {
    transform: none;
  }
}