/* tokkip.loperstack.com — Tokkip's own look: the teal his scheme grows from,
   the cream of his body, Fredoka for what he says, Roboto Flex for the rest,
   and Material Expressive shapes. Light or dark, as your system is. */

@font-face {
  font-family: "Fredoka";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fredoka-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fredoka-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Flex";
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("fonts/roboto-flex-latin-standard-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --agua: #e8f3f1;          /* the page */
  --agua-2: #d8ebe7;        /* surfaces */
  --agua-3: #c7e2dd;        /* raised surfaces, chips */
  --galleta: #bfe9e4;       /* the shape behind Tokkip */
  --tinta: #13302e;         /* text */
  --tinta-2: #3d5a57;       /* secondary text */
  --tokkip: #00696a;        /* his teal, dark enough for text and buttons */
  --sobre-tokkip: #ffffff;
  --tonal: #cce8e6;         /* tonal buttons, the chosen chip */
  --contenedor: #9cf1ed;    /* the shapes behind icons */
  --sobre-contenedor: #00504d;
  --sobre-tonal: #05201f;
  --cempasuchil: #f2b42b;   /* today, in his calendar */
  --mejilla: #f0788c;
  --linea: #b3cfca;

  --display: "Fredoka", "Roboto Flex", system-ui, sans-serif;
  --texto: "Roboto Flex", system-ui, "Segoe UI", sans-serif;
  --muelle: cubic-bezier(0.34, 1.45, 0.5, 1);
  --suave: cubic-bezier(0.2, 0, 0, 1);
  --ancho: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --agua: #0e1918;
    --agua-2: #162422;
    --agua-3: #22322f;
    --galleta: #1d3a37;
    --tinta: #dcefeb;
    --tinta-2: #a3bcb8;
    --tokkip: #80d5d0;
    --sobre-tokkip: #003735;
    --tonal: #324b4a;
    --contenedor: #00504d;
    --sobre-contenedor: #9cf1ed;
    --sobre-tonal: #cce8e6;
    --linea: #334845;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--agua);
  color: var(--tinta);
  font: 400 17px/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--tokkip); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--tokkip); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(34px, 5vw, 54px); line-height: 1.02; }
