/* =============================================================================
   MiCurso — hoja base del sitio público y del aula.
   Paleta: violeta cálido como color de marca, coral para lo que invita a
   actuar y menta para lo ya logrado. Fondo hueso en vez de blanco puro:
   cansa menos en lecturas largas y hace que las tarjetas blancas se despeguen.
   ========================================================================== */

:root{
  --tinta:#171528;
  --tinta-2:#2C2844;
  --gris:#6B6785;
  --gris-2:#9B97B0;

  --violeta:#6C4DF6;
  --violeta-osc:#5438D9;
  --violeta-cl:#9A7BFF;
  --violeta-nube:#EFEBFF;

  --coral:#FF6B5B;
  --coral-nube:#FFEDEA;
  --menta:#12C2A0;
  --menta-nube:#E1F8F2;
  --sol:#FFB020;
  --sol-nube:#FFF4DF;

  --lienzo:#FBFAFF;
  --nube:#F3F1FB;
  --borde:#E8E4F6;
  --blanco:#fff;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px; --r-full:999px;
  --sombra:0 1px 2px rgba(23,21,40,.04), 0 8px 24px -12px rgba(23,21,40,.14);
  --sombra-alta:0 2px 4px rgba(23,21,40,.05), 0 24px 48px -20px rgba(76,58,180,.28);
  --paso:cubic-bezier(.22,.61,.36,1);

  --ancho:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

body{
  margin:0;
  font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.65; color:var(--tinta);
  background:var(--lienzo);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.display{
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:700; line-height:1.14; letter-spacing:-.022em;
  color:var(--tinta); margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem,5.2vw,3.5rem); }
h2{ font-size:clamp(1.6rem,3.4vw,2.35rem); }
h3{ font-size:1.22rem; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
a{ color:var(--violeta-osc); text-decoration-thickness:1.5px; text-underline-offset:3px; }
img{ max-width:100%; height:auto; display:block; }
.mono{ font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; }

.wrap{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:22px; }
.centro{ text-align:center; }
.solo-lectores{ position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.ico{ flex:none; }

/* --- saltar al contenido: lo primero que encuentra un teclado ------------- */
.saltar{ position:absolute; left:-999px; top:8px; z-index:200;
  background:var(--violeta); color:#fff; padding:10px 18px; border-radius:var(--r-full); }
.saltar:focus{ left:16px; }
:focus-visible{ outline:3px solid var(--violeta-cl); outline-offset:2px; border-radius:4px; }

/* ============================================================== botones === */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:15px; line-height:1;
  padding:13px 22px; border-radius:var(--r-full); border:1.5px solid transparent;
  background:var(--violeta); color:#fff; cursor:pointer; text-decoration:none;
  transition:transform .18s var(--paso), box-shadow .18s var(--paso), background .18s;
  box-shadow:0 6px 16px -8px rgba(108,77,246,.9);
}
.btn:hover{ background:var(--violeta-osc); transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(108,77,246,.85); }
.btn:active{ transform:translateY(0); }
.btn .ico{ width:19px; height:19px; }

.btn-coral{ background:var(--coral); box-shadow:0 6px 16px -8px rgba(255,107,91,.95); }
.btn-coral:hover{ background:#F2513F; box-shadow:0 12px 24px -10px rgba(255,107,91,.9); }
.btn-fantasma{ background:transparent; color:var(--tinta); border-color:var(--borde); box-shadow:none; }
.btn-fantasma:hover{ background:var(--blanco); border-color:var(--violeta-cl); color:var(--violeta-osc); }
.btn-claro{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.34); box-shadow:none;
  backdrop-filter:blur(6px); }
.btn-claro:hover{ background:rgba(255,255,255,.24); }
.btn-lg{ font-size:16.5px; padding:16px 30px; }
.btn-sm{ font-size:13.5px; padding:9px 16px; }
.btn-bloque{ width:100%; }
.btn[disabled],.btn[aria-disabled=true]{ opacity:.5; pointer-events:none; }

/* ============================================================ navegación === */
.nav{ position:sticky; top:0; z-index:90; background:rgba(251,250,255,.82);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s; }
.nav.pegada{ border-bottom-color:var(--borde); background:rgba(251,250,255,.94); }
.nav-in{ max-width:var(--ancho); margin-inline:auto; padding:14px 22px;
  display:flex; align-items:center; gap:18px; }
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--tinta); }
.marca b{ font-family:'Outfit',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.03em; }
.marca b i{ font-style:normal; color:var(--violeta); }

.nav-links{ display:flex; gap:4px; margin-left:auto; }
.nav-links a{ color:var(--gris); text-decoration:none; font-size:14.5px; font-weight:500;
  padding:9px 14px; border-radius:var(--r-full); transition:color .18s, background .18s; }
.nav-links a:hover{ color:var(--tinta); background:var(--nube); }
.nav-acciones{ display:flex; align-items:center; gap:10px; }
.nav-burger{ display:none; margin-left:auto; background:none; border:0; padding:8px; color:var(--tinta); cursor:pointer; }

@media (max-width:900px){
  .nav-burger{ display:block; }
  .nav-links,.nav-acciones{
    position:absolute; left:12px; right:12px; top:calc(100% + 8px);
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg);
    padding:12px; box-shadow:var(--sombra-alta);
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:.2s var(--paso);
  }
  .nav-acciones{ top:auto; }
  .nav.abierta .nav-links{ opacity:1; visibility:visible; transform:none; }
  .nav.abierta .nav-acciones{ position:static; opacity:1; visibility:visible; transform:none;
    border:0; box-shadow:none; padding:0; background:none; }
  .nav-links a{ padding:11px 14px; }
  .nav-in{ flex-wrap:wrap; position:relative; }
}

