/* ==========================================================================
   cursoruso.com — landing
   Implementacion de claude-design/Landing.dc.html.

   Los valores (colores, tamanos, espaciados) salen del diseno tal cual. Lo que
   se ha cambiado a proposito, y por que:

   1. Los estilos van en clases, no inline. El diseno los trae inline porque el
      editor los genera asi; mantenerlos inline hace imposible el responsive.
   2. Fuentes autoalojadas en vez de la CDN de Google: mismas familias, sin
      peticion a terceros y sin bloquear el primer render.
   3. Puntos de ruptura. El diseno es de escritorio fijo (rejillas de 7 y de 4
      columnas): en movil se rompe. Todo lo de abajo de 1080px es anadido.
   ========================================================================== */

@font-face { font-family: Quicksand; src: url(/fonts/quicksand-latin-400.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Quicksand; src: url(/fonts/quicksand-latin-500.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Quicksand; src: url(/fonts/quicksand-latin-600.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Quicksand; src: url(/fonts/quicksand-latin-700.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Quicksand; src: url(/fonts/quicksand-latin-ext-400.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Quicksand; src: url(/fonts/quicksand-latin-ext-600.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: 'Golos Text'; src: url(/fonts/golos-cyrillic-400.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Golos Text'; src: url(/fonts/golos-cyrillic-500.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Golos Text'; src: url(/fonts/golos-cyrillic-600.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Golos Text'; src: url(/fonts/golos-cyrillic-700.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* --- tokens ------------------------------------------------------------ */

:root {
  --bg:      #171615;
  --surf:    #201d1c;
  --surf2:   #2a2726;
  --ink:     #f3f2f2;
  --ink-rgb: 243,242,242;
  --accent:  #ec3013;
  --accent-t:#ff563c;
  --on-accent:#0f0d08;   /* el #17150f del diseno daba 4.34:1 sobre --accent, bajo el minimo AA */
  --ok-t:    #7ab98a;
  --mute-1: rgba(var(--ink-rgb),.62);
  --mute-2: rgba(var(--ink-rgb),.72);
  --line:   rgba(var(--ink-rgb),.16);
  --line-2: rgba(var(--ink-rgb),.22);
  --edge:   rgba(var(--ink-rgb),.24);
  --edge-2: rgba(var(--ink-rgb),.3);
  --shell:  1180px;
  --pad:    32px;
}

html[data-theme="light"] {
  --bg:      #f3f2f2;
  --surf:    #eae9e9;
  --surf2:   #e0dedd;
  --ink:     #201e1d;
  --ink-rgb: 32,30,29;
  --accent:  #ae1800;
  --accent-t:#ae1800;
  --on-accent:#f8f4f4;
  --ok-t:    #2f6b41;
  --mute-1: rgba(var(--ink-rgb),.72);
  --mute-2: rgba(var(--ink-rgb),.78);
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: Quicksand, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html { -webkit-text-size-adjust: 100%; }

a { color: var(--accent-t); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: #ff9783; }
html[data-theme="light"] a:hover { color: #7d1100; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(236,48,19,.35); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; top: 0; z-index: 40;
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; }
.skip:focus { left: 0; }

/* --- rejilla base ------------------------------------------------------- */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }
.rule  { border-bottom: 2px solid var(--line-2); }

.eyebrow {
  font: 500 11px/1 Quicksand, sans-serif;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-t);
}
.h2 { margin: 14px 0 10px; font: 700 34px/1.15 Quicksand, sans-serif; letter-spacing: -.02em; }

/* El cirilico va siempre en Golos Text: Quicksand no lo tiene. */
.ru { font-family: 'Golos Text', Georgia, serif; }

/* --- cabecera ---------------------------------------------------------- */

.hdr { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.hdr .shell { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hdr-left { display: flex; align-items: center; gap: 32px; }
.hdr-right { display: flex; align-items: center; gap: 14px; }

.logo { display: flex; align-items: center; gap: 10px; }
.logo-tile {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  background: var(--accent); color: var(--on-accent);
  font-family: 'Golos Text', sans-serif; font-size: 17px; line-height: 30px; text-align: center;
}
.logo-txt { font: 400 20px/1 Quicksand, sans-serif; letter-spacing: -.02em; color: var(--mute-2); }
.logo-txt b { position: relative; display: inline-block; font-weight: 700; color: var(--ink); }
/* La tilde sobre la palabra es la marca de acento tonico del propio curso. */
.logo-txt b::after {
  content: ""; position: absolute; top: -4px; left: 32%;
  width: 8px; height: 2px; background: var(--accent);
  transform: rotate(-24deg); border-radius: 2px;
}

.hdr nav { display: flex; gap: 22px; }
.hdr nav a, .hdr-right .plain { font: 600 13px/1 Quicksand, sans-serif; color: var(--mute-2); }
.hdr nav a:hover, .hdr-right .plain:hover { color: var(--ink); }

.theme-btn {
  font: 600 12px/1 Quicksand, sans-serif; color: var(--mute-2);
  border: 1px solid var(--edge); border-radius: 8px; padding: 8px 11px;
}
.theme-btn:hover { border-color: rgba(var(--ink-rgb),.5); }

.btn { border-radius: 8px; font: 700 13px/1 Quicksand, sans-serif; padding: 10px 16px; display: inline-block; }
.btn-fill { background: var(--accent); color: var(--on-accent); }
.btn-fill:hover { color: var(--on-accent); opacity: .9; }
.btn-line { border: 1px solid var(--edge-2); color: var(--ink); }
.btn-line:hover { color: var(--ink); border-color: rgba(var(--ink-rgb),.5); }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-xl { padding: 16px 24px; font-size: 15px; }

/* --- hero -------------------------------------------------------------- */

.hero .shell { padding-top: 72px; padding-bottom: 64px; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero h1 { margin: 0; font: 700 52px/1.05 Quicksand, sans-serif; letter-spacing: -.03em; text-wrap: pretty; }
.hero-sub { margin: 0; font: 400 18px/1.55 Quicksand, sans-serif; color: var(--mute-2); max-width: 520px; text-wrap: pretty; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { font: 400 13px/1.5 Quicksand, sans-serif; color: var(--mute-1); }

/* --- maqueta del runner ------------------------------------------------ */

.demo { border: 1px solid var(--line); background: var(--surf); border-radius: 12px; overflow: hidden; }
.demo-top { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--line); }
.demo-tag { font: 500 10px/1 Quicksand, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mute-1); }
.demo-clock { font: 400 15px/1 Quicksand, sans-serif; color: var(--mute-2); }

/* Cada segmento es proporcional a los minutos de su bloque. */
.demo-blocks { padding: 16px 18px; display: flex; gap: 3px; }
.demo-blocks span { height: 6px; border-radius: 3px; background: rgba(var(--ink-rgb),.34); }
.demo-blocks .todo { background: none; border: 1px solid var(--edge); }
.demo-blocks .now { background: rgba(236,48,19,.28); display: flex; }
.demo-blocks .now i { width: 48%; background: var(--accent); border-radius: 3px; }

.demo-word { padding: 10px 18px 24px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.demo-word .ru { font-size: 52px; line-height: 1.45; font-weight: 700; }
.demo-word .ru em { font-style: normal; color: var(--accent-t); border-bottom: 2px solid rgba(236,48,19,.55); }
.demo-sep { width: 1px; height: 34px; background: var(--line-2); align-self: center; }
.demo-gloss { display: flex; flex-direction: column; gap: 4px; }
.demo-gloss b { font: 400 18px/1.2 Quicksand, sans-serif; color: rgba(var(--ink-rgb),.9); }
.demo-gloss small { font: 500 11px/1 Quicksand, sans-serif; color: var(--mute-1); }

.demo-audio { border-top: 1px solid var(--line); padding: 14px 18px; display: flex; align-items: center; gap: 14px; }
.demo-play { width: 38px; height: 38px; flex: none; background: var(--accent); color: var(--on-accent);
  border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.demo-track { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.demo-bar { position: relative; height: 16px; display: flex; align-items: center; }
.demo-bar .base { position: absolute; left: 0; right: 0; height: 2px; background: rgba(var(--ink-rgb),.2); border-radius: 3px; }
.demo-bar .done { position: absolute; left: 0; width: 34%; height: 2px; background: var(--accent); border-radius: 3px; }
.demo-bar .loop { position: absolute; left: 22%; width: 26%; top: 0; bottom: 0;
  background: rgba(236,48,19,.14); border-left: 2px solid var(--accent-t); border-right: 2px solid var(--accent-t); border-radius: 4px; }
.demo-loop-label { font: 500 10px/1 Quicksand, sans-serif; color: var(--accent-t); }
.demo-speed { display: flex; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; flex: none; }
.demo-speed span { padding: 6px 10px; font: 500 11px/1 Quicksand, sans-serif; color: var(--mute-1); }
.demo-speed .on { background: var(--accent); color: var(--on-accent); }

/* --- cifras ------------------------------------------------------------ */

.stats .shell { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.stats div { padding: 28px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.stats div:first-child { padding-left: 0; border-left: 0; }
.stats b { font: 700 34px/1 Quicksand, sans-serif; }
.stats span { font: 400 13px/1.4 Quicksand, sans-serif; color: var(--mute-1); }

/* --- secciones ---------------------------------------------------------- */

.section .shell { padding-top: 64px; padding-bottom: 64px; }
.section-lede { margin: 0 0 30px; font: 400 16px/1.55 Quicksand, sans-serif; color: var(--mute-2); max-width: 620px; }

.blocks { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px; }
.block { border: 1px solid var(--line); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; min-height: 150px; }
.block.on { border-color: rgba(236,48,19,.55); background: rgba(236,48,19,.08); }
.block .min { font: 500 10px/1 Quicksand, sans-serif; color: var(--accent-t); }
.block .name { font: 700 13px/1.2 Quicksand, sans-serif; }
.block .what { font: 400 12px/1.45 Quicksand, sans-serif; color: var(--mute-1); }
.block.on .what { color: var(--mute-2); }

/* --- producto: tipografia bilingue ------------------------------------- */

.split .shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.split-copy { display: flex; flex-direction: column; gap: 18px; }
.split-copy .h2 { margin: 0; }
.split-copy p { margin: 0; font: 400 16px/1.55 Quicksand, sans-serif; color: var(--mute-2); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { border: 1px solid var(--edge); border-radius: 8px; padding: 8px 12px;
  font: 500 11px/1 Quicksand, sans-serif; color: var(--mute-1); }

.type-card { border: 1px solid var(--line); background: var(--surf); border-radius: 12px; padding: 26px;
  display: flex; flex-direction: column; gap: 20px; }
.type-row { display: flex; align-items: baseline; gap: 16px; }
.type-row .ru { font-size: 40px; line-height: 1.45; }
.type-row b { font: 400 16px/1.3 Quicksand, sans-serif; color: var(--mute-2); }
.hairline { height: 1px; background: var(--line); }
.traitors { display: flex; gap: 10px; font-family: 'Golos Text', sans-serif; font-size: 30px; line-height: 1.4; flex-wrap: wrap; }
.traitors span { color: var(--accent-t); border-bottom: 2px solid rgba(236,48,19,.55); }
.type-note { font: 400 13px/1.5 Quicksand, sans-serif; color: var(--mute-1); }

/* --- rejilla de prestaciones ------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 10px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px; }
.card b { font: 700 17px/1.2 Quicksand, sans-serif; }
.card span { font: 400 14px/1.5 Quicksand, sans-serif; color: var(--mute-1); }
.mastery { display: flex; gap: 6px; margin-top: 2px; }
.mastery i { width: 26px; height: 10px; border-radius: 3px; }

/* --- precios ------------------------------------------------------------ */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: start; }
.plan { border: 1px solid var(--line); border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; gap: 14px; }
.plan.best { border-color: rgba(236,48,19,.6); background: rgba(236,48,19,.06); }
.plan-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan b { font: 700 17px/1.2 Quicksand, sans-serif; }
.plan .price { font: 700 34px/1 Quicksand, sans-serif; }
.plan .price sup { font-size: .6em; font-weight: 700; top: .08em; position: relative; letter-spacing: 0; }
.plan .price small { font-size: 15px; font-weight: 400; color: var(--mute-1); }
.plan p { margin: 0; font: 400 14px/1.5 Quicksand, sans-serif; color: var(--mute-1); }
.plan.best p { color: var(--mute-2); }
.plan .btn { text-align: left; }
.badge { font: 500 10px/1 Quicksand, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-t); border: 1px solid rgba(236,48,19,.6); border-radius: 6px; padding: 5px 8px;
  white-space: nowrap; }

/* --- preguntas ---------------------------------------------------------- */

.faq .shell { padding-top: 56px; padding-bottom: 56px; display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.faq div { display: flex; flex-direction: column; gap: 8px; }
.faq b { font: 700 15px/1.3 Quicksand, sans-serif; }
.faq span { font: 400 14px/1.5 Quicksand, sans-serif; color: var(--mute-1); }

/* --- cierre ------------------------------------------------------------- */

.closing .shell { padding-top: 72px; padding-bottom: 72px; display: flex;
  align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.closing h2 { margin: 0; font: 700 38px/1.1 Quicksand, sans-serif; letter-spacing: -.025em;
  max-width: 640px; text-wrap: pretty; }

.foot { border-top: 1px solid var(--line); }
.foot .shell { padding-top: 22px; padding-bottom: 22px; display: flex;
  justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot span, .foot a { font: 500 11px/1 Quicksand, sans-serif; color: var(--mute-1); }
.foot nav { display: flex; gap: 20px; }

/* ==========================================================================
   Responsive. Nada de esto viene del diseno: es de escritorio fijo y en movil
   se rompe (rejillas de 7 y 4 columnas, hero de dos columnas, tipos de 52px).
   ========================================================================== */

@media (max-width: 1080px) {
  .blocks { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 960px) {
  :root { --pad: 24px; }
  .hero .shell, .split .shell { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .hero h1 { font-size: 40px; }
  .hero .shell { padding-top: 48px; padding-bottom: 48px; }
  .stats .shell { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cards, .plans, .faq .shell { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .h2, .closing h2 { font-size: 28px; }
  /* La navegacion secundaria se cae; el acceso y la conversion se quedan. */
  .hdr nav, .hdr-right .plain { display: none; }
  .hdr-left { gap: 0; }
}

@media (max-width: 620px) {
  .blocks, .cards, .plans, .faq .shell { grid-template-columns: minmax(0,1fr); }
  .block { min-height: 0; }
  .hero h1 { font-size: 32px; }
  .hero-sub { font-size: 16px; }
  .demo-word .ru { font-size: 40px; }
  .demo-audio { flex-wrap: wrap; }
  .demo-speed { order: 3; }
  .stats .shell { grid-template-columns: minmax(0,1fr); }
  .stats div { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .stats div:first-child { border-top: 0; }
  .closing h2 { font-size: 26px; }
  .theme-btn { padding: 8px; }
}

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