/* Variables, reset y tipografía */
:root {
  --color-primario: #4169E1;
  --color-secundario: #f4f7f6;
  --color-texto: #333333;
  --color-texto-claro: #ffffff;
  --color-borde: #dddddd;
  --font-principal: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --header-height: 70px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-principal);
  color: var(--color-texto);
  line-height: 1.6;
  background-color: var(--color-texto-claro);
  /* font-display: swap lo maneja Google Fonts */
}

/* Párrafos: reducir line-height dentro del párrafo, aumentar margin-bottom entre párrafos */
p {
  line-height: 1.45;
  margin-bottom: 1.25rem;
}

/* Múltiples párrafos consecutivos: mantener separación */
p + p {
  margin-top: 0.5rem;
}

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

ul { list-style: none; }

a { text-decoration: none; color: var(--color-primario); transition: color 0.3s ease; }
a:hover { color: #003e4d; }

/* Foco accesible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(65, 105, 225, 0.3);
  transition: none;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* Títulos */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

/* Utilidad: justificar párrafos informativos */
.text-justified { text-align: justify; }

/* Aplicar justificado a párrafos informativos comunes */
.section-subtitle,
.nosotros-content p,
.contacto-grid p,
.modal-comment,
.card-specs li {
  text-align: justify;
}