/* ==========================================================================
   Twaletta — estilos compartidos (todas las páginas)
   ========================================================================== */

:root {
  /* Marca */
  --rosa: #FF6198;          /* del logo; 2.8:1 sobre blanco: solo acentos, NUNCA texto ni fondo de botón */
  --rosa-oscuro: #B8336A;   /* texto/botones en rosa: 5.65:1 sobre blanco, 5.29:1 sobre --fondo-suave (AA) */
  --verde: #20C2B0;         /* hoja del logo; 2.2:1 sobre blanco: solo acentos (íconos, números de pasos,
                               bordes, fondos suaves). NUNCA como color de texto sobre blanco. */
  --verde-suave: #E6F8F6;

  /* Neutros */
  --texto: #2B2B2B;
  --error: #B3261E;         /* 6.5:1 sobre blanco */
  --fondo: #FFFFFF;
  --fondo-suave: #FFF5F9;

  /* Tipografía */
  --font-titulos: "Quicksand", "Trebuchet MS", system-ui, sans-serif;
  --font-texto: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --contenedor: 1120px;
  --gutter: 1.25rem;
  --radio: 1rem;
}

/* --- Base --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-texto);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-titulos);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
}

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

a { color: var(--rosa-oscuro); }

:focus-visible {
  outline: 3px solid var(--rosa-oscuro);
  outline-offset: 3px;
}

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: var(--gutter);
  top: .5rem;
  z-index: 10;
  background: var(--fondo);
  padding: .5rem 1rem;
  border-radius: .5rem;
}

/* --- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.5rem;
  border: 2px solid var(--rosa-oscuro);
  border-radius: 999px;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.btn--primario {
  background: var(--rosa-oscuro);
  color: #FFFFFF;
}
.btn--primario:hover { background: #9C2A59; border-color: #9C2A59; }

.btn--secundario {
  background: transparent;
  color: var(--rosa-oscuro);
}
.btn--secundario:hover { background: var(--fondo); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  background: var(--fondo);
  border-bottom: 1px solid #F6D3E1;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-block: .875rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.logo img {
  width: auto;
  height: 2.25rem;   /* logotipo: exento de contraste WCAG */
}

@media (min-width: 860px) {
  .logo img { height: 2.75rem; }
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-block;
  padding-block: .5rem;
  font-weight: 700;
  color: var(--texto);
  text-decoration: none;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--rosa-oscuro); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  background: var(--fondo-suave);
  padding-block: 2.5rem 3rem;
}

.hero__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 3.25rem);
}

.hero__sub {
  font-size: 1.125rem;
  max-width: 34rem;
  margin: 0 0 1.75rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.hero__img {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
.hero__img img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: 0 18px 40px rgba(43, 43, 43, .12);
}

.hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: .375rem .875rem;
  border: 1px solid var(--verde);
  border-radius: 999px;
  background: var(--fondo);
  font-weight: 700;
  font-size: .9375rem;
}
.hero__etiqueta::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--verde);
}

@media (min-width: 860px) {
  .hero { padding-block: 4.5rem; }
  .hero__inner { grid-template-columns: 1.1fr 1fr; gap: 3rem; }
}

/* --- Secciones ---------------------------------------------------------- */
.seccion {
  padding-block: 3rem;
}
.seccion--suave { background: var(--fondo-suave); }

.seccion h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.25rem);
  margin-bottom: 1.75rem;
}

@media (min-width: 860px) {
  .seccion { padding-block: 4.5rem; }
}

/* Pasos numerados */
.pasos {
  counter-reset: paso;
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: center;
  gap: .75rem 1rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.pasos li p { margin: 0; grid-column: 2; grid-row: 2; }

.paso__media {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  background: var(--fondo);
  overflow: hidden;
}

.paso__media img { width: auto; height: 100%; object-fit: contain; }
.paso__media .paso__foto--cubrir { width: 100%; object-fit: cover; }
.paso__icono { color: var(--verde); width: 40%; height: auto; }

.pasos li::before {
  content: counter(paso);
  grid-column: 1;
  grid-row: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--verde);
  color: var(--texto);
  font-family: var(--font-titulos);
  font-size: 1.375rem;
}

@media (min-width: 860px) {
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .paso__media { aspect-ratio: 1 / 1; }
}

