/* Página: neutro frío con un matiz verdoso. El color lo ponen los proyectos. */
:root {
  --bg: #f4f6f2;
  --surface: #fdfefc;
  --ink: #0f1512;
  --muted: #56605a;
  --line: #dfe3dc;
  --chip: #eef1ec;

  /* Lavados de fondo: dorado de Elphy y verde de TrigoLab */
  --wash-a: rgb(226 168 52 / 0.17);
  --wash-b: rgb(36 150 104 / 0.11);

  /* Cabecera: cuadrícula y ventana de código */
  --grid-dot: rgb(15 90 65 / 0.16);
  --grid-dot-hot: rgb(15 107 75 / 0.6);
  --syn-kw: #0d7a55;
  --syn-str: #a4600a;
  --live: #16a06b;

  --shadow: 0 1px 2px rgb(24 38 30 / 0.05), 0 10px 28px -10px rgb(24 38 30 / 0.12);
  --shadow-hover: 0 2px 4px rgb(24 38 30 / 0.06), 0 28px 52px -18px rgb(24 38 30 / 0.26);

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e0d;
    --surface: #121715;
    --ink: #eceeea;
    --muted: #97a099;
    --line: #242b27;
    --chip: #1a201d;

    --wash-a: rgb(226 168 52 / 0.07);
    --wash-b: rgb(36 150 104 / 0.09);

    --grid-dot: rgb(120 220 180 / 0.12);
    --grid-dot-hot: rgb(98 224 172 / 0.6);
    --syn-kw: #62e0ac;
    --syn-str: #f0c25a;
    --live: #3ee0a0;

    --shadow: 0 12px 32px -12px rgb(0 0 0 / 0.6);
    --shadow-hover: 0 30px 56px -18px rgb(0 0 0 / 0.85);
  }
}

* { box-sizing: border-box; }

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

@property --mx { syntax: "<length>"; inherits: true; initial-value: 900px; }
@property --my { syntax: "<length>"; inherits: true; initial-value: 300px; }

body {
  position: relative;
  transition: --mx 0.35s ease-out, --my 0.35s ease-out;
  margin: 0;
  background:
    radial-gradient(ellipse 900px 520px at 100% 0, var(--wash-a), transparent 70%) no-repeat,
    radial-gradient(ellipse 800px 560px at 0 640px, var(--wash-b), transparent 70%) no-repeat,
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Cuadrícula de puntos; bajo el cursor los puntos se encienden */
body::before,
body::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 820px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(var(--grid-dot) 1px, transparent 1.6px) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, transparent 100%);
}

body::after {
  background: radial-gradient(var(--grid-dot-hot) 1px, transparent 1.6px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(circle 240px at var(--mx) var(--my), #000, transparent);
  mask-image: radial-gradient(circle 240px at var(--mx) var(--my), #000, transparent);
}

::selection { background: rgb(226 168 52 / 0.35); }

.page {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
  padding-block: clamp(40px, 7vw, 88px) clamp(56px, 9vw, 120px);
}

/* Cabecera: presentación a la izquierda, ventana de código a la derecha */
.hero {
  display: grid;
  gap: clamp(48px, 8vw, 64px);
  margin-bottom: clamp(80px, 10vw, 112px);
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    column-gap: 56px;
  }
}

.intro {
  display: grid;
  justify-items: start;
  gap: clamp(18px, 2.4vw, 24px);
}

.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--syn-kw);
}

.name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4rem, 22vw, 8rem);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.035em;
  line-height: 0.88;
}

.name .line {
  display: block;
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.name .line:nth-child(2) { animation-delay: 0.08s; }

.lead {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.35;
  text-wrap: balance;
}

.actions { margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.85em 1.4em 0.85em 1.6em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn svg { transition: transform 0.25s ease; }

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgb(15 21 18 / 0.5);
}
.btn:hover svg { transform: translateY(3px); }

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.intro .stack { margin: 0; }

/* Ventana de código: se escribe línea a línea */
.visual {
  position: relative;
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s backwards;
}

.code {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-hover);
}

