/* ============================================================
   EL DIRECTOR DE IA — sistema de diseño compartido
   Concepto: plano técnico / manual de vuelo
   ============================================================ */
:root {
  --tinta: #101f33;
  --tinta-suave: #47576b;
  --papel: #f3f6f8;
  --papel-alto: #ffffff;
  --plano: #1d5fa8;
  --plano-suave: #dce9f5;
  --senal: #e05f1a;
  --senal-suave: #fdeadd;
  --exito: #14735a;
  --exito-suave: #ddf0e9;
  --alerta: #bb3527;
  --alerta-suave: #fbe6e2;
  --linea: rgba(16, 31, 51, 0.14);
  --linea-fuerte: rgba(16, 31, 51, 0.28);

  --display: "Archivo", sans-serif;
  --texto: "Public Sans", sans-serif;
  --mono: "JetBrains Mono", monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --radio: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--plano); color: #fff; }
a { color: var(--plano); }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 var(--s5); }

.eyebrow {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--plano);
  display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4);
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--senal); flex: none; }

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(243, 246, 248, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.nav-inner {
  max-width: 1080px; margin: 0 auto; padding: var(--s3) var(--s5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}
.nav-logo {
  font-family: var(--display); font-weight: 800; font-size: 15px;
  text-decoration: none; color: var(--tinta);
  display: flex; align-items: center; gap: var(--s2); white-space: nowrap;
}
.nav-logo .chip {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em;
  background: var(--tinta); color: var(--papel); padding: 2px 8px; border-radius: 4px;
}
.nav-links { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a {
  font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--tinta-suave);
  transition: color .2s;
}
.nav-links a:hover { color: var(--tinta); }
.nav-links a.cta { background: var(--senal); color: #fff; padding: 7px 14px; border-radius: 999px; }
.nav-links a.cta:hover { background: #c8520f; color: #fff; }
.nav-links a.cta-alt { background: var(--tinta); color: #fff; padding: 7px 14px; border-radius: 999px; }
@media (max-width: 820px) { .nav-links a:not(.cta):not(.cta-alt) { display: none; } }

/* ============ HERO ============ */
.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px 0 var(--s8);
  background:
    linear-gradient(rgba(29, 95, 168, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 95, 168, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(29, 95, 168, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 95, 168, 0.09) 1px, transparent 1px),
    var(--papel);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
  overflow: hidden;
}
.hero.grande { min-height: 92vh; }
.hero-tag {
  font-family: var(--mono); font-size: 12.5px; color: var(--tinta-suave);
  letter-spacing: 0.1em; margin-bottom: var(--s5);
}
.hero-tag b { color: var(--senal); font-weight: 700; }
.hero h1 {
  font-size: clamp(38px, 6.6vw, 80px);
  font-weight: 900; font-stretch: 92%;
  letter-spacing: -0.02em; max-width: 920px; margin-bottom: var(--s5);
}
.hero h1 .tachado { position: relative; color: var(--tinta-suave); white-space: nowrap; }
.hero h1 .tachado::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 54%;
  height: 5px; background: var(--senal); transform: rotate(-1.5deg); border-radius: 3px;
}
.hero h1 .resalta { color: var(--plano); }
.hero p.lede {
  font-size: clamp(17px, 2vw, 20px); color: var(--tinta-suave);
  max-width: 660px; margin-bottom: var(--s6);
}
.hero-ctas { display: flex; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--display); font-weight: 700; font-size: 16px;
  padding: 14px 26px; border-radius: 999px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  border: none; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-primario { background: var(--senal); color: #fff; box-shadow: 0 4px 14px rgba(224, 95, 26, 0.3); }
.btn-tinta { background: var(--tinta); color: #fff; }
.btn-secundario { background: transparent; color: var(--tinta); border: 2px solid var(--linea-fuerte); }
.btn-secundario:hover { border-color: var(--tinta); }

.aviso-universal {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 12px; color: var(--tinta-suave);
  border: 1px dashed var(--linea-fuerte); border-radius: 999px;
  padding: 6px 14px;
}
.aviso-universal b { color: var(--plano); }

/* ============ SECCIONES ============ */
section { padding: var(--s8) 0; }
section.grande { padding: var(--s9) 0; }
section.alt { background: var(--papel-alto); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.sec-head { max-width: 740px; margin-bottom: var(--s6); }
.sec-head h2 { font-size: clamp(28px, 4.2vw, 42px); font-weight: 800; letter-spacing: -0.015em; margin-bottom: var(--s3); }
.sec-head p { color: var(--tinta-suave); font-size: 17.5px; }

/* ============ ECUACIÓN ============ */
.ecuacion { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--s4); align-items: stretch; }
.eq-op { display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 36px; font-weight: 800; color: var(--senal); }
.eq-card { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--s5); }
.eq-card .tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px; display: inline-block; margin-bottom: var(--s3);
}
.eq-card h3 { font-size: 20px; font-weight: 800; margin-bottom: var(--s2); }
.eq-card p { font-size: 14.5px; color: var(--tinta-suave); }
.eq-card.gris .tag { background: rgba(16,31,51,0.08); color: var(--tinta-suave); }
.eq-card.azul { border-color: var(--plano); border-width: 2px; }
.eq-card.azul .tag { background: var(--plano-suave); color: var(--plano); }
.eq-card.verde { border-color: var(--exito); border-width: 2px; }
.eq-card.verde .tag { background: var(--exito-suave); color: var(--exito); }
@media (max-width: 860px) { .ecuacion { grid-template-columns: 1fr; } .eq-op { font-size: 26px; } }
.ecuacion-nota {
  margin-top: var(--s5); padding: var(--s5);
  background: var(--tinta); color: var(--papel); border-radius: var(--radio);
  font-size: 16.5px; max-width: 780px;
}
.ecuacion-nota b { color: #ffb98a; }

/* ============ QUIZ ============ */
.quiz {
  background: var(--tinta); color: var(--papel); border-radius: 16px;
  padding: var(--s7) var(--s6); position: relative; overflow: hidden;
}
.quiz::before {
  content: ""; position: absolute; inset: 0; opacity: 0.12; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 20%, black, transparent 65%);
  mask-image: radial-gradient(ellipse at 80% 20%, black, transparent 65%);
}
.quiz > * { position: relative; }
.quiz .eyebrow { color: #9cc4ee; }
.quiz h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; margin-bottom: var(--s2); }
.quiz .sub { color: rgba(243,246,248,0.75); margin-bottom: var(--s6); max-width: 560px; }
.quiz-progreso { display: flex; gap: var(--s2); margin-bottom: var(--s5); }
.quiz-progreso .paso { height: 5px; flex: 1; border-radius: 3px; background: rgba(255,255,255,0.18); transition: background .3s; }
.quiz-progreso .paso.activo { background: var(--senal); }
.quiz-pregunta { font-family: var(--display); font-size: 21px; font-weight: 700; margin-bottom: var(--s5); min-height: 56px; }
.quiz-opciones { display: grid; gap: var(--s3); }
.quiz-op {
  text-align: left; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radio);
  color: var(--papel); font-family: var(--texto); font-size: 15.5px;
  padding: var(--s4) var(--s5); cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.quiz-op:hover { background: rgba(255,255,255,0.14); border-color: var(--senal); transform: translateX(4px); }
.quiz-resultado { display: none; }
.quiz-resultado.visible { display: block; }
.quiz-form.oculto { display: none; }
.resultado-nivel { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 5vw, 50px); color: var(--senal); margin-bottom: var(--s2); }
.quiz-resultado p { color: rgba(243,246,248,0.85); max-width: 620px; margin-bottom: var(--s5); }
.quiz-reiniciar {
  background: none; border: none; color: #9cc4ee; font-family: var(--mono);
  font-size: 13px; cursor: pointer; text-decoration: underline; margin-left: var(--s4);
}

/* ============ NIVELES (condensados con details) ============ */
.nivel-det {
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel-alto); margin-bottom: var(--s4); overflow: hidden;
}
section.alt .nivel-det { background: var(--papel); }
.nivel-det summary {
  list-style: none; cursor: pointer; padding: var(--s5);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center;
  transition: background .15s;
}
.nivel-det summary::-webkit-details-marker { display: none; }
.nivel-det summary:hover { background: rgba(29,95,168,0.04); }
.nivel-det .n-num {
  font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px var(--senal);
}
.nivel-det .n-titulo { font-family: var(--display); font-weight: 800; font-size: 20px; }
.nivel-det .n-etapa { font-family: var(--mono); font-size: 11.5px; color: var(--plano); letter-spacing: 0.06em; }
.nivel-det .n-esencia { font-size: 14.5px; color: var(--tinta-suave); margin-top: 4px; }
.nivel-det .n-flecha { font-family: var(--mono); font-size: 18px; color: var(--tinta-suave); transition: transform .2s; }
.nivel-det[open] .n-flecha { transform: rotate(90deg); }
.nivel-cuerpo { padding: 0 var(--s5) var(--s5); border-top: 1px solid var(--linea); }
.nivel-cuerpo ul.claves { list-style: none; padding-top: var(--s4); display: grid; gap: var(--s3); }
.nivel-cuerpo ul.claves li { padding-left: 26px; position: relative; font-size: 15px; }
.nivel-cuerpo ul.claves li::before { content: "→"; position: absolute; left: 0; color: var(--senal); font-weight: 700; }
.nivel-cuerpo ul.claves li b { color: var(--tinta); }
.pasas {
  margin-top: var(--s4); background: var(--exito-suave); border: 1px solid rgba(20,115,90,0.25);
  border-radius: 8px; padding: var(--s4); font-size: 14.5px;
}
.pasas b { color: var(--exito); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 6px; }

/* ============ PRÁCTICAS DENTRO DE UN NIVEL ============ */
.practicas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s5); }
@media (max-width: 820px) { .practicas { grid-template-columns: 1fr; } }
.practica {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: var(--s4) var(--s5);
}
section.alt .practica { background: var(--papel-alto); }
.practica h4 { font-size: 16.5px; font-weight: 800; margin-bottom: var(--s2); display: flex; gap: var(--s2); align-items: baseline; }
.practica h4 .p-clave { font-family: var(--mono); font-size: 11.5px; color: var(--senal); font-weight: 700; flex: none; }
.practica p { font-size: 14.5px; color: var(--tinta-suave); }
.practica p + p { margin-top: var(--s2); }
.practica b { color: var(--tinta); }

