/* =====================================================================
   AQP FIBRA – PALETA DE COLORES
   Variables CSS para el sitio web
   Versión 1.0 · 20/10/2026
   Valores aproximados, tomados del material gráfico del cliente.
   Uso: enlazar este archivo antes del resto de estilos del sitio.
   ===================================================================== */

:root {
  /* ---------- 1. Azules y celestes (base de la marca) ---------- */
  --aqp-azul-profundo: #0A2A6E;    /* cabecera, pie de página, texto */
  --aqp-azul-principal: #1553D6;   /* títulos, enlaces, secciones destacadas */
  --aqp-azul-vivo: #2A7DE8;        /* degradados, botones secundarios, hover */
  --aqp-celeste: #4DB4F2;          /* iconos, líneas de detalle, resaltados */
  --aqp-celeste-claro: #D8ECFA;    /* fondos de sección, tarjetas */
  --aqp-blanco: #FFFFFF;           /* fondo base, texto sobre azul */

  /* ---------- 2. Acentos (usar con moderación) ---------- */
  --aqp-verde: #14A82E;            /* botón principal de contacto */
  --aqp-rojo: #E3212E;             /* precios y promociones */
  --aqp-morado: #6A2EBF;           /* solo para diferenciar un plan */

  /* ---------- 3. Degradado de portada ---------- */
  --aqp-degradado-portada: linear-gradient(
    135deg,
    var(--aqp-azul-profundo) 0%,
    var(--aqp-azul-principal) 55%,
    var(--aqp-celeste) 100%
  );

  /* ---------- 4. Roles (qué color va en cada elemento) ---------- */
  --color-fondo: var(--aqp-blanco);
  --color-fondo-alterno: var(--aqp-celeste-claro);
  --color-fondo-oscuro: var(--aqp-azul-profundo);

  --color-texto: var(--aqp-azul-profundo);
  --color-texto-sobre-oscuro: var(--aqp-blanco);
  --color-titulo: var(--aqp-azul-principal);
  --color-enlace: var(--aqp-azul-principal);
  --color-icono: var(--aqp-celeste);

  --color-boton-principal: var(--aqp-verde);
  --color-boton-principal-texto: var(--aqp-blanco);
  --color-boton-secundario: var(--aqp-azul-vivo);
  --color-boton-secundario-texto: var(--aqp-blanco);

  --color-oferta: var(--aqp-rojo);
  --color-oferta-texto: var(--aqp-blanco);
  --color-plan-especial: var(--aqp-morado);

  --color-foco: var(--aqp-azul-vivo);

  /* ---------- 5. Neutros (agregados en la revisión de diseño; no cambian los valores anteriores) ---------- */
  --aqp-gris-azulado: #4F6283;        /* texto secundario (6.2:1 sobre blanco, 5.1:1 sobre celeste claro) */
  --aqp-gris-azulado-claro: #C3D1E2;  /* bordes y separadores de tarjetas */

  --color-texto-secundario: var(--aqp-gris-azulado);
  --color-borde: var(--aqp-gris-azulado-claro);
}

/* =====================================================================
   BASE (opcional): aplica los roles a los elementos más comunes
   ===================================================================== */

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
}

h1, h2, h3, h4 {
  color: var(--color-titulo);
}

a {
  color: var(--color-enlace);
}

:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

/* =====================================================================
   UTILIDADES DE COLOR (opcional)
   ===================================================================== */

.fondo-claro   { background-color: var(--color-fondo); color: var(--color-texto); }
.fondo-alterno { background-color: var(--color-fondo-alterno); color: var(--color-texto); }
.fondo-oscuro  { background-color: var(--color-fondo-oscuro); color: var(--color-texto-sobre-oscuro); }
.fondo-portada { background-image: var(--aqp-degradado-portada); color: var(--color-texto-sobre-oscuro); }

.texto-titulo  { color: var(--color-titulo); }
.icono         { color: var(--color-icono); }

/* =====================================================================
   BOTONES
   Nota de accesibilidad: el texto blanco sobre verde (≈3.1:1) y sobre
   azul vivo (≈4.0:1) solo cumple con texto en negrita de 18.7 px o más.
   Por eso los botones usan ese tamaño mínimo.
   ===================================================================== */

.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.btn:hover {
  filter: brightness(0.92);
}

.btn-principal {
  background-color: var(--color-boton-principal);
  color: var(--color-boton-principal-texto);
}

.btn-secundario {
  background-color: var(--color-boton-secundario);
  color: var(--color-boton-secundario-texto);
}

/* =====================================================================
   ETIQUETAS DE PRECIO Y PLANES
   ===================================================================== */

.etiqueta-oferta {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--color-oferta);
  color: var(--color-oferta-texto);
  font-weight: 700;
}

.plan-especial {
  background-color: var(--color-plan-especial);
  color: var(--aqp-blanco);
}