h3 { font-size: 24px; line-height: 1.15; }
p { margin: 0; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .envoltura { padding: 0 16px; } }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--tokkip); color: var(--sobre-tokkip); padding: 10px 16px; border-radius: 999px;
}
.saltar:focus { top: 12px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── The island: the page's menu floats like Tokkip PC's island ───────────── */

.isla {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 8px;
  background: color-mix(in srgb, var(--agua-2) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  outline: 1px solid color-mix(in srgb, var(--linea) 60%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, #000 14%, transparent);
  width: max-content;
  max-width: calc(100vw - 24px);
}
.isla > * { flex: 0 0 auto; }
.isla .marca {
  display: flex; align-items: center; gap: 8px; padding: 2px 12px 2px 2px;
  font: 600 19px var(--display); color: var(--tinta); text-decoration: none;
}
.isla .marca img { width: 32px; height: 32px; }
.isla a.ir {
  padding: 8px 14px; border-radius: 999px; color: var(--tinta-2); text-decoration: none;
  font: 500 15px var(--texto); white-space: nowrap;
  transition: background 0.2s var(--suave), border-radius 0.35s var(--muelle);
}
.isla a.ir:hover { background: var(--agua-3); color: var(--tinta); }
.isla a.ir:active { border-radius: 10px; }
.isla a.descargar { background: var(--tokkip); color: var(--sobre-tokkip); }
.isla a.descargar:hover { background: var(--tokkip); color: var(--sobre-tokkip); filter: brightness(1.08); }
@media (max-width: 720px) { .isla a.solo-ancho { display: none; } }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; border: 0;
  font: 600 17px var(--texto); text-decoration: none; cursor: pointer;
  background: var(--tokkip); color: var(--sobre-tokkip);
  transition: border-radius 0.4s var(--muelle), filter 0.2s;
}
.boton:hover { filter: brightness(1.08); }
.boton:active { border-radius: 14px; }
.boton.tonal { background: var(--tonal); color: var(--sobre-tonal); }
.boton svg { width: 22px; height: 22px; fill: currentColor; }

/* ── Hero: Tokkip, alive ──────────────────────────────────────────────────── */

.portada {
  min-height: min(100svh, 820px);
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px;
  padding-top: 96px; padding-bottom: 24px;
}
.portada h1 {
  font-size: clamp(56px, 9vw, 120px); line-height: 0.92; letter-spacing: -0.025em;
}
.portada .entrada { margin-top: 24px; font-size: clamp(18px, 2vw, 21px); color: var(--tinta-2); max-width: 30em; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.escenario { position: relative; display: grid; justify-items: center; }
.escenario .galleta {
  position: absolute; width: min(470px, 92%); aspect-ratio: 1; top: 50%; left: 50%;
  translate: -50% -56%; fill: var(--galleta);
  animation: girar 90s linear infinite;
}
@keyframes girar { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .escenario .galleta { animation: none; } }
#tokkip {
  position: relative; width: min(340px, 72vw); aspect-ratio: 150 / 190;
  cursor: pointer; touch-action: manipulation; border-radius: 40%;
}
.especies { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.especies button {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--linea);
  background: color-mix(in srgb, var(--agua) 70%, transparent); color: var(--tinta);
  font: 500 15px var(--texto); cursor: pointer;
  transition: border-radius 0.35s var(--muelle), background 0.2s var(--suave);
}
.especies button:hover { background: var(--agua-3); }
.especies button:active { border-radius: 10px; }
.especies button[aria-pressed="true"] { background: var(--tonal); color: var(--sobre-tonal); border-color: transparent; }
@media (hover: none) { .con-cursor { display: none; } }
.pista { position: relative; margin-top: 14px; font-size: 14px; color: var(--tinta-2); text-align: center; }

@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; padding-top: 88px; text-align: left; min-height: 0; }
  .escenario { order: -1; }
  #tokkip { width: min(260px, 64vw); }
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.seccion { padding: 72px 0; }
.seccion > .envoltura > p.intro { margin-top: 14px; max-width: 34em; color: var(--tinta-2); font-size: 19px; }
@media (max-width: 640px) { .seccion { padding: 52px 0; } }

/* An icon inside a Material Expressive shape, as the apps draw them. */
.forma {
  width: 64px; height: 64px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--contenedor); color: var(--sobre-contenedor);
}
.forma svg { width: 30px; height: 30px; fill: currentColor; }
.forma.galleta-9 { clip-path: url(#forma-galleta); }
.forma.trebol { clip-path: url(#forma-trebol); }
.forma.sol { clip-path: url(#forma-sol); }
.forma.flor { clip-path: url(#forma-flor); }

/* Where he lives: the phone is the biggest home, the watch and the car beside it. */
.casas { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 16px; margin-top: 40px; }
.casa { background: var(--agua-2); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.casa .cabeza { display: flex; align-items: center; gap: 16px; }
.casa .req { font-size: 14px; color: var(--tinta-2); margin-top: 2px; }
.casa ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.casa li::marker { color: var(--tokkip); }
.casa .nota { font-size: 14px; color: var(--tinta-2); margin-top: auto; }
@media (max-width: 960px) { .casas { grid-template-columns: 1fr 1fr; } .casa.telefono { grid-column: 1 / -1; } }
@media (max-width: 640px) { .casas { grid-template-columns: 1fr; } }

/* The PC: its island, with the island's own tabs. */
.pc { margin-top: 16px; background: var(--agua-2); border-radius: 36px; padding: 36px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 36px; align-items: center; }
.pc ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.pc li::marker { color: var(--tokkip); }
.pc kbd { font: 500 14px var(--texto); background: var(--agua-3); padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.pestanas { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--agua-3); margin-bottom: 18px; }
.pestanas button {
  border: 0; background: transparent; color: var(--tinta-2); cursor: pointer;
  padding: 8px 16px; border-radius: 999px; font: 500 15px var(--texto);
  transition: background 0.2s var(--suave), border-radius 0.35s var(--muelle);
}
.pestanas button[aria-selected="true"] { background: var(--tonal); color: var(--sobre-tonal); }
.pestanas button:active { border-radius: 10px; }
.captura img { width: 100%; height: auto; }
@media (max-width: 960px) { .pc { grid-template-columns: 1fr; padding: 24px; border-radius: 28px; } }

/* His calendar: a real sequence, so it reads left to right with its dates. */
.temporadas {
  list-style: none; margin: 40px 0 0; padding: 4px 4px 16px; display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.temporadas li {
  flex: 0 0 148px; scroll-snap-align: center;
  background: var(--agua-2); border-radius: 24px; padding: 8px 14px 16px; text-align: center;
  position: relative;
}
.temporadas canvas { width: 104px; margin: 0 auto; }
.temporadas b { display: block; font: 600 17px var(--display); margin-top: 2px; }
.temporadas span { display: block; font-size: 13px; color: var(--tinta-2); }
.temporadas li.now { background: var(--tonal); outline: 3px solid var(--cempasuchil); outline-offset: -3px; }
.temporadas li.now::after {
  content: "Hoy"; position: absolute; top: 10px; right: 10px;
  background: var(--cempasuchil); color: #3a2600; font: 600 12px var(--texto);
  padding: 2px 9px; border-radius: 999px;
}

/* The family: two more apps. */
.familia { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; margin-top: 40px; }
.familia .casa ul { margin-top: 4px; }
.familia figure { margin: 4px 0 0; }
.familia figure img { border-radius: 16px; box-shadow: 0 10px 30px color-mix(in srgb, #000 14%, transparent); }
@media (max-width: 860px) { .familia { grid-template-columns: 1fr; } }

/* Downloads: one row per app, the button where the eye ends. */
.descargas { list-style: none; margin: 36px 0 0; padding: 0; }
.descargas li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--linea);
}
.descargas li:last-child { border-bottom: 1px solid var(--linea); }
.descargas h3 { font-size: 22px; }
.descargas p { color: var(--tinta-2); font-size: 15px; margin-top: 2px; }
@media (max-width: 640px) {
  .descargas li { grid-template-columns: auto 1fr; }
  .descargas .boton { grid-column: 1 / -1; justify-content: center; }
}

.instalar { margin-top: 28px; display: grid; gap: 10px; }
.instalar details { background: var(--agua-2); border-radius: 20px; padding: 0 22px; }
.instalar summary { cursor: pointer; padding: 18px 0; font: 600 18px var(--display); list-style-position: outside; }
.instalar details[open] summary { padding-bottom: 8px; }
.instalar details > :not(summary) { margin: 0 0 18px; color: var(--tinta-2); }
.instalar ol, .instalar ul { padding-left: 22px; display: grid; gap: 6px; }

/* Privacy: short and plain. */
.privado { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.privado .forma { width: 96px; height: 96px; }
.privado .forma svg { width: 44px; height: 44px; }
.privado ul { margin: 18px 0 0; padding-left: 20px; display: grid; gap: 8px; max-width: 40em; }
.privado li::marker { color: var(--tokkip); }
@media (max-width: 640px) { .privado { grid-template-columns: 1fr; } }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.pie { padding: 40px 0 56px; border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 15px; }
.pie .envoltura { display: grid; gap: 10px; }
.pie .creditos { font-size: 13px; max-width: 60em; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* ── The privacy page ───────────────────────────────────────────────────── */

.texto-largo { max-width: 46em; padding-top: 112px; padding-bottom: 64px; }
.texto-largo h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1; }
.texto-largo h2 { font-size: 28px; margin-top: 40px; }
.texto-largo p, .texto-largo ul { margin-top: 12px; }
.texto-largo ul { padding-left: 22px; display: grid; gap: 6px; }
.texto-largo .fecha { color: var(--tinta-2); margin-top: 12px; }