/* Tarjetas */
.tarjetas {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarjeta {
  background: var(--fondo);
  border-radius: var(--radio);
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(43, 43, 43, .08);
}

.tarjeta__icono {
  color: var(--verde);
  margin-bottom: .75rem;
}

.tarjeta h3 {
  font-size: 1.25rem;
  margin-bottom: .25rem;
}

.tarjeta p { margin: 0; }

@media (min-width: 640px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

.definicion {
  max-width: 46rem;
  margin: 2rem 0 0;
  font-size: 1.0625rem;
}

/* Reseñas */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.resenas__resumen {
  margin: -1rem 0 1.75rem;
  font-size: .9375rem;
}

.resenas {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resena {
  display: flex;
  flex-direction: column;
  border: 1px solid #F6D3E1;
  box-shadow: none;
}

.estrellas {
  display: flex;
  gap: .125rem;
  margin: 0 0 .75rem;
}

.estrellas svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--rosa-oscuro);
  stroke: var(--rosa-oscuro);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.estrellas .estrella--vacia { fill: none; }

.resena h3 { font-size: 1.125rem; margin-bottom: .5rem; }

.resena blockquote {
  margin: 0 0 1rem;
  flex: 1;
}
.resena blockquote p { margin: 0; }

.resena__autor {
  margin: 0;
  font-size: .9375rem;
  font-weight: 700;
}

.resena__verificada {
  font-weight: 400;
  color: var(--rosa-oscuro);
}

@media (min-width: 640px) {
  .resenas { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .resenas { grid-template-columns: repeat(3, 1fr); }
}

/* Preguntas frecuentes */
.faq {
  display: grid;
  gap: .75rem;
  max-width: 46rem;
}

.faq details {
  background: var(--fondo-suave);
  border-radius: var(--radio);
  padding: 0 1.25rem;
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 48px;
  padding-block: .875rem;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rosa-oscuro);
}
.faq details[open] summary::after { content: "−"; }

.faq details p { margin: 0 0 1.125rem; }

.faq-layout {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 860px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; }
}

.tarjeta-negocio {
  padding: 1.5rem;
  border-radius: var(--radio);
  border-top: 4px solid var(--verde);
  background: var(--verde-suave);
}

.tarjeta-negocio__titulo {
  margin: 0 0 .5rem;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 1.25rem;
}

.tarjeta-negocio p:not(.tarjeta-negocio__titulo) { margin: 0 0 1.25rem; }

/* Encabezado de sección con enlace a la derecha ("Del blog" · "Ver todos") */
.seccion__encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-bottom: 1.75rem;
}
.seccion__encabezado h2 { margin: 0; }

.ver-todos {
  font-weight: 700;
}

/* --- Fotografía (inicio) ------------------------------------------------ */
.seccion--verde { background: var(--verde-suave); }

.dos-columnas {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

.foto-grande {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  border-radius: var(--radio);
}

@media (min-width: 860px) {
  .dos-columnas { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .dos-columnas--invertidas > img { order: 2; }
}

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.galeria img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radio);
}

@media (min-width: 860px) {
  .galeria { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.foto-pedidos { max-width: 420px; margin: 1.5rem 0 0; }

/* "Por qué Twaletta": tarjetas en lista + imagen de apoyo */
.por-que {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.tarjetas--lista .tarjeta {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 1rem;
  align-items: start;
  padding: 1.125rem 1.25rem;
}
.tarjetas--lista .tarjeta__icono { grid-row: 1 / span 2; margin: 0; }
.tarjetas--lista .tarjeta h3 { margin-bottom: .125rem; }

.foto-apoyo {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  border-radius: var(--radio);
}

@media (min-width: 640px) {
  .tarjetas.tarjetas--lista { grid-template-columns: 1fr; gap: .75rem; }
}

@media (min-width: 860px) {
  .por-que { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .por-que .foto-apoyo { order: -1; }
}

/* --- Páginas internas --------------------------------------------------- */
.titulo-pagina {
  font-size: clamp(2rem, 6vw, 3rem);
}

.intro {
  font-size: 1.125rem;
  max-width: 40rem;
  margin: 0 0 1rem;
}

/* --- Dónde comprar ------------------------------------------------------ */
.resumen-tiendas {
  font-size: 1.125rem;
  margin: 0 0 .5rem;
}

.aviso {
  margin: 0 0 1.75rem;
  font-size: .9375rem;
}

.nav-estados ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-estados a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .375rem 1rem;
  border: 1px solid #F6D3E1;
  border-radius: 999px;
  background: var(--fondo);
  color: var(--texto);
  font-weight: 700;
  font-size: .9375rem;
  text-decoration: none;
}
.nav-estados a:hover { border-color: var(--rosa-oscuro); color: var(--rosa-oscuro); }

.estados {
  display: grid;
  gap: .75rem;
}

.estado {
  border: 1px solid #F6D3E1;
  border-radius: var(--radio);
  padding: 0 1.25rem;
  scroll-margin-top: 1rem;
}

.estado summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
  padding-block: .75rem;
  cursor: pointer;
  list-style: none;
}
.estado summary::-webkit-details-marker { display: none; }

.estado summary h2 {
  font-size: 1.25rem;
  margin: 0;
}

.estado__total {
  margin-left: auto;
  font-size: .9375rem;
}

.estado summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--rosa-oscuro);
}
.estado[open] summary::after { content: "−"; }

