/* ═══════════════════════════════════════════════════════════════════
   ESSAM · Iteración 2 — Tema del Campus del Alumno
   Coherente con la identidad: marfil, verde profundo, dorado.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --cp-bg: #EDF4EF;
  --cp-bg2: #F2EAD8;
  --cp-text: #1C2E22;
  --cp-muted: #476857
  --cp-gold: #7A6440
  --cp-gold2: #967F55
  --cp-dark: #1A3D28;
  --cp-border: rgba(42, 90, 58, 0.18);
  --cp-vio4: #0F2A1A;
  --cp-shadow: rgba(26, 61, 40, 0.15);
  --cp-locked: rgba(42, 90, 58, 0.45);
  --cp-gold3: #5c4a2c;
}

body {
  margin: 0;
  background-color: var(--cp-bg);
  background-image: url('assets/texture.jpg');
  color: var(--cp-text);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.65;
}

h1, h2, h3, .cp-brand, .cp-unit-label {
  font-family: 'Cinzel', serif;
}

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* ── Cabecera ── */
.cp-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem 0; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--cp-border);
}
.cp-brand {
  font-family: 'Cinzel', serif; font-size: 1.05rem; letter-spacing: 0.14em;
  color: var(--cp-dark); text-transform: uppercase;
}
.cp-back a {
  color: var(--cp-muted); text-decoration: none; font-size: 0.9rem;
  border: 1px solid var(--cp-border); border-radius: 4px; padding: 0.3rem 0.8rem;
  transition: color 0.2s, border-color 0.2s;
}
.cp-back a:hover { color: var(--cp-gold); border-color: var(--cp-gold2); }