.code-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--chip);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.lights { display: flex; gap: 6px; }
.lights i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.code-body {
  margin: 0;
  padding: 20px 20px 24px 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.9vw, 0.9rem);
  line-height: 1.8;
  white-space: normal;
  counter-reset: ln;
}

.ln {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  counter-increment: ln;
}

.ln::before {
  content: counter(ln);
  padding-right: 1.4em;
  text-align: right;
  color: var(--muted);
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

.tx {
  display: block;
  width: calc(var(--n) * 1ch);
  overflow: hidden;
  white-space: pre;
  animation: type calc(var(--n) * 0.014s) steps(var(--n)) var(--d) backwards;
}
.tx--caret { width: auto; }

.k, .b { color: var(--syn-kw); font-weight: 500; }
.s { color: var(--syn-str); }
.p { color: var(--muted); }

.caret {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  vertical-align: text-bottom;
  background: var(--ink);
  animation: blink 1.1s steps(1) infinite;
}

.badge {
  position: absolute;
  left: 16px;
  bottom: -20px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0.6em 1.1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  font-weight: 500;
}

@media (min-width: 960px) {
  .badge { left: -28px; bottom: -24px; }
}

.live {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
}

.live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--live);
  animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Encabezado de sección */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-head h2 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.count { font-variant-numeric: tabular-nums; }

/* Rejilla de proyectos */
.projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(48px, 8vw, 72px);
}

.projects > li {
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: 0.2s;
}
.projects > li:nth-child(even) { animation-delay: 0.3s; }

/* En dos columnas, las tarjetas pares bajan un escalón */
@media (min-width: 860px) {
  .projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 48px);
    row-gap: clamp(24px, 3vw, 40px);
    align-items: start;
  }
  .projects > li:nth-child(even) { margin-top: 88px; }
}