.nivel-cierre { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
@media (max-width: 820px) { .nivel-cierre { grid-template-columns: 1fr; } }
.caja-errores, .caja-pasas { border-radius: var(--radio); padding: var(--s4) var(--s5); }
.caja-errores { background: var(--alerta-suave); border: 1px solid rgba(187,53,39,0.25); }
.caja-pasas { background: var(--exito-suave); border: 1px solid rgba(20,115,90,0.25); }
.caja-errores h5, .caja-pasas h5 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: var(--s3); font-weight: 700;
}
.caja-errores h5 { color: var(--alerta); }
.caja-pasas h5 { color: var(--exito); }
.caja-errores ul, .caja-pasas ul { list-style: none; }
.caja-errores li, .caja-pasas li {
  font-size: 14px; padding-left: 22px; position: relative; margin-bottom: var(--s2); color: var(--tinta);
}
.caja-errores li:last-child, .caja-pasas li:last-child { margin-bottom: 0; }
.caja-errores li::before { content: "✕"; position: absolute; left: 0; color: var(--alerta); font-weight: 700; }
.caja-pasas li::before { content: "✓"; position: absolute; left: 0; color: var(--exito); font-weight: 700; }

/* ============ MAL / BIEN ============ */
.malbien { margin-top: var(--s3); display: grid; gap: var(--s2); }
.mb { font-family: var(--mono); font-size: 13px; line-height: 1.55; border-radius: 8px; padding: var(--s3) var(--s4); border-left: 3px solid; }
.mb .mb-tag { font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.mb.mal { background: var(--alerta-suave); border-color: var(--alerta); color: #6e2018; }
.mb.mal .mb-tag { color: var(--alerta); }
.mb.bien { background: var(--exito-suave); border-color: var(--exito); color: #0c4a39; }
.mb.bien .mb-tag { color: var(--exito); }

/* ============ 7 ERRORES ============ */
.errores-grid { display: grid; gap: var(--s4); }
.error-card {
  display: grid; grid-template-columns: 52px 1fr 1fr; gap: var(--s5);
  background: var(--papel-alto); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: var(--s5); align-items: start;
}
section.alt .error-card { background: var(--papel); }
.error-card .en { font-family: var(--display); font-weight: 900; font-size: 34px; color: transparent; -webkit-text-stroke: 1.5px var(--alerta); line-height: 1; }
.error-card h4 { font-size: 17.5px; font-weight: 800; margin-bottom: var(--s1); }
.error-card .sintoma { font-size: 14px; color: var(--tinta-suave); }
.error-card .costo { font-family: var(--mono); font-size: 11.5px; color: var(--alerta); margin-top: var(--s2); display: block; }
.error-card .fix { font-size: 14px; }
.error-card .fix .fx {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--exito); font-weight: 700; display: block; margin-bottom: 4px;
}
@media (max-width: 820px) { .error-card { grid-template-columns: 1fr; gap: var(--s3); } .error-card .en { font-size: 26px; } }

/* ============ ANATOMÍA ============ */
.anatomia { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s6); align-items: start; }
@media (max-width: 900px) { .anatomia { grid-template-columns: 1fr; } }
.anatomia-piezas { display: grid; gap: var(--s3); }
.pieza { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--linea); }
.pieza .pk { font-family: var(--mono); font-size: 12px; font-weight: 700; color: #fff; background: var(--plano); padding: 3px 10px; border-radius: 4px; white-space: nowrap; }
.pieza .pd { font-size: 14.5px; color: var(--tinta-suave); }
.pieza .pd b { color: var(--tinta); }
.prompt-demo {
  background: var(--tinta); color: #dbe7f3; border-radius: var(--radio);
  padding: var(--s5); font-family: var(--mono); font-size: 13px; line-height: 1.75;
  position: sticky; top: 90px;
}
.prompt-demo .pl { color: #ffb98a; font-weight: 700; }
.prompt-demo .cm { color: #7d93ab; }

/* ============ PRINCIPIOS ============ */
.principios { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
@media (max-width: 760px) { .principios { grid-template-columns: 1fr; } }
.principio { padding: var(--s4) var(--s5); background: var(--papel-alto); border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); display: flex; gap: var(--s4); align-items: baseline; }
section.alt .principio { background: var(--papel); }
.principio .pn { font-family: var(--mono); font-size: 12px; color: var(--senal); font-weight: 700; flex: none; }
.principio p { font-size: 15px; }
.principio p b { font-family: var(--display); font-weight: 800; }

/* ============ BANDA DE RUTAS ============ */
.banda-rutas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 760px) { .banda-rutas { grid-template-columns: 1fr; } }
.ruta-card {
  text-decoration: none; color: var(--tinta);
  border: 2px solid var(--linea-fuerte); border-radius: var(--radio);
  padding: var(--s6); background: var(--papel-alto);
  transition: border-color .2s, transform .15s;
  display: block;
}
section.alt .ruta-card { background: var(--papel); }
.ruta-card:hover { transform: translateY(-3px); }
.ruta-card.tecnica:hover { border-color: var(--plano); }
.ruta-card.humana:hover { border-color: var(--senal); }
.ruta-card .rc-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; display: inline-block; padding: 3px 10px; border-radius: 4px; margin-bottom: var(--s3); }
.ruta-card.tecnica .rc-tag { background: var(--plano-suave); color: var(--plano); }
.ruta-card.humana .rc-tag { background: var(--senal-suave); color: var(--senal); }
.ruta-card h3 { font-size: 22px; font-weight: 800; margin-bottom: var(--s2); }
.ruta-card p { font-size: 15px; color: var(--tinta-suave); margin-bottom: var(--s3); }
.ruta-card .rc-ir { font-family: var(--display); font-weight: 700; font-size: 15px; }
.ruta-card.tecnica .rc-ir { color: var(--plano); }
.ruta-card.humana .rc-ir { color: var(--senal); }

/* ============ GLOSARIO ============ */
.glosario { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 900px) { .glosario { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .glosario { grid-template-columns: 1fr; } }
.termino { background: var(--papel-alto); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--s4) var(--s5); }
section.alt .termino { background: var(--papel); }
.termino h4 { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--plano); margin-bottom: var(--s2); }
.termino p { font-size: 14px; color: var(--tinta-suave); }
.termino p b { color: var(--tinta); }