/* ================================================================== hero === */
.hero{ position:relative; z-index:0; overflow:hidden; padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,88px);
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(108,77,246,.20), transparent 62%),
    radial-gradient(700px 420px at 6% 8%, rgba(255,107,91,.16), transparent 60%),
    radial-gradient(620px 420px at 42% 108%, rgba(18,194,160,.16), transparent 62%),
    var(--lienzo);
}
.hero-in{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,64px); align-items:center; }
@media (max-width:940px){ .hero-in{ grid-template-columns:1fr; } }

.pildora{ display:inline-flex; align-items:center; gap:8px; background:var(--blanco);
  border:1px solid var(--borde); border-radius:var(--r-full); padding:7px 16px 7px 8px;
  font-size:13.5px; font-weight:500; color:var(--gris); margin-bottom:22px; box-shadow:var(--sombra); }
.pildora span{ background:var(--violeta-nube); color:var(--violeta-osc); font-weight:600;
  border-radius:var(--r-full); padding:3px 11px; font-size:12.5px; }

.hero h1 em{ font-style:normal; position:relative; color:var(--violeta); white-space:nowrap; }
.hero h1 em::after{ content:''; position:absolute; left:-2%; right:-2%; bottom:.06em; height:.32em;
  background:var(--sol); opacity:.32; border-radius:var(--r-full); z-index:-1; }
.hero .entrada{ font-size:clamp(1.02rem,1.9vw,1.2rem); color:var(--gris); max-width:36em; margin-bottom:30px; }
.hero-botones{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero-nota{ margin-top:22px; font-size:13.5px; color:var(--gris-2); display:flex; align-items:center; gap:8px; }
.hero-nota .ico{ width:17px; height:17px; color:var(--menta); }

/* tarjeta flotante del hero */
.hero-arte{ position:relative; }
.hero-tarjeta{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-xl);
  padding:24px; box-shadow:var(--sombra-alta); }
.hero-tarjeta-top{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.hero-chip{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:var(--violeta-nube); color:var(--violeta-osc); font-size:22px; }
.hero-barra{ height:7px; border-radius:var(--r-full); background:var(--nube); overflow:hidden; margin-top:6px; }
.hero-barra i{ display:block; height:100%; border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--violeta),var(--violeta-cl)); }
.hero-lista{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.hero-lista li{ display:flex; align-items:center; gap:11px; font-size:14.5px; color:var(--tinta-2);
  background:var(--lienzo); border:1px solid var(--borde); border-radius:14px; padding:11px 14px; }
.hero-lista .ico{ width:18px; height:18px; color:var(--menta); }
.hero-flota{ position:absolute; background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--r-lg); padding:12px 16px; box-shadow:var(--sombra-alta);
  display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:600; }
.hero-flota.a{ bottom:-22px; left:-26px; }
.hero-flota.b{ top:-22px; right:-20px; }
.hero-flota .ico{ width:18px; height:18px; color:var(--coral); }
@media (max-width:940px){ .hero-flota{ display:none; } }