/* Proyecto: tarjeta con superficie propia; el acento lo pone cada proyecto */
.project {
  --accent: var(--ink);
  --on-accent: var(--bg);
  display: block;
  padding: 10px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

.project--elphy { --accent: #c9952b; --on-accent: #2a2015; }
.project--trigo { --accent: #16805a; --on-accent: #ffffff; }
.project--foco { --accent: #13705d; --on-accent: #ffffff; }
.project--onda { --accent: #0d4f5a; --on-accent: #f7f5ee; }
.project--roadmap { --accent: #a8481f; --on-accent: #fff8ec; }
.project--finanzas { --accent: #0f766e; --on-accent: #ffffff; }
.project--gym { --accent: #4f46e5; --on-accent: #ffffff; }
.project--foody { --accent: #ea580c; --on-accent: #ffffff; }

.project:hover,
.project:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.project:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* Escenario: cada proyecto trae su propio mundo de color, igual en claro y oscuro */
.stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: 19px;
  container-type: inline-size;
  isolation: isolate;
}

.stage > * { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Elphy: papel y latón */
.stage--elphy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, #f6ecd9 0, #ede0c8 62%);
  color: #33291e;
}

.mascot {
  display: block;
  width: 46cqw;
  height: auto;
  margin-top: -4cqw;
  margin-bottom: -3cqw;
}

.translation {
  margin: 0 0 3cqw;
  font-size: clamp(0.8rem, 3.2cqw, 1rem);
  letter-spacing: 0.02em;
  color: #6e5c46;
}

.pills {
  display: flex;
  gap: 2.2cqw;
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 5.4cqw, 1.7rem);
  line-height: 1;
}

.pills span {
  padding: 0.55em 0.95em 0.6em;
  border: 1px solid #d6c3a1;
  border-radius: 0.7em;
  background: #fbf6ec;
  box-shadow: 0 0.14em 0 #b99a68;
}

.pills .on {
  border-color: #b98a24;
  background: #c9952b;
  color: #2a2015;
  box-shadow: 0 0.14em 0 #82560f;
}

.project:hover .mascot,
.project:focus-visible .mascot { transform: translateY(-2.2cqw) rotate(-3deg); }

/* Trigolab: verde sobre papel milimetrado */
.stage--trigo {
  background:
    radial-gradient(rgb(8 92 64 / 0.18) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(160deg, #dfeee7, #bcdbce);
}

.window {
  position: absolute;
  top: 12%;
  left: 8%;
  width: 92%;
  overflow: hidden;
  border-radius: 12px 0 0 0;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgb(8 60 42 / 0.12), 0 32px 60px -22px rgb(6 50 35 / 0.5);
}

.window .bar {
  display: flex;
  align-items: center;
  height: 8cqw;
  min-height: 26px;
  padding-inline: 3cqw;
  background: #f3f6f4;
  border-bottom: 1px solid #dde6e1;
}

.window .url {
  padding: 0.25em 0.9em;
  border-radius: 999px;
  background: #e5ece8;
  font-family: var(--font-mono);
  font-size: clamp(0.55rem, 2cqw, 0.72rem);
  color: #4a5d55;
}

.window img {
  display: block;
  width: 100%;
  height: auto;
}

.project:hover .window,
.project:focus-visible .window { transform: translate(-1.6cqw, -1.6cqw); }

/* Foco: jade con los anillos de su logo; el móvil asoma por abajo */
.stage--foco { background: linear-gradient(165deg, #1f8f77, #0d4a3d); }

.stage--foco::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-radial-gradient(circle at 50% 62%, transparent 0 7cqw, rgb(255 255 255 / 0.09) 7cqw calc(7cqw + 1.5px));
}

.phone {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 44cqw;
  margin-left: -22cqw;
  padding: 1cqw 1cqw 0;
  border-radius: 7cqw 7cqw 0 0;
  background: var(--frame, #0f1f1a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 5cqw 8cqw -3cqw rgb(0 0 0 / 0.55);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6cqw 6cqw 0 0;
}

.phone--left { left: 9cqw; margin-left: 0; }
.phone--right { left: auto; right: 9cqw; margin-left: 0; }

.project:hover .phone,
.project:focus-visible .phone { transform: translateY(-1.6cqw); }

/* Onda: verde petróleo con ondas; la línea rosa lleva la cabeza de la marca */
.stage--onda {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400'%3E%3Cg fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath stroke-opacity='.4' d='M0 30C40 6 80 54 125 30S210 6 250 30S335 54 375 30S455 6 500 30'/%3E%3Cpath stroke-opacity='.14' d='M0 95C40 71 80 119 125 95S210 71 250 95S335 119 375 95S455 71 500 95'/%3E%3Cpath stroke-opacity='.1' d='M0 160C40 136 80 184 125 160S210 136 250 160S335 184 375 160S455 136 500 160'/%3E%3Cpath stroke-opacity='.07' d='M0 225C40 201 80 249 125 225S210 201 250 225S335 249 375 225S455 201 500 225'/%3E%3C/g%3E%3Ccircle cx='436' cy='12' r='11' fill='%23f0a8dc' fill-opacity='.22'/%3E%3Ccircle cx='436' cy='12' r='5' fill='%23f6b8e6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    linear-gradient(160deg, #17707f, #0a3a44 70%, #072a31);
}

.window--left {
  left: 0;
  border-radius: 0 12px 0 0;
}

.project--onda:hover .window,
.project--onda:focus-visible .window { transform: translate(1.6cqw, -1.6cqw); }

/* Roadmap: terracota con un camino de puntos que va de nodo en nodo */
.stage--roadmap {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400'%3E%3Cpath d='M-20 190C-10 160 0 140 20 118S70 56 110 40S210 30 270 22S400 14 510 24' fill='none' stroke='white' stroke-opacity='.65' stroke-width='2' stroke-linecap='round' stroke-dasharray='1 7'/%3E%3Cg fill='%23b85b30' stroke='white' stroke-width='2.5'%3E%3Ccircle cx='20' cy='118' r='7'/%3E%3Ccircle cx='110' cy='40' r='7'/%3E%3C/g%3E%3Ccircle cx='270' cy='22' r='9' fill='white'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    linear-gradient(155deg, #d9835a, #a8481f 55%, #7d3414);
}

/* Finanzas: menta con barras de ahorro que suben hasta pasar la meta */
.stage--finanzas {
  --frame: #0c2c29;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400'%3E%3Cg fill='%230f766e'%3E%3Crect x='292' y='318' width='30' height='100' rx='7' fill-opacity='.14'/%3E%3Crect x='334' y='282' width='30' height='136' rx='7' fill-opacity='.18'/%3E%3Crect x='376' y='298' width='30' height='120' rx='7' fill-opacity='.22'/%3E%3Crect x='418' y='236' width='30' height='182' rx='7' fill-opacity='.28'/%3E%3Crect x='460' y='168' width='30' height='250' rx='7' fill-opacity='.85'/%3E%3C/g%3E%3Cpath d='M278 196H500' stroke='%230f766e' stroke-opacity='.5' stroke-width='1.5' stroke-dasharray='4 6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    linear-gradient(160deg, #e6f3ef, #b7dcd3);
}

/* Gym: índigo con el anillo de rondas de la app, 3 de 4 */
.stage--gym {
  --frame: #17153b;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 400'%3E%3Cg fill='none' stroke='white' stroke-width='14' stroke-linecap='round'%3E%3Ccircle cx='120' cy='170' r='78' stroke-opacity='.16'/%3E%3Cpath d='M120 92A78 78 0 1 1 42 170' stroke-opacity='.9'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='78' cy='296' r='7'/%3E%3Ccircle cx='106' cy='296' r='7'/%3E%3Ccircle cx='134' cy='296' r='7'/%3E%3C/g%3E%3Ccircle cx='162' cy='296' r='6' fill='none' stroke='white' stroke-opacity='.6' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    linear-gradient(160deg, #6d70f3, #4338ca 55%, #2e2a7a);
}

/* Foody: mantel de cuadros naranja */
.stage--foody {
  --frame: #1c1917;
  background:
    repeating-linear-gradient(90deg, rgb(234 88 12 / 0.14) 0 5cqw, transparent 5cqw 10cqw),
    repeating-linear-gradient(0deg, rgb(234 88 12 / 0.14) 0 5cqw, transparent 5cqw 10cqw),
    #fff3e6;
}

/* Texto */
.meta { padding: 22px 14px 14px; }

.host {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.title-row h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 2.75rem);
  font-weight: 700;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}

.go {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.project:hover .go,
.project:focus-visible .go {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  transform: rotate(45deg);
}

.desc {
  max-width: 46ch;
  margin: 14px 0 0;
  color: var(--muted);
  text-wrap: pretty;
}

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

.stack li {
  padding: 0.3em 0.75em;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--chip);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
}

/* Pie: repite la regla y las etiquetas del encabezado de sección */
.foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(64px, 9vw, 112px);
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

@keyframes rise {
  from { transform: translateY(1.5rem); }
}

@keyframes type {
  from { width: 0; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes ping {
  75%, 100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .name .line,
  .visual,
  .tx,
  .caret,
  .live::after,
  .projects > li { animation: none; }
  body { transition: none; }
  .btn,
  .btn svg { transition: none; }
  .btn:hover,
  .btn:hover svg { transform: none; }
  .stage > *,
  .go,
  .project { transition: none; }
  .project:hover,
  .project:focus-visible { transform: none; }
  .project:hover .mascot,
  .project:hover .window,
  .project:hover .phone,
  .project:hover .go,
  .project--onda:hover .window,
  .project:focus-visible .mascot,
  .project:focus-visible .window,
  .project:focus-visible .phone,
  .project:focus-visible .go,
  .project--onda:focus-visible .window { transform: none; }
}