/* ============ TABLA DE COMANDOS ============ */
.sello {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--exito-suave); border: 1px solid rgba(20,115,90,0.3);
  color: var(--exito); font-family: var(--mono); font-size: 12px;
  padding: 6px 14px; border-radius: 999px; margin-bottom: var(--s4);
}
.filtros { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.filtro-btn {
  font-family: var(--mono); font-size: 12px; padding: 6px 14px;
  border-radius: 999px; border: 1px solid var(--linea-fuerte);
  background: transparent; color: var(--tinta-suave); cursor: pointer;
  transition: all .15s;
}
.filtro-btn:hover { border-color: var(--plano); color: var(--plano); }
.filtro-btn.activo { background: var(--plano); border-color: var(--plano); color: #fff; }
.filtro-busca {
  width: 100%; max-width: 340px; padding: 10px 16px; margin-bottom: var(--s4);
  border: 1px solid var(--linea-fuerte); border-radius: 8px;
  font-family: var(--mono); font-size: 14px; background: var(--papel-alto); color: var(--tinta);
}
.filtro-busca:focus { outline: 2px solid var(--plano); border-color: var(--plano); }
.tabla-cmd { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla-cmd th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: left; color: var(--tinta-suave); padding: var(--s3) var(--s4);
  border-bottom: 2px solid var(--linea-fuerte);
}
.tabla-cmd td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-cmd td.cmd { font-family: var(--mono); font-weight: 700; font-size: 13.5px; color: var(--plano); white-space: nowrap; }
.tabla-cmd td.cat { font-family: var(--mono); font-size: 11px; color: var(--tinta-suave); white-space: nowrap; }
.tabla-cmd tr.oculta { display: none; }
@media (max-width: 700px) {
  .tabla-cmd thead { display: none; }
  .tabla-cmd tr { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--linea); }
  .tabla-cmd td { display: block; border: none; padding: 2px var(--s2); }
}

/* ============ BLOQUES DE CÓDIGO / PROMPT COPIABLE ============ */
.bloque-codigo {
  position: relative; background: var(--tinta); color: #dbe7f3;
  border-radius: var(--radio); padding: var(--s5);
  font-family: var(--mono); font-size: 13px; line-height: 1.7;
  overflow-x: auto; margin: var(--s4) 0;
  white-space: pre-wrap;
}
.bloque-codigo .cm { color: #7d93ab; }
.bloque-codigo .hl { color: #ffb98a; }
.btn-copiar {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--mono); font-size: 11px; padding: 5px 12px;
  background: rgba(255,255,255,0.12); color: #dbe7f3;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; cursor: pointer;
  transition: background .15s;
}
.btn-copiar:hover { background: rgba(255,255,255,0.22); }
.btn-copiar.copiado { background: var(--exito); border-color: var(--exito); color: #fff; }

/* ============ DÍA 0 / DETAILS GENÉRICOS ============ */
.paso-det { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel-alto); margin-bottom: var(--s3); overflow: hidden; }
section.alt .paso-det { background: var(--papel); }
.paso-det summary {
  list-style: none; cursor: pointer; padding: var(--s4) var(--s5);
  display: flex; align-items: center; gap: var(--s4);
  font-family: var(--display); font-weight: 700; font-size: 17px;
}
.paso-det summary::-webkit-details-marker { display: none; }
.paso-det summary .p-num { font-family: var(--mono); font-size: 12px; color: var(--senal); font-weight: 700; flex: none; }
.paso-det summary .p-flecha { margin-left: auto; font-family: var(--mono); color: var(--tinta-suave); transition: transform .2s; }
.paso-det[open] summary .p-flecha { transform: rotate(90deg); }
.paso-det .paso-cuerpo { padding: 0 var(--s5) var(--s5); border-top: 1px solid var(--linea); font-size: 15px; }
.paso-det .paso-cuerpo > p { margin-top: var(--s4); color: var(--tinta-suave); }
.paso-det .paso-cuerpo b { color: var(--tinta); }

/* ============ TESTIMONIO ============ */
.testimonio {
  border-left: 4px solid var(--senal);
  background: var(--papel-alto); border-radius: 0 var(--radio) var(--radio) 0;
  padding: var(--s6); max-width: 780px;
}
section.alt .testimonio { background: var(--papel); }
.testimonio p { font-size: 17px; margin-bottom: var(--s4); }
.testimonio p:last-of-type { margin-bottom: 0; }
.testimonio .destacada {
  font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.8vw, 26px);
  line-height: 1.35; color: var(--tinta); padding: var(--s3) 0;
}
.testimonio .destacada span { color: var(--plano); }
.testimonio .firma { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-suave); margin-top: var(--s4); }