/* ── Dodecaedro de progreso ── */
.cp-dodeca {
  display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
  background: linear-gradient(160deg, rgba(234, 244, 238, 0.75), rgba(244, 250, 246, 0.85));
  border: 1px solid var(--cp-border); border-radius: 12px;
  padding: 1.8rem 2rem; margin-bottom: 2.2rem;
  box-shadow: 0 6px 28px var(--cp-shadow);
}
.cp-dodeca-text { flex: 1 1 320px; min-width: 260px; }
.cp-dodeca-text h2 {
  margin: 0 0 0.5rem; font-size: 1.5rem; color: var(--cp-dark);
  letter-spacing: 0.06em;
}
.cp-dodeca-text p { margin: 0 0 1.2rem; color: var(--cp-muted); font-size: 0.98rem; }
.cp-progbar-wrap {
  height: 8px; background: rgba(42, 90, 58, 0.12); border-radius: 99px; overflow: hidden;
  margin-bottom: 0.5rem;
}
.cp-progbar {
  height: 100%; background: linear-gradient(90deg, var(--cp-gold2), var(--cp-gold));
  border-radius: 99px; transition: width 0.6s ease;
}
.cp-prog-label { font-size: 0.85rem; color: var(--cp-dark); font-family: 'Cinzel', serif; letter-spacing: 0.05em; }
.cp-dodeca-host {
  width: 400px; height: 400px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.cp-dodeca-host canvas { display: block; }
.cp-tonenote {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(26, 61, 40, 0.88); color: #F4EFD8; padding: 0.3rem 0.9rem;
  border-radius: 99px; font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 0.08em;
  animation: cpFadeIn 0.3s ease;
}
@keyframes cpFadeIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Grid de unidades ── */
.cp-unidades h2 {
  text-align: center; font-size: 1.35rem; color: var(--cp-dark);
  letter-spacing: 0.08em; margin: 0 0 1.4rem;
}
.cp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.cp-card {
  background: rgba(255, 253, 248, 0.85); border: 1px solid var(--cp-border);
  border-radius: 10px; padding: 1.3rem 1.4rem;
  box-shadow: 0 4px 16px var(--cp-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
  display: flex; flex-direction: column;
}
.cp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 26px var(--cp-shadow); }
.cp-card-head { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 0.7rem; }
.cp-icon {
  font-size: 1.2rem; width: 34px; height: 34px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(42, 90, 58, 0.08);
  border: 1px solid var(--cp-border); color: var(--cp-dark);
}
.cp-card.dominada .cp-icon { background: rgba(168, 147, 100, 0.22); border-color: var(--cp-gold2); }
.cp-card-title { flex: 1; }
.cp-unit-label {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cp-gold); margin-bottom: 0.1rem;
}
.cp-card-title > div:last-child {
  font-family: 'Cinzel', serif; font-size: 1.02rem; color: var(--cp-dark); line-height: 1.35;
}
.cp-obj { margin: 0 0 0.7rem; font-size: 0.92rem; color: var(--cp-text); }
.cp-lectura, .cp-practica, .cp-cierre { font-size: 0.88rem; margin-bottom: 0.55rem; }
.cp-lectura ul { margin: 0.25rem 0 0; padding-left: 1.2rem; color: var(--cp-muted); }
.cp-lectura li { margin-bottom: 0.15rem; }
.cp-practica { color: var(--cp-dark); }
.cp-cierre { color: var(--cp-muted); font-style: italic; margin-bottom: 0.9rem; }
.cp-actions {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem;
  border-top: 1px solid var(--cp-border);
}
.cp-btn {
  font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.06em;
  padding: 0.42rem 0.8rem; border-radius: 6px; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border: 1px solid var(--cp-border); background: transparent; color: var(--cp-dark);
}
.cp-btn-mod:hover { background: rgba(42, 90, 58, 0.1); border-color: var(--cp-gold2); color: var(--cp-gold); }
.cp-btn-libro:hover { background: rgba(168, 147, 100, 0.12); border-color: var(--cp-gold); }
.cp-btn-estado { margin-left: auto; }
.cp-card:not(.dominada) .cp-btn-estado:hover { background: var(--cp-dark); color: #F4EFD8; border-color: var(--cp-dark); }
.cp-card.dominada .cp-btn-estado { background: rgba(168, 147, 100, 0.18); border-color: var(--cp-gold2); color: var(--cp-gold); }

/* ── Footer: leyenda y reinicio ── */
.cp-footer {
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.2rem;
  justify-content: space-between; align-items: center;
  color: var(--cp-muted); font-size: 0.85rem;
}
.cp-legend strong { color: var(--cp-dark); }
.cp-btn-reset { border-color: rgba(139, 26, 26, 0.35); color: #8B1A1A; }
.cp-btn-reset:hover { background: rgba(139, 26, 26, 0.08); }

/* ── Móvil ── */
@media (max-width: 860px) {
  .cp-dodeca { flex-direction: column; }
  .cp-dodeca-host { width: 300px; height: 300px; }
  .cp-grid { grid-template-columns: 1fr; }
}

/* ══ Iteración 3 — Ventana de evaluación ══ */
.cp-exam-win{
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 42, 26, 0.72);
}
.cp-exam-win > *{ box-sizing: border-box; }
.cp-exam-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--cp-border);
}
.cp-exam-title{
  font-family: 'Cinzel', serif; font-size: 1.05rem;
  color: var(--cp-dark); text-transform: uppercase; letter-spacing: 0.06em;
}
.cp-exam-close{
  background: none; border: 1px solid var(--cp-border); border-radius: 4px;
  color: var(--cp-muted); font-size: 0.9rem; cursor: pointer;
  padding: 0.15rem 0.55rem; line-height: 1.4;
}
.cp-exam-close:hover{ color: var(--cp-gold); border-color: var(--cp-gold2); }
.cp-exam-body{
  background: var(--cp-bg); border-radius: 10px;
  margin: 0.5rem; max-width: 560px; width: calc(100% - 1rem);
  padding: 1.4rem 1.6rem 1.8rem;
  box-shadow: 0 10px 40px rgba(15, 42, 26, 0.35);
  max-height: calc(100vh - 2rem); overflow-y: auto;
}
.cp-exam-progress{
  height: 6px; border-radius: 3px; background: var(--cp-bg2);
  overflow: hidden; margin-bottom: 0.8rem;
}
.cp-exam-progress-fill{
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cp-gold2), var(--cp-gold));
  transition: width 0.35s ease;
}
.cp-exam-pnum{ font-size: 0.8rem; color: var(--cp-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.cp-exam-pq{ font-size: 1.15rem; color: var(--cp-dark); margin: 0.4rem 0 1rem; line-height: 1.45; }
.cp-exam-opts{ display: flex; flex-direction: column; gap: 0.5rem; }
.cp-exam-opt{
  display: block; width: 100%; text-align: left;
  background: var(--cp-bg2); border: 1px solid var(--cp-border);
  border-radius: 8px; padding: 0.65rem 0.9rem;
  font-family: 'EB Garamond', Georgia, serif; font-size: 1rem;
  color: var(--cp-text); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.cp-exam-opt:hover{ background: #EFE6CE; border-color: var(--cp-gold2); }
.cp-exam-opt:disabled{ opacity: 0.55; cursor: default; }
.cp-exam-audio{ margin-bottom: 0.9rem; }
.cp-exam-play{
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--cp-dark); color: var(--cp-bg); border: none;
  border-radius: 999px; padding: 0.45rem 1rem;
  font-family: 'EB Garamond', Georgia, serif; font-size: 0.95rem;
  cursor: pointer; margin-bottom: 0.7rem;
}
.cp-exam-play:hover{ background: var(--cp-muted); }
/* Iteración 34 — fondo verde pastel con letra oscura (pedido del autor); selector
   doble clase para no afectar a otros botones del campus. */
.cp-exam-opt.cp-exam-siguiente{
  margin-top: 0.9rem;
  background: #9DC3A6; color: #1C2E22; font-weight: 700; text-align: center;
  border: 1px solid rgba(74, 122, 88, 0.5); padding: 0.55rem 1.2rem;
  text-shadow: none;
  letter-spacing: 0.04em;
}
.cp-exam-opt.cp-exam-siguiente:hover{ background: #85B090; opacity: 1; }
.cp-exam-fb{
  border-radius: 8px; padding: 0.75rem 0.95rem; margin-top: 1rem;
  font-size: 0.98rem; line-height: 1.4;
}
.cp-fb-ok{ background: rgba(74, 122, 88, 0.14); border: 1px solid rgba(74, 122, 88, 0.4); color: var(--cp-dark); }
.cp-fb-mal{ background: rgba(140, 60, 60, 0.10); border: 1px solid rgba(140, 60, 60, 0.35); color: #4A2525; }

/* Emparejamiento */
.cp-exam-match{ display: flex; flex-direction: column; gap: 0.7rem; }
.cp-exam-row{
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--cp-bg2); border: 1px solid var(--cp-border);
  border-radius: 8px; padding: 0.5rem 0.8rem;
}
.cp-exam-izq{ flex: 1 1 40%; font-weight: 600; color: var(--cp-dark); }
.cp-exam-elegida{ flex: 1 1 60%; font-size: 0.95rem; color: var(--cp-muted); }
.cp-match-ok{ color: var(--cp-dark); }
.cp-exam-derechas{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cp-exam-der{
  background: var(--cp-bg); border: 1px solid var(--cp-gold2);
  border-radius: 6px; padding: 0.35rem 0.7rem;
  font-family: 'EB Garamond', Georgia, serif; font-size: 0.92rem;
  color: var(--cp-dark); cursor: pointer;
}
.cp-exam-der:hover{ background: #EFE6CE; }
.cp-exam-comprobar{
  margin-top: 0.2rem;
  background: var(--cp-dark); color: var(--cp-bg);
  text-align: center;
}

/* Resultado */
.cp-exam-result{ text-align: center; padding: 0.4rem 0; }
.cp-exam-nota{
  font-family: 'Cinzel', serif; font-size: 2.6rem; color: var(--cp-gold);
  line-height: 1.1;
}
.cp-res-mal .cp-exam-nota{ color: #7A4A4A; }
.cp-exam-det{ margin: 0.3rem 0 0.7rem; font-size: 0.85rem; color: var(--cp-muted); }
.cp-exam-msg{ font-size: 1.02rem; line-height: 1.45; color: var(--cp-text); margin: 0 0 1.1rem; }
.cp-exam-actions{ display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.cp-exam-cerrar{
  background: var(--cp-dark); color: var(--cp-bg); text-align: center; flex: 1 1 40%; min-width: 150px;
}
.cp-exam-repetir{
  background: var(--cp-bg2); color: var(--cp-dark); text-align: center; flex: 1 1 40%; min-width: 150px;
  border-color: var(--cp-gold2);
}
/* Iteración 34 — botón «Intentar de nuevo»: nunca se queda el alumno
   bloqueado tras un fallo; reactiva las opciones sin penalizar. */
.cp-exam-reintentar{
  margin-top: 0.6rem;
  background: #9DC3A6; color: #1C2E22; text-align: center;
  border-color: rgba(74, 122, 88, 0.5);
  flex: 1 1 40%; min-width: 150px;
}

/* Tarjeta bloqueada y botón de evaluación */
.cp-bloqueada{ opacity: 0.62; filter: grayscale(0.35); }
.cp-bloqueada-btn{ cursor: not-allowed !important; opacity: 0.6; }
.cp-eval-hecha{ background: rgba(74, 122, 88, 0.14) !important; }
/* Iteración 16 — nota de clase vista en la tarjeta de unidad */
.cp-clase-vista{ display:inline-block; font-size:.78rem; color:#7a8c5a; background:rgba(74,122,88,0.10); border:1px solid rgba(74,122,88,0.30); border-radius:10px; padding:2px 9px; margin-left:6px; }
/* Iteración 16 — zona de acceso rápido (Aula / Biblioteca / Certificado) dentro de las unidades */
.cp-acceso-rapido{ margin-top:2.2rem; background:#fff; border:1px solid var(--cp-border); border-radius:16px; padding:1.4rem 1.6rem; }
.cp-acceso-rapido h3{ font-size:1.05rem; color:var(--cp-dark); margin:0 0 0.9rem; letter-spacing:0.04em; }
.cp-acceso-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0.9rem; }
.cp-acceso-item{ display:flex; flex-direction:column; align-items:flex-start; gap:0.2rem; padding:0.85rem 1rem; background:#f2efe6; border:1px solid rgba(194,162,82,0.35); border-radius:12px; text-decoration:none; color:#2a3a2e; font-weight:600; font-size:0.95rem; transition:background .15s; }
.cp-acceso-item span[data-i18n$='_sub']{ font-weight:400; font-size:0.78rem; color:#6b6f62; }
.cp-acceso-item:hover{ background:#eee7cf; }
@media (max-width:640px){ .cp-acceso-grid{ grid-template-columns:1fr; } }
.cp-btn-eval{
  background: var(--cp-bg2); border: 1px dashed var(--cp-gold2);
  border-radius: 6px; padding: 0.35rem 0.75rem;
  font-family: 'EB Garamond', Georgia, serif; font-size: 0.92rem;
  color: var(--cp-gold); cursor: pointer;
}
.cp-btn-eval:hover{ background: #EFE6CE; }

/* ── Aviso no bloqueante (sustituye a alert/confirm nativos) ── */
.cp-aviso{
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  z-index: 9999;
  max-width: 92vw;
  padding: 14px 26px;
  background: var(--cp-gold2);
  color: #2b2b26;
  border-radius: 10px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  box-shadow: 0 8px 30px rgba(30, 40, 30, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.cp-aviso.cp-aviso-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Cierre del curso (Iteración 6) ── */
.cp-cerrado {
  margin: 2.4rem 0 2rem; padding: 2.2rem 2rem; text-align: center;
  background: linear-gradient(160deg, rgba(234, 244, 238, 0.85), rgba(250, 244, 224, 0.9));
  border: 2px solid var(--cp-gold2); border-radius: 14px;
  box-shadow: 0 8px 36px var(--cp-shadow);
}
.cp-cerrado h2 { color: var(--cp-gold); margin: 0 0 0.5rem; }
.cp-acciones-cierre { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 1.1rem 0 0.6rem; }
.cp-btn-cert {
  font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; border-radius: 6px; padding: 0.55rem 1.3rem;
  background: var(--cp-dark); color: #F5F0E0; border: 1px solid var(--cp-dark);
  text-decoration: none; display: inline-block;
  transition: background 0.2s, border-color 0.2s;
}
.cp-btn-cert:hover { background: #224d33; }
.cp-btn-cert.secondary {
  background: transparent; color: var(--cp-dark); border: 1px solid var(--cp-muted);
}
.cp-btn-cert.secondary:hover { border-color: var(--cp-gold2); color: var(--cp-gold); }
.cp-logro { font-size: 0.95rem; color: var(--cp-gold); margin-top: 0.8rem; }

/* ── Selector de idioma ES/EN (Iteración de corrección) ── */
.cp-btn-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.9rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(42, 90, 58, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--cp-ink, #1d3326);
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
}
.cp-btn-lang:hover { background: rgba(42, 90, 58, 0.1); border-color: var(--cp-gold2, #8b9364); }
@media (prefers-color-scheme: dark) {
  .cp-btn-lang { background: rgba(29, 51, 38, 0.7); color: #e9e6da; }
  .cp-btn-lang:hover { background: rgba(42, 90, 58, 0.45); }
}

/* ══ Iteración 22 — Recurso permanente «Círculo de Quintas» ══ */
.cp-quintas-float {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 9000;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(42, 90, 58, 0.4);
  background: rgba(255, 255, 255, 0.85);
  color: #2a5a3a;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(42, 90, 58, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* Icono de los doce tonos (reemplaza la estrella de seis puntas, v=2): círculo con 12 puntos. */
.cp-q-ico svg {
  vertical-align: -0.18em;
  margin-right: 0.3rem;
}
.cp-quintas-float:hover {
  background: rgba(237, 244, 239, 0.98);
  border-color: var(--cp-gold2, #8b9364);
  box-shadow: 0 6px 18px rgba(42, 90, 58, 0.28);
}
@media (prefers-color-scheme: dark) {
  .cp-quintas-float { background: rgba(29, 51, 38, 0.85); color: #e9e6da; }
}
.cp-q-panel {
  position: fixed;
  right: 1.1rem;
  bottom: 4.6rem;
  z-index: 9001;
  width: min(440px, calc(100vw - 2.2rem));
  max-height: calc(100vh - 6rem);
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(42, 90, 58, 0.3);
  background: #fffef9;
  box-shadow: 0 12px 40px rgba(42, 90, 58, 0.28);
  animation: cp-q-in 0.22s ease-out;
}
@keyframes cp-q-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.cp-q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(42, 90, 58, 0.18);
}
.cp-q-title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--cp-dark);
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.cp-q-close {
  border: none;
  background: none;
  font-size: 1.1rem;
  color: var(--cp-muted);
  cursor: pointer;
  padding: 0 0.2rem;
  line-height: 1;
}
.cp-q-close:hover { color: var(--cp-gold); }
.cp-q-body { padding: 0.9rem 1rem 1rem; }
.cp-q-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(42, 90, 58, 0.2);
}
.cp-q-desc {
  margin: 0.6rem 0 0.7rem;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  color: var(--cp-muted);
  font-style: italic;
  line-height: 1.45;
}
.cp-q-dl {
  display: block;
  text-align: center;
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--cp-gold2, #8b9364);
  background: rgba(139, 147, 100, 0.08);
  color: #3f5144;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  text-decoration: none;
  margin-bottom: 0.55rem;
}
.cp-q-dl:hover { background: rgba(139, 147, 100, 0.2); }
.cp-q-btn-cerrar {
  display: block;
  width: 100%;
  padding: 0.45rem;
  border-radius: 10px;
  border: 1px solid rgba(42, 90, 58, 0.35);
  background: transparent;
  color: var(--cp-dark);
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  cursor: pointer;
}
.cp-q-btn-cerrar:hover { background: rgba(42, 90, 58, 0.08); }
@media (prefers-color-scheme: dark) {
  .cp-q-panel { background: #22332a; }
}
@media (max-width: 520px) {
  .cp-quintas-float { right: 0.7rem; bottom: 0.7rem; font-size: 0.85rem; padding: 0.45rem 0.85rem; }
  .cp-q-panel { right: 0.5rem; bottom: 3.8rem; width: calc(100vw - 1rem); }
}