/* ============================================================================
   components.css — Botones, badges, chips, estrellas, formularios.
   Verde = acción protagonista. Rojo = solo stakes.
   ============================================================================ */

/* ---------------------------------- Botones --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--peso-medio);
  font-size: 1rem; line-height: 1; text-align: center;
  /* PILDORA, no rectangulo redondeado. El buscador de la cabecera ya es una
     pildora (999px) y los botones iban a 12px: dos formas distintas para dos
     cosas que se pulsan igual. Con el mismo radio la barra deja de parecer una
     pieza de otro sitio. */
  padding: 0.85rem 1.55rem; border-radius: var(--radio-pill);
  /* El borde baja de 2px a 1.5px: en una pildora un contorno grueso se lee como
     un sello, no como un boton. */
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave),
              box-shadow var(--dur-rapida) var(--ease-suave),
              border-color var(--dur-rapida) var(--ease-suave);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primario = VERDE (protagonista).
   SIN el resplandor verde de antes (--sombra-verde): un halo de color alrededor
   de cada boton primario hacia que la pagina pareciera iluminada por dentro. Se
   queda una sombra corta y neutra —la que tendria un objeto apoyado— y el color
   pleno hace el trabajo de destacar. */
.btn--primario {
  background: var(--verde); color: #fff;
  box-shadow: 0 1px 2px rgba(15, 32, 57, .12);
}
.btn--primario:hover { background: var(--verde-700); box-shadow: 0 3px 8px rgba(15, 32, 57, .16); }

/* Secundario = contorno fino, sin relleno. En la pareja «relleno + contorno» la
   jerarquia la marca el relleno; si el contorno tambien pesa, compiten. */
.btn--secundario {
  background: transparent; color: var(--color-texto); border-color: var(--color-borde-fuerte);
}
.btn--secundario:hover { border-color: var(--verde); color: var(--verde-700); background: var(--verde-50); }

/* Sobre fondo oscuro */
.seccion--dark .btn--secundario,
.btn--ghost-inv {
  color: #fff; border-color: rgba(255,255,255,.4);
}
.seccion--dark .btn--secundario:hover,
.btn--ghost-inv:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* Azul institucional (B2B) */
.btn--marca { background: var(--azul); color: #fff; }
.btn--marca:hover { background: var(--azul-800); }

.btn--bloque { width: 100%; }
.btn--lg { padding: 1.05rem 1.8rem; font-size: 1.0625rem; }
.btn--sm { padding: 0.6rem 1rem; font-size: 0.9375rem; }

/* ---------------------------------- Badges ---------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-display); font-weight: var(--peso-medio);
  font-size: 0.75rem; letter-spacing: .02em;
  padding: 0.35em 0.7em; border-radius: var(--radio-pill);
  background: var(--gris-200); color: var(--color-texto);
}
/* Badge certificado (verde — firma de marca) */
.badge--cert {
  background: var(--verde-50); color: var(--verde-inst);
  border: 1px solid var(--verde-100);
}
.badge--cert svg { width: 14px; height: 14px; }
.badge--norma { background: var(--azul); color: #fff; }
.badge--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); }

/* Badge de stakes (ROJO — solo urgencia real, uno por pieza) */
.badge--stakes {
  background: var(--rojo); color: #fff;
  box-shadow: 0 4px 12px rgba(244,41,70,.3);
}
.badge--stakes .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: pulso 1.6s var(--ease-suave) infinite;
}
@keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .badge--stakes .dot { animation: none; } }

/* ----------------------------- Chips de credencial -------------------------- */
.cred-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: 0.8125rem; font-weight: var(--peso-medio);
  padding: 0.4em 0.8em; border-radius: var(--radio-pill);
  background: #fff; border: 1px solid var(--color-borde); color: var(--color-texto-suave);
}
.seccion--dark .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #E4EAF6; }

/* ---------------------------------- Estrellas ------------------------------- */
.stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.star { width: 16px; height: 16px; }
.star.is-full { fill: #F5A623; }
.star.is-half { fill: url(#half); fill: #F5A623; opacity: .55; }
.star.is-empty { fill: var(--gris-300); }
.stars-count { font-size: 0.875rem; color: var(--color-texto-suave); margin-left: .4em; vertical-align: middle; }
.seccion--dark .stars-count { color: var(--color-texto-inv-suave); }

/* ---------------------------------- Formularios ----------------------------- */
.campo { display: flex; flex-direction: column; gap: var(--space-2); }
.campo label { font-weight: var(--peso-medio); font-size: 0.9375rem; }
.input {
  width: 100%; padding: 0.85rem 1rem;
  background: #fff; color: var(--color-texto);
  border: 1.5px solid var(--color-borde-fuerte); border-radius: var(--radio);
  transition: border-color var(--dur-rapida) var(--ease-suave), box-shadow var(--dur-rapida) var(--ease-suave);
}
.input::placeholder { color: var(--gris-300); }
.input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }

.select-wrap { position: relative; display: inline-block; }
.select-wrap select {
  appearance: none; padding: 0.6rem 2.4rem 0.6rem 1rem;
  background: #fff; border: 1.5px solid var(--color-borde-fuerte); border-radius: var(--radio);
  font-weight: var(--peso-medio); cursor: pointer;
}
.select-wrap select:hover { border-color: var(--color-texto-suave); }
.select-wrap select:focus-visible { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-100); }
.select-wrap::after {
  content: "▾"; position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--color-texto-suave);
}