/* ============ CASOS DE USO ============ */
.casos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); counter-reset: caso; }
@media (max-width: 900px) { .casos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .casos { grid-template-columns: 1fr; } }
.caso {
  background: var(--papel-alto); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: var(--s4) var(--s5);
  counter-increment: caso; position: relative;
}
section.alt .caso { background: var(--papel); }
.caso::before {
  content: counter(caso, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--senal);
  display: block; margin-bottom: var(--s2);
}
.caso h4 { font-size: 16px; font-weight: 800; margin-bottom: var(--s1); }
.caso p { font-size: 13.5px; color: var(--tinta-suave); }
.caso .mb { margin-top: var(--s3); }

/* ============ PASOS NUMERADOS ============ */
.pasos-lista { display: grid; gap: var(--s4); max-width: 780px; }
.paso-item { display: grid; grid-template-columns: 48px 1fr; gap: var(--s4); align-items: start; }
.paso-item .pi-num {
  font-family: var(--display); font-weight: 900; font-size: 26px;
  color: transparent; -webkit-text-stroke: 1.5px var(--plano);
  line-height: 1.3;
}
.paso-item h4 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.paso-item p { font-size: 15px; color: var(--tinta-suave); }
.paso-item p b { color: var(--tinta); }

/* ============ COMPROMISO ============ */
.compromiso {
  background: var(--senal-suave); border: 1px dashed var(--senal);
  border-radius: var(--radio); padding: var(--s5) var(--s6);
  max-width: 780px; font-size: 16px;
}
.compromiso b { font-family: var(--display); }

/* ============ FOOTER ============ */
footer { background: var(--tinta); color: rgba(243,246,248,0.72); padding: var(--s8) 0 var(--s6); font-size: 14.5px; }
footer .f-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s6); margin-bottom: var(--s6); }
@media (max-width: 760px) { footer .f-grid { grid-template-columns: 1fr; } }
footer a { color: #9cc4ee; }
footer .f-logo { font-family: var(--display); font-weight: 800; color: var(--papel); font-size: 17px; margin-bottom: var(--s2); }
footer .f-titulo { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243,246,248,0.5); margin-bottom: var(--s3); }
footer .f-contador {
  border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--s5);
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px; color: rgba(243,246,248,0.6);
}
footer .f-contador b { color: #ffb98a; font-weight: 700; }

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
:focus-visible { outline: 3px solid var(--plano); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}