/* Estilos de las páginas públicas de Mi ESCOM (aviso de privacidad y eliminación de cuenta). */
:root {
  --guinda: #6F1D46;
  --guinda-oscuro: #3D0F26;
  --guinda-claro: #9A2F63;
  --dorado: #FFC800;
  --texto: #3B3340;
  --fondo: #F1E8EE;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.65;
}

.encabezado {
  background: linear-gradient(135deg, var(--guinda-claro) 0%, var(--guinda) 55%, var(--guinda-oscuro) 100%);
  text-align: center;
  padding: 36px 20px 40px;
  color: #fff;
}

.insignia {
  display: inline-block;
  background: #fff;
  border-radius: 20px;
  padding: 14px 24px;
}

.insignia img { display: block; height: auto; max-width: 100%; }

.lema {
  margin: 22px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #F5D98A;
}

.encabezado h1 {
  margin: 6px 0 0;
  font-size: 32px;
  font-weight: 800;
}

.encabezado h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 16px auto 0;
  background: var(--dorado);
  border-radius: 2px;
}

.tarjeta {
  max-width: 760px;
  margin: -18px auto 0;
  background: #fff;
  border-radius: 20px;
  padding: 32px 36px 40px;
  box-shadow: 0 6px 24px rgba(61, 15, 38, 0.12);
  position: relative;
}

.tarjeta h2 {
  margin: 0;
  color: var(--guinda);
  font-size: 28px;
  font-weight: 800;
}

.version {
  margin: 4px 0 24px;
  color: #7A6E7F;
  font-size: 14px;
}

.tarjeta h3 {
  margin: 28px 0 6px;
  color: var(--guinda);
  font-size: 18px;
}

.tarjeta p, .tarjeta li { font-size: 16px; }
.tarjeta ol, .tarjeta ul { padding-left: 22px; }
.tarjeta li { margin: 4px 0; }

a { color: var(--guinda); font-weight: 600; }
a:hover { color: var(--guinda-claro); }

.pie {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 0 20px 40px;
  text-align: center;
  font-size: 13px;
  color: #7A6E7F;
}

.pie p { margin: 4px 0; }

@media (max-width: 600px) {
  .tarjeta { margin: -18px 12px 0; padding: 24px 20px 32px; }
  .encabezado h1 { font-size: 26px; }
}