/* ---------------------- Enlace de acento (firma GSS) ------------------------ */
.enlace-acento {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--font-display); font-weight: var(--peso-medio);
  color: var(--verde-700); transition: color var(--dur-rapida), gap var(--dur-rapida);
}
.enlace-acento:hover { color: var(--verde-inst); gap: .6em; }

/* --------------------------------- Tarjeta base ----------------------------- */
.card {
  background: var(--color-superficie); border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-sm);
  transition: transform var(--dur) var(--ease-suave), box-shadow var(--dur) var(--ease-suave);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }

/* Marca de dato placeholder (pendiente de cifra real) */
.is-placeholder { opacity: .9; }

/* ---- Pulido premium de la vitrina (playbook UX) ---- */
/* Foco visible en teclado, sin mover el layout */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(22, 163, 74, .30); border-radius: 6px; }
/* Botones con vida */
.btn { transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Cifras estables en precios y stats */
.course-card__price, .cd-price__num, .cart-summary, .course-card__price-old { font-variant-numeric: tabular-nums; }
/* Titulares sin huerfanas; parrafos con mejor corte */
h1, h2, .course-card__title { text-wrap: balance; }
p { text-wrap: pretty; }
/* Toggle mostrar contrasena (acceso) */
.passwrap { position: relative; }
.passwrap .input { padding-right: 2.6rem; width: 100%; }
.passeye { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: .35rem; cursor: pointer; color: #94A3B8; border-radius: 8px; }
.passeye:hover { color: #1B2736; }
.passeye.is-on { color: #16A34A; }
.passeye svg { width: 19px; height: 19px; display: block; }

/* ================= AVISO DE COOKIES =================
   Abajo y ancho, no un modal que tape la pagina: el visitante puede leer el
   sitio mientras decide. Un modal a pantalla completa fuerza el clic, y un
   consentimiento forzado no es consentimiento. */
.ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  padding: 0 1rem 1rem;
  animation: ck-entra .32s cubic-bezier(.22, 1, .36, 1) both;
}
.ck.is-fuera { animation: ck-sale .24s ease-in both; }
@keyframes ck-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ck-sale  { from { opacity: 1; } to { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .ck, .ck.is-fuera { animation: none; } }

.ck__caja {
  display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
  width: min(1100px, 100%); margin: 0 auto; box-sizing: border-box;
  padding: 1.15rem 1.35rem;
  background: #FFFFFF; border: 1px solid #DDE5EF; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(9, 20, 40, .18);
}
.ck__txt { flex: 1 1 22rem; min-width: 0; }
.ck__txt b { display: block; margin-bottom: .3rem; font-size: .95rem; color: #0F2039; }
.ck__txt p { margin: 0 0 .4rem; font-size: .86rem; line-height: 1.6; color: #5B6B84; max-width: 68ch; }
.ck__txt a { font-size: .82rem; font-weight: 700; color: #16A34A; }

/* Los dos botones con el MISMO peso visual. Si rechazar cuesta mas que
   aceptar —letra pequena, gris sobre gris, enlace en vez de boton— la
   eleccion esta amanada y el consentimiento no vale. */
.ck__btns { flex: 0 0 auto; display: flex; gap: .6rem; flex-wrap: wrap; }
.ck__b {
  min-height: 44px; padding: 0 1.15rem; box-sizing: border-box;
  border: 1.5px solid #CBD5E1; border-radius: 10px; background: #fff;
  font-family: inherit; font-size: .88rem; font-weight: 700; color: #0F2039;
  cursor: pointer; transition: border-color .14s, background .14s, box-shadow .14s;
}
.ck__b:hover { border-color: #94A3B8; background: #F8FAFC; }
.ck__b:focus-visible { outline: 2px solid #16A34A; outline-offset: 2px; }
.ck__b--si { border-color: #16A34A; background: #16A34A; color: #fff; }
.ck__b--si:hover { border-color: #15803D; background: #15803D; box-shadow: 0 8px 20px rgba(22, 163, 74, .28); }

@media (max-width: 620px) {
  .ck { padding: 0 .6rem .6rem; }
  .ck__caja { padding: 1rem 1.05rem; gap: .9rem; }
  .ck__btns { width: 100%; }
  .ck__b { flex: 1 1 0; }
}

/* Los enlaces legales del pie, en la misma linea del copyright. */
.ef__legal { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.ef__legal .sep { opacity: .45; }