/* ============================================================= secciones === */
.seccion{ padding:clamp(52px,7vw,92px) 0; }
.seccion-nube{ background:var(--nube); }
.seccion-tinta{ background:var(--tinta); color:#fff; }
.seccion-tinta h2,.seccion-tinta h3{ color:#fff; }

.rotulo{ font-family:'Outfit',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violeta); margin:0 0 12px; }
.seccion-tinta .rotulo{ color:var(--violeta-cl); }
.encabezado{ max-width:42rem; margin-bottom:clamp(30px,4vw,48px); }
.encabezado.centrado{ margin-inline:auto; text-align:center; }
.encabezado p{ color:var(--gris); font-size:1.04rem; }
.seccion-tinta .encabezado p{ color:#B9B4D4; }

/* ============================================================== motivos === */
.motivos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:18px; }
.motivo{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg);
  padding:26px; transition:transform .22s var(--paso), box-shadow .22s var(--paso); }
.motivo:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alta); }
.motivo-ico{ width:50px; height:50px; border-radius:15px; display:grid; place-items:center; margin-bottom:16px; }
.motivo-ico .ico{ width:24px; height:24px; }
.motivo h3{ font-size:1.1rem; margin-bottom:7px; }
.motivo p{ font-size:14.6px; color:var(--gris); margin:0; }
.t-violeta{ background:var(--violeta-nube); color:var(--violeta-osc); }
.t-coral{ background:var(--coral-nube); color:#D9452F; }
.t-menta{ background:var(--menta-nube); color:#0A8E75; }
.t-sol{ background:var(--sol-nube); color:#B2740A; }

/* ================================================================ cifras === */
.cifras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; }
.cifra{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg); padding:24px; }
.cifra b{ display:block; font-family:'Outfit',sans-serif; font-size:2.4rem; font-weight:700;
  letter-spacing:-.03em; line-height:1; color:#fff; }
.cifra span{ font-size:14px; color:#B9B4D4; }

/* ================================================================ cursos === */
.rejilla-cursos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:22px; }
.curso-tarjeta{ position:relative; display:flex; flex-direction:column; background:var(--blanco);
  border:1px solid var(--borde); border-radius:var(--r-xl); overflow:hidden; text-decoration:none;
  color:inherit; transition:transform .24s var(--paso), box-shadow .24s var(--paso), border-color .24s; }
.curso-tarjeta:hover{ transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:var(--violeta-cl); }
.curso-portada{ position:relative; aspect-ratio:16/9; background:var(--nube);
  display:grid; place-items:center; overflow:hidden; }
.curso-portada img{ width:100%; height:100%; object-fit:cover; }
.curso-portada .emoji{ font-size:56px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.16)); }
.curso-cuerpo{ padding:22px; display:flex; flex-direction:column; flex:1; gap:10px; }
.curso-cuerpo h3{ font-size:1.16rem; margin:0; }
.curso-cuerpo p{ font-size:14.4px; color:var(--gris); margin:0; flex:1; }
.curso-meta{ display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:var(--gris-2);
  border-top:1px solid var(--borde); padding-top:14px; margin-top:4px; }
.curso-meta span{ display:inline-flex; align-items:center; gap:6px; }
.curso-meta .ico{ width:15px; height:15px; }

.etiqueta{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  letter-spacing:.02em; border-radius:var(--r-full); padding:5px 12px;
  background:var(--nube); color:var(--gris); width:fit-content; }
.etiqueta.viva{ background:var(--violeta-nube); color:var(--violeta-osc); }
.etiqueta.menta{ background:var(--menta-nube); color:#0A8E75; }
.etiqueta.coral{ background:var(--coral-nube); color:#D9452F; }
.etiqueta.sol{ background:var(--sol-nube); color:#B2740A; }
/* El precio lo declara cada curso en su manifiesto; puede decir «Gratis» o
   llevar una cifra. Se pinta neutro a propósito: la plataforma no promete
   nada sobre el costo, solo repite lo que dice el curso. */
.etiqueta.precio{ background:var(--tinta); color:#fff; }
.curso-etiquetas{ display:flex; flex-wrap:wrap; gap:7px; }
.etiqueta-flota{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px); box-shadow:var(--sombra); }

.filtros{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px; }
.filtros a{ font-size:14px; font-weight:500; text-decoration:none; color:var(--gris);
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-full); padding:9px 18px;
  transition:.18s; }
.filtros a:hover{ border-color:var(--violeta-cl); color:var(--violeta-osc); }
.filtros a.on{ background:var(--tinta); border-color:var(--tinta); color:#fff; }

/* Lista de puntos con icono. Vivía en aula.css, pero la usa también la
   portada, que no carga esa hoja: su sitio es la base. */
.aprendizajes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.aprendizajes li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--tinta-2); }
.aprendizajes .ico{ width:19px; height:19px; color:var(--menta); margin-top:3px; }
ul.aprendizajes{ list-style:none; margin:0; padding:0; }

/* ============================================================ practicar ==== */
.practicar-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,60px); align-items:center; }
@media (max-width:940px){ .practicar-in{ grid-template-columns:1fr; } }
.practicar-in .aprendizajes li{ align-items:flex-start; }
.practicar-in .aprendizajes .ico{ color:var(--violeta); }
.practicar-in .aprendizajes b{ display:block; margin-bottom:2px; color:var(--tinta); }