.ciudades {
  display: grid;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
}

.ciudad h3 {
  font-size: 1rem;
  margin: 0 0 .25rem;
  color: var(--rosa-oscuro);
}

.ciudad ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ciudad li { padding-block: .125rem; }

@media (min-width: 640px) {
  .ciudades { grid-template-columns: repeat(2, 1fr); }
  .ciudad--muchas { grid-column: 1 / -1; }
  .ciudad--muchas ul { columns: 2; column-gap: 1.5rem; }
}

@media (min-width: 860px) {
  .ciudades { grid-template-columns: repeat(3, 1fr); }
  .ciudad--muchas ul { columns: 3; }
}

/* En escritorio cada estado se muestra siempre abierto (sin acordeón).
   Solo donde el navegador soporta ::details-content; si no, queda el acordeón. */
@supports selector(::details-content) {
  @media (min-width: 860px) {
    .estado::details-content { content-visibility: visible; }
    .estado summary { cursor: default; pointer-events: none; }
    .estado summary::after { content: none; }
  }
}

.farmacias {
  margin-top: 2rem;
  padding: 0 1.25rem 1rem;
  border: 1px solid #F6D3E1;
  border-radius: var(--radio);
}
.farmacias h2 {
  font-size: 1.25rem;
  margin: 0;
  padding-block: 1rem .5rem;
}
.farmacias ul { margin: 0; padding: 0; list-style: none; }
.farmacias li { padding-block: .125rem; }

.cta-final { margin: 2.5rem 0 0; }

/* --- Tarjetas de 3 (distribuidores) -------------------------------------- */
.tarjeta__titulo {
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
}

@media (min-width: 860px) {
  .tarjetas--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- Pedidos: tabla de precios ------------------------------------------ */
.tabla-precios {
  max-width: 32rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
}

.tabla-precios table {
  width: 100%;
  border-collapse: collapse;
  background: var(--fondo);
  border-radius: var(--radio);
  overflow: hidden;
}

.tabla-precios caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: .5rem;
}

.tabla-precios th,
.tabla-precios td {
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #F6D3E1;
}
.tabla-precios tbody tr:last-child th,
.tabla-precios tbody tr:last-child td { border-bottom: 0; }

.tabla-precios thead th {
  font-size: .875rem;
  color: var(--rosa-oscuro);
}

.tabla-precios td:last-child {
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 1.25rem;
}

.nota {
  margin: .5rem 0 0;
  font-size: .9375rem;
}

/* --- Formularios -------------------------------------------------------- */
.form {
  display: grid;
  gap: 1.25rem;
  max-width: 46rem;
}

.form__fila {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .form__fila { grid-template-columns: repeat(2, 1fr); }
  .form__fila--3 { grid-template-columns: repeat(3, 1fr); }
}

.campo {
  display: grid;
  gap: .375rem;
  align-content: start;
  margin: 0;
  min-width: 0;
}

.campo > label,
.campo legend {
  font-weight: 700;
}

.opcional { font-weight: 400; }

.campo input:not([type="radio"]),
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: .625rem .875rem;
  border: 1px solid #8A8A8A;   /* 3.5:1 sobre blanco: borde de control (WCAG 1.4.11) */
  border-radius: .625rem;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
}

.campo textarea { resize: vertical; }

.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: 3px solid var(--rosa-oscuro);
  outline-offset: 1px;
  border-color: var(--rosa-oscuro);
}