/* Maqueta estática de la terminal del curso. Es del sitio, no del paquete:
   aquí solo sirve para enseñar de qué se habla. */
.demo-term{ background:#12101F; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sombra-alta); }
.demo-term-barra{ display:flex; align-items:center; gap:7px; padding:13px 18px;
  background:#1C1930; border-bottom:1px solid rgba(255,255,255,.08); }
.demo-term-barra i{ width:11px; height:11px; border-radius:50%; }
.demo-term-barra i:nth-child(1){ background:#FF5F57; }
.demo-term-barra i:nth-child(2){ background:#FEBC2E; }
.demo-term-barra i:nth-child(3){ background:#28C840; }
.demo-term-barra span{ margin-left:10px; font-family:'Outfit',sans-serif; font-weight:600;
  font-size:13.5px; color:#fff; }
.demo-term-barra b{ margin-left:auto; font-size:12px; font-weight:600; color:#C9BFFF;
  background:rgba(154,123,255,.18); border:1px solid rgba(154,123,255,.34);
  border-radius:var(--r-full); padding:4px 12px; }
.demo-term pre{ margin:0; padding:20px; font-family:'JetBrains Mono',monospace;
  font-size:13.4px; line-height:1.7; color:#8E89AD; overflow-x:auto; }
.demo-term .p{ color:#9A7BFF; }
.demo-term .c{ color:#fff; }
.demo-term .s{ color:#8E89AD; }
.demo-term .cur{ color:#9A7BFF; }
.demo-term-fb{ display:flex; flex-direction:column; gap:3px; margin:0 18px 18px;
  background:rgba(61,220,151,.12); border:1px solid rgba(61,220,151,.3);
  border-radius:var(--r); padding:13px 16px; font-size:14px; }
.demo-term-fb b{ color:#3DDC97; font-size:13.5px; }
.demo-term-fb span{ color:#B9B4D4; }

/* ================================================================ pasos === */
.pasos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; counter-reset:p; }
.paso{ position:relative; padding-top:14px; }
.paso::before{ counter-increment:p; content:counter(p);
  font-family:'Outfit',sans-serif; font-size:2.6rem; font-weight:700; color:var(--violeta);
  opacity:.22; line-height:1; display:block; margin-bottom:8px; }
.paso h3{ font-size:1.08rem; margin-bottom:6px; }
.paso p{ font-size:14.5px; color:var(--gris); margin:0; }

/* =============================================================== testimonio = */
.citas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.cita{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r-lg); padding:26px; }
.cita blockquote{ margin:0 0 16px; font-size:15.5px; color:var(--tinta-2); }
.cita figcaption{ display:flex; align-items:center; gap:12px; font-size:14px; }
.avatar{ width:42px; height:42px; border-radius:var(--r-full); display:grid; place-items:center;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:15px;
  background:var(--violeta-nube); color:var(--violeta-osc); flex:none; }
.cita figcaption b{ display:block; font-weight:600; }
.cita figcaption span{ color:var(--gris-2); font-size:13px; }

/* ============================================================== preguntas = */
.preguntas{ max-width:46rem; margin-inline:auto; display:grid; gap:10px; }
.pregunta{ background:var(--blanco); border:1px solid var(--borde); border-radius:var(--r); overflow:hidden; }
.pregunta summary{ cursor:pointer; list-style:none; padding:18px 22px; font-weight:600;
  font-family:'Outfit',sans-serif; font-size:15.6px; display:flex; align-items:center; gap:14px; }
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{ content:'+'; margin-left:auto; font-size:22px; color:var(--violeta);
  font-weight:400; transition:transform .2s; }
.pregunta[open] summary::after{ transform:rotate(45deg); }
.pregunta div{ padding:0 22px 20px; font-size:15px; color:var(--gris); }

/* =================================================================== cta === */
.cta{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(36px,5vw,60px);
  background:linear-gradient(128deg,#5438D9,#7C5CFF 52%,#9A7BFF); color:#fff; text-align:center; }
.cta::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(500px 300px at 82% 118%, rgba(255,176,32,.42), transparent 62%),
             radial-gradient(420px 260px at 10% -20%, rgba(255,107,91,.42), transparent 60%); }
.cta > *{ position:relative; z-index:1; }
.cta h2{ color:#fff; }
.cta p{ color:rgba(255,255,255,.88); max-width:36rem; margin-inline:auto; font-size:1.05rem; }

/* ================================================================== pie === */
.pie{ background:var(--tinta); color:#B9B4D4; padding:56px 0 26px; }
.pie-rejilla{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; margin-bottom:38px; }
@media (max-width:760px){ .pie-rejilla{ grid-template-columns:1fr; gap:26px; } }
.pie .marca{ color:#fff; margin-bottom:14px; }
.pie p{ font-size:14.5px; max-width:32em; }
.pie h3{ font-size:14px; color:#fff; text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; }
.pie ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14.5px; }
.pie a{ color:#B9B4D4; text-decoration:none; }
.pie a:hover{ color:#fff; text-decoration:underline; }
.pie li{ display:flex; align-items:center; gap:9px; }
.pie li .ico{ width:17px; height:17px; color:var(--violeta-cl); }
.pie-abajo{ border-top:1px solid rgba(255,255,255,.1); padding-top:22px; font-size:13.5px;
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; }

/* ============================================================== avisos ==== */
.aviso{ display:flex; align-items:flex-start; gap:11px; border-radius:var(--r); padding:14px 17px;
  font-size:14.6px; margin-bottom:20px; border:1px solid; }
.aviso .ico{ width:19px; height:19px; margin-top:2px; }
.aviso-error{ background:var(--coral-nube); border-color:#FFC9C1; color:#A3291A; }
.aviso-ok{ background:var(--menta-nube); border-color:#A9E9DA; color:#07705C; }
.aviso-info{ background:var(--violeta-nube); border-color:#D6CBFF; color:var(--violeta-osc); }
.aviso-sol{ background:var(--sol-nube); border-color:#FFE0A8; color:#8A5A05; }

/* =============================================================== formas === */
.campo{ margin-bottom:18px; }
.campo > label{ display:block; font-size:14px; font-weight:600; margin-bottom:7px; color:var(--tinta-2); }
.campo .ayuda{ font-size:13px; color:var(--gris-2); margin:7px 0 0; }
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
input[type=date],select,textarea{
  width:100%; font:inherit; font-size:15.5px; color:var(--tinta);
  background:var(--blanco); border:1.5px solid var(--borde); border-radius:14px;
  padding:13px 15px; transition:border-color .16s, box-shadow .16s;
}
textarea{ min-height:120px; resize:vertical; line-height:1.6; }
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236B6785' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:42px; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--violeta);
  box-shadow:0 0 0 4px rgba(108,77,246,.15); }
input::placeholder,textarea::placeholder{ color:var(--gris-2); }
.campo-fila{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .campo-fila{ grid-template-columns:1fr; } }

input.cedula,input.codigo{ font-family:'JetBrains Mono',monospace; font-size:20px;
  letter-spacing:.14em; text-align:center; padding-block:16px; }

.acepta{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--gris);
  background:var(--nube); border-radius:var(--r); padding:14px 16px; margin-bottom:20px; }
.acepta input{ width:19px; height:19px; margin-top:2px; accent-color:var(--violeta); flex:none; }

/* ====================================================== acceso / registro = */
.acceso{ min-height:100svh; display:grid; place-items:center; padding:36px 20px;
  background:
    radial-gradient(700px 420px at 84% -6%, rgba(108,77,246,.18), transparent 62%),
    radial-gradient(600px 400px at 8% 104%, rgba(18,194,160,.16), transparent 60%),
    var(--lienzo);
}
.acceso-caja{ width:100%; max-width:520px; background:var(--blanco); border:1px solid var(--borde);
  border-radius:var(--r-xl); padding:clamp(28px,4vw,44px); box-shadow:var(--sombra-alta); }
.acceso-caja h1{ font-size:1.75rem; margin-bottom:8px; }
.acceso-caja .intro{ color:var(--gris); font-size:15.4px; margin-bottom:26px; }
.acceso-marca{ display:flex; justify-content:center; margin-bottom:24px; text-decoration:none; }
.acceso-pie{ margin-top:22px; text-align:center; font-size:14.4px; color:var(--gris); }

.pasos-barra{ display:flex; gap:8px; margin-bottom:26px; }
.pasos-barra i{ flex:1; height:5px; border-radius:var(--r-full); background:var(--nube); }
.pasos-barra i.on{ background:var(--violeta); }
.pasos-barra i.listo{ background:var(--menta); }

.dato-fijo{ background:var(--nube); border-radius:var(--r); padding:14px 16px; margin-bottom:18px;
  font-size:14.5px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dato-fijo b{ font-weight:600; }
.dato-fijo .mono{ color:var(--gris); }