.campo input:user-invalid,
.campo textarea:user-invalid {
  border-color: var(--error);
  border-width: 2px;
}

.campo--opciones {
  border: 0;
  padding: 0;
}
.campo--opciones legend { padding: 0; margin-bottom: .375rem; }
.campo--opciones label {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
}
.campo--opciones input { width: 1.25rem; height: 1.25rem; accent-color: var(--rosa-oscuro); }

/* Honeypot: fuera de pantalla, no con display:none (algunos bots lo detectan). */
.form__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form .btn { justify-self: start; }

.form__estado {
  margin: 0;
  min-height: 1.5em;
}
.form__estado--error { color: var(--error); font-weight: 700; }

.form__gracias {
  max-width: 46rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radio);
  background: var(--fondo-suave);
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 1.25rem;
}

.form__legal {
  margin: 0;
  font-size: .9375rem;
}

/* --- Aviso de privacidad ------------------------------------------------ */
.legal {
  max-width: 46rem;
}

.legal h2 {
  font-size: 1.375rem;
  margin: 2.25rem 0 .75rem;
}

.legal p,
.legal ul { margin: 0 0 1rem; }

.legal li { margin-bottom: .375rem; }

.legal__actualizado {
  font-size: .9375rem;
}

/* --- Blog --------------------------------------------------------------- */
.migas {
  margin: 0 0 1rem;
  font-size: .9375rem;
}

.articulo .contenedor > * {
  max-width: 46rem;
}

.articulo__meta {
  margin: 0 0 1.5rem;
  font-size: .9375rem;
}

.articulo__imagen {
  width: 100%;
  border-radius: var(--radio);
  margin: 0 0 2rem;
}

.articulo__cuerpo h2 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.articulo__cuerpo h3 { font-size: 1.25rem; margin: 1.75rem 0 .5rem; }
.articulo__cuerpo h4 { font-size: 1.0625rem; margin: 1.5rem 0 .5rem; }
.articulo__cuerpo p,
.articulo__cuerpo ul,
.articulo__cuerpo ol,
.articulo__cuerpo blockquote { margin: 0 0 1rem; }
.articulo__cuerpo li { margin-bottom: .375rem; }
.articulo__cuerpo a { overflow-wrap: anywhere; }
.articulo__cuerpo blockquote {
  padding-left: 1rem;
  border-left: 3px solid var(--verde);
}
.articulo__cuerpo hr {
  border: 0;
  border-top: 1px solid #F6D3E1;
  margin: 2rem 0;
}

.articulo__cta {
  margin-top: 2.5rem;
  padding: 1.5rem;
  border-radius: var(--radio);
  background: var(--fondo-suave);
}

.articulo__cta-titulo {
  margin: 0 0 1rem;
  font-family: var(--font-titulos);
  font-weight: 700;
  font-size: 1.25rem;
}

.articulo__cta .hero__ctas { margin: 0; }

.entradas {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .entradas { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .entradas { grid-template-columns: repeat(3, 1fr); }
}

.entrada {
  display: flex;
  flex-direction: column;
  border: 1px solid #F6D3E1;
  box-shadow: none;
}

.entrada__imagen {
  width: calc(100% + 3rem);
  max-width: none;
  margin: -1.5rem -1.5rem 1rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radio) var(--radio) 0 0;
}

.seccion .entrada__titulo {
  font-size: 1.125rem;
  margin: 0 0 .25rem;
}

.entrada__titulo a {
  color: var(--texto);
  text-decoration: none;
}
.entrada__titulo a:hover { color: var(--rosa-oscuro); }

.entrada .articulo__meta { margin-bottom: .5rem; }
.entrada p:last-child { margin: 0; }

/* --- 404 ---------------------------------------------------------------- */
.enlaces-404 {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--texto);
  color: #FFFFFF;
  padding-block: 2rem;
  font-size: .9375rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem 2rem;
}

.site-footer__marca {
  display: grid;
  gap: .75rem;
}

.site-footer__marca img {
  width: auto;
  height: 2.5rem;
}

.site-footer nav ul { max-width: 34rem; }

/* En escritorio todos los enlaces del pie caben en una línea. */
@media (min-width: 1024px) {
  .site-footer nav ul { max-width: none; flex-wrap: nowrap; }
  .site-footer a { white-space: nowrap; }
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a { color: #FFFFFF; }
.site-footer p { margin: 0; }